/* ============================================================
   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;
  --accent-hover: #185a6e;

  --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; --bad-soft: #fdf8f7;
  --neutral-bg: #eef1f4;
  --on-brand: #ffffff;
  --campo: #ffffff;
  /* El lateral (el raíl de la administración), con los tonos de Norte. */
  --side: #ffffff; --side-ink: #3a4a5a; --side-on: var(--brand-soft); --side-on-ink: var(--brand);

  /* 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; --accent-hover: #7dcde0;
  --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; --bad-soft: #2a1b18;
  --neutral-bg: #222e3a; --on-brand: #08131d; --campo: #121b24;
  --side: #121a22; --side-ink: #c3d0dd; --side-on: #173149; --side-on-ink: #a9d0f2;
  --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; --accent-hover: #7dcde0;
    --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; --bad-soft: #2a1b18;
    --neutral-bg: #222e3a; --on-brand: #08131d; --campo: #121b24;
    --side: #121a22; --side-ink: #c3d0dd; --side-on: #173149; --side-on-ink: #a9d0f2;
    --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-family: inherit; font-size: var(--t-sm); color: var(--ink); cursor: pointer;
  text-decoration: none; box-sizing: border-box;
}
.cuenta-item:hover { background: var(--surface-2); }
.cuenta-legal { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid var(--line); font-size: var(--t-xs); }
.cuenta-legal a { color: var(--muted); }
.cuenta-legal a:hover { color: var(--brand); }

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

/* ================= CONTENIDO ================= */
/* A lo ancho de la ventana (27-10-2026): con 1180 px quedaba una columna
   estrecha en mitad de una pantalla grande. El tope solo evita líneas
   imposibles en monitores de 32 pulgadas. */
main#principal { width: 100%; max-width: 1760px; margin: 0 auto; padding: 32px clamp(24px, 3.2vw, 64px) 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 ---- */
/* Un lote es un objeto de verdad: lleva caja, con el filo del color de su
   estado (como los proveedores de Norte). El color va en el filo, no en el fondo. */
.filas { display: grid; gap: 8px; }
.fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(200px, 300px); gap: 24px; align-items: center;
  width: 100%; padding: 14px 18px 14px 20px; border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: var(--r-sm); background: var(--surface);
  text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s;
}
.fila.estado-mal { border-left-color: var(--bad); }
.fila.estado-ok { border-left-color: var(--good); }
.fila.estado-atencion { border-left-color: var(--warn); }
.fila:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.fila.estado-mal:hover { border-left-color: var(--bad); }
.fila.estado-ok:hover { border-left-color: var(--good); }
.fila.compacta { grid-template-columns: minmax(0, 1fr) auto; border-left-color: var(--warn); }
.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 20px; color: var(--muted); font-size: var(--t-sm); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); }

/* ---- La ruta de un lote ---- */
.ruta-mini { display: flex; align-items: center; gap: 4px; }
.ruta-mini i { width: 26px; 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; }
/* El campo mal rellenado, señalado donde está, como en Norte: solo después de pasar por él. */
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--bad); background: var(--bad-soft); }
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:hover { color: var(--accent-hover); }
.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); }

/* ---- La evaluación del riesgo: un criterio por tarjeta, con su prueba ---- */
.crit-form { margin-top: 12px; }
.crit-form .cab { margin-bottom: 6px; }
.crit-form .letra { font-family: var(--font-display); font-weight: 600; color: var(--muted); margin-right: 4px; }
.crit-form .ayuda, .evaluacion .ayuda { color: var(--muted); font-size: var(--t-xs); margin: 0 0 10px; }
.crit-form .campo:last-child { margin-bottom: 0; }
.evaluacion .etiqueta { display: block; font-weight: 600; font-size: var(--t-sm); margin-bottom: 6px; }
.aviso-crit { font-size: var(--t-xs); color: var(--warn-ink); background: var(--warn-bg); border-radius: var(--r-sm); padding: 8px 10px; margin: 0 0 10px; }
.prueba-fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.prueba-fila select { flex: 1 1 240px; min-width: 0; }
.subir { position: relative; overflow: hidden; }
.subir input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.falta { color: var(--warn-ink); font-size: var(--t-xs); margin-top: 8px; }
.medidas { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.medidas h4 { margin: 0 0 10px; font-size: var(--t-sm); }
.medida { background: var(--surface-2); border-radius: var(--r-sm); padding: 14px; margin-bottom: 10px; }
.evaluacion-pie { position: sticky; bottom: 0; background: var(--bg); padding-bottom: 12px; z-index: 2; }

/* ---- 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; }

/* ================= EL PANEL =================
   A lo ancho de la ventana: lo que pide algo a la izquierda y lo que se
   consulta a la derecha, en una columna fija que no se mueve al bajar.
   Andres, 27-10-2026: "se ve super vertical como Google Forms". */
.panel { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; }
.panel-lado { position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: thin; border-left: 1px solid var(--line); padding-left: 32px; }
.panel-rotulo { font-size: var(--t-sm); color: var(--muted); margin: 0 0 6px; }

/* La cifra que manda: lo más grande de la pantalla, y una sola. */
.cifra-manda { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 10px; font-family: var(--font-display); }
.cifra-manda .n { font-size: clamp(72px, 7vw, 108px); font-weight: 600; line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cifra-manda .n.mal { color: var(--bad); }
.cifra-manda .n.atencion { color: var(--warn); }
.cifra-manda .n.ok { color: var(--good); }
.cifra-manda .que { font-family: var(--font-sans); font-size: var(--t-xl); font-weight: 400; color: var(--muted); letter-spacing: -.01em; }

/* El desglose: cuatro cifras en una línea de texto, cada una con su salida. */
.desglose { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 18px; color: var(--muted); font-size: var(--t-base); }
.desglose button { border: 0; background: none; padding: 2px 0; font: inherit; color: inherit; cursor: pointer; }
.desglose button b { color: var(--ink); font-weight: 600; }
.desglose button:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }

/* El reparto de los lotes: parados, se pueden mover, movidos. */
.reparto { display: flex; gap: 3px; height: 10px; margin: 0 0 32px; max-width: 760px; }
.reparto i { flex-basis: 0; min-width: 10px; border-radius: 99px; }
.reparto i.mal { background: var(--bad); }
.reparto i.ok { background: var(--good); }
.reparto i.neutra { background: var(--line-strong); }

/* El paso que toca: la única caja de color del panel. */
.paso-toca { background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--r-md); padding: 20px 24px; margin: 0 0 44px; }
.pt-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.pt-rotulo { font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.pt-cuerpo { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pt-cuerpo h2 { font-size: var(--t-xl); line-height: 1.2; margin: 0 0 4px; }
.pt-detalle { margin: 0; color: var(--muted); font-size: var(--t-sm); max-width: 70ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pt-cuerpo .btn { flex: none; padding: 11px 22px; font-size: var(--t-base); }

/* Un título de sección con su enlace a la derecha. */
.bloque-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.enlace-fuerte { border: 0; background: none; padding: 0; font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--brand); cursor: pointer; }
.enlace-fuerte:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Al lado: secciones planas y pequeñas. */
.lado-bloque { margin-bottom: 36px; }
.lado-bloque > h2 { font-size: var(--t-lg); padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.lado-bloque .dato { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.lado-bloque .dato .k { color: var(--muted); }
.lado-bloque .dato .v { text-align: right; font-weight: 500; }
.lado-bloque .enlace-fuerte { margin-top: 12px; }

/* La fila elegida: la que se ve en el lateral. */
.fila.sel { border-color: var(--brand-line); background: var(--brand-hover); box-shadow: 0 0 0 1px var(--brand-line); }
.fila.sel.estado-mal { border-left-color: var(--bad); }
.fila.sel.estado-ok { border-left-color: var(--good); }
.fila.compacta.sel { border-left-color: var(--warn); }

/* La ficha rápida del lote, en el lateral. */
.previa h2 { font-size: var(--t-xl); line-height: 1.2; margin: 6px 0 12px; }
.previa-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.previa-ref { font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); }
.previa h3 { margin: 22px 0 8px; }
/* La ruta en vertical: bola, nombre y estado; cada paso abre el lote ahí. */
.previa-ruta { list-style: none; margin: 0; padding: 0; position: relative; }
.previa-ruta::before { content: ""; position: absolute; left: 9px; top: 14px; bottom: 14px; width: 2px; background: var(--line); }
.previa-ruta button {
  position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; padding: 7px 8px 7px 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: var(--r-sm);
}
.previa-ruta button:hover .n { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.previa-ruta .bola { width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); box-sizing: border-box; }
.previa-ruta .ok .bola { background: var(--good); border-color: var(--good); }
.previa-ruta .ahora .bola { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); background: var(--surface); }
.previa-ruta .na .bola { border-style: dashed; }
.previa-ruta .n { font-size: var(--t-sm); font-weight: 600; }
.previa-ruta .ahora .n { color: var(--brand); }
.previa-ruta .na .n { color: var(--muted); font-weight: 500; text-decoration: line-through; }
.previa-ruta .pend .n { color: var(--muted); font-weight: 500; }
.previa-ruta .e { font-size: var(--t-xs); color: var(--muted); }
.previa-ruta .ok .e { color: var(--good-ink); }
.previa-ruta .ahora .e { color: var(--brand); font-weight: 600; }
/* Lo que falta: una lista corta con punto ámbar. */
.previa-faltan { list-style: none; margin: 0; padding: 0; }
.previa-faltan li { position: relative; padding: 7px 0 7px 18px; border-bottom: 1px solid var(--line); font-size: var(--t-sm); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.previa-faltan li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.previa-mas { font-size: var(--t-xs); color: var(--muted); margin: 8px 0 0; }
.previa-datos { margin-top: 20px; }
.previa-datos .dato { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.previa-datos .dato .k { color: var(--muted); flex: none; }
.previa-datos .dato .v { text-align: right; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.previa .acciones .btn { width: 100%; }

@media (min-width: 1600px) { .panel { grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; } }
@media (max-width: 1100px) {
  .panel { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* Estrecho: sin lateral; un clic en un lote lo abre (expediente.js, data-previa). */
  .panel-lado { display: none; }
}
@media (max-width: 860px) {
  .pt-cuerpo { flex-direction: column; align-items: flex-start; }
  .cifra-manda .que { font-size: var(--t-lg); }
}

/* ================= LA ENTRADA Y EL ACCESO =================
   La de Norte (ppwr-pilot/styles.css, .entrada-azul, 16-10-2026): pantalla
   entera en el azul de MFW, Geist, cristal y todo alineado al mismo borde.
   Lo que es de Sur es el fondo: en vez de las curvas de nivel del norte,
   parcelas con sus vértices, lo que el Reglamento pide geolocalizar
   (art. 9.1.d), y una de ellas señalada. Solo CSS y un SVG en línea.
   Los colores son de marca y no cambian con el tema. */
.entrada-azul {
  position: fixed; inset: 0; z-index: 40; overflow-y: auto; display: grid; place-items: center;
  padding: 88px 20px 48px; color: #fff; isolation: isolate; font-family: "Geist", var(--font-sans);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='900' viewBox='0 0 1440 900' fill='none'%3E%3Cg stroke='%23ffffff' stroke-opacity='.16' stroke-width='1'%3E%3Cpolygon points='980 620 1090 590 1110 700 1000 720'/%3E%3Cpolygon points='1090 590 1205 612 1220 730 1110 700'/%3E%3Cpolygon points='1205 612 1310 575 1335 690 1220 730'/%3E%3Cpolygon points='1310 575 1440 600 1440 715 1335 690'/%3E%3Cpolygon points='1000 720 1110 700 1080 815 960 840'/%3E%3Cpolygon points='1110 700 1220 730 1190 850 1080 815'/%3E%3Cpolygon points='1335 690 1440 715 1440 830 1320 805'/%3E%3Cpolygon points='960 840 1080 815 1070 900 940 900'/%3E%3Cpolygon points='1080 815 1190 850 1200 900 1070 900'/%3E%3Cpolygon points='1190 850 1320 805 1330 900 1200 900'/%3E%3Cpolygon points='1320 805 1440 830 1440 900 1330 900'/%3E%3Cpolygon points='0 200 90 180 100 285 0 300'/%3E%3Cpolygon points='90 180 175 215 195 320 100 285'/%3E%3Cpolygon points='175 215 250 170 285 270 195 320'/%3E%3Cpolygon points='0 300 100 285 80 390 0 400'/%3E%3Cpolygon points='100 285 195 320 170 410 80 390'/%3E%3Cpolygon points='195 320 285 270 262 372 170 410'/%3E%3C/g%3E%3Cpolygon points='1220 730 1335 690 1320 805 1190 850' fill='%235cc6e0' fill-opacity='.10' stroke='%239fe3f2' stroke-opacity='.55' stroke-width='1.4' stroke-dasharray='5 4'/%3E%3Cg fill='%23ffffff' fill-opacity='.38'%3E%3Ccircle cx='980' cy='620' r='2.2'/%3E%3Ccircle cx='1090' cy='590' r='2.2'/%3E%3Ccircle cx='1110' cy='700' r='2.2'/%3E%3Ccircle cx='1000' cy='720' r='2.2'/%3E%3Ccircle cx='1205' cy='612' r='2.2'/%3E%3Ccircle cx='1220' cy='730' r='2.2'/%3E%3Ccircle cx='1310' cy='575' r='2.2'/%3E%3Ccircle cx='1335' cy='690' r='2.2'/%3E%3Ccircle cx='1080' cy='815' r='2.2'/%3E%3Ccircle cx='960' cy='840' r='2.2'/%3E%3Ccircle cx='1190' cy='850' r='2.2'/%3E%3Ccircle cx='1320' cy='805' r='2.2'/%3E%3Ccircle cx='90' cy='180' r='2.2'/%3E%3Ccircle cx='100' cy='285' r='2.2'/%3E%3Ccircle cx='175' cy='215' r='2.2'/%3E%3Ccircle cx='195' cy='320' r='2.2'/%3E%3Ccircle cx='250' cy='170' r='2.2'/%3E%3Ccircle cx='285' cy='270' r='2.2'/%3E%3Ccircle cx='80' cy='390' r='2.2'/%3E%3Ccircle cx='170' cy='410' r='2.2'/%3E%3Ccircle cx='262' cy='372' r='2.2'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat,
    radial-gradient(46rem 32rem at 92% -6%, rgba(47, 139, 163, .52), transparent 62%),
    radial-gradient(42rem 30rem at -10% 106%, rgba(26, 120, 214, .40), transparent 62%),
    linear-gradient(160deg, #002e57 0%, #004a86 48%, #005191 72%, #003d70 100%);
}
/* La rejilla de puntos, que se desvanece hacia los bordes. */
.entrada-azul::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .15) 1px, transparent 1.3px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 45% 45%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 70% at 45% 45%, #000 30%, transparent 100%);
}
/* Una luz que deriva muy despacio detrás del contenido. */
.entrada-azul::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none; width: 44rem; height: 44rem;
  left: 50%; top: 44%; margin: -22rem 0 0 -22rem; border-radius: 50%; filter: blur(60px); opacity: .5;
  background: radial-gradient(circle at 30% 30%, rgba(76, 170, 255, .55), rgba(47, 139, 163, .25) 45%, transparent 70%);
  animation: entradaLuz 28s ease-in-out infinite alternate;
}
@keyframes entradaLuz {
  0% { transform: translate(-8%, -6%) scale(1); }
  50% { transform: translate(10%, 4%) scale(1.08); }
  100% { transform: translate(-4%, 8%) scale(.96); }
}
@media (prefers-reduced-motion: reduce) { .entrada-azul::after { animation: none; } }

.entrada { position: relative; width: 100%; max-width: 560px; }
/* El logo, arriba a la izquierda como la cabecera de una web: el centro es de Sur. */
.entrada-logo { position: fixed; top: 24px; left: 28px; height: 40px; width: auto; z-index: 2; }
.entrada-titulo {
  font-family: "Geist", var(--font-sans); font-weight: 700; font-size: clamp(72px, 12vw, 128px);
  line-height: .95; letter-spacing: -.055em; margin: 0 0 16px -.06em; color: #fff;
}
.entrada-lema { font-size: clamp(18px, 2.3vw, 23px); line-height: 1.35; color: rgba(255, 255, 255, .80); margin: 0; max-width: 34ch; }

/* Las dos opciones: cristal sobre el azul, una palabra y una flecha. */
.entrada-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 40px 0 0; }
.entrada-op {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit;
  cursor: pointer; padding: 22px; border-radius: 8px; color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 30px rgba(0, 20, 45, .25);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), background .2s, border-color .2s;
}
.entrada-op:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .42); transform: translateY(-3px); }
.entrada-op:active { transform: translateY(-1px) scale(.99); }
.entrada-op:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.entrada-op b { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.entrada-op i { margin-left: auto; font-style: normal; font-size: 22px; color: rgba(255, 255, 255, .85); transition: transform .22s; }
.entrada-op:hover i { transform: translateX(4px); }
.eo-ico { width: 28px; height: 28px; flex: none; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; opacity: .9; }
/* Lo que es cada uno, en un tooltip al pasar o al enfocar. */
.eo-tip {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 3; padding: 10px 13px; border-radius: 12px;
  background: rgba(4, 22, 42, .94); color: #fff; font-size: 13px; font-weight: 400; line-height: 1.45;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .30); opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .16s, transform .16s;
}
.eo-tip::before { content: ""; position: absolute; top: -6px; left: 26px; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.entrada-op:hover .eo-tip, .entrada-op:focus-visible .eo-tip { opacity: 1; transform: none; transition-delay: .25s; }
/* Sin ratón no hay tooltip: el texto va debajo de la palabra, más tenue. */
@media (hover: none) {
  .entrada-op { flex-wrap: wrap; }
  .eo-tip { position: static; flex-basis: 100%; opacity: .78; transform: none; background: none; box-shadow: none; padding: 0; margin-top: 2px; }
  .eo-tip::before { display: none; }
}

.entrada-ejemplo, .entrada-volver, .entrada-enlace {
  display: inline-flex; align-items: center; gap: .35em; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: rgba(255, 255, 255, .9); text-align: left;
}
.entrada-ejemplo { margin-top: 22px; font-size: 17px; font-weight: 600; }
.entrada-ejemplo span { transition: transform .2s; }
.entrada-ejemplo:hover span { transform: translateX(4px); }
.entrada-ejemplo:hover, .entrada-enlace:hover, .entrada-volver:hover { text-decoration: underline; text-underline-offset: 4px; }
.entrada-volver { display: flex; margin-bottom: 26px; font-size: var(--t-sm); color: rgba(255, 255, 255, .75); }
.entrada-enlace { margin-top: 18px; font-size: var(--t-sm); text-decoration: underline; text-underline-offset: 3px; }

/* El idioma, en una pastilla blanca: translúcido se perdía sobre el azul. */
.entrada-idioma { margin: 26px 0 0; }
.entrada-idioma .sel-idioma {
  width: auto; padding: 8px 30px 8px 14px; border-radius: 999px; font-size: var(--t-sm); font-weight: 600;
  background-color: #fff; color: #003a6b; border: 0; box-shadow: 0 4px 14px rgba(0, 20, 45, .25);
}
.entrada-idioma .sel-idioma option { color: #0b1c2c; }
.entrada-pie {
  margin: 28px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: var(--t-xs); color: rgba(255, 255, 255, .62);
}

/* El acceso. Rótulo y campos más grandes que en el resto de la aplicación. */
.entrada-rotulo { display: block; font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); margin-bottom: 6px; }
.entrada-h1 { font-family: "Geist", var(--font-sans); font-weight: 700; font-size: clamp(34px, 4.4vw, 44px); letter-spacing: -.035em; line-height: 1.05; margin: 0 0 24px; color: #fff; }
.entrada-sub { color: rgba(255, 255, 255, .8); font-size: 17px; margin: -8px 0 22px; max-width: 46ch; }
.entrada-azul .campo { margin-bottom: 18px; }
.entrada-azul .campo label { font-size: 17px; font-weight: 500; margin-bottom: 8px; color: rgba(255, 255, 255, .9); }
.entrada-azul input[type="email"], .entrada-azul input[type="password"] {
  font-family: inherit; font-size: 17px; padding: 14px 16px; background: #fff; color: #0b1c2c; border: 1px solid transparent; border-radius: 8px;
}
.entrada-azul input:focus { border-color: transparent; outline: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, .38); }
.entrada-azul .error { color: #ffd0c4; margin: 0 0 12px; }
.entrada-azul .error:empty { min-height: 0; margin: 0; }
.entrada-azul .bien { color: #c8f1de; margin: 0 0 12px; }
.entrada-azul .bien:empty { margin: 0; }
.entrada-azul .btn { font-family: inherit; }
/* Entrar en blanco y de su tamaño: a todo lo ancho parecía otro campo. */
.btn.entrada-entrar { display: flex; min-width: 9rem; padding: 12px 32px; margin-top: 6px; font-size: var(--t-base); background: #fff; color: #003a6b; box-shadow: 0 4px 14px rgba(0, 20, 45, .25); }
.btn.entrada-entrar:hover { background: #e8f1fa; }
/* Entrar, centrado bajo los campos, como en Norte. */
.btn.entrada-entrar.centrado { margin: 6px auto 0; }
.entrada-alta-bts { display: flex; flex-wrap: wrap; gap: 10px; }
.entrada-alta-bts .btn { margin-top: 0; }
.entrada-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font-size: var(--t-xs); }
.entrada-legal a { color: rgba(255, 255, 255, .85); text-underline-offset: 3px; }
.entrada-legal a:hover { color: #fff; }
.btn.entrada-btn-borde { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .75); }
.btn.entrada-btn-borde:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.entrada-alta { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .18); }
.entrada-alta h2 { font-family: inherit; font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); margin: 0 0 8px; }
.entrada-alta p { color: rgba(255, 255, 255, .8); font-size: var(--t-sm); margin: 0 0 14px; max-width: 48ch; }

/* Elegir organización: cada una, cristal como las opciones de la entrada. */
.entrada-azul .cartera-org {
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .24); color: #fff; border-radius: 8px; padding: 16px 18px;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: background .2s, border-color .2s, transform .2s;
}
.entrada-azul .cartera-org:hover, .entrada-azul .cartera-org:focus-visible { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .42); transform: translateY(-2px); }
.entrada-azul .cartera-nombre { font-size: 18px; }
.entrada-azul .cartera-cifras { color: rgba(255, 255, 255, .72); font-size: var(--t-sm); }
.entrada-azul .pildora.info { background: rgba(255, 255, 255, .18); color: #fff; }

@media (max-width: 560px) {
  .entrada-azul { padding-top: 76px; place-items: start center; }
  .entrada-ops { grid-template-columns: 1fr; }
  .entrada-logo { height: 30px; top: 18px; left: 20px; }
}
/* ================= 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; }
}

/* ---- El portal del proveedor, desde la consola (portal.js) ---- */
.fila-enlace { display: flex; gap: 8px; margin: 8px 0 4px; }
.fila-enlace input {
  flex: 1; min-width: 0; min-height: 40px; padding: 8px 10px; font-family: var(--mono); font-size: var(--t-xs);
  color: var(--ink); background: var(--campo); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
}

/* ===== Demostración y cartera ===== */
.isla-demo { flex: none; }
.cartera { display: grid; gap: 10px; }
.cartera-org { display: flex; flex-direction: column; gap: 4px; text-align: left; width: 100%; padding: 14px 16px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface, transparent); color: inherit;
  font: inherit; cursor: pointer; }
.cartera-org:hover, .cartera-org:focus-visible { border-color: var(--brand-2); }
.cartera-nombre { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cartera-cifras { font-size: var(--t-xs); color: var(--muted); }

/* ===== A lo ancho: dos zonas donde antes había una columna ===== */
/* Mi empresa: lo que se contesta a la izquierda; el papel y sus
   obligaciones a la derecha, a la vista mientras se contesta. */
.dos-zonas { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.zona-resultado { position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; padding-right: 4px; }
.dos-zonas .ficha { max-width: none; }
/* Proveedores y clientes, uno al lado del otro. */
.lado-a-lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 56px; align-items: start; }
@media (max-width: 1100px) {
  .dos-zonas, .lado-a-lado { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .zona-resultado { position: static; max-height: none; overflow: visible; }
}
/* Brújula: los cuatro papeles en columnas, con una regla de color arriba. */
.papeles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.papel { border-top: 3px solid var(--brand); padding-top: 12px; }
.papel b { display: block; font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; margin-bottom: 6px; }
.papel .meta { margin-bottom: 8px; }

/* Mapas de parcelas (mapa-parcelas.js): el de la lista de lotes, el del
   lote y la comparación 2020 / hoy. Los editables viven en proveedor.css. */
.mapa-parcelas {
  width: 100%; height: 420px; margin-top: 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; background: var(--bg-2);
}
.mapa-parcelas[hidden] { display: none; }
/* Los de mirar llevan la cortinilla 2020 / hoy (comparar): el contenedor no
   es un mapa, lo es cada lado. */
.mapa-comparar { margin: 0 0 20px; }
.mapa-comparar[hidden] { display: none; }
.mapa-parcelas .maplibregl-ctrl-attrib { font-size: 11px; }
.mapa-parcelas .maplibregl-popup-content { font: 600 var(--t-xs) var(--font-body, inherit); padding: 6px 10px; color: #10202e; }
/* La comparación 2020 / hoy: dos mapas uno encima del otro y el de 2020
   recortado hasta la raya (--x). clip-path recorta también los clics: a la
   derecha de la raya se mueve el mapa de hoy, y el otro le sigue. */
.mapa-fondo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mapa-fondo:empty { display: none; }
.mapa-fondo label {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--t-xs); color: var(--muted);
}
.mapa-fondo input { position: absolute; opacity: 0; pointer-events: none; }
.mapa-fondo label:has(input:checked) { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); font-weight: 600; }
.mapa-fondo label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.mapa-cortina {
  position: relative; height: 480px; margin-top: 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; background: var(--bg-2);
}
.mapa-cortina .mapa-parcelas { position: absolute; inset: 0; height: auto; margin: 0; border: 0; border-radius: 0; }
.mapa-cortina [data-lado="antes"] { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.cortina-raya {
  position: absolute; top: 0; bottom: 0; left: var(--x); width: 28px; margin-left: -14px; z-index: 3;
  cursor: ew-resize; touch-action: none; display: flex; align-items: center; justify-content: center;
}
.cortina-raya::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 32, 46, .35); }
.cortina-raya span {
  position: relative; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(16, 32, 46, .45);
}
.cortina-raya span::before, .cortina-raya span::after {
  content: ""; position: absolute; top: 9px; border: 5px solid transparent;
}
.cortina-raya span::before { left: 2px; border-right-color: #10202e; }
.cortina-raya span::after { right: 2px; border-left-color: #10202e; }
.cortina-raya:focus-visible span { outline: 2px solid var(--brand); outline-offset: 2px; }
.cortina-rotulo {
  position: absolute; top: 10px; z-index: 2; pointer-events: none; max-width: calc(50% - 30px);
  padding: 6px 10px; border-radius: var(--r-sm); background: rgba(16, 32, 46, .72); color: #fff;
  display: flex; flex-direction: column; gap: 2px;
}
.cortina-rotulo.izq { left: 10px; }
.cortina-rotulo.der { right: 54px; text-align: right; }
.cortina-rotulo b { font-family: var(--font-display); font-size: var(--t-sm); font-weight: 600; }
.cortina-rotulo span { font-size: var(--t-xs); opacity: .9; }
.mapa-atribucion { margin: 6px 0 0; font-size: 11px; color: var(--muted); }
@media (max-width: 760px) {
  .mapa-cortina { height: 400px; }
  .cortina-rotulo { max-width: calc(50% - 20px); }
  .cortina-rotulo.der { right: 46px; }
}
.mapa-leyenda { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; font-size: var(--t-xs); color: var(--muted); }
.mapa-leyenda label, .mapa-leyenda span { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.mapa-leyenda label { cursor: pointer; }
.mapa-leyenda .muestra { width: 14px; height: 14px; border-radius: 3px; background: var(--c); display: inline-block; }
.mapa-leyenda .muestra.borde { background: transparent; border: 2.5px solid var(--c); }
@media (min-width: 960px) { .mapa-comparar { grid-template-columns: 1fr 1fr; } }

/* El editor de parcelas del proveedor, dentro de la ficha del lote. */
.editor-parcelas { width: 100%; min-height: 360px; border: 0; display: block; margin-top: 8px; background: transparent; }
.parcelas-ficha { width: 100%; max-width: 1760px; margin: -64px auto 0; padding: 0 clamp(24px, 3.2vw, 64px) 96px; }
.parcelas-ficha[hidden] { display: none; }
@media (max-width: 760px) { .parcelas-ficha { margin-top: -90px; padding: 0 16px 110px; } }

/* Las pruebas de legalidad del lote, en el paso Origen. */
.lista-pruebas { margin: 0 0 10px; padding-left: 18px; font-size: var(--t-sm); }
.lista-pruebas li { margin-bottom: 4px; }
.mover-form { max-width: 360px; margin-top: 16px; }
.ref-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.4fr); gap: 0 12px; align-items: end; margin-bottom: 8px; }
.ref-form .acciones, .ref-form .error { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 860px) { .ref-form { grid-template-columns: minmax(0, 1fr); } }