/* ══════════════════════════════════════════════════════════════
Viatja AI · components
Els tokens viuen a foundation.css. Aquí no hi ha cap color
literal: el mode fosc funciona redefinint els tokens, no aquest
fitxer. Generat per grups i revisat contra el contracte.
══════════════════════════════════════════════════════════════ */
/* ═══ TARGETES DE PROPOSTA, ENCAIX I EVIDÈNCIA ═══ */
/* ── barra de resultats: recompte, gustos i reinici ──── */
.suggestions-toolbar {
display: flex; align-items: baseline; justify-content: space-between;
gap: 10px 14px; flex-wrap: wrap; margin-top: 20px;
}
.suggestions-toolbar .fineprint { font-weight: 600; color: var(--text-soft); }
.suggestions-toolbar-actions {
display: flex; align-items: center; justify-content: flex-end;
gap: 6px 10px; flex-wrap: wrap; margin-left: auto;
}
.feedback-summary {
padding: 4px 9px; border-radius: 99px;
background: var(--sunk); color: var(--muted);
font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.feedback-reset {
padding: 6px 4px; min-height: 32px;
color: var(--primary); font-size: 12.5px; font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
}
.feedback-reset:disabled { color: var(--muted); text-decoration: none; }
/* ── lectura de conjunt: quina proposta lidera ───────── */
.recommendation-summary {
display: flex; align-items: center; justify-content: space-between;
gap: 8px 18px; flex-wrap: wrap; margin-top: 12px; padding: 15px 16px;
border: 1px solid var(--line); border-radius: var(--r);
background: var(--card); box-shadow: var(--shadow-sm);
}
.recommendation-summary > div:not(.summary-score) { flex: 1 1 200px; min-width: 0; }
.recommendation-summary strong {
display: block; font-family: var(--display);
font-size: 17px; font-weight: 600; line-height: 1.28; letter-spacing: -.012em;
}
.recommendation-summary p {
margin: 6px 0 0; color: var(--muted);
font-size: 12.5px; line-height: 1.5;
}
.recommendation-summary b { font-weight: 600; color: var(--text-soft); }
.summary-score {
display: flex; align-items: baseline; gap: 2px; flex: 0 0 auto;
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1;
color: var(--primary);
}
.summary-score small { font-size: 11px; font-weight: 500; color: var(--muted); }
.origin-note {
flex: 1 1 100%; margin-top: 4px;
color: var(--est); font-size: 12px; line-height: 1.45;
}
/* ── graella de propostes ─────────────────────────────── */
.suggestions {
display: grid; gap: 14px; margin-top: 14px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.suggestion {
display: flex; flex-direction: column; min-width: 0;
background: var(--card); border: 1px solid var(--line);
border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden;
}
/* ── capçalera de la targeta: emoji i encaix ──────────── */
.suggestion-art {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 11px 14px;
background: var(--sunk); border-bottom: 1px solid var(--hairline);
}
.suggestion-emoji { font-size: 27px; line-height: 1; }
.match { display: grid; justify-items: end; gap: 1px; text-align: right; min-width: 0; }
.match strong {
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 19px; font-weight: 600; letter-spacing: -.03em; line-height: 1;
}
.match small { font-size: 10.5px; font-weight: 600; color: var(--muted); }
/* ── cos: nom, país i enllaç al mapa ──────────────────── */
.suggestion-body {
display: flex; flex-direction: column; gap: 11px; flex: 1;
padding: 14px; min-width: 0;
}
.suggestion-heading {
display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.suggestion-heading > div { min-width: 0; }
.suggestion-heading h3 {
font-family: var(--display); font-size: 18.5px; font-weight: 600;
letter-spacing: -.014em; line-height: 1.2;
}
.suggestion-heading > div > span { display: block; margin-top: 2px; font-size: 12.5px; }
.proposal-map-link {
display: inline-flex; align-items: center; flex: 0 0 auto;
min-height: 44px; padding: 0 11px; border-radius: var(--r-sm);
background: var(--sunk); color: var(--text-soft);
font-size: 11.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.proposal-map-link:hover { background: var(--line); color: var(--text); }
/* ── relat: per què, què hi ha i l'imperdible ─────────── */
.proposal-story {
display: grid;
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
}
.proposal-story-item { display: grid; gap: 4px; padding: 10px 0; min-width: 0; }
.proposal-story-item + .proposal-story-item { border-top: 1px solid var(--hairline); }
.proposal-story-item > span {
font-size: 10px; font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted);
}
.proposal-story-item p {
margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.5;
}
.proposal-story-why p { color: var(--text); font-size: 14px; }
.proposal-highlights small { font-size: 11px; line-height: 1.4; color: var(--muted); }
.proposal-must-title { display: block; font-size: 14px; font-weight: 600; }
.proposal-fact-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.proposal-fact-list li {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; min-width: 0;
}
.proposal-fact-list a,
.proposal-fact-links a { font-size: 12.5px; font-weight: 600; }
.proposal-fact-list small { font-size: 11px; line-height: 1.4; color: var(--muted); }
.proposal-fact-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 2px; }
/* ── avís oficial: el to segueix l'antiguitat de la revisió ── */
.travel-safety {
--tone: var(--wait);
--tone-wash: var(--wait-wash);
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 10px;
padding: 12px; border-radius: var(--r-sm);
border: 1px solid color-mix(in srgb, var(--tone) 32%, var(--line));
background: var(--tone-wash);
}
.travel-safety-pending { --tone: var(--wait); --tone-wash: var(--wait-wash); }
.travel-safety-undated,
.travel-safety-aging { --tone: var(--est); --tone-wash: var(--est-wash); }
.travel-safety-stale { --tone: var(--danger); --tone-wash: var(--danger-wash); }
.travel-safety-fresh { --tone: var(--ok); --tone-wash: var(--ok-wash); }
.travel-safety-icon {
display: grid; place-items: center; width: 32px; height: 32px;
border-radius: 9px; font-size: 16px; line-height: 1;
background: color-mix(in srgb, var(--tone) 16%, transparent);
}
.travel-safety-copy { display: grid; gap: 1px; min-width: 0; }
.travel-safety-copy > span {
font-size: 10px; font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; color: var(--tone);
}
.travel-safety-copy strong { font-size: 13.5px; color: var(--text); }
.travel-safety-copy p { margin: 3px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-soft); }
.travel-safety > a {
grid-column: 2; justify-self: start;
display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--tone) 40%, var(--line));
background: var(--card); color: var(--tone);
font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.travel-safety > a:hover { background: var(--sunk); }
.travel-safety > small {
grid-column: 1 / -1; font-size: 11px; line-height: 1.4; color: var(--muted);
}
/* ── quatre dades dures: durada, preu, clima, distància ── */
.suggestion-meta {
display: grid; gap: 7px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 124px), 1fr));
}
.meta-box {
padding: 8px 10px; border-radius: var(--r-sm);
background: var(--sunk); min-width: 0;
}
.meta-box span { display: block; font-size: 11px; line-height: 1.35; color: var(--muted); }
.meta-box strong {
display: block; margin-top: 3px;
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 13px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3;
}
.meta-box small { display: block; margin-top: 4px; font-size: 10.5px; line-height: 1.35; color: var(--muted); }
/* ── desajust principal: estimació o comprovat ────────── */
.fit-caution {
--tone: var(--est);
--tone-wash: var(--est-wash);
padding: 9px 11px; border-radius: var(--r-sm);
background: var(--tone-wash); color: var(--tone);
font-size: 12.5px; font-weight: 500; line-height: 1.4;
}
.fit-caution.fit-ok { --tone: var(--ok); --tone-wash: var(--ok-wash); }
/* ── accions de la targeta ────────────────────────────── */
.card-actions {
display: flex; flex-wrap: nowrap; gap: 7px; margin-top: auto;
}
.card-actions .primary { flex: 1 1 auto; }
.card-actions .compare-button,
.card-actions .share-proposal-button { flex: 0 0 auto; white-space: nowrap; padding: 10px 11px; }
/* Una línia editorial a la targeta; el relat llarg viu al desplegable. */
.suggestion-why { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-soft); }
.compare-button,
.share-proposal-button {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px; padding: 10px 12px; border-radius: var(--r-sm);
border: 1px solid var(--line); background: var(--card); color: var(--text);
font-size: 13.5px; font-weight: 600; line-height: 1.2;
transition: background-color 140ms ease, border-color 140ms ease;
}
.compare-button:hover,
.share-proposal-button:hover { border-color: var(--muted); }
.share-proposal-button { grid-column: 2; }
.compare-button { grid-column: 1 / -1; }
.compare-button[aria-pressed="true"] {
background: var(--primary-wash); border-color: var(--primary-line); color: var(--primary);
}
/* ── detall subordinat: puntuació, fonts i valoració ──── */
.proposal-details {
margin-top: 2px; border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--sunk); overflow: hidden;
}
.proposal-details > summary { gap: 9px; padding: 10px 12px; min-height: 44px; color: var(--text-soft); }
.proposal-details > summary span { font-size: 13px; font-weight: 600; }
.proposal-details > summary small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.proposal-details[open] > summary { border-bottom: 1px solid var(--line); }
.proposal-details-body { display: grid; gap: 11px; padding: 12px; }
/* ── plecs d'evidència dins del detall ────────────────── */
.catalog-source,
.intent-audit,
.score-calculation {
padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--card); color: var(--text-soft);
font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere;
}
.catalog-source > summary,
.intent-audit > summary,
.score-calculation > summary {
padding: 11px 0; min-height: 44px; font-size: 13px; color: var(--text);
}
.catalog-source > p,
.intent-audit > ul,
.score-calculation > p,
.score-calculation > table { margin-bottom: 12px; }
.catalog-source p { margin: 0 0 8px; }
.score-calculation p { margin: 0 0 10px; }
.score-calculation strong { color: var(--text); }
/* la taula de càlcul fa scroll dins del seu plec, mai la pàgina */
.score-calculation table {
display: block; width: 100%; overflow-x: auto;
border-collapse: collapse;
font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px;
}
.score-calculation caption {
margin: 0 0 8px; text-align: left;
font-family: var(--ui); font-size: 11px; color: var(--muted);
}
.score-calculation th,
.score-calculation td {
padding: 7px 4px; border-bottom: 1px solid var(--hairline);
text-align: right; white-space: nowrap;
}
.score-calculation thead th { font-family: var(--ui); font-size: 11px; color: var(--muted); font-weight: 600; }
.score-calculation th[scope="row"],
.score-calculation th[colspan] {
font-family: var(--ui); text-align: left; font-weight: 600;
color: var(--text-soft); white-space: normal;
}
.score-calculation tfoot th,
.score-calculation tfoot td { background: var(--sunk); }
.intent-audit ul { list-style: none; margin: 0; padding: 0; }
.intent-audit li { display: grid; gap: 3px; padding: 9px 0; border-top: 1px solid var(--hairline); }
.intent-audit li strong { font-size: 12px; color: var(--text); }
.intent-audit li span { font-size: 12px; color: var(--text-soft); }
/* ── valoració de la proposta ─────────────────────────── */
.feedback-actions {
display: grid; gap: 6px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 88px), 1fr));
}
.feedback-actions button {
min-height: 44px; padding: 8px 5px; border-radius: 10px;
border: 1px solid var(--line); background: var(--card); color: var(--text-soft);
font-size: 11.5px; font-weight: 600; line-height: 1.25;
}
.feedback-actions button:hover { background: var(--sunk); }
.feedback-actions button[aria-pressed="true"] {
border-color: var(--primary-line); background: var(--primary-wash); color: var(--primary);
}
/* ── pantalles estretes ───────────────────────────────── */
@media (max-width: 360px) {
.suggestion-heading { display: grid; gap: 8px; }
.proposal-map-link { justify-self: start; }
.card-actions { grid-template-columns: 1fr; }
.share-proposal-button,
.compare-button { grid-column: auto; }
}
/* ═══ BRÚIXOLA DE DECISIÓ, COMPARADOR I EVIDÈNCIA DE DESTINACIÓ ═══ */
/* ── brúixola: contenidor i capçalera ─────────────────── */
.decision-compass {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 14px;
margin-top: 14px;
padding: 16px;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shadow-sm);
}
.decision-compass[hidden] { display: none; }
.decision-head {
display: flex; flex-wrap: wrap;
align-items: flex-start; justify-content: space-between; gap: 14px;
}
.decision-head > div:first-child { flex: 1 1 230px; min-width: 0; }
.decision-head h3 { font-family: var(--display); font-size: 20px; }
.decision-head p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text-soft); }
/* dues xifres de context: definició del perfil i distància amb la segona opció */
.decision-signals {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px; flex: 1 1 210px; min-width: 0;
}
.decision-signals > span {
display: grid; gap: 1px; align-content: start; min-width: 0;
padding: 9px 11px; border-radius: var(--r-sm);
background: var(--sunk); color: var(--muted);
font-size: 11.5px; line-height: 1.35;
}
.decision-signals strong {
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--text);
}
/* ── brúixola: les tres opcions ───────────────────────── */
.decision-picks {
display: grid; gap: 11px;
grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
.decision-pick {
display: flex; flex-direction: column; gap: 10px; min-width: 0;
padding: 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--raised);
}
.decision-pick:first-child { border-color: var(--primary-line); }
.decision-pick > p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-soft); }
.decision-pick-title { display: flex; align-items: center; gap: 10px; }
.decision-pick-title > div { display: grid; gap: 1px; min-width: 0; }
.decision-pick-title small {
font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted);
}
.decision-pick:first-child .decision-pick-title small { color: var(--primary); }
.decision-pick-title h4 { font-size: 15.5px; overflow-wrap: break-word; }
.decision-pick-title > div > span {
font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.decision-emoji { flex: none; font-size: 26px; line-height: 1; }
/* el compromís de cada opció: avís lleu, no conflicte */
.decision-tradeoff {
display: grid; gap: 1px; min-width: 0;
padding: 8px 10px; border-radius: var(--r-sm);
background: var(--est-wash); color: var(--warn);
font-size: 12px; line-height: 1.4;
}
.decision-tradeoff strong {
font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
}
.decision-plan {
margin-top: auto; width: 100%; min-height: 44px;
padding: 10px 12px; border: 1px solid var(--primary-line); border-radius: var(--r-sm);
background: var(--card); color: var(--primary);
font-size: 13.5px; font-weight: 600;
transition: background-color 140ms ease, border-color 140ms ease;
}
.decision-plan:hover { background: var(--primary-wash); border-color: var(--primary); }
.decision-note { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
/* ── comparador ───────────────────────────────────────── */
.comparison-panel {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
margin-top: 18px; padding: 16px;
background: var(--card); border: 1px solid var(--line);
border-radius: var(--r); box-shadow: var(--shadow-sm);
}
.comparison-panel[hidden] { display: none; }
/* els fills no poden eixamplar la graella: la taula ampla ha de scrollar, no empènyer */
.comparison-panel > * { min-width: 0; }
.comparison-head {
display: flex; flex-wrap: wrap;
align-items: flex-start; justify-content: space-between; gap: 12px;
margin-bottom: 14px;
}
.comparison-head > div { flex: 1 1 230px; min-width: 0; }
.comparison-head h3 { font-family: var(--display); font-size: 20px; }
.comparison-head p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-soft); }
.comparison-head .ghost { flex: none; }
/* la taula fa scroll dins d'aquest contenidor; el cos de la pàgina mai */
.comparison-scroll {
max-width: 100%; min-width: 0;
overflow-x: auto;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
background: var(--card);
border: 1px solid var(--line); border-radius: var(--r-sm);
}
/* separate + border-spacing 0: així les cel·les fixades no perden la vora */
.comparison-scroll table {
width: 100%;
border-collapse: separate; border-spacing: 0;
font-size: 13px;
}
.comparison-scroll th,
.comparison-scroll td {
padding: 10px 12px; text-align: left; vertical-align: top;
border-right: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
}
.comparison-scroll th:last-child,
.comparison-scroll td:last-child { border-right: 0; }
.comparison-scroll tbody tr:last-child > * { border-bottom: 0; }
.comparison-scroll thead th {
min-width: 10rem;
background: var(--sunk); color: var(--text);
font-size: 13px; font-weight: 600;
}
.comparison-scroll thead th span { display: block; overflow-wrap: break-word; }
.comparison-scroll thead th small {
display: block; margin-top: 1px;
font-size: 11.5px; font-weight: 400; color: var(--muted);
}
/* la columna de criteris queda fixada mentre es desplacen les destinacions */
.comparison-scroll tbody th,
.comparison-scroll thead th:first-child {
position: sticky; left: 0; z-index: 1;
min-width: 7.5rem;
background: var(--sunk);
border-right-color: var(--line);
}
.comparison-scroll thead th:first-child { z-index: 2; }
.comparison-scroll tbody th {
color: var(--text-soft); font-size: 12px; font-weight: 600;
}
.comparison-scroll td { color: var(--text-soft); }
.comparison-scroll td strong {
display: block;
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--text);
}
.comparison-scroll td span {
display: block; margin-top: 3px;
font-size: 11.5px; line-height: 1.4; color: var(--muted);
}
.comparison-scroll .comparison-match {
font-family: var(--mono); font-size: 16px; color: var(--primary);
}
.comparison-plan { width: 100%; padding: 9px 12px; font-size: 13px; }
.comparison-empty {
display: grid; gap: 3px;
padding: 18px 16px; text-align: center;
border: 1px dashed var(--line); border-radius: var(--r-sm);
color: var(--muted); font-size: 13px; line-height: 1.45;
}
.comparison-empty strong { color: var(--text); font-size: 14px; }
/* ── evidència: obridor i marc ────────────────────────── */
.evidence-preview-button {
width: 100%; min-height: 44px; padding: 11px 14px;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--card); color: var(--text-soft);
font-size: 13.5px; font-weight: 600;
transition: background-color 140ms ease, border-color 140ms ease;
}
.evidence-preview-button:hover { background: var(--sunk); }
.evidence-preview-button[aria-expanded="true"] {
border-color: var(--primary-line); background: var(--primary-wash); color: var(--primary);
}
.evidence-preview {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--sunk);
}
.evidence-preview[hidden] { display: none; }
.evidence-preview-head {
display: flex; flex-wrap: wrap;
align-items: flex-start; justify-content: space-between; gap: 8px;
padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.evidence-preview-head > div { flex: 1 1 190px; display: grid; gap: 2px; min-width: 0; }
.evidence-preview-head strong { font-size: 13.5px; line-height: 1.35; }
.evidence-preview-head > div span { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.evidence-preview-head em {
flex: none; padding: 4px 9px; border-radius: 99px;
background: var(--card); color: var(--text-soft);
font-size: 11px; font-style: normal; font-weight: 600;
}
/* ── evidència: grups i fitxes ────────────────────────── */
.evidence-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.evidence-group-title {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.evidence-group-title strong { font-size: 12.5px; min-width: 0; }
.evidence-group-title span { flex: none; font-size: 11.5px; font-weight: 600; color: var(--ok); }
.evidence-item {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--card);
}
.evidence-item > strong { font-size: 13.5px; line-height: 1.35; overflow-wrap: break-word; }
.evidence-item p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-soft); overflow-wrap: break-word; }
.evidence-item.selected {
border-color: var(--primary-line);
background: var(--primary-wash);
box-shadow: inset 3px 0 0 var(--primary);
}
/* enllaços a la font: pastilles clicables amb objectiu tàctil complet */
.evidence-item-links { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.evidence-item-links a {
display: inline-flex; align-items: center;
min-height: 44px; padding: 8px 13px;
border: 1px solid var(--line); border-radius: 99px;
background: var(--raised); color: var(--primary);
font-size: 12.5px; font-weight: 600; text-decoration: none;
transition: background-color 140ms ease, border-color 140ms ease;
}
.evidence-item-links a:hover { border-color: var(--primary); background: var(--primary-wash); }
.evidence-pick-button {
width: 100%; min-height: 44px; padding: 10px 12px;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--raised); color: var(--text-soft);
font-size: 13px; font-weight: 600;
transition: background-color 140ms ease, border-color 140ms ease;
}
.evidence-pick-button:hover { border-color: var(--primary-line); color: var(--primary); }
.evidence-pick-button[aria-pressed="true"] {
border-color: var(--primary); background: var(--primary); color: var(--primary-ink);
}
/* ── evidència: estats i avís de fonts ────────────────── */
.evidence-loading,
.evidence-empty {
padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--card);
}
.evidence-loading { display: flex; align-items: flex-start; gap: 10px; }
.evidence-empty { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.evidence-loading > span { flex: none; font-size: 17px; line-height: 1.2; }
.evidence-loading > div { display: grid; gap: 2px; min-width: 0; }
.evidence-loading strong,
.evidence-empty strong { font-size: 13.5px; line-height: 1.35; }
.evidence-loading > div span,
.evidence-empty span { font-size: 12px; line-height: 1.4; color: var(--muted); }
.evidence-notice { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
/* ── per què encaixa: lectura curta ───────────────────── */
.fit-explanation {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px;
border-radius: var(--r-sm); background: var(--sunk);
}
.fit-explanation-head {
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px;
}
.fit-explanation-head > span {
font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
text-transform: uppercase; color: var(--muted);
}
.fit-explanation-head small {
font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.fit-verdict { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.fit-trip-picture {
display: grid; gap: 8px;
grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.fit-trip-picture > div {
display: grid; gap: 2px; min-width: 0;
padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--card);
}
.fit-trip-picture small {
font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.fit-trip-picture strong { font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.fit-strengths-title { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.fit-explanation > ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fit-explanation > ul > li {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
align-items: start; gap: 8px;
padding-top: 8px; border-top: 1px solid var(--line);
}
.fit-explanation > ul > li > div { display: grid; gap: 2px; min-width: 0; }
.fit-explanation > ul strong { font-size: 12px; color: var(--text); }
.fit-explanation > ul span { font-size: 12.5px; line-height: 1.4; color: var(--text-soft); }
/* ── per què encaixa: dades, fonts i tots els factors ─── */
.fit-analysis { border-top: 1px solid var(--line); }
.fit-analysis > summary {
gap: 10px; min-height: 44px; padding: 9px 0;
font-size: 13px; color: var(--text-soft);
}
.fit-analysis > summary small {
margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--muted);
text-align: right; font-variant-numeric: tabular-nums;
}
.fit-analysis[open] > summary { padding-bottom: 12px; }
.fit-analysis-body {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--card);
}
.fit-coverage-head { display: grid; gap: 2px; }
.fit-coverage-head strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.fit-coverage-head span { font-size: 12px; line-height: 1.4; color: var(--muted); }
.fit-disclaimer { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.fit-factor-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.fit-factor-list > li {
display: grid; grid-template-columns: minmax(0, 1fr) auto;
align-items: start; gap: 8px;
padding: 9px 10px; border: 1px solid var(--hairline); border-radius: var(--r-sm);
background: var(--sunk);
}
.fit-factor-list > li > div { display: grid; gap: 2px; min-width: 0; }
.fit-factor-list strong { font-size: 12px; }
.fit-factor-list span { font-size: 12.5px; line-height: 1.4; color: var(--text-soft); }
.fit-factor-list small { font-size: 11px; line-height: 1.35; color: var(--muted); }
/* dades que encara no s'han pogut confirmar */
.fit-pending {
display: grid; gap: 5px; padding: 10px;
border-radius: var(--r-sm); background: var(--wait-wash); color: var(--wait);
}
.fit-pending > strong { font-size: 12px; }
.fit-pending ul { display: grid; gap: 2px; margin: 0; padding-left: 18px; }
.fit-pending li { font-size: 12px; line-height: 1.4; }
.fit-verification {
margin: 0; padding: 9px 10px; border-radius: var(--r-sm);
background: var(--sunk); color: var(--text-soft);
font-size: 12px; line-height: 1.45;
}
.fit-verification strong { color: var(--text); }
/* ── pantalles estretes ───────────────────────────────── */
@media (max-width: 430px) {
.fit-explanation > ul > li,
.fit-factor-list > li { grid-template-columns: minmax(0, 1fr); }
.fit-explanation > ul > li > em,
.fit-factor-list > li > em { justify-self: start; }
.comparison-head .ghost,
.decision-signals { width: 100%; }
}
/* ═══ ITINERARI, DIES I FRANGES ═══ */
/* ── contenidor i nota de confiança del pla ───────────── */
.itinerary { display: grid; gap: 14px; }
.itinerary-trust {
display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
gap: 10px; padding: 13px 14px;
border: 1px solid var(--line); border-radius: var(--r); background: var(--sunk);
}
.itinerary-trust > div { flex: 1 1 15rem; min-width: 0; display: grid; gap: 5px; }
.itinerary-trust strong { font-size: 14.5px; }
.itinerary-trust span:not([class]) {
font-size: 12.5px; line-height: 1.45; color: var(--text-soft); overflow-wrap: anywhere;
}
/* ── targeta de dia ───────────────────────────────────── */
.daycard {
display: grid; gap: 11px; padding: 14px;
border: 1px solid var(--line); border-radius: var(--r);
background: var(--card); box-shadow: var(--shadow-sm);
}
.dayhead {
display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.dayhead > div:first-child { flex: 1 1 12rem; min-width: 0; display: grid; gap: 4px; }
.day-context { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.day-context small { font-size: 12px; color: var(--muted); }
.day-context time {
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 11.5px; color: var(--text-soft); white-space: nowrap;
}
.day-live { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.day-live > span:not([class]) {
font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.day-route-link {
display: inline-flex; align-items: center; gap: 6px;
min-height: 44px; padding: 0 14px; border-radius: 99px;
border: 1px solid var(--primary-line); background: var(--primary-wash);
color: var(--primary); font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.day-route-link:hover { background: color-mix(in srgb, var(--primary) 12%, var(--primary-wash)); }
/* ── avisos del dia: la gravetat mana sobre el color ──── */
.day-advisory {
margin: 0; padding: 10px 12px;
border-radius: var(--r-sm); border-left: 3px solid currentColor;
font-size: 13px; line-height: 1.45;
background: var(--danger-wash); color: var(--danger);
}
.travel-advisory { background: var(--wait-wash); color: var(--wait); }
.daylight-advisory { background: var(--est-wash); color: var(--est); }
/* ── franja horària ───────────────────────────────────── */
.slot {
display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: 10px;
padding: 11px 0; border-top: 1px solid var(--hairline);
}
.slot.preferred-evidence { padding-left: 10px; box-shadow: inset 3px 0 0 var(--primary); }
.slot-time-editor { align-self: start; min-width: 0; display: grid; gap: 3px; }
.slot-time-editor .slot-time {
padding: 9px 6px; text-align: center;
background: var(--sunk); border-color: var(--line);
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 14px; font-weight: 600; letter-spacing: -.02em;
}
.slot-time-editor .slot-time:focus { border-color: var(--primary); }
.slot-time-editor small {
text-align: center; color: var(--muted);
font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11px;
}
.slot-content { min-width: 0; display: grid; gap: 7px; }
.slot-content .slot-activity {
padding: 8px 10px; font-size: 15px; font-weight: 600;
background: var(--card); border-color: var(--hairline);
}
.slot-content .slot-activity:hover { border-color: var(--line); }
.slot-content .slot-activity:focus { border-color: var(--primary); }
.slot-preferred-label {
justify-self: start; padding: 4px 9px; border-radius: 99px;
background: var(--primary-wash); color: var(--primary);
font-size: 11.5px; font-weight: 600;
}
.slot-duration { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.slot-duration select {
width: auto; min-width: 8.5rem; padding: 6px 30px 6px 10px;
font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px;
}
.slot-support { display: grid; gap: 5px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.slot-support > span:first-child { color: var(--text-soft); }
.slot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.slot-links a { padding: 4px 0; font-size: 12.5px; font-weight: 600; }
.slot-links em { font-style: normal; font-size: 12.5px; color: var(--muted); }
/* ── dada operativa oberta d'una franja ───────────────── */
.slot-operational-data {
display: grid; gap: 8px; padding: 11px 12px;
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunk);
font-size: 12.5px;
}
.slot-operational-data > div:not([class]) { display: grid; gap: 7px; }
.slot-operational-data > div:not([class]) > span {
display: grid; gap: 2px;
color: var(--text-soft); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.slot-operational-data > div:not([class]) > span > strong {
font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: var(--muted);
}
.slot-operational-data > small { font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.slot-operational-data > a { justify-self: start; font-size: 12px; font-weight: 600; }
/* ── controls d'edició de la franja ───────────────────── */
.slot-edit-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.slot-edit-actions button {
min-height: 44px; padding: 0 12px; border-radius: var(--r-sm);
border: 1px solid var(--line); background: var(--card);
color: var(--text-soft); font-size: 12.5px; font-weight: 600;
}
.slot-edit-actions button:hover:not(:disabled) { background: var(--sunk); }
.slot-edit-actions .slot-remove-button {
margin-left: auto; color: var(--danger);
border-color: color-mix(in srgb, var(--danger) 32%, var(--line));
}
.slot-edit-actions .slot-remove-button:hover:not(:disabled) { background: var(--danger-wash); }
.day-add-activity {
width: 100%; min-height: 44px; padding: 10px 12px;
border: 1px dashed var(--line); border-radius: var(--r-sm); background: transparent;
color: var(--primary); font-size: 13px; font-weight: 600;
}
.day-add-activity:hover:not(:disabled) { border-color: var(--primary-line); background: var(--primary-wash); }
.day-add-activity:disabled { color: var(--muted); }
/* ── pla B meteorològic del dia ───────────────────────── */
.weather-plan-head { display: grid; gap: 6px; }
.weather-plan-head > div { min-width: 0; display: grid; gap: 2px; }
.weather-plan-head > div > span {
font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
color: var(--muted);
}
.weather-plan-head strong { font-size: 14.5px; }
.weather-plan-head p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-soft); }
.weather-plan-options {
display: grid; gap: 9px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.weather-plan-options article {
min-width: 0; display: grid; align-content: start; gap: 9px; padding: 11px;
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
}
.weather-plan-options article > div:first-child { min-width: 0; display: grid; gap: 3px; }
.weather-plan-options article span {
font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: var(--muted);
}
.weather-plan-options article strong { font-size: 13.5px; overflow-wrap: anywhere; }
.weather-plan-options article small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.weather-plan-links { display: flex; flex-wrap: wrap; gap: 7px; }
.weather-plan-links a,
.weather-plan-links button {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px; padding: 0 12px; border-radius: var(--r-sm);
border: 1px solid var(--line); background: var(--card);
color: var(--text-soft); font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.weather-plan-links button {
flex: 1 1 100%; overflow-wrap: anywhere;
border-color: var(--primary-line); background: var(--primary-wash); color: var(--primary);
}
.weather-plan-empty {
margin: 0; padding: 10px 12px; border-radius: var(--r-sm);
background: var(--sunk); color: var(--muted); font-size: 12.5px; line-height: 1.45;
}
/* ── cobertura real de les etapes de ruta ─────────────── */
.route-stage-evidence-head {
display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.route-stage-evidence-head > div { flex: 1 1 14rem; min-width: 0; display: grid; gap: 3px; }
.route-stage-evidence-head strong { font-size: 14.5px; }
.route-stage-evidence-head p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.route-stage-evidence-head > span {
flex: none; padding: 5px 10px; border-radius: 99px;
background: var(--sunk); color: var(--text-soft); font-size: 11.5px; font-weight: 600;
}
.route-stage-evidence-list {
display: grid; gap: 8px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.route-stage-evidence-list article {
min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
}
.route-stage-evidence-list article > div { min-width: 0; display: grid; gap: 4px; }
.route-stage-evidence-list strong { font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.route-stage-evidence-list small { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.route-stage-evidence-list em {
flex: none; padding: 3px 8px; border-radius: 99px;
background: var(--sunk); color: var(--muted);
font-style: normal; font-size: 10.5px; font-weight: 600;
}
.route-stage-evidence-list article.verified em { background: var(--ok-wash); color: var(--ok); }
.route-stage-evidence-list article.partial em { background: var(--est-wash); color: var(--est); }
.route-stage-evidence-list article.pending em { background: var(--wait-wash); color: var(--wait); }
.route-stage-evidence-list article.error em { background: var(--danger-wash); color: var(--danger); }
.route-stage-evidence-list label { display: grid; gap: 3px; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.route-stage-evidence-list select { padding: 8px 30px 8px 10px; font-size: 13px; }
.route-stage-base,
.route-stage-transfer {
display: block; font-size: 11.5px; line-height: 1.45; color: var(--text-soft);
font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.route-stage-transfer { padding: 5px 8px; border-radius: 9px; background: var(--sunk); }
.route-stage-base a,
.route-stage-transfer a { font-weight: 600; }
.route-stage-base.missing { color: var(--wait); }
.route-stage-transfer.missing { background: var(--wait-wash); color: var(--wait); }
/* ── previsió meteorològica en columnes ───────────────── */
.weather {
display: grid; gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}
.day {
display: grid; gap: 3px; padding: 11px 8px; text-align: center;
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
}
.day > div:first-child { font-size: 12px; font-weight: 600; color: var(--text-soft); overflow-wrap: anywhere; }
.day strong {
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 19px; letter-spacing: -.02em;
}
.day .muted { font-size: 11px; line-height: 1.4; font-variant-numeric: tabular-nums; }
/* ── viabilitat diària (logística) ────────────────────── */
.logistics-panel { display: grid; gap: 11px; }
.logistics-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.logistics-head > div { flex: 1 1 12rem; min-width: 0; }
.logistics-head > strong {
font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 17px;
}
.route-calculation-status {
margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted);
font-variant-numeric: tabular-nums;
}
.route-calculation-status:empty { display: none; }
.logistics-days { display: grid; gap: 9px; }
.logistics-days:empty { display: none; }
.logistics-status {
justify-self: start; flex: none; padding: 4px 9px; border-radius: 99px;
background: var(--sunk); color: var(--muted); font-size: 11px; font-weight: 600;
}
.logistics-day.ready .logistics-status { background: var(--ok-wash); color: var(--ok); }
.logistics-day.review .logistics-status { background: var(--est-wash); color: var(--est); }
.logistics-day.attention .logistics-status { background: var(--danger-wash); color: var(--danger); }
.logistics-day.unknown .logistics-status { background: var(--wait-wash); color: var(--wait); }
/* ── passaport de fiabilitat del pla ──────────────────── */
.plan-reliability-head {
display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.plan-reliability-head > div:first-child { flex: 1 1 14rem; min-width: 0; display: grid; gap: 3px; }
.plan-reliability-head strong { font-size: 15px; }
.plan-reliability-head p {
margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted);
font-variant-numeric: tabular-nums;
}
.plan-reliability-score {
flex: none; display: grid; justify-items: center; align-content: center; gap: 1px;
min-width: 4.75rem; padding: 9px 12px;
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
}
.plan-reliability-score strong {
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 20px; letter-spacing: -.03em;
}
.plan-reliability-score span {
font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
color: var(--muted);
}
.plan-reliability-days {
display: grid; gap: 8px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.reliability-gates {
display: grid; gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr));
}
.plan-reliability-note { margin: 0; overflow-wrap: anywhere; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
/* ── pantalles molt estretes ──────────────────────────── */
@media (max-width: 359px) {
.slot { grid-template-columns: minmax(0, 1fr); }
.slot-time-editor .slot-time { text-align: left; }
.slot-time-editor small { text-align: left; }
.route-stage-evidence-list article { flex-wrap: wrap; }
}
/* ── escriptori ───────────────────────────────────────── */
@media (min-width: 900px) {
.daycard { padding: 18px; }
.slot { grid-template-columns: 7rem minmax(0, 1fr); gap: 14px; }
.weather { grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)); }
.slot-operational-data > div:not([class]) > span {
grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: 10px; align-items: baseline;
}
}
/* ═══ APARTAT AVUI ═══ */
/* Full de treball del dia: es llegeix amb una mà i a ple sol, tipografia gran. */
.trip-day-mode {
display: grid;
gap: 14px;
min-width: 0;
padding: 16px;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shadow-sm);
}
.trip-day-mode[hidden] { display: none; }
/* Capçalera: kicker, títol, fase del viatge i botó de tancar */
.trip-day-mode-head { display: flex; align-items: flex-start; gap: 12px; }
.trip-day-mode-head > div { min-width: 0; }
.trip-day-mode-head h3 {
font-family: var(--display);
font-size: 22px;
letter-spacing: -.015em;
}
.trip-day-mode-head p { margin: 4px 0 0; font-size: 13px; line-height: 1.4; }
.trip-day-mode-close {
flex: none;
margin-left: auto;
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--sunk);
color: var(--text-soft);
font-size: 21px;
line-height: 1;
}
.trip-day-mode-close:hover { background: var(--line); color: var(--text); }
/* Tria de dia: la fila llisca dins del seu contenidor, mai dins la pàgina */
.trip-day-navigation {
display: flex;
gap: 8px;
min-width: 0;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: thin;
padding: 2px 2px 6px;
margin: -2px -2px -6px;
}
.trip-day-navigation button {
flex: none;
scroll-snap-align: start;
display: grid;
align-content: center;
gap: 2px;
min-width: 7.5em;
min-height: 44px;
padding: 8px 12px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--card);
color: var(--text-soft);
text-align: left;
}
.trip-day-navigation button strong { font-size: 13px; font-weight: 600; }
.trip-day-navigation button span {
font-size: 11.5px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.trip-day-navigation button.today:not([aria-pressed="true"]) {
background: var(--primary-wash);
border-color: var(--primary-line);
color: var(--primary);
}
.trip-day-navigation button[aria-pressed="true"] {
background: var(--primary);
border-color: var(--primary);
color: var(--primary-ink);
}
.trip-day-navigation button[aria-pressed="true"] span {
color: color-mix(in srgb, var(--primary-ink) 80%, transparent);
}
/* Bloc superior: la propera activitat mana sobre tota l'amplada del mòbil */
.trip-day-hero {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
align-items: start;
min-width: 0;
padding: 15px;
border-radius: var(--r-sm);
background: var(--sunk);
}
.trip-day-next { display: grid; gap: 4px; min-width: 0; }
.trip-day-next small {
font-size: 11px;
font-weight: 700;
letter-spacing: .11em;
text-transform: uppercase;
color: var(--primary);
}
.trip-day-next strong {
font-size: 20px;
line-height: 1.26;
letter-spacing: -.016em;
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
text-wrap: pretty;
}
.trip-day-next span {
font-family: var(--mono);
font-size: 12.5px;
font-variant-numeric: tabular-nums;
color: var(--text-soft);
overflow-wrap: anywhere;
}
/* El temps és context, no titular: en mòbil va en una línia sota l'activitat */
.trip-day-weather {
display: flex;
align-items: baseline;
gap: 7px;
min-width: 0;
}
.trip-day-weather strong { flex: none; font-size: 17px; line-height: 1.2; }
.trip-day-weather span {
font-size: 12.5px;
line-height: 1.35;
color: var(--text-soft);
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.trip-day-progress {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
}
/* El solc del progrés viu sobre --sunk: cal una pista distinta del fons */
.trip-day-progress progress { height: 8px; background: var(--line); }
.trip-day-progress progress::-webkit-progress-bar { background: var(--line); }
.trip-day-progress span {
font-family: var(--mono);
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--text-soft);
}
/* Avisos del dia: el color codifica la confiança, sempre igual a tota l'app */
.trip-day-alerts { display: grid; gap: 8px; min-width: 0; }
.trip-day-alerts:empty { display: none; }
.trip-day-alert {
padding: 11px 13px;
border-left: 3px solid currentColor;
border-radius: var(--r-sm);
font-size: 13.5px;
font-weight: 500;
line-height: 1.45;
overflow-wrap: anywhere;
background: var(--wait-wash);
color: var(--wait);
}
.trip-day-alert.info { background: var(--wait-wash); color: var(--wait); }
.trip-day-alert.attention { background: var(--est-wash); color: var(--est); }
.trip-day-alert.critical { background: var(--danger-wash); color: var(--danger); }
.trip-day-alert.reliability { display: grid; gap: 3px; }
.trip-day-alert.reliability strong { font-size: 13.5px; font-weight: 700; }
.trip-day-alert.reliability span {
font-size: 12.5px;
font-weight: 500;
color: color-mix(in srgb, currentColor 86%, transparent);
}
/* Agenda: hora a l'esquerra, contingut i accions a la dreta */
.trip-day-activities { display: grid; gap: 9px; min-width: 0; }
.trip-day-activity {
display: grid;
grid-template-columns: 4.5em minmax(0, 1fr);
gap: 12px;
min-width: 0;
padding: 13px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--raised);
}
.trip-day-activity.completed {
border-color: color-mix(in srgb, var(--ok) 42%, var(--line));
}
.trip-day-activity.completed .trip-day-activity-title strong { color: var(--text-soft); }
.trip-day-activity.passed {
border-color: color-mix(in srgb, var(--wait) 42%, var(--line));
}
.trip-day-activity.now,
.trip-day-activity.next {
border-color: var(--primary);
box-shadow: inset 3px 0 0 var(--primary);
}
.trip-day-activity-time {
display: grid;
align-content: start;
gap: 2px;
min-width: 0;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
}
.trip-day-activity-time strong { font-size: 15px; font-weight: 600; }
.trip-day-activity-time span { font-size: 11px; line-height: 1.3; color: var(--muted); }
.trip-day-activity-body { display: grid; gap: 8px; min-width: 0; }
.trip-day-activity-title {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}
.trip-day-activity-title strong {
font-size: 15.5px;
font-weight: 600;
line-height: 1.35;
overflow-wrap: anywhere;
}
/* Etiqueta d'estat temporal de la parada */
.trip-day-status {
flex: none;
padding: 3px 9px;
border-radius: 99px;
background: var(--sunk);
color: var(--text-soft);
font-size: 11px;
font-weight: 700;
line-height: 1.5;
}
.trip-day-activity.completed .trip-day-status { background: var(--ok-wash); color: var(--ok); }
.trip-day-activity.passed .trip-day-status { background: var(--wait-wash); color: var(--wait); }
.trip-day-activity.now .trip-day-status,
.trip-day-activity.next .trip-day-status { background: var(--primary-wash); color: var(--primary); }
.trip-day-activity-note {
margin: 0;
font-size: 13px;
line-height: 1.45;
color: var(--muted);
overflow-wrap: anywhere;
}
/* Estat operatiu: glif de confiança abans del text, igual a tota l'app */
.trip-day-operational {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-size: 12.5px;
font-weight: 600;
line-height: 1.4;
color: var(--text-soft);
overflow-wrap: anywhere;
}
.trip-day-operational::before { content: "·"; font-family: var(--mono); font-weight: 700; }
.trip-day-operational.open { color: var(--ok); }
.trip-day-operational.open::before { content: "✓"; }
.trip-day-operational.tight { color: var(--est); }
.trip-day-operational.tight::before { content: "~"; }
.trip-day-operational.unknown { color: var(--wait); }
.trip-day-operational.unknown::before { content: "?"; }
.trip-day-operational.closed { color: var(--danger); }
.trip-day-operational.closed::before { content: "!"; }
/* Accions: objectius de 44 px, es fan servir dempeus i amb pressa */
.trip-day-activity-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.trip-day-activity-actions a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 8px 13px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--card);
color: var(--text-soft);
font-size: 13px;
font-weight: 600;
text-decoration: none;
}
.trip-day-activity-actions a:hover { border-color: var(--muted); color: var(--text); }
.trip-day-done {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 44px;
padding: 8px 13px 8px 11px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--card);
color: var(--text-soft);
cursor: pointer;
}
.trip-day-done input { flex: none; margin: 0; }
.trip-day-done span { font-size: 13px; font-weight: 600; }
.trip-day-done:has(input:checked) {
background: var(--ok-wash);
border-color: color-mix(in srgb, var(--ok) 42%, var(--line));
color: var(--ok);
}
/* Buits i lletra petita */
.trip-day-empty {
padding: 16px;
border: 1px dashed var(--line);
border-radius: var(--r-sm);
color: var(--muted);
font-size: 13.5px;
line-height: 1.45;
text-align: center;
}
.trip-day-privacy { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.today-empty { line-height: 1.5; text-wrap: pretty; }
.today-empty strong { color: var(--text-soft); font-weight: 600; }
.trip-day-mode:not([hidden]) + .today-empty { display: none; }
/* A partir de mòbil gran, el temps passa a columna pròpia al costat del titular */
@media (min-width: 560px) {
.trip-day-hero { grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 12px 16px; }
.trip-day-weather {
display: grid;
justify-items: end;
align-content: start;
gap: 2px;
max-width: 11em;
text-align: right;
}
.trip-day-weather strong { font-size: 22px; line-height: 1.1; }
}
/* Pantalles amples: més aire i la columna de l'hora més folgada */
@media (min-width: 700px) {
.trip-day-mode { padding: 20px; gap: 16px; }
.trip-day-hero { padding: 18px; }
.trip-day-next strong { font-size: 24px; }
.trip-day-activity { grid-template-columns: 5.5em minmax(0, 1fr); padding: 15px; }
}
/* ═══ PREPARATIUS: RESERVES, DOCUMENTACIÓ, DOSSIER OFICIAL I MALETA ═══ */
/* ── escala de gravetat ───────────────────────────────────────────────
Els modificadors no pinten res per si sols: només declaren la parella
de tokens que després llegeixen els components. Així la gravetat es
comporta igual a tot arreu i no trepitja cap altre bloc. */
.critical { --sev: var(--danger); --sev-wash: var(--danger-wash); }
.important { --sev: var(--est); --sev-wash: var(--est-wash); }
.attention { --sev: var(--est); --sev-wash: var(--est-wash); }
.advisory { --sev: var(--wait); --sev-wash: var(--wait-wash); }
.missing { --sev: var(--wait); --sev-wash: var(--wait-wash); }
.ready { --sev: var(--ok); --sev-wash: var(--ok-wash); }
/* «falta la dada» és l'únic modificador que també vol tinta pròpia:
poca especificitat perquè qualsevol component la pugui refinar. */
.missing { color: var(--wait); font-weight: 600; }
/* ── antiguitat de la revisió: mateix vocabulari als tres components ── */
.readiness-item.review-fresh,
.official-source-card.review-fresh,
.proposal-official-source.review-fresh { --sev: var(--ok); --sev-wash: var(--ok-wash); }
.readiness-item.review-aging,
.readiness-item.review-undated,
.official-source-card.review-aging,
.official-source-card.review-undated,
.proposal-official-source.review-aging,
.proposal-official-source.review-undated { --sev: var(--est); --sev-wash: var(--est-wash); }
.readiness-item.review-pending,
.official-source-card.review-pending,
.proposal-official-source.review-pending { --sev: var(--wait); --sev-wash: var(--wait-wash); }
.readiness-item.review-stale,
.official-source-card.review-stale,
.proposal-official-source.review-stale { --sev: var(--danger); --sev-wash: var(--danger-wash); }
/* ══════════════ PLA D'ACCIÓ ══════════════ */
.trip-action-center { display: grid; gap: 13px; min-width: 0; }
.trip-action-center.empty-state { gap: 0; }
.trip-action-center.has-critical { --sev: var(--danger); --sev-wash: var(--danger-wash); }
.trip-action-center.has-actions { --sev: var(--est); --sev-wash: var(--est-wash); }
.trip-action-center.is-ready { --sev: var(--ok); --sev-wash: var(--ok-wash); }
.trip-action-center.has-critical,
.trip-action-center.has-actions,
.trip-action-center.is-ready {
border-color: color-mix(in srgb, var(--sev) 34%, var(--line));
box-shadow: inset 3px 0 0 var(--sev), var(--shadow-sm);
}
.trip-action-head { display: grid; gap: 10px; min-width: 0; }
.trip-action-head > div { min-width: 0; }
.trip-action-head h2 { font-family: var(--display); font-size: 23px; letter-spacing: -.015em; }
.trip-action-head p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.trip-action-head-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.trip-action-head-actions button {
min-height: 44px; max-width: 100%; padding: 10px 13px; border-radius: var(--r-sm);
border: 1px solid var(--line); background: var(--card); color: var(--text);
font-size: 13px; font-weight: 600;
}
.trip-action-head-actions button:hover { background: var(--sunk); }
.trip-action-countdown {
max-width: 100%; padding: 7px 11px; border-radius: 99px;
border: 1px solid color-mix(in srgb, var(--sev, var(--line)) 38%, var(--line));
background: var(--sev-wash, var(--sunk)); color: var(--sev, var(--text-soft));
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 12px; font-weight: 600;
}
/* comptadors per gravetat */
.trip-action-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.action-count {
max-width: 100%; padding: 5px 9px; border-radius: 99px;
background: var(--sev-wash, var(--sunk)); color: var(--sev, var(--text-soft));
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 11.5px; font-weight: 600;
}
.action-count.total {
margin-left: auto; background: var(--card); color: var(--muted);
border: 1px solid var(--line);
}
.trip-action-list { display: grid; gap: 9px; }
.trip-action-item {
display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start;
gap: 10px 11px; padding: 12px; min-width: 0;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--card); box-shadow: inset 3px 0 0 var(--sev, var(--line));
}
.trip-action-item > div { display: grid; gap: 2px; min-width: 0; }
.trip-action-item small {
font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
color: var(--sev, var(--muted));
}
.trip-action-item strong { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.trip-action-item p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.42; color: var(--muted); overflow-wrap: anywhere; }
.trip-action-item button {
grid-column: 2; justify-self: start; min-height: 44px; padding: 9px 14px;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--card); color: var(--text); font-size: 13px; font-weight: 600;
}
.trip-action-item button:hover { background: var(--sunk); }
.trip-action-marker {
display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
background: var(--sev-wash, var(--sunk)); color: var(--sev, var(--muted));
font-size: 13px; font-weight: 700; line-height: 1;
}
.trip-action-ready {
display: flex; align-items: flex-start; gap: 11px; padding: 13px; min-width: 0;
border: 1px solid color-mix(in srgb, var(--ok) 28%, var(--line));
border-radius: var(--r-sm); background: var(--ok-wash);
}
.trip-action-ready > span {
display: grid; place-items: center; flex: none; width: 28px; height: 28px;
border-radius: 50%; background: var(--card); color: var(--ok); font-weight: 700;
}
.trip-action-ready > div { min-width: 0; }
.trip-action-ready strong { font-size: 14px; color: var(--ok); }
.trip-action-ready p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.42; color: var(--text-soft); }
/* destaca la secció a la qual salta el pla d'acció */
.trip-action-focus {
outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent);
outline-offset: 5px; border-radius: var(--r);
transition: outline-color 350ms ease;
}
@media (min-width: 640px) {
.trip-action-head { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px; }
.trip-action-head-actions { justify-content: flex-end; }
.trip-action-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trip-action-item { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.trip-action-item button { grid-column: auto; justify-self: end; }
}
/* ══════════════ CAPÇALERES DELS PANELLS DE PREPARATIUS ══════════════ */
.reservations-head,
.readiness-head,
.packing-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.reservations-head > div,
.readiness-head > div,
.packing-head > div { min-width: 0; }
.reservations-head > strong,
.readiness-head > strong,
.packing-head > strong {
flex: none; color: var(--text);
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 19px; font-weight: 600; line-height: 1.2;
}
.reservation-progress,
.readiness-progress,
.packing-progress { display: block; margin: 12px 0 9px; height: 8px; }
/* ══════════════ RESERVES I TERMINIS ══════════════ */
.reservation-alerts { display: grid; gap: 6px; margin: 10px 0 0; }
.reservation-alerts:empty { display: none; }
.reservation-alert {
padding: 9px 11px; border-radius: var(--r-sm); min-width: 0;
background: var(--sev-wash, var(--sunk)); color: var(--sev, var(--text-soft));
border-left: 3px solid var(--sev, var(--line));
font-size: 13px; font-weight: 500; line-height: 1.4;
}
.reservation-list { display: grid; gap: 9px; margin-top: 12px; }
.reservation-item {
display: grid; gap: 10px; padding: 12px; min-width: 0;
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
}
.reservation-item.confirmed { --sev: var(--ok); --sev-wash: var(--ok-wash); }
.reservation-item.confirmed,
.reservation-item.attention {
border-color: color-mix(in srgb, var(--sev) 32%, var(--line));
box-shadow: inset 3px 0 0 var(--sev);
}
.reservation-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.reservation-item-title { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.reservation-item-title > span:first-child { flex: none; font-size: 17px; line-height: 1.2; }
.reservation-item-title div { min-width: 0; }
.reservation-item-title strong { display: block; font-size: 14.5px; line-height: 1.32; overflow-wrap: anywhere; }
.reservation-item-title small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.reservation-remove,
.packing-remove {
flex: none; min-height: 44px; padding: 6px 4px;
color: var(--danger); font-size: 12.5px; font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
}
.reservation-fields { display: grid; gap: 9px; }
.reservation-fields label { display: grid; gap: 4px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--text-soft); }
.reservation-fields input,
.reservation-fields select { min-width: 0; font-size: 14.5px; }
.reservation-wide { grid-column: 1 / -1; }
.reservation-deadline-status {
padding: 7px 10px; border-radius: var(--r-sm); min-width: 0;
background: var(--sev-wash, var(--wait-wash)); color: var(--sev, var(--wait));
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 12px; font-weight: 600; line-height: 1.4;
}
.reservation-add { display: grid; gap: 7px; margin-top: 15px; }
.reservation-add > label { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.reservation-add-grid { display: grid; gap: 8px; }
.reservation-add-grid input,
.reservation-add-grid select,
.reservation-add-grid button { min-width: 0; }
@media (min-width: 480px) {
.reservation-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reservation-add-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.reservation-add-grid input:first-child { grid-column: 1 / -1; }
}
@media (min-width: 720px) {
.reservation-add-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr) minmax(0, .9fr) auto; }
.reservation-add-grid input:first-child { grid-column: auto; }
}
/* ══════════════ DOCUMENTACIÓ I SEGURETAT ══════════════ */
.readiness-evidence { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.readiness-evidence-item {
max-width: 100%; padding: 6px 10px; border-radius: 99px;
background: var(--sunk); color: var(--text-soft);
font-size: 12px; font-weight: 600;
}
.readiness-evidence-item.verified { background: var(--ok-wash); color: var(--ok); }
.readiness-evidence-item.pending { background: var(--est-wash); color: var(--est); }
.readiness-checklist { display: grid; gap: 8px; margin-top: 14px; }
.readiness-item {
display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 11px;
padding: 12px; min-width: 0; cursor: pointer;
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
}
.readiness-item:has(input:checked) {
border-color: color-mix(in srgb, var(--ok) 30%, var(--line));
background: color-mix(in srgb, var(--ok-wash) 55%, var(--card));
}
.readiness-item.review-stale { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
.readiness-item > input { margin: 2px 0 0; }
.readiness-item > span { display: grid; gap: 3px; min-width: 0; font-size: inherit; font-weight: 400; color: var(--text); }
.readiness-item strong { font-size: 14.5px; line-height: 1.32; overflow-wrap: anywhere; }
.readiness-item small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.readiness-review-age { font-weight: 600; color: var(--sev, var(--muted)); }
/* ══════════════ DOSSIER OFICIAL ══════════════ */
.official-travel-dossier { display: block; margin-top: 14px; }
.official-dossier-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding-bottom: 10px; border-bottom: 1px solid var(--hairline);
}
.official-dossier-head > div { min-width: 0; }
.official-dossier-head h4 { margin-top: 1px; }
.official-dossier-head > strong {
flex: none; padding: 5px 10px; border-radius: 99px;
background: var(--sev-wash, var(--wait-wash)); color: var(--sev, var(--wait));
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 12px; font-weight: 600;
}
.official-dossier-scope { margin: 11px 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.official-dossier-grid { display: grid; gap: 9px; }
.official-source-card {
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px;
padding: 12px; min-width: 0;
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
box-shadow: inset 3px 0 0 var(--sev, var(--line));
}
.official-source-card > div { display: grid; gap: 3px; min-width: 0; }
.official-source-card strong { font-size: 14px; line-height: 1.32; overflow-wrap: anywhere; }
.official-source-card small { font-size: 12px; line-height: 1.35; color: var(--muted); }
.official-source-card p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.42; color: var(--text-soft); }
.official-source-icon {
display: grid; place-items: center; width: 30px; height: 30px;
border-radius: 9px; background: var(--sev-wash, var(--sunk)); font-size: 15px; line-height: 1;
}
.official-review-status {
display: block; margin: 6px 0 2px;
color: var(--sev, var(--muted)); font-size: 12px; font-weight: 600; line-height: 1.4;
}
.official-source-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.official-source-actions button {
min-height: 44px; max-width: 100%; padding: 9px 12px;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--card); color: var(--text); font-size: 12.5px; font-weight: 600;
}
.official-source-actions button:hover { background: var(--sunk); }
/* els enllaços del dossier són fonts governamentals: es llegeixen com a externs */
.official-source-actions a,
.official-dossier-actions a {
display: inline-flex; align-items: center; min-height: 44px; max-width: 100%;
color: var(--primary); font-size: 12.5px; font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
}
.official-dossier-actions { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--hairline); }
.official-dossier-warning {
margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--warn);
border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--est-wash);
color: var(--est); font-size: 12px; line-height: 1.45;
}
@media (min-width: 620px) { .official-dossier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .official-dossier-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ══════════════ FONTS OFICIALS DINS D'UNA PROPOSTA ══════════════ */
.proposal-official {
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--card); overflow: hidden;
}
.proposal-official > summary {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
gap: 5px 10px; padding: 11px 12px; min-height: 44px;
}
.proposal-official > summary > span {
grid-area: 1 / 1; display: grid; place-items: center; width: 30px; height: 30px;
border-radius: 50%; background: var(--sunk); font-size: 15px; line-height: 1;
}
.proposal-official > summary > div { grid-area: 1 / 2; display: grid; gap: 2px; min-width: 0; }
.proposal-official > summary strong { font-size: 14px; line-height: 1.3; }
.proposal-official > summary small { font-size: 12px; font-weight: 400; color: var(--muted); }
.proposal-official > summary em {
grid-area: 2 / 2; justify-self: start; max-width: 100%;
padding: 4px 9px; border-radius: 99px;
background: var(--sev-wash, var(--wait-wash)); color: var(--sev, var(--wait));
font-size: 11.5px; font-style: normal; font-weight: 600;
}
.proposal-official > summary::after { grid-area: 1 / 3 / -1 / 4; margin-left: 0; align-self: center; }
.proposal-official[open] > summary { border-bottom: 1px solid var(--hairline); }
.proposal-official-body { display: grid; gap: 11px; padding: 12px; min-width: 0; }
.proposal-official-body > p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.proposal-official-sources { display: grid; gap: 8px; }
.proposal-official-source {
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px;
padding: 11px; min-width: 0;
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
box-shadow: inset 3px 0 0 var(--sev, var(--line));
}
.proposal-official-source > span { font-size: 15px; line-height: 1.2; }
.proposal-official-source > div { display: grid; gap: 3px; min-width: 0; }
.proposal-official-source strong { font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; }
.proposal-official-source small { font-size: 11.5px; color: var(--muted); }
.proposal-official-source p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.42; color: var(--text-soft); }
.proposal-official-source > div > div {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 3px; min-width: 0;
}
.proposal-official-source button {
min-height: 44px; max-width: 100%; padding: 9px 12px;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--card); color: var(--text); font-size: 12.5px; font-weight: 600;
}
.proposal-official-source button:hover { background: var(--sunk); }
.proposal-official-status {
display: block; margin-top: 4px;
color: var(--sev, var(--muted)); font-size: 12px; font-weight: 600;
}
.proposal-official-source a,
.proposal-official-registry {
display: inline-flex; align-items: center; min-height: 44px; max-width: 100%;
color: var(--primary); font-size: 12.5px; font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
}
.proposal-official-registry { justify-self: start; }
.proposal-official-warning {
margin: 0; padding: 10px 12px; border-left: 3px solid var(--warn);
border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--est-wash);
color: var(--est); font-size: 12px; line-height: 1.45;
}
@media (min-width: 520px) {
.proposal-official > summary { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.proposal-official > summary em { grid-area: 1 / 3; }
.proposal-official > summary::after { grid-area: 1 / 4 / -1 / 5; }
}
/* ══════════════ PASSAPORT DE DECISIÓ DE LA PROPOSTA ══════════════ */
.proposal-readiness {
display: grid; gap: 11px; padding: 13px; min-width: 0;
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
box-shadow: inset 3px 0 0 var(--sev, var(--line));
}
.proposal-readiness-good { --sev: var(--ok); --sev-wash: var(--ok-wash); }
.proposal-readiness-partial { --sev: var(--wait); --sev-wash: var(--wait-wash); }
.proposal-readiness-attention { --sev: var(--danger); --sev-wash: var(--danger-wash); }
.proposal-readiness-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; }
.proposal-readiness-head > div:first-child { display: grid; gap: 3px; min-width: 0; }
.proposal-readiness-head > div:first-child span {
font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
color: var(--muted);
}
.proposal-readiness-head > div:first-child strong { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.proposal-readiness-score { display: grid; justify-items: end; flex: none; }
.proposal-readiness-score strong {
color: var(--sev, var(--text));
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 20px; font-weight: 600; line-height: 1.1;
}
.proposal-readiness-score small { font-size: 11px; color: var(--muted); }
.proposal-readiness-gates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.proposal-readiness-gate {
display: grid; gap: 2px; min-width: 0; padding: 8px 9px;
border: 1px solid var(--line); border-left: 3px solid var(--sev, var(--line));
border-radius: var(--r-sm); background: var(--sunk);
}
.proposal-readiness-gate.verified { --sev: var(--ok); --sev-wash: var(--ok-wash); }
.proposal-readiness-gate.estimated { --sev: var(--est); --sev-wash: var(--est-wash); }
.proposal-readiness-gate.attention { --sev: var(--danger); --sev-wash: var(--danger-wash); }
.proposal-readiness-gate.pending { --sev: var(--wait); --sev-wash: var(--wait-wash); }
.proposal-readiness-gate b { font-size: 12px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.proposal-readiness-gate small { font-size: 11px; font-weight: 600; color: var(--sev, var(--muted)); }
.proposal-readiness-next {
display: grid; gap: 9px; padding: 10px 11px; min-width: 0;
border-radius: var(--r-sm); background: var(--sunk);
}
.proposal-readiness-next > div { display: grid; gap: 2px; min-width: 0; }
.proposal-readiness-next strong { font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.proposal-readiness-next span { font-size: 12px; line-height: 1.4; color: var(--muted); }
.proposal-readiness-next button {
justify-self: start; min-height: 44px; max-width: 100%; padding: 10px 14px;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--card); color: var(--text); font-size: 13px; font-weight: 600;
}
.proposal-readiness-next button:hover { border-color: var(--muted); }
.proposal-readiness > p { margin: 0; font-size: 11.5px; line-height: 1.42; color: var(--muted); }
@media (min-width: 520px) {
.proposal-readiness-gates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.proposal-readiness-next { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.proposal-readiness-next button { justify-self: end; }
}
/* ══════════════ MALETA ══════════════ */
.packing-context { display: flex; flex-wrap: wrap; gap: 6px; margin: 11px 0 0; }
.packing-context span {
max-width: 100%; padding: 6px 10px; border-radius: 99px;
background: var(--sunk); color: var(--text-soft);
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 12px; font-weight: 500;
}
.packing-checklist { display: grid; gap: 15px; margin-top: 14px; }
.packing-group { display: grid; gap: 7px; }
.packing-group h4 {
font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
color: var(--muted);
}
.packing-group > div { display: grid; gap: 7px; }
.packing-item {
display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 9px;
padding: 11px; min-width: 0;
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
}
.packing-item.packed {
border-color: color-mix(in srgb, var(--ok) 30%, var(--line));
background: color-mix(in srgb, var(--ok-wash) 55%, var(--card));
}
.packing-item label {
display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 11px;
min-width: 0; cursor: pointer;
}
.packing-item input { margin: 2px 0 0; }
.packing-item label > span { display: grid; gap: 3px; min-width: 0; font-size: inherit; font-weight: 400; color: var(--text); }
.packing-item strong { font-size: 14.5px; line-height: 1.32; overflow-wrap: anywhere; }
.packing-item small { font-size: 12.5px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.packing-custom { display: grid; gap: 7px; margin-top: 15px; }
.packing-custom > label { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.packing-custom > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.packing-custom input,
.packing-custom button { min-width: 0; }
.packing-reset {
justify-self: start; margin-top: 12px; min-height: 44px; max-width: 100%; padding: 10px 0;
color: var(--primary); font-size: 13px; font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
}
.packing-reset:disabled { color: var(--muted); text-decoration: none; }
@media (max-width: 400px) {
.packing-custom > div { grid-template-columns: minmax(0, 1fr); }
}
/* ═══ PRESSUPOST ═══ */
/* Resum del viatge: files etiqueta/valor dins la targeta "Resum" */
.summary {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 16px;
box-shadow: var(--shadow-sm);
min-width: 0;
}
.summary h3 { margin-bottom: 4px; }
.budgetrow {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
padding: 9px 0;
border-bottom: 1px solid var(--hairline);
font-size: 14px;
min-width: 0;
}
.budgetrow > span:first-child { color: var(--muted); }
.budgetrow > :last-child {
text-align: right;
font-weight: 600;
font-variant-numeric: tabular-nums;
min-width: 0;
}
.budgetrow.total {
border-bottom: 0;
padding-top: 12px;
padding-bottom: 0;
}
.budgetrow.total > span:first-child { color: var(--text); font-weight: 600; }
.budgetrow.total > :last-child {
font-family: var(--mono);
font-size: 17px;
letter-spacing: -.01em;
}
/* Capçalera del pressupost: objectiu, projecció, comprovats i marge */
.budget-overview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.budget-overview > div {
display: grid;
gap: 3px;
align-content: start;
padding: 12px 13px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--card);
box-shadow: var(--shadow-sm);
min-width: 0;
}
.budget-overview span {
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
color: var(--muted);
}
.budget-overview strong {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 18px;
letter-spacing: -.02em;
line-height: 1.15;
overflow-wrap: anywhere;
}
/* Desviació: l'única alarma real d'aquesta pantalla */
.budget-overview .over-budget {
border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
background: var(--danger-wash);
}
.budget-overview .over-budget span,
.budget-overview .over-budget strong { color: var(--danger); }
/* Text introductori del pressupost (present a la còpia empaquetada d'iOS) */
.budget-intro { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; }
/* Llegenda de columnes, alineada amb les files del desglossament */
.budget-legend {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px;
padding: 0 0 7px;
border-bottom: 1px solid var(--line);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
}
.budget-legend span { text-align: right; min-width: 0; }
.budget-legend span:first-child { color: var(--est); }
/* Una fila per categoria: estimació a l'esquerra, preu comprovat a la dreta */
.budget-line {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 9px 12px;
align-items: end;
padding: 13px 0;
border-bottom: 1px solid var(--hairline);
}
.budget-line:has(+ .budget-total-row) { border-bottom-color: transparent; }
.budget-line-name {
grid-column: 1 / -1;
display: grid;
gap: 2px;
min-width: 0;
}
.budget-line-name strong { font-size: 14.5px; overflow-wrap: anywhere; }
.budget-line-name small,
.budget-total-row small {
font-size: 11.5px;
line-height: 1.35;
color: var(--muted);
}
/* Estimació: sempre marcada amb ~ i amb la tinta d'estimació */
.budget-estimate {
display: grid;
gap: 2px;
text-align: right;
min-width: 0;
}
.budget-estimate span {
font-size: 10.5px;
font-weight: 600;
letter-spacing: .04em;
color: var(--est);
}
.budget-estimate strong {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 14.5px;
font-weight: 600;
color: var(--text-soft);
}
.budget-estimate strong::before { content: "~"; }
/* Preu comprovat: camp editable; l'etiqueta només es tenyeix quan hi ha import */
.budget-quote {
display: grid;
gap: 4px;
min-width: 0;
}
.budget-quote > span:first-child {
font-size: 10.5px;
font-weight: 600;
letter-spacing: .04em;
color: var(--muted);
text-align: right;
text-transform: none;
}
.budget-input {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 6px;
}
.budget-input input {
min-width: 0;
padding: 10px;
text-align: right;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 14.5px;
font-weight: 500;
background: var(--raised);
}
.budget-input b {
font-family: var(--mono);
font-weight: 500;
color: var(--muted);
}
/* Comprovat: fons de confiança, marca ✓ i camp amb vora verda */
.budget-line.verified {
margin-inline: -10px;
padding-inline: 10px;
border-radius: var(--r-sm);
border-bottom-color: transparent;
background: var(--ok-wash);
}
.budget-line.verified .budget-line-name strong::before {
content: "✓ ";
color: var(--ok);
font-weight: 700;
}
.budget-line.verified .budget-quote > span:first-child { color: var(--ok); }
.budget-line.verified .budget-input input {
border-color: color-mix(in srgb, var(--ok) 55%, var(--line));
color: var(--ok);
font-weight: 600;
}
.budget-line.verified .budget-input b { color: var(--ok); }
/* Total projectat per persona */
.budget-total-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.budget-total-row > div {
display: grid;
gap: 2px;
min-width: 0;
}
.budget-total-row > div > span {
font-size: 13px;
font-weight: 600;
}
.budget-total-row > strong {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 20px;
letter-spacing: -.02em;
white-space: nowrap;
}
.budget-reset { width: 100%; margin: 14px 0 10px; }
/* Cerques externes abans de confirmar un import */
.budget-search-links {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 9px;
margin: 14px 0 4px;
}
.budget-search-links a {
display: grid;
place-items: center;
min-height: 48px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--raised);
color: var(--text-soft);
font-size: 13.5px;
font-weight: 600;
text-align: center;
text-decoration: none;
overflow-wrap: anywhere;
}
.budget-search-links a:hover { background: var(--sunk); }
.budget-notes-title { margin: 16px 0 3px; }
.budget-notes-title label { display: inline-block; padding: 7px 0; cursor: pointer; }
/* ── Diàleg de preu comprovat ─────────────────────────── */
.proposal-quote-modal {
gap: 13px;
padding-bottom: max(18px, env(safe-area-inset-bottom));
}
.quote-context {
margin: 0;
font-size: 12.5px;
line-height: 1.4;
font-variant-numeric: tabular-nums;
}
.quote-explanation {
margin: 0;
padding: 10px 12px;
border-radius: var(--r-sm);
background: var(--sunk);
color: var(--text-soft);
font-size: 13px;
line-height: 1.45;
}
.proposal-quote-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 11px;
}
.proposal-quote-grid label {
display: grid;
gap: 5px;
min-width: 0;
font-size: 12.5px;
font-weight: 600;
color: var(--text-soft);
}
.proposal-quote-grid input { min-width: 0; font-weight: 400; }
.proposal-quote-grid input[type="number"] {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.quote-wide { grid-column: 1 / -1; }
.quote-today-button {
align-self: end;
min-height: 44px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--sunk);
color: var(--text-soft);
font-size: 13px;
font-weight: 600;
}
.quote-today-button:hover { border-color: var(--muted); }
/* Estat del diàleg: regió viva, sempre al flux perquè s'anunciï */
.quote-status {
margin: 0;
font-size: 12.5px;
font-weight: 600;
line-height: 1.4;
color: var(--wait);
}
.quote-status:empty { line-height: 0; }
/* Historial: què vas comprovar, quan, i com ha canviat */
.proposal-quote-history {
display: grid;
gap: 8px;
padding: 12px;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--sunk);
}
.proposal-quote-history[hidden] { display: none; }
.quote-history-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.quote-history-head strong { font-size: 13px; }
.quote-history-head span { font-size: 11.5px; color: var(--muted); }
.proposal-quote-history ol {
margin: 0;
padding: 0;
list-style: none;
}
.proposal-quote-history li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 7px 0;
border-top: 1px solid var(--line);
}
.proposal-quote-history li > div { display: grid; gap: 2px; min-width: 0; }
.proposal-quote-history li > div:last-child { justify-items: end; text-align: right; }
.proposal-quote-history li strong { font-size: 12.5px; }
.proposal-quote-history li span { font-size: 11.5px; color: var(--muted); }
.proposal-quote-history li b {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 13px;
white-space: nowrap;
}
.proposal-quote-history .quote-change {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 11px;
font-weight: 700;
}
.proposal-quote-history .quote-change.up { color: var(--danger); }
.proposal-quote-history .quote-change.down { color: var(--ok); }
/* Peu del diàleg: primer confirmar/cancel·lar, retirar a sota */
.proposal-quote-actions {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: 8px;
}
.proposal-quote-actions > span { display: none; }
.proposal-quote-actions .ghost { order: 1; }
.proposal-quote-actions .primary { order: 2; }
.proposal-quote-actions .danger-quiet {
order: 3;
grid-column: 1 / -1;
justify-self: start;
min-height: 44px;
}
@media (min-width: 480px) {
.budget-search-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proposal-quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proposal-quote-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
.proposal-quote-actions > span { display: block; flex: 1 1 0; }
.proposal-quote-actions .ghost,
.proposal-quote-actions .primary,
.proposal-quote-actions .danger-quiet { order: 0; justify-self: auto; }
}
@media (min-width: 560px) {
.budget-line {
grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr);
align-items: center;
}
.budget-line-name { grid-column: auto; }
.budget-legend {
grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr);
}
.budget-legend span:first-child { grid-column: 2; }
.budget-reset { width: auto; }
}
/* ═══ VIATGES DESATS I CÒPIES PRIVADES ═══ */
/* ── capçalera: còpia privada i restauració ───────────── */
.saved-trips-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
}
.saved-backup-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
width: 100%;
}
.saved-backup-actions > button { flex: 1 1 150px; }
/* Regió viva: sense text no ha d'ocupar espai, però no la traiem de l'arbre. */
.backup-status {
margin: 0 0 12px;
padding: 10px 13px;
border: 1px solid color-mix(in srgb, var(--ok) 22%, transparent);
border-radius: var(--r-sm);
background: var(--ok-wash);
color: var(--ok);
font-size: 13px;
line-height: 1.4;
}
.backup-status.error {
border-color: color-mix(in srgb, var(--danger) 26%, transparent);
background: var(--danger-wash);
color: var(--danger);
}
.backup-status:empty { margin: 0; padding: 0; border: 0; }
/* ── llista de viatges desats ─────────────────────────── */
.saved-trips-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
gap: 12px;
align-items: start;
}
.saved-trips-list .empty { grid-column: 1 / -1; }
.saved-trip-card {
display: grid;
gap: 11px;
padding: 14px;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shadow-sm);
}
/* On i quan: destinació, dates i data d'actualització. */
.saved-trip-title {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.saved-trip-title > div {
display: grid;
gap: 2px;
min-width: 0;
}
.saved-trip-title h3 { overflow-wrap: anywhere; }
.saved-trip-title span { font-size: 13px; }
.saved-trip-title time {
flex: 0 1 auto;
padding-top: 3px;
font-size: 11.5px;
line-height: 1.35;
text-align: right;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
/* Les tres xifres de capçalera: durada, projecció i preparació. */
.saved-trip-meta {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px 10px;
padding: 9px 11px;
border-radius: var(--r-sm);
background: var(--sunk);
}
.saved-trip-meta > div { display: grid; gap: 1px; min-width: 0; }
.saved-trip-meta span {
font-size: 10.5px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
}
.saved-trip-meta strong {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 13.5px;
font-weight: 600;
color: var(--text);
overflow-wrap: anywhere;
}
/* Indicis de confiança: llista plana de fets comprovables. */
.saved-trip-confidence {
display: flex;
flex-wrap: wrap;
gap: 5px;
min-width: 0;
}
.saved-trip-confidence span {
max-width: 100%;
padding: 3px 8px;
border: 1px solid var(--line);
border-radius: 99px;
font-size: 11.5px;
line-height: 1.35;
color: var(--text-soft);
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.saved-trip-confidence span:empty { display: none; }
.saved-trip-confidence .reservation-attention {
border-color: color-mix(in srgb, var(--danger) 28%, transparent);
background: var(--danger-wash);
color: var(--danger);
font-weight: 600;
}
/* Accions: obrir és l'acció principal; eliminar és discreta. */
.saved-trip-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.saved-trip-actions > .primary { flex: 1 1 auto; }
.saved-trip-delete {
flex: 0 1 auto;
min-height: 44px;
padding: 10px 13px;
border: 1px solid var(--card);
border-radius: var(--r-sm);
color: var(--muted);
font-size: 13.5px;
font-weight: 600;
line-height: 1.2;
transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
.saved-trip-delete:hover,
.saved-trip-delete:focus-visible {
border-color: color-mix(in srgb, var(--danger) 26%, transparent);
background: var(--danger-wash);
color: var(--danger);
}
/* ── diàleg de restauració ────────────────────────────── */
.restore-backup-modal { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.restore-backup-summary {
display: grid;
gap: 8px;
max-height: min(42vh, 320px);
overflow-y: auto;
overscroll-behavior: contain;
}
.restore-backup-summary:empty { display: none; }
.restore-backup-trip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--hairline);
border-radius: var(--r-sm);
background: var(--sunk);
}
.restore-backup-trip > div {
display: grid;
gap: 2px;
min-width: 0;
}
.restore-backup-trip strong {
font-size: 14.5px;
font-weight: 600;
overflow-wrap: anywhere;
}
.restore-backup-trip span {
font-size: 12px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.restore-backup-trip em {
flex: 0 1 auto;
padding: 3px 8px;
border: 1px solid var(--line);
border-radius: 99px;
background: var(--card);
color: var(--text-soft);
font-size: 11px;
font-weight: 600;
font-style: normal;
line-height: 1.35;
text-align: center;
}
.restore-backup-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.restore-backup-actions > button { flex: 1 1 150px; }
/* ═══ ASSISTENT I XAT ═══ */
/* Estat de la IA a la capçalera: pastilla neutra dins del text de subtítol. */
.chip {
display: inline-flex;
align-items: center;
vertical-align: baseline;
max-width: 100%;
margin-left: 2px;
padding: 2px 9px;
border-radius: 99px;
background: var(--sunk);
border: 1px solid var(--hairline);
color: var(--text-soft);
font-size: 11.5px;
font-weight: 600;
line-height: 1.5;
}
/* Contenidor del xat: historial que fa scroll i camp enganxat a baix. */
.chat {
display: flex;
flex-direction: column;
height: clamp(320px, 56vh, 620px);
border: 1px solid var(--line);
border-radius: var(--r);
background: var(--card);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.messages {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 9px;
padding: 14px;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--muted) 40%, transparent) transparent;
}
/* Bombolles: assistent a l'esquerra sobre superfície enfonsada, usuari a la dreta en tinta plena. */
.msg {
max-width: 86%;
padding: 10px 13px;
border-radius: var(--r-sm);
font-size: 14.5px;
line-height: 1.5;
overflow-wrap: anywhere;
}
.msg.bot {
align-self: flex-start;
background: var(--sunk);
color: var(--text);
border-bottom-left-radius: 5px;
}
.msg.user {
align-self: flex-end;
background: var(--text);
color: var(--bg);
border-bottom-right-radius: 5px;
}
/* Camp d'entrada: una fila, sempre visible al peu del xat. */
.chatbox {
flex: none;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-top: 1px solid var(--hairline);
background: var(--card);
}
.chatbox input {
flex: 1 1 auto;
min-width: 0;
font-size: 16px;
border-radius: 99px;
background: var(--sunk);
}
.chatbox .primary {
flex: none;
border-radius: 99px;
padding-inline: 17px;
}
/* Proposta de canvi d'itinerari: targeta ampla dins de l'historial. */
.assistant-plan-proposal {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 9px;
padding: 14px;
border: 1px solid var(--primary-line);
border-radius: var(--r-sm);
background: var(--primary-wash);
color: var(--text);
}
.assistant-plan-proposal > strong {
font-size: 14.5px;
font-weight: 600;
}
.assistant-plan-proposal > span {
font-size: 13px;
line-height: 1.45;
color: var(--text-soft);
}
.assistant-plan-proposal .assistant-plan-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
width: 100%;
}
.assistant-plan-proposal .assistant-plan-actions > button { flex: 1 1 160px; }
/* Estat aplicat: la targeta es queda amb el botó de desfer. */
.assistant-plan-proposal > .ghost {
background: var(--card);
border-color: var(--primary-line);
}
/* Preguntes ràpides: fila que fa scroll horitzontal dins del seu contenidor. */
.chips {
display: flex;
gap: 8px;
margin: 12px 0 14px;
padding-bottom: 2px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chips > button {
flex: 0 0 auto;
scroll-snap-align: start;
min-height: 44px;
padding: 9px 14px;
border-radius: 99px;
font-size: 13.5px;
white-space: nowrap;
}
@media (min-width: 900px) {
.chat { height: clamp(380px, 60vh, 680px); }
.chips { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; }
}
/* ═══ PERFIL, DESCOBERTA, ALLOTJAMENTS, COMPARTIR I INSTAL·LACIÓ ═══ */
/* ── Perfil del viatger: requisits i estat ────────────── */
.profile-requirements { margin-top: 14px; display: grid; gap: 10px; }
.profile-requirements > label {
display: flex; align-items: center; gap: 10px;
min-height: 44px; font-size: 14px; color: var(--text-soft);
}
.profile-requirements > label input { flex: none; }
.profile-requirements .discover-grid { margin-top: 2px; }
.profile-requirements .fineprint { margin: 0; }
.profile-save { margin-top: 14px; }
.traveler-profile-status {
margin-top: 14px; padding: 13px 14px;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--sunk); font-size: 13px; line-height: 1.45;
overflow-wrap: anywhere;
}
.traveler-profile-status:empty { display: none; }
.traveler-profile-status > strong {
display: block; font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--text);
}
.traveler-profile-status p { margin: 5px 0 0; color: var(--muted); font-size: 12.5px; }
/* ── Descoberta: camps amples i cerca directa al catàleg ── */
.discover-brief-field { grid-column: 1 / -1; }
.catalog-discovery,
.trip-setup {
background: var(--card); border: 1px solid var(--line);
border-radius: var(--r); padding: 0 14px; box-shadow: var(--shadow-sm);
}
.catalog-discovery { margin-top: 14px; }
.catalog-discovery[open],
.trip-setup[open] { padding-bottom: 14px; }
.catalog-discovery > summary,
.trip-setup > summary { padding: 14px 0; }
.catalog-discovery > :not(summary),
.trip-setup > :not(summary) { margin-top: 12px; }
.catalog-discovery p { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.catalog-discovery [role="status"] { font-size: 12.5px; color: var(--text-soft); }
.catalog-search-results {
display: grid; gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.catalog-search-results:empty { display: none; }
.catalog-search-results article {
display: grid; gap: 6px; align-content: start; min-width: 0;
padding: 13px; border: 1px solid var(--line);
border-radius: var(--r-sm); background: var(--card);
}
.catalog-search-results h3 { font-size: 15px; }
.catalog-search-results p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
/* La segona línia és la coordenada: xifres en columna */
.catalog-search-results p:first-of-type { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.catalog-search-results article > strong { font-size: 11.5px; font-weight: 600; color: var(--text-soft); }
.catalog-search-results a { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.catalog-search-results button { margin-top: 4px; width: 100%; }
/* ── Planificador: dades del viatge ───────────────────── */
.planner-time-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.cta { display: flex; flex-wrap: wrap; gap: 9px; }
.cta > * { flex: 1 1 180px; }
.calculate-routes { width: 100%; margin-top: 12px; }
/* ── Allotjaments reals ───────────────────────────────── */
.accommodation-head { display: flex; align-items: flex-start; gap: 12px; }
.accommodation-head > strong {
margin-left: auto; flex: none; padding: 4px 9px; border-radius: 99px;
background: var(--sunk); color: var(--text-soft);
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 11.5px; font-weight: 600;
}
.accommodation-list { display: grid; gap: 10px; margin-top: 12px; }
.accommodation-card {
display: grid; gap: 9px; min-width: 0; padding: 13px;
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
}
.accommodation-card.selected {
border-color: var(--primary);
box-shadow: 0 0 0 1px var(--primary);
}
.accommodation-title { display: flex; align-items: flex-start; gap: 10px; }
.accommodation-title > div { min-width: 0; }
.accommodation-title h4 { font-size: 14.5px; }
.accommodation-title span { display: block; margin-top: 1px; font-size: 11.5px; color: var(--muted); }
.accommodation-badge {
flex: none; margin-left: auto; padding: 3px 8px; border-radius: 99px;
background: var(--primary-wash); color: var(--primary);
font-size: 10.5px; font-weight: 600;
}
/* Estat de la dada: comprovada o pendent de revisió */
.accommodation-data-status {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
padding: 7px 9px; border-radius: 9px; font-size: 11.5px; line-height: 1.4;
}
.accommodation-data-status.ready { background: var(--ok-wash); color: var(--ok); }
.accommodation-data-status.review { background: var(--est-wash); color: var(--est); }
.accommodation-data-status span { text-align: right; }
.accommodation-details { display: flex; flex-wrap: wrap; gap: 5px; }
.accommodation-details span {
padding: 4px 8px; border-radius: 8px; background: var(--sunk);
color: var(--text-soft); font-size: 11.5px; overflow-wrap: anywhere;
}
.accommodation-fit {
display: grid; gap: 4px; padding: 9px 10px;
border-left: 2px solid var(--primary-line); border-radius: 0 9px 9px 0;
background: var(--primary-wash); color: var(--text-soft);
}
.accommodation-fit > strong {
font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted);
}
.accommodation-fit ul { margin: 0; padding-left: 16px; display: grid; gap: 3px; font-size: 12px; line-height: 1.4; }
.accommodation-warning {
margin: 0; padding: 9px 10px; border-radius: 9px;
background: var(--est-wash); color: var(--est);
font-size: 12px; line-height: 1.45;
}
.accommodation-links { display: flex; flex-wrap: wrap; gap: 12px; }
.accommodation-links a { font-size: 12.5px; font-weight: 600; }
.accommodation-select {
width: 100%; min-height: 44px; padding: 10px 12px;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--card); color: var(--text);
font-size: 13.5px; font-weight: 600;
}
.accommodation-select:hover { border-color: var(--muted); }
.accommodation-card.selected .accommodation-select {
border-color: var(--ok); background: var(--ok-wash); color: var(--ok);
}
/* ── Etiquetes, enllaços i dades en directe de les propostes ── */
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
padding: 4px 9px; border-radius: 99px; background: var(--sunk);
color: var(--text-soft); font-size: 11.5px; font-weight: 500;
}
.card-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.card-links a {
display: flex; align-items: center; justify-content: center; gap: 5px;
min-height: 44px; padding: 9px 8px;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--card); color: var(--text-soft);
font-size: 12.5px; font-weight: 600; text-align: center; text-decoration: none;
}
.card-links a:hover { background: var(--sunk); }
.live-data {
display: grid; gap: 5px; padding: 10px 11px;
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunk);
}
.live-title {
font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted);
}
.live-values {
display: flex; flex-wrap: wrap; gap: 4px 10px;
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 12.5px; color: var(--text-soft);
}
.live-context-note { display: block; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.refresh-link {
font-size: 12.5px; font-weight: 600; white-space: nowrap;
text-decoration: underline; text-underline-offset: 3px;
}
/* ── Horaris operatius: alternativa i desfer ──────────── */
.operational-reschedule-box {
display: grid; gap: 7px; padding: 10px;
border: 1px solid color-mix(in srgb, var(--est) 35%, transparent);
border-radius: 10px; background: var(--est-wash); color: var(--est);
}
.operational-reschedule-box > span { display: block; font-size: 12px; line-height: 1.45; }
.operational-reschedule-button,
.operational-undo-button {
min-height: 44px; padding: 10px 12px;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--card); color: var(--text);
font-size: 13px; font-weight: 600; text-align: center;
}
.operational-reschedule-button:hover,
.operational-undo-button:hover { border-color: var(--muted); }
.operational-undo-button { justify-self: start; margin-top: 6px; }
/* ── Proposta compartida que arriba per enllaç ────────── */
.shared-proposal-panel {
display: grid; gap: 13px; margin-bottom: 16px; padding: 15px;
border: 1px solid var(--primary-line); border-radius: var(--r);
background: var(--primary-wash);
}
.shared-proposal-panel[hidden] { display: none; }
.shared-proposal-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.shared-proposal-main > div { min-width: 0; }
.shared-proposal-emoji {
display: grid; place-items: center; flex: none;
width: 44px; height: 44px; border-radius: 12px;
background: var(--card); font-size: 22px; line-height: 1;
}
.shared-proposal-main h3 { font-family: var(--display); font-size: 20px; }
.shared-proposal-main p { margin: 5px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-soft); }
.shared-proposal-criteria { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.shared-proposal-criteria span {
padding: 4px 9px; border-radius: 99px;
border: 1px solid var(--primary-line); background: var(--card);
color: var(--text-soft); font-size: 11.5px; font-weight: 500;
}
.shared-proposal-live {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--card); color: var(--text-soft);
font-size: 12px; line-height: 1.4;
}
.shared-proposal-live.ready {
border-color: color-mix(in srgb, var(--ok) 35%, transparent);
background: var(--ok-wash); color: var(--ok);
}
.shared-proposal-live strong { font-size: 11.5px; font-weight: 600; }
.shared-proposal-live span { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.shared-proposal-live small { flex-basis: 100%; font-size: 11px; color: var(--muted); }
.shared-proposal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.shared-proposal-actions .primary,
.shared-proposal-actions .secondary { flex: 1 1 160px; }
.shared-proposal-dismiss {
margin-left: auto; min-height: 44px; padding: 10px 8px;
color: var(--text-soft); font-size: 13px; font-weight: 600;
text-decoration: underline; text-underline-offset: 3px;
}
.shared-proposal-privacy { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
/* ── Compartir la proposta ────────────────────────────── */
.share-intro { margin: 0; font-size: 13px; line-height: 1.45; }
.share-proposal-preview {
display: grid; gap: 9px; padding: 13px;
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunk);
}
.share-proposal-preview > div:first-child { display: flex; align-items: center; gap: 10px; min-width: 0; }
.share-proposal-preview > div:first-child > span { font-size: 26px; line-height: 1; flex: none; }
.share-proposal-preview > div:first-child > div { display: grid; gap: 1px; min-width: 0; }
.share-proposal-preview strong { font-size: 14.5px; }
.share-proposal-preview > div:first-child small {
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 11.5px; color: var(--muted);
}
.share-proposal-preview p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-soft); }
.share-proposal-preview ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.share-proposal-preview li {
display: grid; gap: 2px; padding-top: 6px; border-top: 1px solid var(--hairline);
}
.share-proposal-preview li strong { font-size: 11.5px; }
.share-proposal-preview li span { font-size: 12px; line-height: 1.4; color: var(--text-soft); }
.share-preview-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.share-preview-facts span {
display: grid; gap: 2px; padding: 8px; border-radius: 9px;
background: var(--card); font-size: 11.5px; line-height: 1.4; color: var(--text-soft);
}
.share-preview-facts b {
font-size: 10px; font-weight: 600; letter-spacing: .09em;
text-transform: uppercase; color: var(--muted);
}
.share-preview-caution {
display: block; padding: 8px 9px; border-radius: 9px;
background: var(--est-wash); color: var(--est); font-size: 11.5px; line-height: 1.45;
}
.share-preview-caution.positive { background: var(--ok-wash); color: var(--ok); }
.share-recipient {
display: grid; gap: 5px; padding: 12px;
border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunk);
}
.share-recipient > span { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.share-recipient > span small { margin-left: 5px; font-weight: 400; color: var(--muted); }
.share-recipient > small { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.share-system-button,
.share-copy-button { width: 100%; }
/* Graella de canals: quadrat tàctil amb el nom a sota */
.share-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.share-channels a {
display: grid; place-items: center; align-content: center; gap: 5px;
min-height: 66px; min-width: 0; padding: 10px 5px;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--card); color: var(--text-soft);
font-size: 19px; font-weight: 600; text-align: center; text-decoration: none;
}
.share-channels a:hover { background: var(--sunk); }
.share-channels a span { font-size: 11px; font-weight: 500; overflow-wrap: anywhere; }
.share-status {
min-height: 1.3em; margin: 0; text-align: center;
font-size: 12.5px; font-weight: 500; color: var(--text-soft);
}
.share-privacy { margin: 0; text-align: center; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.share-trip { flex: 1 1 auto; min-width: 0; white-space: normal; }
/* ── Instal·lació a l'iPhone ──────────────────────────── */
.install-hint { margin: 0; font-size: 13px; line-height: 1.45; }
.iphone-install {
display: grid; gap: 12px; padding: 15px;
border: 1px solid var(--line); border-radius: var(--r); background: var(--sunk);
}
.iphone-install h3 { font-size: 15px; }
.ios-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: ios-step; }
.ios-steps li {
counter-increment: ios-step;
display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start;
font-size: 13.5px; line-height: 1.45; color: var(--text-soft);
}
.ios-steps li::before {
content: counter(ios-step);
display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
background: var(--primary); color: var(--primary-ink);
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 12px; font-weight: 600;
}
.ios-steps strong { color: var(--text); font-weight: 600; }
.iphone-note {
margin: 0; padding: 10px 11px; border-radius: var(--r-sm);
background: var(--card); color: var(--muted); font-size: 12.5px; line-height: 1.45;
}
.iphone-address {
display: grid; place-items: center; min-height: 44px; padding: 12px;
border-radius: var(--r-sm); text-align: center;
font-size: 14px; font-weight: 600; text-underline-offset: 3px;
}
/* ── Amplades mitjanes i escriptori ───────────────────── */
@media (min-width: 620px) {
.share-channels { grid-template-columns: repeat(6, 1fr); }
.share-preview-facts { grid-template-columns: 1fr 1fr; }
.card-links { grid-template-columns: 1fr 1fr; }
.shared-proposal-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); }
.shared-proposal-live { align-self: start; }
.shared-proposal-actions,
.shared-proposal-privacy { grid-column: 1 / -1; }
.shared-proposal-actions .primary,
.shared-proposal-actions .secondary { flex: 0 1 auto; }
.accommodation-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
.card-links { grid-template-columns: 1fr; }
.share-preview-facts { grid-template-columns: 1fr; }
}
/* ═══ ESTATS DE FIABILITAT ═══ */
/* Un sol mecanisme de to per a tots els components que informen de l'estat
d'una dada. Cada bloc declara --tone i --tone-wash segons el modificador;
la resta d'estils no tornen a parlar de color. */
.reliability-day, .reliability-gate, .audit-gate, .day-reliability-badge,
.data-freshness, .saved-data-status, .fit-decision-note, .intent-requirements,
.itinerary-evidence-selection, .itinerary-verification, .operational-report,
.operational-schedule, .pill, .route-leg, .route-stage-evidence,
.slot-operational-check, .fit-level {
--tone: var(--muted);
--tone-wash: var(--sunk);
}
.verified, .ready, .complete, .fresh, .ok, .positive, .fit-high, .street-route { --tone: var(--ok); --tone-wash: var(--ok-wash); }
.estimated, .estimate, .aging, .stale, .partial, .attention, .fit-medium { --tone: var(--est); --tone-wash: var(--est-wash); }
.pending, .unknown, .fit-low { --tone: var(--wait); --tone-wash: var(--wait-wash); }
.critical, .blocked, .conflict { --tone: var(--danger); --tone-wash: var(--danger-wash); }
/* ── passaport de fiabilitat: un dia i les seves portes ── */
.plan-reliability {
display: grid; gap: 12px; padding: 15px;
border: 1px solid var(--line); border-radius: var(--r);
background: var(--card); box-shadow: var(--shadow-sm);
}
.plan-reliability-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
}
.plan-reliability-head > div:first-child { flex: 1 1 220px; min-width: 0; }
.plan-reliability-head strong { display: block; font-size: 15.5px; }
.plan-reliability-head p { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.plan-reliability-score {
flex: 0 0 auto; display: grid; justify-items: center; gap: 1px;
padding: 9px 13px; border-radius: var(--r-sm); background: var(--sunk);
}
.plan-reliability-score strong {
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 19px; font-weight: 600; letter-spacing: -.03em;
}
.plan-reliability-score span {
font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted);
}
.plan-reliability-days {
display: grid; gap: 9px;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) {
.plan-reliability-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.reliability-day {
display: grid; gap: 8px; padding: 11px 12px; min-width: 0;
border-radius: var(--r-sm); background: var(--sunk);
border-left: 3px solid var(--tone);
}
/* El dia i el recompte anaven enganxats: "Dia 12/5 controls coberts". */
.reliability-day > div:first-child {
display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
}
.reliability-day > div:first-child strong { font-size: 13.5px; }
.reliability-day > div:first-child span {
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: 11.5px; color: var(--muted);
}
.reliability-gates, .audit-gates {
display: grid; gap: 5px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) {
.reliability-gates, .audit-gates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Igual: LlocsEstimació sortia com "LlocsEstimació". */
.reliability-gate, .audit-gate {
display: grid; gap: 1px; min-width: 0;
padding: 6px 8px; border-radius: 8px; background: var(--tone-wash);
}
.reliability-gate b, .audit-gate strong {
font-size: 11px; font-weight: 600; color: var(--text);
overflow-wrap: anywhere;
}
.reliability-gate small, .audit-gate small {
font-size: 10.5px; font-weight: 600; color: var(--tone);
}
.plan-reliability-note { margin: 0; overflow-wrap: anywhere; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
/* ── indicadors d'estat en línia ── */
.day-reliability-badge, .data-freshness, .saved-data-status, .pill, .fit-level {
display: inline-flex; align-items: center; gap: 4px;
max-width: 100%; padding: 3px 9px; border-radius: 99px;
background: var(--tone-wash); color: var(--tone);
font-size: 11px; font-weight: 600; line-height: 1.4;
overflow-wrap: anywhere;
}
.pill, .fit-level { white-space: nowrap; }
.itinerary-verification { color: var(--tone); font-size: 12px; font-weight: 600; }
.saved-data-status { margin: 6px 0; }
/* ── blocs d'avís amb títol i detall ── */
.fit-decision-note, .intent-requirements, .itinerary-evidence-selection,
.operational-report, .operational-schedule, .route-stage-evidence {
display: grid; gap: 3px; padding: 11px 13px;
border-radius: var(--r-sm); background: var(--tone-wash);
border-left: 3px solid var(--tone);
}
.fit-decision-note strong, .intent-requirements strong,
.itinerary-evidence-selection strong, .operational-report strong,
.operational-schedule strong { font-size: 13px; color: var(--text); }
.fit-decision-note span, .intent-requirements span,
.itinerary-evidence-selection span, .operational-report span,
.operational-schedule span, .operational-report small {
font-size: 12px; line-height: 1.45; color: var(--text-soft);
}
.itinerary-evidence-selection > div { display: grid; gap: 2px; }
.route-stage-evidence { gap: 9px; }
/* ── trams de ruta i comprovació d'horari per franja ── */
.route-leg {
display: block; padding: 6px 0 6px 10px;
border-left: 2px solid var(--tone);
font-size: 12px; line-height: 1.45; color: var(--text-soft);
}
.route-leg span { display: block; }
.slot-operational-check {
display: flex; align-items: center; gap: 8px;
font-size: 12px; color: var(--tone); font-weight: 600;
}
.slot-operational-check input { flex: none; }
/* ── barra de cobertura de l'anàlisi d'encaix ── */
.fit-coverage-track {
height: 6px; border-radius: 99px; background: var(--sunk); overflow: hidden;
}
.fit-coverage-track > span { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.fit-coverage-1 > span { width: 25%; }
.fit-coverage-2 > span { width: 50%; }
.fit-coverage-3 > span { width: 75%; }
.fit-coverage-4 > span { width: 100%; }
/* ── botó de preu comprovat a la targeta ── */
.proposal-quote-button {
align-self: start; padding: 8px 12px; border-radius: var(--r-sm);
border: 1px dashed var(--line); background: transparent; color: var(--muted);
font-size: 12.5px; font-weight: 600; min-height: 44px;
}
.proposal-quote-button.has-quote { border-style: solid; border-color: var(--ok); color: var(--ok); }
.proposal-quote-button.stale-quote { border-color: var(--est); color: var(--est); }
/* ── el preu comprovat destaca sobre l'estimació ── */
.meta-box.verified-quote-meta { background: var(--ok-wash); }
.meta-box.verified-quote-meta strong { color: var(--ok); }
.meta-box.quote-stale { background: var(--est-wash); }
.meta-box.quote-stale strong { color: var(--est); }
/* ── pla B meteorològic del dia ── */
.weather-plan {
display: grid; gap: 9px; padding: 12px 13px; margin-top: 10px;
border-radius: var(--r-sm); background: var(--sunk);
border-left: 3px solid var(--est);
}
/* Llista de destinacions descartades: visible i reversible una a una. */
.avoid-panel { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: 0 12px; margin-bottom: 10px; }
.avoid-body { padding-bottom: 12px; display: grid; gap: 14px; }
.avoid-group h4 { margin: 0 0 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.avoid-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.avoid-group li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; }
.avoid-group li button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 17px; line-height: 1; min-width: 28px; min-height: 28px; border-radius: 50%; }
.avoid-group li button:hover { background: var(--line); color: var(--text); }
.avoid-add { display: grid; gap: 8px; }
.avoid-add label { font-size: 13px; color: var(--muted); font-weight: 600; }
.avoid-add-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.avoid-add-actions button { flex: 1 1 auto; min-width: 140px; }
.avoid-panel .feedback-reset { justify-self: start; }
/* El passaport de fiabilitat: la conclusió primer, el detall a demanda. */
.plan-reliability-head strong { display: block; font-size: 16px; }
.plan-reliability-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.plan-reliability-problems { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.plan-reliability-problems li { display: grid; gap: 2px; padding: 9px 11px; border-radius: var(--r-sm); background: var(--surface); border-left: 3px solid var(--danger); }
.plan-reliability-problems strong { font-size: 14px; }
.plan-reliability-problems span { font-size: 13px; color: var(--muted); }
.plan-reliability-detail { margin-top: 4px; }
.plan-reliability-detail > summary { font-size: 14px; color: var(--muted); }