/* Clash Progreso 3.1 · estilo Clash para las pantallas nuevas de la 3.0 (PROPUESTA de Diseño para un parche 3.1.x, 11 oct 2026 · ronda 2 con las pautas de Clash)
   Va junto a js-3.1.x.patch (marcado de losetas, hexágono, calor y criterio). Se carga DESPUÉS de css/views.css (index.html: <link rel="stylesheet" href="./css/estilo-3.1.css">).
   Base: referencia aprobada de Arte v2 (/workspace/clash-pwa-arte-v2/tokens.css y components.css) + pautas de Clash.
   Reglas: no toca .thumb > img, frameOf() ni la escala (solo marco/fondo de .thumb, y aquí ni eso).
   Sin imágenes: todo CSS. Contraste AA medido sin contar contorno: blanco solo sobre #2F7F17 o más oscuro.
   Ganchos por pantalla con :has() — Safari iOS 15.4+:
     Cuentas .screen:has(.fleet-card) · Ahora .screen:has([data-ahora]) · Ranking .screen:has([data-rank])
     Gráficos .screen:has([data-chart-kind]) · Agenda y Plan .screen:has([data-sueno])
     Historial .screen:has([data-tiempo]):not(:has([data-recurso]))
   Si el Líder prefiere, app.js:3394 puede añadir data-route="${r.name}" a <main class="screen"> y cambiar estos :has(). */

/* ── 0. Tokens que faltan (mismos nombres y valores que Arte v2) ── */
:root {
  --panel: #EFEDE4; --panel-3: #E2DFD3; --panel-edge: #1E1B16;
  --panel-hi: rgba(255,255,255,.85); --panel-lo: rgba(0,0,0,.14);
  --ink-2: #5A554B;                       /* 7,3:1 sobre --panel-2 */
  --gold-edge: #8A5A00; --gold-top: #FFE7A3; --gold-bot: #D99A12;
  --blue: #2E66AE; --blue-hi: #4A8FDB; --blue-edge: #163E73; --blue-ink: #2B5FA8;   /* blanco 5,8:1 · enlace 5,4:1 */
  --go-top: #9BD650; --go-bot: #276C12; --go-edge: #1C4A0B;
  --ok-text: #1F6E2A; --warn-text: #A84300; --ok-fill: #5DBB2F;
  --cf-top: #F8F6EE; --cf-bot: #E4E0D3; --cf-edge: #9C988C;
  --grey: #6A6E78; --grey-top: #8A8E98; --grey-edge: #2B2D33;   /* blanco sobre --grey 5,1:1 */
  --sep: rgba(0,0,0,.14);
  --font-ui: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Nunito", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --panel: #2C2F38; --panel-3: #23262E; --panel-edge: #050608;
    --panel-hi: rgba(255,255,255,.10); --panel-lo: rgba(0,0,0,.35);
    --ink-2: #C9C4B6;                     /* 7,7:1 */
    --blue: #1F4E86; --blue-hi: #3570B4; --blue-edge: #0B2547; --blue-ink: #9CC7FF;   /* 7,7:1: arregla --tint 4,06:1 */
    --ok-text: #7FD957; --warn-text: #FFB35C;
    --cf-top: #4A4E5A; --cf-bot: #3B3F4A; --cf-edge: #15171C;
    --grey: #4B4F59; --grey-top: #5F636E; --grey-edge: #111216;
    --sep: rgba(255,255,255,.12);
  }
}
html[data-theme="dark"] {
  --panel: #2C2F38; --panel-3: #23262E; --panel-edge: #050608;
    --panel-hi: rgba(255,255,255,.10); --panel-lo: rgba(0,0,0,.35);
    --ink-2: #C9C4B6;                     /* 7,7:1 */
    --blue: #1F4E86; --blue-hi: #3570B4; --blue-edge: #0B2547; --blue-ink: #9CC7FF;   /* 7,7:1: arregla --tint 4,06:1 */
    --ok-text: #7FD957; --warn-text: #FFB35C;
    --cf-top: #4A4E5A; --cf-bot: #3B3F4A; --cf-edge: #15171C;
    --grey: #4B4F59; --grey-top: #5F636E; --grey-edge: #111216;
    --sep: rgba(255,255,255,.12);
}

/* ── 1. Comunes a las pantallas nuevas ── */
/* Títulos en display redondeada gruesa (solo títulos; el texto corrido sigue en SF) */
.large-title { font-family: var(--font-ui); font-weight: 900; letter-spacing: .005em; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.card .t-headline, .compare-col .t-headline, .gcat h3 { font-family: var(--font-ui); font-weight: 800; letter-spacing: 0; }

/* Paneles pergamino: borde oscuro grueso, bisel claro arriba, canto abajo (Arte v2 .panel) */
.card, .list {
  border: 3px solid var(--panel-edge);
  box-shadow: inset 0 2px 0 var(--panel-hi), inset 0 -2px 0 var(--panel-lo), 0 4px 0 rgba(0,0,0,.35);
}
.list > li + li > .row::before { content: none; }
.list > li + li > .row { border-top: 2px dashed var(--sep); }
.c-2, .card .row__sub, .list .row__sub, .legend { color: var(--ink-2); }

/* Cabecera de sección = tablón de madera con texto dorado (sobre la escena) */
.screen > .section > .section-header,
.screen > .section > h2.section-header,
.screen > .section > .section-head > .section-header,
.screen > .section > .section-head > h2.section-header {
  display: inline-flex; gap: 10px; margin: 0 0 6px 2px; padding: 4px 12px;
  border: 2px solid #1A120C; border-radius: 8px;
  background: linear-gradient(180deg, #6A4B30, #3E2918); box-shadow: inset 0 2px 0 rgba(255,255,255,.14), 0 2px 0 #1A120C;
  color: var(--gold); font: 800 .765rem/1.3 var(--font-ui); letter-spacing: .04em;     /* #F6C744 sobre #3E2918: 8,6:1 */
}
.screen > .section > .section-header .num,
.screen > .section > .section-head > .section-header .num { color: #F4E6CC; }

/* Enlaces sobre la escena: dorado, objetivo de 44 px */
.section-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold); font-weight: 700; text-underline-offset: 3px; }

/* Chips de filtro 3D (Arte v2 .chip-f). Activo = dorado (pauta Clash), no verde (verde es confirmar). */
.chip-row { gap: 8px; padding: 2px 2px 8px; scrollbar-width: none;
  /* Arte v2: si la fila se sale (p. ej. Orden a 28 px, «Libr…»), el borde derecho se desvanece; el ::after de 30 px deja el último chip fuera del degradado al final del scroll */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row::after { content: ""; flex: 0 0 30px; }
.chip-row button {
  min-height: 44px; padding: 0 14px 2px;
  border: 2px solid var(--cf-edge); background: linear-gradient(180deg, var(--cf-top), var(--cf-bot)); color: var(--ink);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 3px 0 var(--cf-edge);
  font: 800 .882rem/1 var(--font-ui); transition: transform 80ms;
}
.chip-row button:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 1px 0 var(--cf-edge); }
.chip-row button[aria-pressed="true"] {
  border-color: var(--gold-edge); color: #24211C;                                    /* 10,1:1 sobre --gold */
  background: linear-gradient(180deg, var(--gold-top), var(--gold) 55%, var(--gold-bot));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 3px 0 var(--gold-edge);
}
/* Etiqueta de cada fila de filtros (sale del aria-label que ya existe: Periodo, Recurso, Ayuntamiento, Grupo, Tipo de gráfico, Orden del ranking) */
.chip-row::before {
  content: attr(aria-label); flex: none; align-self: center; min-width: 4.6em; margin-right: 2px;
  color: var(--on-dark-2); font: 700 .706rem/1.15 var(--font-text, var(--font)); text-transform: uppercase; letter-spacing: .03em;
}
/* El nombre ya lo da aria-label del toolbar: que VoiceOver no lo lea dos veces */
@supports (content: "x" / "") {
  .chip-row::before { content: attr(aria-label) / ""; }
  .chip-row[aria-label="Ayuntamiento"]::before { content: "TH" / ""; }
  .chip-row[aria-label="Tipo de gráfico"]::before { content: "Tipo" / ""; }
  .chip-row[aria-label="Orden del ranking"]::before { content: "Orden" / ""; }
}

/* Botón principal 3D: canto que se hunde al pulsar (blanco sobre #2F7F17 = 5,0:1; el brillo nunca detrás del texto) */
.btn--primary {
  position: relative; border: 3px solid var(--go-edge); border-radius: 12px;
  background: linear-gradient(180deg, var(--go-top) 0 5px, var(--go) 5px, var(--go) 70%, var(--go-bot));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 4px 0 var(--go-edge);
  font-family: var(--font-ui); font-weight: 800; text-shadow: 0 2px 0 rgba(0,0,0,.35); transition: transform 80ms;
}
.btn--primary:active { opacity: 1; transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 1px 0 var(--go-edge); }
@media (prefers-contrast: more) { .btn--primary { background: #7BC02C; color: #1B3A06; text-shadow: none; } }
/* Acciones secundarias dentro de paneles: botón gris-pergamino 3D en vez de texto azul suelto */
.card .btn--plain, .card .btn--secondary {
  min-height: 44px; border: 2px solid var(--cf-edge); border-radius: 12px; color: var(--ink);
  background: linear-gradient(180deg, var(--cf-top), var(--cf-bot)); box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 3px 0 var(--cf-edge);
  font: 800 .941rem/1.2 var(--font-ui);
}
.card .btn--plain:active, .card .btn--secondary:active { opacity: 1; transform: translateY(2px); box-shadow: 0 1px 0 var(--cf-edge); }
/* Botón de texto en filas (Comparar, Editar): azul AA en los dos modos */
.list .btn-text, .card .btn-text { color: var(--blue-ink); font-weight: 700; }
.card :is(.t-body, .t-footnote, .t-subhead) a { color: var(--blue-ink); }   /* enlaces en texto: 5,4:1 claro · 7,7:1 oscuro */

/* Campos de hora/fecha: pozo hundido */
.date-row input { border: 2px solid var(--panel-edge); background: var(--panel); box-shadow: inset 0 2px 3px rgba(0,0,0,.18); font-variant-numeric: tabular-nums; }
.card .date-row { margin: 12px 0; flex-wrap: wrap; }
.date-row label { flex: 1 1 8em; min-width: 0; }
.date-row input { width: 100%; min-width: 0; }   /* a 28 px «Despertar» se cortaba dentro del panel: ahora baja de línea */

/* Barras gruesas con borde, brillo y número al lado (gráficos, comparación, ritmo) */
.chart-bars .bar, .compare-col .bar {
  --h: 14px; width: auto; flex: 1 1 auto;
  background: var(--panel-3); border: 2px solid rgba(0,0,0,.55); box-shadow: inset 0 2px 2px rgba(0,0,0,.2);
}
.chart-bars .bar__fill, .compare-col .bar__fill {
  min-width: 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cat, var(--blue)) 55%, #fff) 0 38%, var(--cat, var(--blue)) 38%);
}
.chart-bars .bar-row { grid-template-columns: minmax(4.6rem, 7.2em) minmax(48px, 1fr) 3.6em; }
.chart-bars .bar-row > span:first-child { font: 700 .765rem/1.2 var(--font-text, var(--font)); overflow-wrap: anywhere; }
.chart-bars .bar-row > .num { font: 800 .82rem/1 var(--font-ui); text-align: right; }

/* Cabecera = HUD de madera (pauta Clash 1, Arte v2 .panel__hdr/.hud). Sustituye Large Title + barra iOS.
   Antes: la barra plegada era material claro con «‹ Cuentas» dorado = 1,07:1. Ahora siempre madera, título en display. */
:root { --navbar-h: 52px; --tabbar-h: 56px; }
.navbar, .navbar[data-collapsed="true"], .navbar[data-collapsed="false"] {
  background: linear-gradient(180deg, #6A4B30, #3E2918);
  border-bottom: 3px solid #1A120C;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14), 0 4px 10px rgba(0,0,0,.35);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.navbar__inner { height: var(--navbar-h); }
.navbar__title {                                   /* blanco sobre #6A4B30 ≥ 8:1; la sombra no cuenta */
  opacity: 1 !important; color: #FFFFFF; font: 900 17px/1.1 var(--font-ui); letter-spacing: .01em;
  text-shadow: 0 2px 0 rgba(0,0,0,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw;
}
/* El título grande queda solo para VoiceOver (sigue siendo el h1 de la pantalla) */
.large-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.large-sub { margin-top: var(--sp-3); }
/* Volver = botón verde 3D pequeño (≥ 44 px), con canto que se hunde */
.navbar__lead .btn-text {
  min-height: 44px; padding: 0 12px 2px 8px; gap: 4px;
  border: 2.5px solid var(--go-edge); border-radius: 12px; color: #FFFFFF;            /* blanco sobre #2F7F17 = 5,0:1 */
  background: linear-gradient(180deg, var(--go-top) 0 4px, var(--go) 4px, var(--go) 70%, var(--go-bot));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 3px 0 var(--go-edge);
  font: 800 15px/1 var(--font-ui); letter-spacing: 0;
}
.navbar__lead .btn-text svg { stroke-width: 3; }
.navbar__lead .btn-text svg path { stroke-width: 3.2; }
/* Acción de la derecha (Importar) = botón pergamino 3D: en Cuentas la única verde es «Pegar exportación» (Arte v2) */
.navbar__trail .btn-text {
  min-height: 44px; padding: 0 12px 2px;
  border: 2.5px solid #1A120C; border-radius: 12px; color: #24211C;                    /* ≥ 12:1 */
  background: linear-gradient(180deg, #FFFFFF 0 4px, #F8F6EE 4px, #E4E0D3);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 3px 0 #1A120C;
  font: 800 15px/1 var(--font-ui); letter-spacing: 0;
}
.navbar :is(.navbar__lead, .navbar__trail) .btn-text:active { transform: translateY(2px); box-shadow: 0 1px 0 #1A120C; }
.chip--warn { background: #FFE3BF; color: #7A3000; box-shadow: inset 0 0 0 1.5px #A84300; }   /* «Revisar constructores» 3,95:1 → 8:1 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip--warn {
    background: #4A3420; color: #FFB35C; box-shadow: inset 0 0 0 1.5px #A84300;
  }
}
html[data-theme="dark"] .chip--warn {
  background: #4A3420; color: #FFB35C; box-shadow: inset 0 0 0 1.5px #A84300;
}
.row.row--destructive { color: #B3261E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .row.row--destructive {
    color: #FF8A80;
  }
}
html[data-theme="dark"] .row.row--destructive {
  color: #FF8A80;
}   /* Copia «Borrar todos los datos» 4,08:1 → 5,9:1 */
.row__trail--stack > :first-child.soon, .soon { color: var(--blue-ink); }   /* oscuro 4,06:1 → 7,7:1 */

/* Tab bar = pestañas 3D (Arte v2 components.css .tabbar): activa en panel claro, sube 3 px, borde oscuro;
   el resto, gris con canto. Etiquetas blancas sobre --grey (5,1:1) y tinta sobre --panel (13,7:1). */
.tabbar {
  gap: 4px; padding: 4px calc(4px + env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 4px) calc(4px + env(safe-area-inset-left));
  background: linear-gradient(180deg, #6A4B30, #3E2918); border-top: 3px solid #1A120C;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 -4px 12px rgba(0,0,0,.35);
}
.tabbar a {
  justify-content: center; gap: 1px; min-height: 44px; padding: 2px 1px 3px;
  border: 2.5px solid var(--grey-edge); border-radius: 12px; color: #FFFFFF;
  background: linear-gradient(180deg, var(--grey-top) 0 4px, var(--grey) 4px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 3px 0 var(--grey-edge);
  font-family: var(--font-ui); font-weight: 800; transition: transform 80ms;
}
.tabbar a span { font-weight: 800; font-size: 10px; line-height: 1.05; }
.tabbar svg { width: 20px; height: 20px; stroke-width: 2.4; pointer-events: none; }
.tabbar a span { pointer-events: none; }
/* El icono (trazo, sin relleno) y el texto no se comen el toque: en el iPhone el golpe llega al enlace. */
a[href^="#"] :is(svg, span, img, b),
button :is(svg) { pointer-events: none; }
.tabbar a[aria-current="page"] {
  transform: translateY(-3px); color: var(--ink);
  border-color: var(--panel-edge); background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 60%, #FFFFFF) 0 4px, var(--panel) 4px);
  box-shadow: inset 0 2px 0 var(--panel-hi), 0 4px 0 var(--panel-edge), 0 8px 12px rgba(0,0,0,.35);
}
.tabbar a[aria-current="page"] :is(rect, circle) { fill: color-mix(in srgb, var(--gold) 45%, transparent); }
.tabbar a:active { opacity: 1; transform: translateY(2px); box-shadow: 0 1px 0 var(--grey-edge); }

/* ── 1b. Losetas de cuenta (pauta Clash 2): Ahora, Ranking y Mejoras «Por cuenta» ── */
.list--tiles { display: grid; gap: 10px; background: none; border: 0; box-shadow: none; overflow: visible; }
.list--tiles > li + li > .row { border-top: 0; }
.row--tile {
  gap: 10px; min-height: 72px; padding: 10px 10px 12px; border-radius: 14px; color: var(--ink);
  background: var(--panel-2); border: 3px solid var(--panel-edge);
  box-shadow: inset 0 2px 0 var(--panel-hi), inset 0 -2px 0 var(--panel-lo), 0 4px 0 rgba(0,0,0,.35);
}
a.row--tile:active { transform: translateY(2px); box-shadow: inset 0 2px 0 var(--panel-hi), 0 2px 0 rgba(0,0,0,.35); background: var(--panel-2); }
.row--tile .row__title, .acct-tile__name { font: 800 1.059rem/1.2 var(--font-ui); white-space: normal; overflow-wrap: anywhere; letter-spacing: 0; }
.row--tile .row__sub { margin-top: 2px; }
/* Barra gruesa con el % dentro (JS meterHtml): el número va en una pastilla pergamino al final de la barra → AA sobre cualquier relleno */
.meter { position: relative; display: block; margin-top: 8px; }
.meter .bar {
  --h: 24px; --cat: var(--blue); width: auto;
  background: var(--panel-3); border: 2px solid rgba(0,0,0,.6); box-shadow: inset 0 2px 2px rgba(0,0,0,.2);
}
.meter .bar__fill { min-width: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--cat) 55%, #fff) 0 38%, var(--cat) 38%); }
.meter__val {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  padding: 2px 7px; border-radius: 999px; background: #FFFDF5; color: #24211C;          /* 15,6:1 en claro y oscuro */
  box-shadow: 0 0 0 1.5px rgba(0,0,0,.45); font: 800 .765rem/1.1 var(--font-ui); white-space: nowrap;
}
/* Marco y fondo de la miniatura (no se toca .thumb > img ni la escala) */
.row--tile > .thumb, .acct-tile > .thumb { background: var(--panel-3); box-shadow: inset 0 0 0 2px rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.5); }
.acct-tile { display: flex; gap: 10px; align-items: flex-start; }
.acct-tile__main { flex: 1; min-width: 0; }
.acct-tile .meter { margin: 6px 0 8px; }
/* Ranking: puesto en hexágono (Arte v2 .hex), tinta oscura dentro para AA */
.hex { --s: 34px; position: relative; flex: none; width: var(--s); height: calc(var(--s) * 1.08); display: grid; place-items: center; }
.hex::before, .hex::after { content: ""; position: absolute; inset: 0; clip-path: polygon(50% 0, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%); }
.hex::before { background: var(--hx-edge, #2B2D33); }
.hex::after { inset: 3px; background: linear-gradient(180deg, var(--hx-hi, #FFFFFF), var(--hx, #E4E0D3) 55%, var(--hx-lo, #C9C5B8)); }
.hex > b { position: relative; z-index: 1; color: #24211C; font: 900 15px/1 var(--font-ui); font-variant-numeric: tabular-nums; }   /* ≥ 10:1 */
.hex--gold { --hx-edge: var(--gold-edge); --hx-hi: #FFE9A0; --hx: var(--gold); --hx-lo: #D99A12; }
/* «Editar» (Cuentas) = botón pergamino de 44 px */
[data-edit] {
  flex: none; min-height: 44px; padding: 0 12px 2px; border: 2px solid var(--cf-edge) !important; border-radius: 10px;
  background: linear-gradient(180deg, var(--cf-top), var(--cf-bot)) !important; color: var(--ink) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 3px 0 var(--cf-edge); font: 800 .882rem/1 var(--font-ui) !important;
}
[data-edit]:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cf-edge); }
.row--tile .row__main { color: inherit; text-decoration: none; }
.row--tile .row__title .chip { vertical-align: 2px; }
/* Con texto grande, Comparar / Editar bajan solos a otra línea (wrap natural, sin container query) */
.row--tile { flex-wrap: wrap; row-gap: 8px; }
.row--tile > .row__main { flex: 1 1 6em; }
.row--tile > :is([data-compare], [data-edit]) { margin-left: auto; }

/* ── 2. Cuentas: panel multicuenta (.fleet-card) ── */
.fleet-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.fleet-card > h2, .fleet-card > .t-body, .fleet-card > .link-row,
.fleet-card > .section-head, .fleet-card > .t-title2 { grid-column: 1 / -1; margin: 0; }
.fleet-card > .t-body, .fleet-card > .t-title2 { font: 900 1.647rem/1.1 var(--font-ui); font-variant-numeric: tabular-nums; }
.fleet-card > .t-footnote {                      /* contadores: losetas en relieve */
  margin: 0; padding: 8px 10px; border-radius: 10px; color: var(--ink);
  background: var(--panel-2); border: 2px solid var(--panel-3); box-shadow: 0 2px 0 var(--panel-3);
  font: 600 .765rem/1.35 var(--font-text, var(--font));
}
.fleet-card > .t-footnote:nth-child(5) { grid-column: 1 / -1; }   /* «Próxima mejora» a todo el ancho */
.link-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; margin-top: 4px; }
.link-row a:first-child { grid-column: 1 / -1; }   /* «Qué hacer ahora» a todo el ancho; Ranking y Agenda debajo */
.link-row a {                                    /* 22 px → 44 px, botón azul 3D (info/navegación) */
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 10px 6px; text-align: center;
  border: 2px solid var(--blue-edge); border-radius: 12px; color: #fff; text-decoration: none;
  background: linear-gradient(180deg, var(--blue-hi) 0 4px, var(--blue) 4px); box-shadow: 0 3px 0 var(--blue-edge);
  font: 800 .882rem/1.15 var(--font-ui);
}
.link-row a:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--blue-edge); }
.chip--main { background: var(--blue); color: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--blue-edge); }   /* 3,14:1 → 5,8:1 (8,4:1 oscuro). Azul = info; dorado solo activo/recompensa */

/* Solo la acción principal en verde (Pegar exportación). «Añadir cuenta» abajo pasa a pergamino.
   En la vista vacía («Aún no hay cuentas») «Añadir cuenta» es la única acción y sigue verde (.empty). */
.screen:has(.fleet-card) > .section > .btn--primary[data-go="#/importar"] {
  border: 3px solid var(--cf-edge); color: var(--ink); text-shadow: none;
  background: linear-gradient(180deg, var(--cf-top), var(--cf-bot));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 4px 0 var(--cf-edge);
}
.screen:has(.fleet-card) > .section > .btn--primary[data-go="#/importar"]:active { box-shadow: 0 1px 0 var(--cf-edge); }

.chip--goal-ok { background: #DDEFC9; color: #1F6E2A; }   /* «Objetivo TH18» oscuro 3,96:1 → AA */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip--goal-ok {
    background: #2E4A23; color: #7FD957;
  }
}
html[data-theme="dark"] .chip--goal-ok {
  background: #2E4A23; color: #7FD957;
}

/* ── 3. Ahora ── */
.screen:has([data-ahora]) .list--tiles > li > .row { border-left: 8px solid var(--gold); }   /* cola libre = dorado (recompensa/activo) */

/* ── 4. Ranking y comparación ── */
.screen:has([data-rank]) .list > li:nth-child(-n+3) > .row { border-left: 6px solid var(--medal); }
.screen:has([data-rank]) .list > li:nth-child(1) > .row { --medal: var(--gold); }
.screen:has([data-rank]) .list > li:nth-child(2) > .row { --medal: #B9BEC8; }
.screen:has([data-rank]) .list > li:nth-child(3) > .row { --medal: #C27C3A; }
.screen:has([data-rank]) .row__title { font: 800 1rem/1.25 var(--font-ui); }
[data-compare] {                                  /* «Comparar» = botón azul 3D pequeño; «Quitar» = dorado activo */
  min-height: 44px; padding: 0 12px 2px; border: 2px solid var(--blue-edge) !important; border-radius: 10px;
  background: linear-gradient(180deg, var(--blue-hi) 0 4px, var(--blue) 4px) !important; box-shadow: 0 3px 0 var(--blue-edge);
  color: #fff !important; font: 800 .882rem/1 var(--font-ui) !important;
}
[data-compare][aria-pressed="true"] {
  border-color: var(--gold-edge) !important; color: #24211C !important;
  background: linear-gradient(180deg, var(--gold-top), var(--gold) 55%, var(--gold-bot)) !important; box-shadow: 0 3px 0 var(--gold-edge);
}
[data-compare]:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--blue-edge); }
.compare-grid { gap: 12px; }
.compare-col > .t-title2 { font: 900 1.647rem/1.1 var(--font-ui); margin: 2px 0; }
.compare-col > h3 { margin: 0; }

/* ── 5. Gráficos de todas las cuentas ── */
/* Barras agrupadas: pozo hundido con borde, cada barra con canto oscuro y brillo arriba */
.gbar { height: 96px; gap: 2px; padding: 4px 4px 0; border: 2px solid rgba(0,0,0,.45); border-radius: 8px; background: var(--panel-3);
  background-image: linear-gradient(var(--sep) 1px, transparent 1px); background-size: 100% 25%; box-shadow: inset 0 2px 3px rgba(0,0,0,.18); }
.gbar i { border: 1.5px solid rgba(0,0,0,.55); border-bottom: 0; border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, rgba(255,255,255,.35) 0 30%, transparent 30%), var(--c, var(--tint)); }
.gbar i.is-na { border-style: dashed; background: transparent; }
.gcat h3 { font-size: .882rem; }
/* Apiladas: barra gruesa con borde y brillo */
.stack-bar { height: 24px; border: 2px solid rgba(0,0,0,.55); border-radius: 8px; background: var(--panel-3); box-shadow: inset 0 2px 2px rgba(0,0,0,.2); }
.stack-bar i { box-shadow: inset 0 4px 0 rgba(255,255,255,.35), inset -1px 0 0 rgba(0,0,0,.35); background: var(--cat); }
/* Calor (pauta Clash 3): escala saturada como las barras, número dentro en tinta #24211C (AA en todas) */
.heat__row { grid-template-columns: 3.4rem repeat(var(--cols), minmax(1.9rem, 1fr)); }
.heat__cell {
  display: grid; place-items: center; height: 32px; border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.45);
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0 35%, transparent 35%), var(--hc, var(--panel-3));
}
.heat__cell > b { color: #24211C; font: 800 .706rem/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.heat--lo  { --hc: #F2685B; }   /* < 50 %: tinta 5,3:1 */
.heat--mid { --hc: #F5A524; }   /* 50–79 %: 7,9:1 */
.heat--hi  { --hc: #5DBB2F; }   /* 80–99 %: 6,6:1 */
.heat--max { --hc: #F6C744; box-shadow: inset 0 0 0 2px var(--gold-edge), inset 0 3px 0 rgba(255,255,255,.6); }   /* 100 %: 10,1:1 */
.heat__cell.is-na { background: repeating-linear-gradient(135deg, var(--panel-3) 0 4px, transparent 4px 8px); }
.heat__name, .heat__lab { color: var(--ink-2); font: 700 .706rem/1.1 var(--font-text, var(--font)); }
.heat-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.heat-legend > span {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0 35%, transparent 35%), var(--hc);
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.45); color: #24211C; font: 800 .765rem/1 var(--font-ui); font-variant-numeric: tabular-nums;
}
.heat-legend > .is-na { --hc: transparent; background: repeating-linear-gradient(135deg, var(--panel-3) 0 4px, var(--panel-2) 4px 8px); color: var(--ink); }
/* Leyenda: muestras con borde */
.legend i { box-shadow: 0 0 0 1.5px rgba(0,0,0,.45); }
.legend-row--cuentas .legend { color: var(--ink); font-weight: 700; }
/* Líneas y radar */
.chart__line { stroke-width: 3; }
.chart__pt { stroke-width: 3; }
.chart.radar text { fill: var(--label-2); font: 700 11px/13px var(--font); }
.radar .ring { stroke: var(--sep); stroke-width: 1.5; }
.radar .chart__area { fill: color-mix(in srgb, var(--gold) 35%, transparent); }
.radar .chart__line { stroke: var(--gold-edge); }
.screen:has([data-chart-kind]) .sort-label { box-shadow: inset 0 2px 3px rgba(0,0,0,.12); }

/* ── 6. Organizador de constructores: Agenda y Plan ── */
.screen:has([data-sueno]) .list .row { padding-left: 14px; }
.screen:has([data-sueno]) .list .row__title { font: 800 .941rem/1.25 var(--font-ui); }
/* En el plan, cada línea de «Días y constructores» es una cola: canto izquierdo azul (info) */
.screen:has([data-sueno]) .section-header + .list > li > .row,
.screen:has([data-sueno]) .section-head + .list > li > .row { border-left: 6px solid var(--blue); }
/* Criterio (pauta Clash 4): una frase por línea con viñeta dorada (rombo CSS, sin emoji ni icono) */
.criterio { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.criterio > li { position: relative; padding-left: 22px; font: 500 .941rem/1.35 var(--font-text, var(--font)); color: var(--ink); }
.criterio > li::before {
  content: ""; position: absolute; left: 3px; top: .38em; width: 10px; height: 10px; transform: rotate(45deg);
  background: linear-gradient(135deg, #FFE9A0, var(--gold) 55%, var(--gold-bot)); box-shadow: 0 0 0 1.5px var(--gold-edge);
}
.criterio + .t-footnote { margin-top: 10px; }
/* «Sin horario de sueño» (quita el tramo, no borra datos): botón gris-pergamino, no rojo */

/* ── 7. Historial y logros ── */
.screen:has([data-tiempo]):not(:has([data-recurso])) > .chip-row + .section .card,
.screen:has([data-tiempo]):not(:has([data-recurso])) > .date-row + .section .card {   /* tarjeta «Rachas y logros» */
  border-color: var(--gold-edge);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 30%, var(--panel-2)) 0 52px, var(--panel-2) 52px);
}
.screen:has([data-tiempo]):not(:has([data-recurso])) .card .t-title2 { font: 900 1.647rem/1.1 var(--font-ui); }
.screen:has([data-tiempo]):not(:has([data-recurso])) .section-header .num { font-weight: 800; }

/* ── 8. Mejoras «Por cuenta» (organizador): segmentado legible sobre la escena ── */
.seg { background: rgba(0,0,0,.35); border: 2px solid #000; border-radius: 12px; padding: 3px; }
.seg > button { color: #FFFFFF; font: 800 .882rem/1.1 var(--font-ui); }                         /* «Por fin» 2,15:1 → blanco sobre escena ≥ 10:1 */
.seg > button[aria-selected="true"] { color: #24211C; background: linear-gradient(180deg, var(--gold-top), var(--gold) 55%, var(--gold-bot)); box-shadow: 0 2px 0 var(--gold-edge); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip--muted {
    color: var(--ink);
  }
}
html[data-theme="dark"] .chip--muted {
  color: var(--ink);
}                     /* 4,38:1 → AA */

@media (prefers-reduced-motion: reduce) {
  .chip-row button:active, .btn--primary:active, .link-row a:active, [data-compare]:active { transform: none; }
}

/* ── 9. Organización pedida por Miguel (3.1.x): Inicio y tab bar de 5 ── 
   Marcado: js-3.1.x-navegacion.patch (renderInicio, analisisNav, tabbar, baseTab). */
/* Losetas resumen: Nº cuentas, TH principal, Objetivo. 3 columnas; con texto grande, una por fila. */
.section:has(> .stat-tiles) { container-type: inline-size; }
.stat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat-tiles > div {
  display: grid; align-content: start; gap: 4px; padding: 10px 8px 12px; border-radius: 12px; color: var(--ink);
  background: var(--panel-2); border: 3px solid var(--panel-edge);
  box-shadow: inset 0 2px 0 var(--panel-hi), inset 0 -2px 0 var(--panel-lo), 0 4px 0 rgba(0,0,0,.35);
}
.stat-tiles b { font: 900 1.412rem/1.05 var(--font-ui); white-space: nowrap; }
.stat-tiles b.obj { font-size: .941rem; line-height: 1.2; white-space: normal; }
.stat-tiles span { font: 600 .706rem/1.25 var(--font-text, var(--font)); color: var(--ink-2); overflow-wrap: anywhere; }
@container (max-width: 19em) {
  .stat-tiles { grid-template-columns: 1fr; }
  .stat-tiles b, .stat-tiles b.obj { font-size: 1.176rem; }
}
/* «Qué hacer ahora»: icono 3D (verde mejorar · dorado objetivo · azul agenda), título en display, subtítulo, chevrón */
.accion__ico {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px;
  border: 2.5px solid var(--e); background: linear-gradient(180deg, var(--t) 0 5px, var(--m) 5px); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 3px 0 var(--e);
}
.accion__ico svg { width: 26px; height: 26px; fill: none; stroke: var(--s, #fff); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.accion__ico.is-go   { --t: var(--go-top); --m: var(--go); --e: var(--go-edge); }
.accion__ico.is-gold { --t: var(--gold-top); --m: var(--gold); --e: var(--gold-edge); --s: #24211C; }
.accion__ico.is-blue { --t: var(--blue-hi); --m: var(--blue); --e: var(--blue-edge); }
/* Tus cuentas: miniatura TH vía thumb() + número TH entero en chip (nunca «TH1/8») */
.th-tile { flex: none; display: grid; justify-items: center; }
.th-tile > .thumb { background: var(--panel-3); box-shadow: inset 0 0 0 2px rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.5); }
.th-tile__n {
  position: relative; margin-top: -8px; padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  background: var(--blue); color: #FFFFFF; border: 1.5px solid var(--blue-edge);               /* 5,8:1 · 8,4:1 oscuro */
  font: 900 .706rem/1.15 var(--font-ui); letter-spacing: 0;
}
.inicio-h2 { margin: var(--sp-6) var(--margin-r) var(--sp-2) var(--margin-l); color: var(--on-dark); font: 900 1.176rem/1.2 var(--font-ui); text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.inicio-h2 > span { color: var(--on-dark-2); font: 600 .765rem/1.3 var(--font-text, var(--font)); text-shadow: none; }
/* Botón de ajustes (Copia/Acerca de con la FCP) en la cabecera de Inicio: pergamino, 44×44 */
.navbar__trail .btn-ajustes { padding: 0 9px 2px; min-width: 44px; justify-content: center; }
/* Análisis usa enlaces. Agenda usa botones. Los dos tienen que poder encoger: si no, «En curso» se sale del iPhone. */
.seg--nav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.seg--nav > :is(a, button) {
  display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 0 6px; border-radius: 9px; text-align: center;
  color: #FFFFFF; text-decoration: none; font: 800 .882rem/1.1 var(--font-ui); white-space: normal;
}
.seg--nav > :is(a, button)[aria-selected="true"] { color: #24211C; background: linear-gradient(180deg, var(--gold-top), var(--gold) 55%, var(--gold-bot)); box-shadow: 0 2px 0 var(--gold-edge); }
/* La franja («11 cuentas entre 19:00 y 20:00: una sesión») no cabe en una sola línea del tablón. */
.screen:has([data-agenda]) > .section > .section-header { max-width: 100%; box-sizing: border-box; white-space: normal; }
.screen:has([data-agenda]) > .section > .section-header > span { min-width: 0; white-space: normal; }
.screen > .seg-wrap:first-of-type { margin-top: var(--sp-3); }

/* 3.1.2: orden de hoy y objetivos de flota. El tema forzado manda sobre el del sistema. */
.orden-list { counter-reset: orden; }
.orden-list > li { counter-increment: orden; }
.orden-n {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px;
  background: var(--blue); color: #fff; border: 1.5px solid var(--blue-edge);
  font: 900 .882rem/1 var(--font-ui);
}
.orden-list > li > .row::before { content: none; }

/* 3.1.5: menas del equipamiento. Losetas del estilo 3.1.2, no la ficha de otra app. */
.section:has(> .card.eq-total) { container-type: inline-size; }
.eq-ores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 8px; }
.eq-ores > div {
  display: grid; align-content: start; gap: 2px; min-width: 0; padding: 8px 6px 10px; border-radius: 12px;
  background: var(--panel-3); border: 2px solid var(--panel-edge);
}
.eq-ores b { font: 900 .95rem/1.15 var(--font-ui); overflow-wrap: anywhere; }
.eq-ores span { font: 700 .7rem/1.2 var(--font-ui); color: var(--ink-2); }
@container (max-width: 18em) { .eq-ores { grid-template-columns: 1fr; } }
.eq-pieces { list-style: none; margin: 0; padding: 0; }
.eq-piece + .eq-piece { margin-top: 12px; padding-top: 12px; box-shadow: inset 0 0.5px var(--separator); }
.eq-piece__top { display: flex; align-items: flex-start; gap: 8px; }
.eq-piece__open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0; border: 0; background: none; color: inherit; text-align: left;
}
.eq-piece__open .row__main { min-width: 0; }
.eq-piece__open .row__title { font: 800 .95rem/1.25 var(--font-ui); }
.eq-lvs { list-style: none; margin: 8px 0 0; padding: 0; }
.eq-lv {
  display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline;
  padding-top: 6px; font: 600 .75rem/1.35 var(--font-text, var(--font)); color: var(--ink-2);
}
.eq-lv b { color: var(--ink); min-width: 3.2em; }
button.row--tile:active { transform: translateY(2px); box-shadow: inset 0 2px 0 var(--panel-hi), 0 2px 0 rgba(0,0,0,.35); background: var(--panel-2); }

/* 3.1.6: perfil de la cuenta. Losetas del estilo 3.1.2, sin ficha de otra app. */
.perfil-head { display: grid; gap: 12px; }
.perfil-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.perfil-id .row__main { min-width: 0; }
.perfil-id .row__title { font: 900 1.25rem/1.2 var(--font-ui); }
.perfil-note { margin: 0; }
.perfil-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 8px; }
.perfil-tiles > div {
  display: grid; align-content: start; gap: 4px; padding: 10px 8px 12px; border-radius: 12px; color: var(--ink);
  background: var(--panel-3); border: 2px solid var(--panel-edge);
}
.perfil-tiles b { font: 900 1.412rem/1.05 var(--font-ui); }
.perfil-tiles span { font: 700 .706rem/1.25 var(--font-ui); color: var(--ink-2); }

/* 3.1.7: los dos modos de la torre multiusos en la ficha. */
.ficha-modes { display: flex; justify-content: center; align-items: flex-end; gap: 16px; }
.ficha-modes figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ficha-modes figcaption { margin: 0; }

/* 3.1.8: sesión Actualizar todas. */
.act-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.act-count { margin: 0; font: 900 2rem/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.act-bar {
  height: 14px; margin-top: 10px; border-radius: 8px; overflow: hidden;
  background: var(--panel-3); border: 2px solid var(--panel-edge);
}
.act-bar > span { display: block; height: 100%; width: 0; background: var(--tint, #3d8bfd); }
.act-actions { display: grid; gap: 8px; }
.act-paste {
  width: 100%; min-height: 8rem; box-sizing: border-box; resize: vertical;
  padding: 10px 12px; border-radius: 12px; border: 2px solid var(--panel-edge);
  background: var(--panel); color: var(--ink); font: 500 .85rem/1.4 ui-monospace, monospace;
}
.aviso-discreto {
  position: fixed; z-index: 80; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
  max-width: calc(100vw - 32px); margin: 0; pointer-events: none;
  padding: 10px 14px; border-radius: 999px;
  background: var(--panel-2); color: var(--label);
  font: 600 13px/18px var(--font); letter-spacing: -0.01em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}

/* 3.1.13: Inicio y Cuentas más densos. Mismos datos, menos hueco. */
.screen:has(.stat-tiles) > .section,
.screen:has(.fleet-card) > .section { margin-bottom: 16px; }
.screen:has(.stat-tiles) .list--tiles,
.screen:has(.fleet-card) .list--tiles { gap: 6px; }
.screen:has(.stat-tiles) .row--tile,
.screen:has(.fleet-card) .row--account { padding: 8px; gap: 8px; row-gap: 4px; }
.screen:has(.stat-tiles) .meter,
.screen:has(.fleet-card) .meter { margin-top: 4px; }
.fleet-card > .t-footnote { grid-column: 1 / -1; padding: 6px 8px; }
.row--account {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
.row--account > .thumb { grid-column: 1; }
.row--account > .row__main { grid-column: 2; min-width: 0; }
.row--account > .row__tools {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.row--account .row__tools .btn-text { margin-left: 0; }

/* 3.1.16: un solo espaciado y el aviso ⓘ. La rejilla de la fila de cuenta se queda. */
.screen:has(.stat-tiles) > .section,
.screen:has(.fleet-card) > .section { margin-bottom: var(--sp-8); }
.screen:has(.stat-tiles) .list--tiles,
.screen:has(.fleet-card) .list--tiles { gap: 10px; }
.screen:has(.stat-tiles) .row--tile,
.screen:has(.fleet-card) .row--account { padding: var(--sp-2) var(--sp-4); gap: var(--sp-3); row-gap: 8px; }
.screen:has(.stat-tiles) .meter,
.screen:has(.fleet-card) .meter { margin-top: 0; }
.section-head, .title-line {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px;
}
.section-head > .section-header { flex: 1 1 auto; margin: 0; }
.section-head > :is(h2, .t-headline) { flex: 1 1 auto; margin: 0; }
.title-line { margin: -4px var(--margin-r) var(--sp-4) var(--margin-l); }
.title-line > .large-sub { margin: 0; flex: 1 1 auto; }
.section-head > .info-pop, .title-line > .info-pop { flex: 1 0 100%; margin: 4px 0 0; }
.info {
  flex: none; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 2px solid var(--gold-edge); border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-top), var(--gold) 55%, var(--gold-bot));
  color: #24211C; font: 800 1.15rem/1 var(--font-ui);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 2px 0 var(--gold-edge);
}
.info[aria-expanded="true"] { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 0 0 var(--gold-edge); }
.info-pop {
  margin: 6px 0 0; padding: 8px 12px; border-radius: 12px;
  background: var(--panel); color: var(--ink); border: 2px solid var(--panel-edge);
  font: 500 .82rem/1.35 var(--font);
}
.info-pop[hidden] { display: none; }
.chip-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.card > .section-head { margin-bottom: 8px; }

/* 3.1.17: cifras manuales. El modo oscuro usa los mismos tonos de panel. */
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.res-grid[hidden] { display: none; }
.res-grid label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font: 600 0.75rem/1.2 var(--font); color: var(--label-2); }
.res-grid input {
  width: 100%; min-width: 0; min-height: 44px; padding: 0 8px;
  border: 2px solid var(--panel-edge); border-radius: var(--r-card);
  background: var(--panel); color: var(--ink);
  font: 400 1rem/1.3 var(--font); font-variant-numeric: tabular-nums;
}
.card > [data-recursos-dia] { margin-top: 4px; }

/* 4.2.0: el plan decide. El botón cabe al lado del nombre y los dos chips se ven enteros. */
.chip-row.chip-row--plan {
  flex-wrap: wrap; overflow: visible;
  -webkit-mask-image: none; mask-image: none;
}
.chip-row.chip-row--plan::after { content: none; }
.chip-row.chip-row--plan::before { min-width: 0; }
[data-plan-ahora] .row__trail { flex: none; }
[data-plan-ahora] .btn.btn--small { min-height: 44px; padding: 0 12px; }
[data-plan-ahora] .row__sub,
[data-plan-sesiones] .row__sub,
[data-plan-bloqueo] .row__title,
[data-plan-bloqueo] .row__sub,
[data-hoy-cuentas] .row__sub { white-space: normal; overflow-wrap: anywhere; }

/* 4.2.1: tarjeta de coste. Cuadrada, cifra arriba, dibujo al centro, nombre debajo. */
.mejora-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}
.mejora-slot { min-width: 0; display: flex; flex-direction: column; }
.mejora {
  aspect-ratio: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  margin: 0;
  padding: 6px 6px 8px;
  overflow: hidden;
  border-radius: 18px;
  border: 2px solid #1E1B16;
  background: var(--panel-2);
  color: var(--ink);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
  text-align: center;
}
.mejora__coste {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 2px 8px; width: 100%; min-width: 0; margin: 0;
  font: 800 .75rem/1.1 var(--font-ui, var(--font));
}
.mejora__recurso { display: inline-flex; align-items: center; gap: 3px; min-width: 0; max-width: 100%; }
.mejora__recurso .num { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mejora__vacio { color: var(--label-2); }
.recurso {
  --size: 18px;
  position: relative;
  width: var(--size); height: var(--size);
  flex: none; display: block; overflow: hidden;
}
.recurso.is-ajuste > img {
  position: absolute;
  width: calc(var(--dw) * 1px);
  height: calc(var(--dh) * 1px);
  max-width: none; max-height: none;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  object-fit: fill;
}
.mejora__fig { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; width: 100%; }
.btn-mejorar,
.btn-mejorar__cuerpo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-mejorar__cuerpo { display: inline-flex; gap: 6px; max-width: 100%; min-width: 0; }
.btn-mejorar__icono { position: static; --size: 24px; }
.btn-mejorar__texto { line-height: 1; }
.mejora__fig .thumb { --size: 64px; }
.mejora__nombre, .mejora__nivel, .mejora__pie {
  max-width: 100%; margin: 0;
  overflow: hidden;
}
.mejora__nombre, .mejora__nivel { text-overflow: ellipsis; white-space: nowrap; }
/* La hora («acaba vie 16/10 19:00») no cabe en una línea de la tarjeta cuadrada: si no, el reloj se corta en «19…». */
.mejora__pie {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.mejora__nombre { font: 700 .75rem/1.15 var(--font); }
.mejora__nivel, .mejora__pie { font-size: .68rem; color: var(--label-2); }
.mejora-hecho { width: 100%; min-height: 44px; margin-top: 6px; }
.plan-hub {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 10px; border-radius: 14px; color: inherit; text-decoration: none;
  background: var(--panel-2); border: 3px solid var(--panel-edge);
}
.plan-hub__head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px; align-items: center; min-width: 0;
}
.plan-hub__id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan-hub__nombre { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-hub__colas, .plan-hub__fin { font-size: .72rem; color: var(--label-2); font-variant-numeric: tabular-nums; }
.plan-hub__fin { white-space: nowrap; }
.plan-hub__vacio { color: var(--label-2); font-weight: 800; }
.plan-hub__motivo {
  display: block; min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .72rem; color: var(--label-2);
}
.plan-hub .mejora { background: var(--panel); }
.plan-destacada {
  display: flex; align-items: center; gap: 12px;
  margin: 8px var(--margin-r) 16px var(--margin-l);
  min-height: 84px; padding: 12px 14px; border-radius: 16px;
  text-decoration: none; color: #24211C;
  background: linear-gradient(180deg, var(--gold-top), var(--gold) 46%, var(--gold-bot));
  border: 3px solid var(--gold-edge);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.75), 0 4px 0 var(--gold-edge);
}
.plan-destacada:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,255,255,.75), 0 1px 0 var(--gold-edge); }
.plan-destacada__ico {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: var(--gold); background: #3E2918;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 2px 0 #1A120C;
}
.plan-destacada .row__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan-destacada .row__title,
.plan-destacada .row__sub { white-space: normal; overflow: visible; text-overflow: clip; }
.plan-destacada .row__title { font: 900 1.2rem/1.15 var(--font-ui); color: #24211C; }
.plan-destacada .row__sub { font: 700 .78rem/1.25 var(--font-ui); color: #3E2918; }
.plan-destacada .chevron { flex: none; width: 8px; height: 13px; }
.plan-fab {
  --fab-borde: var(--gold-edge);
  position: fixed; z-index: 25;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px);
  width: 56px; height: 56px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; color: #24211C;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  border: 2.5px solid var(--fab-borde);
  background: linear-gradient(180deg, var(--gold-top), var(--gold) 55%, var(--gold-bot));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 4px 0 var(--fab-borde), 0 8px 16px rgba(0,0,0,.35);
}
.plan-fab:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 1px 0 var(--fab-borde); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plan-fab { --fab-borde: #1A120C; }
}
html[data-theme="dark"] .plan-fab { --fab-borde: #1A120C; }
.plan-fab.is-arrastre,
.plan-fab.is-arrastre:active {
  transform: none; transition: none;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7), 0 6px 0 var(--fab-borde), 0 14px 28px rgba(0,0,0,.5);
}
@media (prefers-reduced-motion: no-preference) {
  .plan-fab.is-snap { transition: left 180ms ease, top 180ms ease; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-fab:active { transform: none; }
}
.plan-fab__icono { --size: 40px; }
.plan-destacada__ico svg {
  width: 26px; height: 26px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.sheet--plan { background: var(--scene); }
.sheet--plan .sheet__bar h2,
.sheet--plan .sheet__bar .btn-text { color: #FFFFFF; }
.sheet--plan .sheet__bar h2 { font-family: var(--font-ui); font-weight: 900; }
.hoy-cuenta {
  display: block; color: inherit; text-decoration: none;
  padding: 10px 12px 12px;
}
.hoy-cuenta .row__title { margin-bottom: 8px; }
.list > li > .mejora-grid { padding: 0 12px 12px; }
.coste-linea { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.coste-linea .mejora__coste { width: auto; justify-content: flex-start; font-size: .882rem; }
.t-body.cubre-ok { color: var(--green-text); font-weight: 700; }
.t-body.cubre-no { color: var(--gold); font-weight: 700; }

/* 4.2.1: aire arriba y abajo, sin sacar el botón de la línea de su título. */
button:not(.navbar *):not(.seg *):not(.chip-row *):not(.alert *):not(.sheet__bar *):not(.row):not(.row *):not(.section-head > *):not(.title-line > *):not(.plan-fab):not(.temas *),
a.btn {
  margin-top: 12px;
  margin-bottom: 12px;
}
.section-head,
.title-line { align-items: center; }
.section-head > button.info,
.title-line > button.info { margin: 0; align-self: center; }
.screen > .section > .section-head > .section-header,
.screen > .section > .section-head > h2.section-header,
.section-head > :is(h2, .t-headline, .section-header) {
  margin-top: 0;
  margin-bottom: 0;
}
.section-head,
.card > .section-head { margin-bottom: 12px; }
.seg-wrap,
.chip-row,
.motor-grid,
.alert__actions {
  margin-top: 12px;
  margin-bottom: 12px;
}
.motor-grid { gap: 12px; }
.chip-row { row-gap: 12px; align-items: center; }
.section-head > .info-pop,
.title-line > .info-pop,
.info-pop { margin-top: 12px; }
.sheet__actions .btn + .btn { margin-top: 12px; }
.mejora-hecho { margin-top: 12px; margin-bottom: 12px; }