/* Système de design partagé du kit · 04-tecnologia/diseno/diseno.css (2026-09-30)
   Copié tel quel dans chaque app par son script de jetons (jamais édité dans l'app). Il ne connaît aucune couleur : le projet
   fournit ses rôles de couleur et sa fonte dans ses jetons (--color-bg, --color-subtle, --color-ink, --color-ink2, --color-meta,
   --color-hairline, --color-border, --color-primary, --color-primary-ink, --color-ok, --color-warn, --color-danger, --font-sans,
   --font-mono). Les échelles (--text-*, --leading-*, --space-*, --radius-*, --size-*) viennent de tokens.base.json.
   Règles : aucune valeur en pixels hors échelle (escalas-check), aucune couleur en dur (tokens-check), aucune ombre décorative. */

/* ---------- Alias courts, pour écrire vite sans quitter les jetons ---------- */
:root {
  --bg: var(--color-bg); --subtle: var(--color-subtle);
  --ink: var(--color-ink); --ink2: var(--color-ink2); --meta: var(--color-meta);
  --hair: var(--color-hairline); --border: var(--color-border);
  --primary: var(--color-primary); --primary-ink: var(--color-primary-ink);
  --ok: var(--color-ok); --warn: var(--color-warn); --danger: var(--color-danger);
  --font: var(--font-sans); --mono: var(--font-mono); --display: var(--font-display, var(--font-sans)); /* titres : la charte peut donner une fonte de titre ; sinon la fonte de texte */
  --surface: var(--color-surface, var(--color-bg)); /* barres, pieds, panneaux, lignes, champs : la charte peut les poser sur une surface distincte du fond ; sinon le fond */
  --r: var(--radius-md); --r-lg: var(--radius-lg); --r-card: var(--radius-xl); --r-sheet: var(--radius-2xl); --pill: var(--radius-pill);
  --tap: var(--size-tap); --tap-lg: var(--size-tap-lg);
}

/* ---------- Socle ---------- */
html { color-scheme: light dark; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--text-md); line-height: var(--leading-md); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Texte : six rôles, un écran en montre quatre au plus ---------- */
.t-xs { font-size: var(--text-xs); line-height: var(--leading-xs); }
.t-sm { font-size: var(--text-sm); line-height: var(--leading-sm); }
.t-md { font-size: var(--text-md); line-height: var(--leading-md); }
.t-lg { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--font-weight-semibold); }
.t-xl { font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--font-weight-bold); letter-spacing: var(--font-tracking-tight); }
.t-2xl { font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: var(--font-weight-bold); letter-spacing: var(--font-tracking-tight); }
h1 { font-family: var(--display); font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--font-weight-bold); letter-spacing: var(--font-tracking-tight); }
h2 { font-family: var(--display); font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--font-weight-semibold); }
.mini { color: var(--ink2); font-size: var(--text-sm); line-height: var(--leading-sm); }
.mini.warn { color: var(--warn); }
.mini.err { color: var(--danger); }
.meta { color: var(--meta); font-size: var(--text-xs); line-height: var(--leading-xs); font-variant-numeric: tabular-nums; }
/* Intitulé de section : casse normale, jamais de capitales espacées (benchmark 17, trait T6) ; une coche quand la section est remplie, une indication ou un bouton à droite */
.etape { display: flex; align-items: center; gap: var(--space-2); margin: 0; min-height: var(--space-6); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--font-weight-semibold); color: var(--ink2); }
.etape .num { display: none; }
.etape.ok { color: var(--ink); }
.etape.ok .num { display: inline; font-size: 0; } /* le numéro devient la coche, devant l'intitulé : « ✓ Photos » */
.etape.ok .num::after { content: "✓"; font-size: var(--text-sm); color: var(--ok); }
.etape .hint { margin-left: auto; font-weight: var(--font-weight-regular); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--meta); }
.etape .hint:empty { display: none; }

/* ---------- Structure d'un écran : en-tête collant, corps, pied collant ---------- */
.top { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--hair); padding: var(--space-3) var(--space-4); padding-top: max(var(--space-3), env(safe-area-inset-top)); display: flex; align-items: center; gap: var(--space-3); min-height: var(--size-bar); }
.top h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-lg); line-height: var(--leading-lg); } /* dans une barre, le titre est à 20 (Apple Headline, Material title-large) */
.top .back { width: var(--tap); height: var(--tap); margin-left: calc(-1 * var(--space-3)); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.body { flex: 1; padding: var(--space-2) var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.body.con-tabbar { padding-bottom: var(--space-16); }
.footer { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--hair); padding: var(--space-3) var(--space-4); padding-bottom: max(var(--space-3), env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); }
.footer > * { order: 3; }
.footer .falta { order: 0; grid-column: 1 / -1; margin: 0; }
.footer .bp { order: 1; grid-column: 1 / -1; }
.footer .bs, .footer .bt { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); }
.footer .pastille { order: 2; grid-column: 1 / -1; font-size: var(--text-xs); line-height: var(--leading-xs); white-space: normal; } /* l'état, en mots, sous le bouton qu'il qualifie */

/* ---------- Boutons : un seul plein par écran ; les autres contourés ; le tertiaire en texte souligné ---------- */
.bp, .bs, .bt { min-height: var(--tap); border-radius: var(--pill); padding: var(--space-2) var(--space-4); font-weight: var(--font-weight-semibold); font-size: var(--text-md); line-height: var(--leading-md); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); text-align: center; }
.bp { background: var(--primary); color: var(--primary-ink); min-height: var(--tap-lg); }
.bp:active { opacity: 0.85; }
.bp[disabled] { opacity: 0.35; cursor: not-allowed; }
.bs { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.bs:active { background: var(--subtle); }
.bs[disabled] { opacity: 0.35; cursor: not-allowed; }
.bt { background: transparent; color: var(--ink); border: 1px solid var(--border); font-weight: var(--font-weight-regular); }
.bt:active { background: var(--subtle); }
.bt.danger { color: var(--danger); }
.w { width: 100%; }
.lien { color: var(--ink); text-decoration: underline; text-underline-offset: var(--space-1); text-decoration-color: var(--border); background: none; min-height: var(--tap); display: inline-flex; align-items: center; }
.lien.danger { color: var(--danger); text-decoration-color: var(--danger); }
.ico { width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--ink); }
.ico:active { background: var(--subtle); }
.i { width: var(--size-icon-sm); height: var(--size-icon-sm); flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }

/* ---------- Chips, segments, filtres ---------- */
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chip { background: var(--subtle); border: 1px solid var(--hair); color: var(--ink); border-radius: var(--pill); min-height: var(--tap); padding: var(--space-1) var(--space-3); font-size: var(--text-sm); line-height: var(--leading-sm); display: inline-flex; align-items: center; gap: var(--space-1); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip:active { background: var(--hair); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip:disabled { opacity: .7; }
.seg { display: flex; border: 1px solid var(--border); border-radius: var(--pill); overflow: hidden; }
.seg button { flex: 1; min-height: var(--tap); padding: var(--space-1) var(--space-3); border-radius: var(--pill); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink2); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.filtros { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--space-2); }
.filtros:empty { display: none; }
.filtro { min-height: var(--tap); padding: var(--space-2) var(--space-3); border-radius: var(--pill); border: 1px solid var(--border); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--font-weight-semibold); color: var(--ink); display: inline-flex; align-items: center; gap: var(--space-1); }
.filtro .c { font-size: var(--text-xs); color: var(--ink2); }
.filtro[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.filtro[aria-pressed="true"] .c { color: var(--bg); opacity: .75; }
/* Onglets en pilule : deux ou trois vues d'une même liste */
.pestanas { display: flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--pill); background: var(--subtle); margin-bottom: var(--space-2); }
.pestana { flex: 1; min-height: var(--tap); border-radius: var(--pill); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--font-weight-semibold); color: var(--ink2); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); }
.pestana.on { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); }
.cuenta-mini { font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--font-weight-semibold); background: var(--ink); color: var(--bg); border-radius: var(--pill); padding: 0 var(--space-2); }
.vistas { flex: 1; display: inline-flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--pill); background: var(--subtle); }
.vista { flex: 1; text-align: center; padding: var(--space-2) var(--space-3); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--pill); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--font-weight-semibold); color: var(--ink2); text-decoration: none; white-space: nowrap; }
.vista.on { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); }

/* ---------- Champs ---------- */
.champ { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--space-2) var(--space-3); font-size: var(--text-md); line-height: var(--leading-md); color: var(--ink); min-height: var(--tap); }
.champ::placeholder { color: var(--meta); }
.champ:focus { border-color: var(--ink); outline: 0; }
select.champ { appearance: none; -webkit-appearance: none; padding-right: var(--space-8); cursor: pointer; }
.selw { position: relative; }
.selw::after { content: ""; position: absolute; right: var(--space-4); top: 50%; width: var(--space-2); height: var(--space-2); border-right: 1.5px solid var(--ink2); border-bottom: 1.5px solid var(--ink2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
label.lab, .lab { display: block; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink2); margin-bottom: var(--space-1); }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }

/* ---------- Lignes de liste : contenu à même le fond, une hairline entre deux ---------- */
.ligne { background: transparent; border: 0; border-bottom: 1px solid var(--hair); padding: var(--space-3) 0; width: 100%; text-align: left; }
.body > .ligne:last-child { border-bottom: 0; }
button.ligne:active { background: var(--subtle); }
.ligne .n { font-weight: var(--font-weight-semibold); font-size: var(--text-md); line-height: var(--leading-md); color: var(--ink); }
.ligne .s { color: var(--ink2); font-size: var(--text-sm); line-height: var(--leading-sm); }
.ligne .row { display: flex; align-items: flex-start; gap: var(--space-3); }
.ligne .row .grow { flex: 1; min-width: 0; }
.ligne .row .vig { width: var(--size-thumb); height: var(--size-thumb); border-radius: var(--r); background: var(--subtle); flex: 0 0 auto; position: relative; overflow: hidden; }
.ligne .row .vig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ligne .row .vig .flag { position: absolute; left: var(--space-1); bottom: var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--font-weight-bold); background: var(--bg); color: var(--ink); border-radius: var(--radius-sm); padding: 0 var(--space-1); }
.ligne .row .vig .flag:empty { display: none; }
.ligne .row .pastille { flex: 0 1 auto; max-width: 40%; white-space: normal; text-align: right; }
.ligne .pastille .coche { font-weight: var(--font-weight-bold); margin-right: var(--space-1); }
.ligne .pastille .coche:empty { display: none; }
.resumen { background: var(--subtle); border-radius: var(--r-card); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-1); }
.resumen b { font-size: var(--text-md); }

/* ---------- États : un point et des mots, jamais une pastille pleine ---------- */
.pastille { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink2); white-space: nowrap; }
.pastille::before { content: ""; width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--border); flex: 0 0 auto; }
.pastille.sent { color: var(--ink); } .pastille.sent::before { background: var(--ink); }
.pastille.sync { color: var(--ok); } .pastille.sync::before { background: var(--ok); }
.pastille.off { color: var(--warn); } .pastille.off::before { background: var(--warn); }
.pastille.crit { color: var(--danger); } .pastille.crit::before { background: var(--danger); }
.pastille.an { color: var(--ink); } .pastille.an::before { background: var(--ok); }
.net { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--meta); }
.net.on { color: var(--ink2); }
.vide { text-align: center; padding: var(--space-12) var(--space-2); color: var(--ink2); }
.vide .big { font-size: var(--text-2xl); line-height: var(--leading-2xl); margin-bottom: var(--space-2); }
.vide p { color: var(--ink2); }
.vide b { color: var(--ink); }
.barre { height: var(--space-1); border-radius: var(--pill); background: var(--hair); overflow: hidden; margin-top: var(--space-2); }
.barre i { display: block; height: 100%; background: var(--ink); transition: width 0.25s; }
.barre.mala i { background: var(--danger); }
/* Squelette d'attente : les mêmes boîtes que le contenu, vides, qui respirent */
.esqueleto { pointer-events: none; }
.esqueleto .vig, .esqueleto .vineta, .esqueleto .n, .esqueleto .s, .esqueleto .fecha { background: var(--subtle); border-radius: var(--r); animation: respira 1.2s ease-in-out infinite; }
.esqueleto .n { height: var(--space-4); width: 60%; margin-bottom: var(--space-2); }
.esqueleto .s { height: var(--space-3); width: 40%; margin-bottom: var(--space-2); }
.esqueleto .fecha { height: var(--space-3); width: 50%; }
@keyframes respira { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---------- Toast : en bas, un message, au plus un bouton « Annuler » ---------- */
.toast, #toast { position: fixed; left: 50%; bottom: var(--space-16); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: var(--space-2) var(--space-4); border-radius: var(--pill); font-size: var(--text-sm); line-height: var(--leading-sm); z-index: 50; max-width: 88vw; text-align: center; display: inline-flex; align-items: center; gap: var(--space-3); }
.toast button, #toast button, .toast-accion { color: var(--bg); font-weight: var(--font-weight-semibold); text-decoration: underline; text-underline-offset: var(--space-1); min-height: var(--tap); padding: 0 var(--space-2); }

/* ---------- Barre basse à trois onglets, l'action au centre ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--surface); border-top: 1px solid var(--hair); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; padding: var(--space-2) var(--space-3); padding-bottom: max(var(--space-3), env(safe-area-inset-bottom)); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: end; gap: var(--space-1); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--font-weight-semibold); color: var(--meta); min-height: var(--tap); text-decoration: none; position: relative; }
.tab.on { color: var(--primary); } /* l'onglet actif prend la couleur d'action (Mira : soleil ; une charte à action encre le laisse en encre) */
.tab.mid { color: var(--ink); }
.tab svg { width: var(--size-icon); height: var(--size-icon); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab .tab-lbl { margin-top: var(--space-6); }
.capture { position: absolute; left: 50%; top: calc(-1 * var(--space-6)); transform: translateX(-50%); width: var(--size-fab); height: var(--size-fab); border-radius: 50%; background: var(--primary); color: var(--primary-ink); display: flex; align-items: center; justify-content: center; border: var(--space-1) solid var(--bg); }
.capture svg { width: var(--size-icon); height: var(--size-icon); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.capture:active { transform: translateX(-50%) scale(.97); }

/* ---------- Panneau coulissant à deux crans, et sa poignée ---------- */
.asa { display: none; }
.panel-asa, .lista .asa { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: calc(100% + 2 * var(--space-4)); margin: 0 calc(-1 * var(--space-4)) var(--space-1); min-height: var(--tap); background: var(--bg); border-radius: var(--r-sheet) var(--r-sheet) 0 0; }
.panel-asa span, .lista .asa span { width: var(--size-handle); height: var(--space-1); border-radius: var(--radius-sm); background: var(--border); }
@media (min-width: 840px) { .panel-asa, .lista .asa { display: none; } } /* bureau : classe de fenêtre « expanded » (jeton breakpoint.expanded) */

/* ---------- Panneau modal par le bas (réglages, choix dans une liste) : un voile, une feuille, des options à cocher ---------- */
/* Demande au projet un rôle de plus : --color-scrim-soft (voile). Un réglage qu'on touche une fois vit ici, jamais sur l'accueil. */
.hoja-fondo { position: fixed; inset: 0; z-index: 40; background: var(--color-scrim-soft); }
.hoja { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; background: var(--surface); border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: var(--space-2) var(--space-4) var(--space-6); padding-bottom: max(var(--space-6), env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--space-2); max-width: 480px; margin: 0 auto; }
.hoja-asa { width: var(--size-handle); height: var(--space-1); border-radius: var(--radius-sm); background: var(--border); margin: 0 auto var(--space-2); }
.opcion { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--tap-lg); padding: var(--space-2) 0; border-bottom: 1px solid var(--hair); text-align: left; font-size: var(--text-md); line-height: var(--leading-md); color: var(--ink); }
.opcion:last-child { border-bottom: 0; }
.opcion .meta { margin-left: auto; }
.opcion::before { content: ""; width: var(--size-icon-sm); height: var(--size-icon-sm); border-radius: 50%; border: 1.5px solid var(--border); flex: 0 0 auto; }
.opcion[aria-checked="true"]::before { border-color: var(--ink); background: radial-gradient(circle, var(--ink) 0 45%, transparent 50%); }