/* ============================================================
   Sistema de diseño de eudr-pilot. El de Norte (ppwr-pilot/styles.css,
   26-10-2026): mismos tokens, misma escala, misma isla, modo oscuro.
   Andres lo pidió para EUDR el 26-10-2026 (boceto A).

   Reglas que se heredan y no se tocan:
   - Nada de tarjetas blancas apiladas sobre un lienzo gris. Las secciones
     van planas, con una regla fina bajo el h2. Solo llevan caja los objetos
     de verdad: un lote abierto, un aviso, una tabla.
   - Verde, ámbar y rojo dicen estado, no marca.
   - Los colores solo como variables: el modo oscuro los cambia todos de una.
   - Sin contadores de días: la fecha se da, la cuenta atrás no.
   ============================================================ */

:root {
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --bg: #f2f5f8;
  --bg-2: #e7edf3;
  --surface: #ffffff;
  --surface-2: #f6f9fb;
  --ink: #1a2530;
  --muted: #5f6f7e;
  --line: #dde5ec;
  --line-strong: #c9d5e0;

  --brand: #005191;
  --brand-2: #003a6b;
  --brand-soft: #e3edf6;
  --brand-line: #c6d9ea;
  --brand-hover: #eaf0f5;
  --accent: #2f8ba3;
  --accent-ink: #1f6f86;

  --good: #2f8f6b; --good-bg: #e7f2ec; --good-ink: #1d6b52; --good-line: #cfe6da;
  --warn: #c1852a; --warn-bg: #f7eed9; --warn-ink: #7a5313; --warn-line: #eaddbf;
  --bad: #bd4b3b;  --bad-bg: #f7e6e2;  --bad-ink: #8f3427;  --bad-line: #eecec6;
  --neutral-bg: #eef1f4;
  --on-brand: #ffffff;
  --campo: #ffffff;

  /* Escala: seis tamaños, cada uno con un trabajo. */
  --t-xs: .75rem;
  --t-sm: .875rem;
  --t-base: 1rem;
  --t-lg: 1.25rem;
  --t-xl: 1.625rem;
  --t-2xl: 2.125rem;

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --shadow: 0 1px 2px rgba(10, 35, 60, .05), 0 10px 30px rgba(10, 35, 60, .07);
  --shadow-sm: 0 1px 3px rgba(10, 35, 60, .08);

  /* Nombres antiguos que aún usa algún estilo en línea. */
  --linea: var(--line);
  --linea-fina: var(--line);
  --tinta-3: var(--muted);
}

/* ---- Modo oscuro: Oscuro, o Sistema con el sistema en oscuro ---- */
:root[data-tema="oscuro"] {
  --bg: #0f161d; --bg-2: #16212b; --surface: #16202a; --surface-2: #1c2833;
  --ink: #e3eaf0; --muted: #97a6b4; --line: #26333f; --line-strong: #344555;
  --brand: #6aaee6; --brand-2: #a9d0f2; --brand-soft: #173149; --brand-line: #29496a; --brand-hover: #1f3347;
  --accent: #4fb3cc; --accent-ink: #5cbcd4;
  --good: #4fb48c; --good-bg: #15302a; --good-ink: #8ad6b4; --good-line: #25483d;
  --warn: #d9a24a; --warn-bg: #2f2614; --warn-ink: #e9c98a; --warn-line: #4c3d1f;
  --bad: #e3806f;  --bad-bg: #3a201b;  --bad-ink: #f2a596;  --bad-line: #5a2f27;
  --neutral-bg: #222e3a; --on-brand: #08131d; --campo: #121b24;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="sistema"] {
    --bg: #0f161d; --bg-2: #16212b; --surface: #16202a; --surface-2: #1c2833;
    --ink: #e3eaf0; --muted: #97a6b4; --line: #26333f; --line-strong: #344555;
    --brand: #6aaee6; --brand-2: #a9d0f2; --brand-soft: #173149; --brand-line: #29496a; --brand-hover: #1f3347;
    --accent: #4fb3cc; --accent-ink: #5cbcd4;
    --good: #4fb48c; --good-bg: #15302a; --good-ink: #8ad6b4; --good-line: #25483d;
    --warn: #d9a24a; --warn-bg: #2f2614; --warn-ink: #e9c98a; --warn-line: #4c3d1f;
    --bad: #e3806f;  --bad-bg: #3a201b;  --bad-ink: #f2a596;  --bad-line: #5a2f27;
    --neutral-bg: #222e3a; --on-brand: #08131d; --campo: #121b24;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .35);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-2xl); letter-spacing: -.01em; line-height: 1.12; margin: .1em 0 .25em; }
h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg); letter-spacing: -.01em; }
h3 { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 24px 0 10px; }
p { margin: 0 0 .8rem; }
a { color: var(--brand); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================= LA BARRA CON LA ISLA =================
   La marca a la izquierda, las secciones en una isla en el centro (solo la
   abierta lleva su nombre; las demás, icono y tooltip) y la cuenta a la
   derecha. En el móvil la isla baja al pie. */
.barra-isla {
  position: sticky; top: 0; z-index: 40; height: 64px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 0 24px;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
}
.barra-isla:empty { display: none; }
.isla-marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.isla-marca img { height: 26px; }
.logo-oscuro { display: none; }
:root[data-tema="oscuro"] .logo-claro { display: none; }
:root[data-tema="oscuro"] .logo-oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root[data-tema="sistema"] .logo-claro { display: none; }
  :root[data-tema="sistema"] .logo-oscuro { display: block; }
}
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; letter-spacing: -.01em; padding-left: 10px; border-left: 1px solid var(--line-strong); }
.isla-empresa { font-size: var(--t-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.isla {
  display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(10, 35, 60, .05), 0 8px 24px rgba(10, 35, 60, .07);
}
.isla-btn {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: none;
  color: var(--muted); cursor: pointer; font-size: var(--t-sm); font-weight: 500;
}
.isla-btn .ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.isla-btn .lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.isla-btn:hover { background: var(--surface-2); color: var(--ink); }
.isla-btn.sel { background: var(--brand); color: var(--on-brand); padding: 0 14px 0 12px; }
.isla-btn.sel .lab { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.isla-cnt {
  position: absolute; top: 1px; right: 0; min-width: 17px; padding: 0 4px; font-size: 10px; line-height: 15px;
  text-align: center; border-radius: 99px; background: var(--bad); color: #fff; font-weight: 700;
}
.isla-btn.sel .isla-cnt { position: static; background: color-mix(in srgb, var(--on-brand) 22%, transparent); color: var(--on-brand); }
.isla-sep { flex: none; width: 1px; height: 20px; margin: 0 4px; background: var(--line-strong); }
.isla-tt {
  position: absolute; top: calc(100% + 10px); left: 50%; z-index: 50; width: max-content; max-width: 240px;
  transform: translate(-50%, -4px); background: var(--ink); color: var(--bg); border-radius: var(--r-sm);
  padding: 8px 10px; font-size: var(--t-xs); font-weight: 400; line-height: 1.45; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s, transform .12s;
}
.isla-tt b { display: block; font-size: var(--t-sm); font-weight: 600; margin-bottom: 2px; }
.isla-btn:hover .isla-tt, .isla-btn:focus-visible .isla-tt { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.isla-btn.sel .isla-tt { display: none; }
@media (prefers-reduced-motion: reduce) { .isla-tt { transition: none; } }

.isla-der { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.guardado { font-size: var(--t-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guardado.mal { color: var(--bad-ink); font-weight: 600; }
.isla-cuenta { position: relative; }
.isla-cuenta-btn {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 700; transition: box-shadow .1s;
}
.isla-cuenta-btn:hover .avatar, .isla-cuenta-btn[aria-expanded="true"] .avatar { box-shadow: 0 0 0 3px var(--line); }
.isla-cuenta-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; width: 280px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow);
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.isla-cuenta-menu[hidden] { display: none; }
.cuenta-quien { padding: 8px 10px 10px; font-size: var(--t-sm); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.cuenta-quien b { display: block; }
.cuenta-quien span { color: var(--muted); font-size: var(--t-xs); }
.cuenta-tema { padding: 8px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.cuenta-tema .k { font-size: var(--t-xs); color: var(--muted); margin-bottom: 6px; display: block; }
.segmentado { display: flex; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; }
.segmentado button {
  flex: 1; border: 0; background: var(--surface); color: var(--muted); padding: 6px 8px; font-size: var(--t-xs); cursor: pointer;
}
.segmentado button + button { border-left: 1px solid var(--line-strong); }
.segmentado button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); font-weight: 600; }
/* El idioma: en el menú de la cuenta y en la pantalla de acceso. */
.sel-idioma {
  width: 100%; font: inherit; font-size: var(--t-xs); padding: 6px 8px; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
}
.idioma-acceso { margin-top: 12px; max-width: 180px; }
.cuenta-item {
  display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px;
  border-radius: var(--r-sm); font-size: var(--t-sm); color: var(--ink); cursor: pointer;
}
.cuenta-item:hover { background: var(--surface-2); }

@media (max-width: 1080px) { .guardado { display: none; } .isla-empresa { display: none; } }

/* ================= CONTENIDO ================= */
main#principal { width: 100%; max-width: 1180px; margin: 0 auto; padding: 28px 32px 96px; }
.cabecera { margin-bottom: 28px; }
.cabecera .fila-titulo { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cabecera .fila-titulo h1 { margin-right: auto; }
.miga { font-size: var(--t-sm); color: var(--muted); margin-bottom: 6px; }
.miga button { border: 0; background: none; padding: 0; color: var(--brand); cursor: pointer; font-size: inherit; }
.miga button:hover { text-decoration: underline; }
.sub { color: var(--muted); font-size: var(--t-sm); margin: 0 0 16px; max-width: 72ch; }

/* Secciones planas: espacio y una regla fina bajo el título. */
section.bloque { margin-bottom: 40px; }
section.bloque > h2 { padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.rejilla.dos { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.rejilla.tres { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 16px; }

/* ---- Cifras del Panel ---- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 36px; }
.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px;
  text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .12s;
}
.tile:hover { border-color: var(--line-strong); }
.tile .n { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.tile .l { font-size: var(--t-xs); color: var(--muted); margin-top: 8px; font-weight: 500; }
.tile.mal { background: var(--bad-bg); border-color: var(--bad-line); } .tile.mal .n { color: var(--bad); }
.tile.ok { background: var(--good-bg); border-color: var(--good-line); } .tile.ok .n { color: var(--good); }
.tile.atencion { background: var(--warn-bg); border-color: var(--warn-line); } .tile.atencion .n { color: var(--warn); }

/* ---- Listas de lotes: filas planas con regla fina ---- */
.filas { border-top: 1px solid var(--line); }
.fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(180px, 280px); gap: 20px; align-items: center;
  width: 100%; padding: 14px 6px; border: 0; border-bottom: 1px solid var(--line); background: none;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.fila:hover { background: color-mix(in srgb, var(--surface) 65%, transparent); }
.fila .t { display: block; font-weight: 600; }
.fila .m { display: block; font-size: var(--t-sm); color: var(--muted); }
.fila .que { font-size: var(--t-sm); text-align: right; }
.fila .que span { display: block; color: var(--muted); font-size: var(--t-xs); margin-top: 4px; }
.vacio { padding: 18px 6px; color: var(--muted); font-size: var(--t-sm); border-bottom: 1px solid var(--line); }

/* ---- La ruta de un lote ---- */
.ruta-mini { display: flex; align-items: center; gap: 4px; }
.ruta-mini i { width: 22px; height: 6px; border-radius: 99px; background: var(--line-strong); }
.ruta-mini i.ok { background: var(--good); }
.ruta-mini i.ahora { background: var(--warn); }
.ruta-mini i.na { background: repeating-linear-gradient(90deg, var(--line-strong) 0 3px, transparent 3px 5px); }

.ruta {
  display: flex; align-items: flex-start; margin: 0 0 32px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.paso {
  flex: 1; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-width: 0; padding: 0; border: 0; background: none; text-align: left; color: inherit; cursor: pointer;
}
.paso::after { content: ""; position: absolute; top: 13px; left: 30px; right: 6px; height: 2px; background: var(--line-strong); }
.paso:last-child::after { display: none; }
.paso.ok::after { background: var(--good); }
.paso .bola {
  position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; background: var(--surface); border: 2px solid var(--line-strong); color: var(--muted);
}
.paso.ok .bola { background: var(--good); border-color: var(--good); color: #fff; }
.paso.ahora .bola { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.paso.na .bola { border-style: dashed; }
.paso .n { font-size: var(--t-sm); font-weight: 600; padding-right: 12px; }
.paso .e { font-size: var(--t-xs); color: var(--muted); padding-right: 12px; }
.paso.na .n { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.paso.ahora .n { color: var(--brand); }
.paso[aria-current="step"] .n { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.paso.na[aria-current="step"] .n { text-decoration: line-through underline; }

.dos-col { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.lado { border-left: 1px solid var(--line); padding-left: 24px; }
.lado h3:first-child { margin-top: 0; }
.lado .dato, .kv {
  display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm);
}
.lado .dato .k, .kv .k { color: var(--muted); }
.lado .dato .v, .kv .v { text-align: right; font-weight: 500; }
.lado .nota { font-size: var(--t-xs); color: var(--muted); margin-top: 8px; }

/* ---- Objetos: aquí sí hay superficie ---- */
.row-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px; margin-bottom: 12px;
}
.row-card .cab { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.row-card .titulo { font-weight: 600; }
.row-card .meta, .meta { color: var(--muted); font-size: var(--t-sm); }
.codigo { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.row-card .cab .opciones { align-items: center; flex-wrap: nowrap; }
.row-card .cab .enlace { margin-top: 0; min-height: 0; padding: 2px 0; white-space: nowrap; }
.materia { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.materia:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.cita { font-size: var(--t-xs); color: var(--muted); }

/* ---- Estado: una píldora con su punto ---- */
.pildora {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: 99px;
  font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 700; white-space: nowrap; vertical-align: middle;
}
.pildora::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pildora.ok { background: var(--good-bg); color: var(--good-ink); }
.pildora.atencion { background: var(--warn-bg); color: var(--warn-ink); }
.pildora.mal { background: var(--bad-bg); color: var(--bad-ink); }
.pildora.neutra { background: var(--neutral-bg); color: var(--muted); }
.pildora.info { background: var(--brand-soft); color: var(--brand-2); }

/* ---- Avisos: fondo suave y acento lateral de 4 px ---- */
.banner {
  border-left: 4px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--brand-soft); color: var(--brand-2); padding: 12px 16px; margin-bottom: 12px; font-size: var(--t-sm);
}
.banner .t { font-weight: 600; margin-bottom: 2px; }
.banner .c { opacity: .92; }
.banner .base { font-size: var(--t-xs); opacity: .78; margin-top: 6px; }
.banner.ok { border-left-color: var(--good); background: var(--good-bg); color: var(--good-ink); }
.banner.atencion { border-left-color: var(--warn); background: var(--warn-bg); color: var(--warn-ink); }
.banner.mal { border-left-color: var(--bad); background: var(--bad-bg); color: var(--bad-ink); }
.banner.info { border-left-color: var(--accent); }
.banner ul { margin: 6px 0 0; padding-left: 18px; }

/* Lo que NO se le aplica: no se esconde, se tacha. */
.no-aplica { padding: 11px 2px; border-bottom: 1px dashed var(--line-strong); margin-bottom: 0; }
.no-aplica .t { font-weight: 500; color: var(--muted); text-decoration: line-through; }
.no-aplica .c { color: var(--muted); font-size: var(--t-sm); }
.no-aplica .base { font-size: var(--t-xs); color: var(--muted); margin-top: 4px; }
.no-aplica + :not(.no-aplica) { margin-top: 20px; }

/* ---- Listas de obligaciones ---- */
ul.obligaciones { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
ul.obligaciones li { padding: 12px 0 12px 22px; border-bottom: 1px solid var(--line); position: relative; }
ul.obligaciones li::before { content: ""; position: absolute; left: 4px; top: 20px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
ul.obligaciones .t { font-weight: 600; }
ul.obligaciones .c { color: var(--muted); font-size: var(--t-sm); }
ul.obligaciones .base { font-size: var(--t-xs); color: var(--muted); margin-top: 4px; }

/* ---- Formularios ---- */
.campo { margin-bottom: 16px; }
.campo label { display: block; font-weight: 600; font-size: var(--t-sm); margin-bottom: 4px; }
.campo .ayuda { color: var(--muted); font-size: var(--t-xs); margin-bottom: 6px; }
input[type="text"], input[type="number"], input[type="email"], input[type="password"], input:not([type]), select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: inherit; font-size: var(--t-sm); background: var(--campo); color: var(--ink);
}
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline: 2px solid var(--brand-soft); outline-offset: 0; }
input[type="file"] { font-size: var(--t-sm); color: var(--muted); }
label.casilla { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; font-weight: 400; cursor: pointer; }
label.casilla input { margin-top: 4px; flex: none; }

.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones.columna { flex-direction: column; align-items: stretch; }
.opciones.columna .opcion { text-align: left; border-radius: var(--r-sm); }
.opcion {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 15px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  border-radius: 99px; cursor: pointer; font: inherit; font-size: var(--t-sm);
}
.opcion:hover { border-color: var(--brand-line); background: var(--brand-hover); }
.opcion[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px;
  padding: 9px 20px; border: 0; border-radius: var(--r-sm); background: var(--brand); color: var(--on-brand);
  font: inherit; font-size: var(--t-sm); font-weight: 600; letter-spacing: .01em; cursor: pointer; text-decoration: none;
  transition: background .15s;
}
.btn:hover { background: var(--brand-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.secundario { background: var(--surface-2); color: var(--brand-2); border: 1px solid var(--line-strong); }
.btn.secundario:hover { background: var(--brand-hover); }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.enlace {
  display: inline-block; padding: 4px 0; border: 0; background: none; font: inherit; font-size: var(--t-sm);
  color: var(--brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left;
}
.error { color: var(--bad-ink); font-size: var(--t-sm); min-height: 1.2em; margin-top: 12px; }
.bien { color: var(--good-ink); font-size: var(--t-sm); margin-top: 8px; }

/* ---- Fichas de alta y edición ---- */
.ficha { max-width: 780px; }
.ficha .row-card .campo:last-child { margin-bottom: 4px; }
.resultado-codigo { margin: -6px 0 12px; font-size: var(--t-sm); }

/* ---- Siguiente paso: plano, regla fina y el botón a la derecha ---- */
.siguiente {
  display: flex; justify-content: flex-end; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line);
}
.siguiente .que { color: var(--muted); font-size: var(--t-sm); margin-right: auto; }

/* ---- La "i": la ley se cita, no se recita ---- */
.info-btn {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin: -8px -6px -8px 2px;
  border: 0; background: none; cursor: pointer; color: var(--accent-ink); vertical-align: middle;
}
.info-btn::before {
  content: "i"; display: grid; place-items: center; width: 15px; height: 15px; border: 1.5px solid currentColor;
  border-radius: 50%; font-family: var(--font-display); font-size: .68rem; font-weight: 700; font-style: italic;
}
.globo {
  position: fixed; z-index: 60; max-width: 340px; background: var(--ink); color: var(--bg);
  border-radius: var(--r-sm); padding: 11px 13px; font-size: var(--t-sm); line-height: 1.5; box-shadow: var(--shadow);
}
.globo .base { font-size: var(--t-xs); opacity: .72; margin-top: 6px; display: block; }
details.legal-plegada { margin: 12px 0; }
details.legal-plegada summary { cursor: pointer; font-size: var(--t-sm); color: var(--brand); font-weight: 600; }
details.legal-plegada .cuerpo { font-size: var(--t-sm); color: var(--muted); margin-top: 10px; }

/* ---- Tablas ---- */
.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); min-width: 520px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: var(--surface-2); }
tbody th { text-transform: none; letter-spacing: 0; font-size: var(--t-sm); font-weight: 500; }
tr:last-child td, tr:last-child th { border-bottom: 0; }

/* ---- Criterios del art. 10.2 ---- */
.crit { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.crit .letra { font-family: var(--font-display); font-weight: 600; color: var(--muted); font-size: var(--t-base); }
.crit .que { color: var(--muted); font-size: var(--t-xs); }

/* ---- Aviso de barra ---- */
.cinta { background: var(--warn-bg); color: var(--warn-ink); padding: 8px 24px; font-size: var(--t-sm); border-bottom: 1px solid var(--warn-line); }
.cinta:empty { display: none; }

/* ---- Acceso: sin tarjeta ---- */
.acceso { max-width: 420px; margin: 8vh auto 0; }
.acceso h1 { margin-bottom: 8px; }
.acceso .marca-acceso { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; }
.acceso .marca-acceso img { height: 28px; }

/* ================= MÓVIL ================= */
@media (max-width: 860px) {
  /* Sin desenfoque: con él, la isla fija se quedaría dentro de la barra. */
  .barra-isla { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 0 16px; height: 56px;
    background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .isla {
    position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 45;
    transform: translateX(-50%); max-width: calc(100vw - 20px); overflow-x: auto; scrollbar-width: none; padding: 3px; gap: 0;
  }
  .isla::-webkit-scrollbar { display: none; }
  .isla-btn, .isla-btn.sel { padding: 0 8px; }
  .isla-btn.sel .lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .isla-btn.sel .isla-cnt { position: absolute; box-shadow: 0 0 0 2px var(--brand); }
  .isla-tt { display: none; }
  .isla-sep { margin: 0; }
  main#principal { padding: 20px 16px 110px; }
  h1 { font-size: var(--t-xl); }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .fila { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fila .que { text-align: left; }
  .ruta { overflow-x: auto; padding: 16px; }
  .paso { min-width: 104px; }
  .dos-col { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lado { border-left: 0; padding-left: 0; }
  .cinta { padding: 8px 16px; }
}

@media print {
  .barra-isla, .siguiente, .acciones, .info-btn { display: none !important; }
  body { background: #fff; }
}