/* ==========================================================================
   RematesEC — Sistema de diseño
   Legaltech: sobrio, denso en datos, con jerarquía clara. Soporta tema
   claro y oscuro; el tema se fija antes del primer pintado desde el layout.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
    /* IBM Plex: técnica e institucional, con números de ancho fijo excelentes.
       Se descarta un serif de display: en cifras monetarias el contraste alto
       de un serif estorba la lectura rápida de columnas. */
    --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* Superficies — neutros con sesgo índigo, no gris puro */
    --bg: #f4f4f8;
    --surface: #ffffff;
    --surface-2: #fafafc;
    --surface-hover: #f1f1f7;
    --line: #e4e4ed;
    --line-strong: #d0d0de;

    /* Texto */
    --text: #16162a;
    --text-2: #55566f;
    --text-3: #87889f;

    /* Marca: índigo tinta + azul de acción. */
    --brand: #2a2f66;
    --brand-2: #3d4590;
    --brand-soft: #ecedf7;
    /*
     * El acento es azul, no cobre.
     *
     * Se eligió #175cd3 midiendo, no a ojo: da 5,99:1 con texto blanco encima
     * —cómodo para leer— y se distingue del índigo de marca, que si no
     * parecerían el mismo color mal impreso. Un azul más claro como #2e90fa se
     * ve bonito pero deja el blanco en 3,2:1, por debajo del mínimo legible.
     */
    --accent: #175cd3;
    --accent-hover: #1349a8;
    --accent-soft: #e6effc;
    /* Texto que va ENCIMA del acento. Es variable y no un `#fff` suelto:
       si el acento se aclara, esto tiene que cambiar con él. */
    --sobre-accent: #ffffff;

    /* Semánticos */
    --ok: #0f7a4f;      --ok-soft: #e3f5ec;
    --warn: #c98a12;    --warn-soft: #fdf2da;
    --danger: #b3261e;  --danger-soft: #fceceb;
    --info: #3d4590;    --info-soft: #ecedf7;

    /*
     * La barra lateral tiene sus propios nombres aunque aquí apunten a los
     * colores de siempre. Así su aspecto se cambia en cinco líneas en vez de
     * repasar quince reglas, y sigue siendo la barra clara de siempre.
     */
    --sidebar: var(--surface);
    --sidebar-2: var(--surface-hover);
    --sidebar-text: var(--text);
    --sidebar-text-2: var(--text-2);
    --sidebar-line: var(--line);

    /* Alias con la nomenclatura nueva */
    /* Se usaba en la pantalla de rastreo sin estar definida: el texto tomaba
       el color heredado y no se distinguia del principal. */
    --text-dim: var(--text-3);
    --text-primary: var(--text);
    --text-secondary: var(--text-2);
    --border: var(--line);
    --success: var(--ok);

    --radius: 14px;
    --radius-sm: 9px;
    --radius-pill: 999px;

    --shadow-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
    --shadow-2: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .05);
    --shadow-3: 0 12px 24px -6px rgba(16, 24, 40, .12), 0 4px 8px -4px rgba(16, 24, 40, .06);

    --chart: #5b63c4;
    --chart-soft: rgba(91,99,196,.16);
    --grid: #e9e9f2;

    --sidebar-w: 258px;
    /* Ancho útil máximo del panel. Lo comparten la cabecera y el contenido
       para que los dos acaben en la misma línea vertical. */
    --ancho-max: 1500px;
}

[data-theme="dark"] {
    --bg: #0e0e16;
    --surface: #16161f;
    --surface-2: #1b1b26;
    --surface-hover: #202030;
    --line: #282838;
    --line-strong: #37374d;

    --text: #ececf3;
    --text-2: #9c9db4;
    --text-3: #6e6f87;

    --brand: #7b83d4;
    --brand-2: #949ce4;
    --brand-soft: #1c1d33;
    /* En oscuro el azul se aclara para separarse del fondo, y entonces pide
       tinta encima en vez de blanco: 7,7:1 frente a los 2,6 del blanco. */
    --accent: #53b1fd;
    --accent-hover: #7cc4fe;
    --accent-soft: #10243a;
    --sobre-accent: #16162a;

    --ok: #3fc98a;      --ok-soft: #0f2820;
    --warn: #e0a92e;    --warn-soft: #2a2113;
    --danger: #f2685c;  --danger-soft: #2d1917;
    --info: #949ce4;    --info-soft: #1c1d33;

    --sidebar: var(--surface);
    --sidebar-2: var(--surface-hover);
    --sidebar-text: var(--text);
    --sidebar-text-2: var(--text-2);
    --sidebar-line: var(--line);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-2: 0 4px 10px rgba(0, 0, 0, .35);
    --chart: #949ce4;
    --chart-soft: rgba(148,156,228,.20);
    --grid: #232333;
    --shadow-3: 0 16px 32px rgba(0, 0, 0, .45);
}

*, *::before, *::after { box-sizing: border-box; }

/* Ninguna imagen debe salirse de lo que la contiene. Sin esto, una fotografía
   sin su regla propia se pinta a tamaño natural y descuadra la rejilla. */
img { max-width: 100%; height: auto; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.015em; }
p { margin: 0 0 .6rem; }
code, .mono { font-family: var(--font-mono); font-size: .86em; }
.ico { flex: none; }

::selection { background: var(--brand-soft); color: var(--text); }

/* --- Barra lateral -------------------------------------------------------- */
/*
 * La barra lateral usa sus propios nombres de color aunque hoy apunten a las
 * superficies de siempre. Es lo que permite cambiar su aspecto tocando cinco
 * variables en vez de repasar quince reglas repartidas por la hoja.
 */
.sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 40;
    display: flex; flex-direction: column;
    background: var(--sidebar);
    border-right: 1px solid var(--sidebar-line);
    transition: width .18s ease;
}

.brand-fila {
    display: flex; align-items: center; gap: .5rem;
    padding: 0 .9rem 0 1.1rem; min-height: 84px;
    border-bottom: 1px solid var(--sidebar-line);
}
.brand {
    display: flex; align-items: center; gap: .7rem; flex: 1; min-width: 0;
    padding: .9rem 0; color: var(--sidebar-text);
}
.brand:hover { text-decoration: none; }
.brand-mark {
    display: grid; place-items: center; width: 34px; height: 34px;
    flex: 0 0 34px;
    border-radius: 10px; color: #fff;
    background: linear-gradient(145deg, var(--brand) 0%, var(--brand-2) 100%);
    box-shadow: var(--shadow-2);
}
.brand-text {
    display: flex; flex-direction: column; line-height: 1.15; min-width: 0;
    font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em;
}
/* «REMATES JUDICIALES» bajo el nombre: dice qué es esto a quien entra por
   primera vez, sin robarle peso al logotipo. */
.brand-text em {
    font-style: normal; font-size: .6rem; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--sidebar-text-2);
}

.nav { flex: 1; overflow-y: auto; padding: .9rem .7rem; }
.nav-label {
    display: block; padding: 1rem .6rem .4rem;
    font-size: .7rem; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--sidebar-text-2);
    white-space: nowrap; overflow: hidden;
}
/*
 * Abierto y plegado tienen que verse del mismo tamaño.
 *
 * El icono medía 18 px abierto y 24 plegado, así que al plegar el menú todo
 * daba un salto. Ahora son 22 y 24 —prácticamente iguales— y el texto sube en
 * la misma proporción para que la fila no quede desequilibrada, con un dibujo
 * grande junto a una letra pequeña.
 */
.nav-item {
    position: relative;
    display: flex; align-items: center; gap: .75rem;
    padding: .62rem .6rem; margin-bottom: 3px;
    border-radius: var(--radius-sm);
    color: var(--sidebar-text-2); font-weight: 500; font-size: .93rem;
    white-space: nowrap;
    transition: background .13s ease, color .13s ease;
}
.nav-item .ico { width: 22px; height: 22px; }
.nav-item svg { stroke-width: 1.8; }
.nav-item:hover { background: var(--sidebar-2); color: var(--sidebar-text); text-decoration: none; }

/* El activo lleva barra amarilla a la izquierda además del fondo: el color
   solo no basta para quien no distingue tonos. */
.nav-item.is-active { background: var(--brand-soft); color: var(--brand-2); font-weight: 600; }
.nav-item.is-active::before {
    content: ""; position: absolute; left: -.7rem; top: 50%; transform: translateY(-50%);
    width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: var(--accent);
}
.nav-item.is-active .ico { color: var(--brand-2); }
.nav-count {
    margin-left: auto; font-style: normal; font-size: .7rem; font-weight: 700;
    background: var(--danger); color: #fff;
    padding: .05rem .4rem; border-radius: var(--radius-pill);
}

.sidebar-foot {
    display: flex; align-items: center; gap: .5rem;
    padding: .8rem 1rem; border-top: 1px solid var(--sidebar-line);
}
.sidebar-foot .btn {
    background: transparent; border-color: var(--sidebar-line); color: var(--sidebar-text-2);
}
.sidebar-foot .btn:hover { background: var(--sidebar-2); color: var(--sidebar-text); }

/* --- Barra lateral plegada ------------------------------------------------
   De 258 a 72 px: solo iconos, con el nombre en un globo al pasar por encima.
   La preferencia se guarda en el navegador. */
/* La clase se pone en <html> antes de pintar y en <body> al cargar el JS: la
   primera evita el salto visual, la segunda es la que manda después. */
html.pre-plegada body,
body.nav-plegada { --sidebar-w: 72px; }
html.pre-plegada .brand-text,
html.pre-plegada .nav-item span,
html.pre-plegada .nav-label,
html.pre-plegada .profile strong,
html.pre-plegada .profile small { display: none; }
body.nav-plegada .brand-text,
body.nav-plegada .nav-item span,
body.nav-plegada .nav-label,
body.nav-plegada .profile strong,
body.nav-plegada .profile small,
body.nav-plegada .sidebar-foot .btn span,
html.pre-plegada .sidebar-foot .btn span { display: none; }
body.nav-plegada .brand,
body.nav-plegada .brand-fila,
body.nav-plegada .nav-item,
body.nav-plegada .sidebar-foot { justify-content: center; }

/*
 * Lo que NO cabe en 72 px se retira, no se encoge.
 *
 * Los tres accesos del perfil —favoritos, servicios, alertas— ocupan 115 px en
 * fila y se salían por el borde. No se pierde nada al quitarlos: los tres
 * están en el menú de abajo, con su propio icono. Apretarlos hasta que
 * quepan habría dejado tres botones ilegibles en vez de ninguno.
 */
body.nav-plegada .profile-actions,
html.pre-plegada .profile-actions { display: none; }

/* El avatar, a la medida de la columna */
body.nav-plegada .profile,
html.pre-plegada .profile { padding: .9rem .5rem; }
body.nav-plegada .avatar-lg,
html.pre-plegada .avatar-lg { width: 42px; height: 42px; font-size: 1.05rem; }

/* El pie, solo el icono de salir */
body.nav-plegada .sidebar-foot,
html.pre-plegada .sidebar-foot { padding: .8rem .5rem; }
body.nav-plegada .sidebar-foot .btn,
html.pre-plegada .sidebar-foot .btn { padding: .5rem 0; }

/*
 * Plegado, el icono ES el botón.
 *
 * Con el menú abierto el icono acompaña al texto y 18 px bastan. Plegado no
 * hay texto: ese dibujo es lo único que dice a dónde lleva, y a 18 px en una
 * columna de 72 no se distingue una cosa de otra. Se sube a 24 y se le da al
 * botón alto suficiente para acertar sin apuntar.
 */
body.nav-plegada .nav-item,
html.pre-plegada .nav-item {
    padding-top: .7rem; padding-bottom: .7rem;
    margin-bottom: 4px;
}
body.nav-plegada .nav-item .ico,
html.pre-plegada .nav-item .ico {
    width: 24px; height: 24px;
}
/* Los trazos también engordan: a 24 px un trazo de 1,7 se ve desvaído */
body.nav-plegada .nav-item svg,
html.pre-plegada .nav-item svg { stroke-width: 1.9; }
body.nav-plegada .brand-fila { padding: 0; }
body.nav-plegada .brand { flex: none; }
body.nav-plegada .nav-item { padding-left: 0; padding-right: 0; }
body.nav-plegada .nav-label { padding: .55rem 0 0; height: 1px; }

body.nav-plegada .nav-item[data-nombre]:hover::after {
    content: attr(data-nombre);
    position: absolute; left: calc(100% + .55rem); top: 50%; transform: translateY(-50%);
    z-index: 60; padding: .3rem .6rem; border-radius: var(--radius-sm);
    background: var(--sidebar-2); color: var(--sidebar-text);
    font-size: .8rem; font-weight: 500; white-space: nowrap;
    box-shadow: var(--shadow-2);
}

.nav-plegar {
    display: grid; place-items: center; width: 30px; height: 30px;
    margin-left: auto; flex: none;
    border: 1px solid var(--sidebar-line); border-radius: var(--radius-sm);
    background: transparent; color: var(--sidebar-text-2); cursor: pointer;
}
.nav-plegar:hover { background: var(--sidebar-2); color: var(--sidebar-text); }
body.nav-plegada .nav-plegar { display: none; }

.avatar {
    display: grid; place-items: center; width: 32px; height: 32px; flex: none;
    border-radius: 50%; font-size: .82rem; font-weight: 700; color: #fff;
    background: linear-gradient(145deg, var(--brand-2), var(--brand));
}
.user-meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.user-meta strong { font-size: .84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta small { font-size: .72rem; color: var(--text-3); }

/* --- Perfil en la barra lateral ------------------------------------------- */
/* El perfil vive DENTRO de la barra oscura: sus colores salen de la escala de
   la barra, no de la del contenido. Con --text heredado quedaba tinta oscura
   sobre azul marino, es decir, invisible. */
.profile {
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
    padding: 1.15rem 1rem; border-bottom: 1px solid var(--sidebar-line); text-align: center;
}
.avatar-lg {
    width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
    font-size: 1.35rem; font-weight: 700; color: var(--sobre-accent);
    background: var(--accent);
}
.profile strong { font-size: .9rem; color: var(--sidebar-text); }
.profile small { font-size: .73rem; color: var(--sidebar-text-2); }
.profile-actions { display: flex; gap: .4rem; margin-top: .25rem; }
.profile-actions a {
    width: 33px; height: 33px; display: grid; place-items: center;
    border-radius: var(--radius-sm); border: 1px solid var(--sidebar-line);
    background: var(--sidebar-2); color: var(--sidebar-text-2);
}
.profile-actions a:hover { background: var(--brand-soft); color: var(--brand-2); text-decoration: none; }

/* --- Estructura ----------------------------------------------------------- */
/*
 * La estructura tiene que poder ENCOGERSE.
 *
 * Un hijo de flex mide `min-width: auto`, es decir, nunca menos de lo que pida
 * su contenido. Una tabla ancha dentro del contenido estiraba `.content`, este
 * a `.shell`, y `.shell` al cuerpo: de ahí la barra horizontal y el diseño
 * saliéndose del margen. Con `min-width: 0` la caja se encoge y lo ancho se
 * resuelve donde debe, dentro de su propio contenedor con desplazamiento.
 */
.shell {
    margin-left: var(--sidebar-w); min-height: 100vh;
    display: flex; flex-direction: column;
    min-width: 0;
}
.shell > * { min-width: 0; }

/* Cabecera en degradado: envuelve las métricas, que flotan sobre ella */
.hero {
    background: linear-gradient(135deg, var(--brand) 0%, #343b7d 45%, #5b63c4 100%);
    padding: 1.05rem 1.9rem 2.6rem; color: #fff;
}
[data-theme="dark"] .hero {
    background: linear-gradient(135deg, #1a1d3d 0%, #262a5c 45%, #343b7d 100%);
}
.hero-top { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.hero-sub { margin: 0; font-size: .88rem; color: rgba(255,255,255,.78); }
.hero-acciones { margin-left: auto; }
.hero-tema {
    background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.2); color: #fff;
}
.hero-tema:hover { background: rgba(255,255,255,.22); color: #fff; }

.crumbs { display: flex; align-items: center; gap: .45rem; font-size: .85rem; color: rgba(255,255,255,.72); }
.crumbs a { color: rgba(255,255,255,.72); display: grid; place-items: center; }
.crumbs a:hover { color: #fff; text-decoration: none; }
.crumbs strong { color: #fff; font-weight: 600; }

.rangos {
    display: flex; margin-left: auto; border-radius: var(--radius-pill);
    overflow: hidden; background: rgba(255,255,255,.13);
}
.rango {
    padding: .32rem .85rem; font-size: .79rem; font-weight: 600;
    color: rgba(255,255,255,.8); border: 0; background: transparent; cursor: pointer;
}
.rango:hover { background: rgba(255,255,255,.13); color: #fff; text-decoration: none; }
.rango[aria-selected="true"] { background: #fff; color: var(--brand); }

.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); gap: .9rem; }
.metrica {
    position: relative; display: flex; align-items: center; gap: .9rem;
    padding: 1rem 1.15rem; border-radius: var(--radius);
    background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.16);
}
.metrica-ico {
    display: grid; place-items: center; width: 44px; height: 44px; flex: none;
    border-radius: 12px; background: rgba(255,255,255,.16); color: #fff;
}
.metrica-cuerpo { min-width: 0; flex: 1; }
.metrica-label {
    display: block; font-size: .77rem; font-weight: 500;
    color: rgba(255,255,255,.78); margin-bottom: .1rem;
}
.metrica-num { font-size: 1.72rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.tendencia {
    position: absolute; top: .6rem; right: .7rem; font-size: .69rem; font-weight: 700;
    padding: .1rem .42rem; border-radius: var(--radius-pill);
    background: rgba(255,255,255,.2); color: #fff;
}

.quick-search {
    display: flex; align-items: center; gap: .5rem;
    padding: .45rem .8rem; width: 320px; max-width: 42vw;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-pill); color: var(--text-3);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.quick-search:focus-within { border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--brand-soft); }
.quick-search input {
    flex: 1; border: 0; background: none; color: var(--text);
    font: inherit; font-size: .86rem; outline: none; min-width: 0;
}

/* Las tarjetas suben sobre el degradado */
/*
 * La cabecera y el contenido tienen que acabar en la misma línea.
 *
 * `.content` estaba limitado a 1500 px pero pegado a la izquierda, mientras la
 * cabecera en degradado ocupaba todo el ancho del panel. En una pantalla de
 * 1920 eso deja la banda morada extendiéndose 160 px más allá de donde
 * terminan las tarjetas: parecía que el diseño se desbordaba.
 *
 * El tope vive en una variable porque lo comparten los dos; con dos números
 * sueltos, cambiar uno y olvidar el otro devuelve el mismo desajuste.
 */
.content {
    flex: 1; padding: 0 1.9rem 2.5rem; margin: -1.5rem auto 0;
    max-width: var(--ancho-max); width: 100%;
}
.hero > * {
    max-width: calc(var(--ancho-max) - 3.8rem);
    margin-left: auto; margin-right: auto;
}
.content-plano { margin-top: 1.4rem; }

/* --- Gráficos ------------------------------------------------------------- */
.chart-wrap { position: relative; }
.chart-wrap svg { display: block; width: 100%; height: auto; }
.grid-line { stroke: var(--grid, var(--line)); stroke-width: 1; }
.axis-txt { fill: var(--text-3); font-size: 11px; font-family: var(--font-sans); }
.area-fill { fill: var(--chart-soft); }
.area-line { fill: none; stroke: var(--chart); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.punto { fill: var(--chart); stroke: var(--surface); stroke-width: 2; }
.crosshair { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.hit { fill: transparent; cursor: pointer; }

.tooltip {
    position: absolute; pointer-events: none; opacity: 0; transform: translate(-50%, -115%);
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-3); padding: .45rem .7rem; font-size: .8rem; white-space: nowrap;
    transition: opacity .12s ease; z-index: 5;
}
.tooltip strong { display: block; font-size: .95rem; font-variant-numeric: tabular-nums; }
.tooltip span { color: var(--text-3); font-size: .74rem; }

/* Barras horizontales: un solo color, la longitud codifica la magnitud */
.barras { display: flex; flex-direction: column; gap: .7rem; }
.barra-fila {
    display: grid; grid-template-columns: 96px 1fr auto;
    align-items: center; gap: .7rem; font-size: .83rem;
}
.barra-nombre { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-pista { height: 9px; background: var(--surface-hover); border-radius: var(--radius-pill); overflow: hidden; }
.barra-valor {
    display: block; height: 100%; border-radius: var(--radius-pill); background: var(--chart);
    transition: width .5s cubic-bezier(.2,.8,.3,1);
}
.barra-num {
    font-variant-numeric: tabular-nums; font-weight: 600;
    color: var(--text); min-width: 34px; text-align: right;
}

/* --- Bienvenida ----------------------------------------------------------- */
.bienvenida { display: flex; align-items: center; gap: 1.5rem; }
.bienvenida-txt { flex: 1; min-width: 0; }
.bienvenida h2 { font-size: 1.22rem; margin-bottom: .3rem; }
.bienvenida p { font-size: .88rem; color: var(--text-2); max-width: 52ch; }
.bienvenida-cifras { display: flex; gap: 1.6rem; margin-top: 1rem; flex-wrap: wrap; }
.cifra-item { display: flex; align-items: center; gap: .65rem; }
.cifra-ico { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.cifra-ico.a { background: var(--brand-soft); color: var(--brand-2); }
.cifra-ico.b { background: var(--accent-soft); color: var(--accent); }
.cifra-val { display: block; font-size: 1.18rem; font-weight: 700; letter-spacing: -.02em; }
.cifra-lbl { font-size: .75rem; color: var(--text-3); }

/* --- Celdas de tabla ricas ------------------------------------------------ */
.celda-bien { display: flex; align-items: center; gap: .7rem; }
.miniatura {
    width: 42px; height: 42px; border-radius: 10px; flex: none; display: grid; place-items: center;
    background: linear-gradient(140deg, var(--brand-soft), var(--surface-hover));
    color: var(--brand-2); overflow: hidden;
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.celda-bien strong { display: block; font-size: .88rem; }
.celda-bien span { font-size: .76rem; color: var(--text-3); }

/* Avance del proceso: la barra sola no significa nada, va con su etapa */
.avance { display: flex; align-items: center; gap: .5rem; min-width: 150px; }
.avance-pista {
    flex: 1; height: 6px; background: var(--surface-hover);
    border-radius: var(--radius-pill); overflow: hidden;
}
.avance-valor { display: block; height: 100%; border-radius: var(--radius-pill); }
.avance-txt { font-size: .74rem; color: var(--text-3); white-space: nowrap; }

.acciones { display: flex; gap: .35rem; justify-content: flex-end; }
.btn-accion {
    width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer;
    border: 0; border-radius: 8px; color: #fff;
}
.btn-accion.ver { background: var(--brand-2); }
.btn-accion.seguir { background: var(--accent); }
.btn-accion.quitar { background: var(--danger); }
.btn-accion:hover { filter: brightness(1.12); text-decoration: none; }

.footer {
    margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
    font-size: .78rem; color: var(--text-3);
}

.nav-toggle, .nav-scrim { display: none; }

/* --- Tarjetas ------------------------------------------------------------- */
.card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-1);
    padding: 1.25rem 1.4rem; margin-bottom: 1.1rem;
}
.card > h2 {
    display: flex; align-items: center; gap: .5rem;
    font-size: .98rem; margin-bottom: .9rem; color: var(--text);
}
.card > h2 .ico { color: var(--text-3); }
.card h3 { font-size: .87rem; color: var(--text-2); margin: 1.2rem 0 .5rem; }
.card.center { text-align: center; padding: 3rem 1.5rem; }
.card-flush { padding: 0; overflow: hidden; }
.card-flush > h2 { padding: 1.1rem 1.4rem 0; }

/*
 * `min-width: 0` en los hijos no es opcional.
 *
 * Una columna de rejilla mide por defecto `auto`, que es «lo que pida su
 * contenido». Basta una tabla ancha o un texto largo sin espacios para que la
 * columna se estire, empuje a la rejilla, y de ahí al contenedor y al cuerpo:
 * aparece la barra de desplazamiento horizontal y el diseño se sale del
 * margen. Con esto la columna puede encogerse y lo ancho se resuelve dentro.
 */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }

/*
 * `.grid-chart` se usaba en el panel y NO ESTABA DEFINIDA.
 *
 * El resultado era que el gráfico mensual y «Por provincia» se apilaban a todo
 * el ancho en vez de ir uno al lado del otro. No fallaba nada visible —una
 * clase inexistente no da error— y por eso llevaba tiempo así.
 *
 * El gráfico pide más sitio que la lista de barras, de ahí el reparto
 * desigual en vez de dos mitades.
 */
.grid-chart { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.1rem; margin-bottom: 1.1rem; }

.grid-2 > *, .grid-3 > *, .grid-chart > * { min-width: 0; }

@media (max-width: 1100px) { .grid-chart { grid-template-columns: 1fr; } }
@media (max-width: 980px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; margin-bottom: .75rem;
}
.section-head .link { font-size: .82rem; font-weight: 500; }

/* --- Métricas ------------------------------------------------------------- */
.stats-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .9rem; margin-bottom: 1.3rem;
}
.stat {
    position: relative; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.05rem 1.2rem;
    box-shadow: var(--shadow-1);
}
.stat::after {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--brand-2), var(--brand));
    opacity: .85;
}
.stat-head {
    display: flex; align-items: center; justify-content: space-between;
    color: var(--text-3); margin-bottom: .35rem;
}
.stat-label { font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.stat-num {
    font-family: var(--font-display); font-size: 1.95rem; line-height: 1.1;
    font-weight: 600; letter-spacing: -.02em; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.stat-foot { font-size: .76rem; color: var(--text-3); margin-top: .2rem; }
.stat-accent::after { background: linear-gradient(90deg, var(--accent), #d9b45f); }
.stat-danger::after { background: linear-gradient(90deg, var(--danger), #e0776d); }
.stat-danger .stat-num { color: var(--danger);     font-variant-numeric: tabular-nums;
}
.stat-ok::after { background: linear-gradient(90deg, var(--ok), #4bbd88); }

/* --- Fichas de resultado -------------------------------------------------- */
.result-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 1rem;
}
.result-card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
    color: inherit; box-shadow: var(--shadow-1);
    transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s ease, border-color .16s ease;
}
.result-card:hover {
    transform: translateY(-3px); text-decoration: none;
    box-shadow: var(--shadow-3); border-color: var(--line-strong);
}
/* Los que se rematan esta semana se distinguen sin tener que leer la fecha */
.result-card.urge { border-color: var(--danger); }

/* --- Fotografía de la tarjeta --------------------------------------------- */
.result-foto {
    position: relative; height: 148px; background: var(--surface-2);
    border-bottom: 1px solid var(--line); overflow: hidden;
}
.result-foto img {
    display: block; width: 100%; height: 100%; max-height: 100%; object-fit: cover;
    transition: transform .4s cubic-bezier(.2,.8,.3,1);
}
.result-card:hover .result-foto img { transform: scale(1.05); }
.result-foto .sin-foto {
    display: grid; place-items: center; width: 100%; height: 100%;
    color: var(--text-3); background:
        repeating-linear-gradient(45deg, transparent, transparent 9px,
                                  var(--surface-hover) 9px, var(--surface-hover) 18px);
}
.result-foto .badge { position: absolute; top: .6rem; left: .6rem; box-shadow: var(--shadow-1); }

.result-cuerpo { display: flex; flex-direction: column; flex: 1; padding: .95rem 1.1rem 1rem; }

.result-plazo {
    margin-top: .55rem; font-size: .78rem; font-weight: 600; color: var(--text-2);
}
.result-plazo.urge { color: var(--danger); }

.result-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.result-card .codigo { font-family: var(--font-mono); font-size: .74rem; color: var(--text-3); }
.result-card h3 {
    margin: .35rem 0 .1rem; font-size: 1.02rem; color: var(--text);
    letter-spacing: -.015em;
}
.result-card .loc {
    display: flex; align-items: center; gap: .3rem;
    margin: 0 0 .85rem; font-size: .82rem; color: var(--text-2);
}
.result-price {
    font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
    color: var(--text); letter-spacing: -.02em; margin-bottom: .5rem;
    font-variant-numeric: tabular-nums;
}
.result-meta {
    display: flex; flex-wrap: wrap; gap: .35rem .9rem;
    padding-top: .7rem; margin-top: auto; border-top: 1px solid var(--line);
    font-size: .78rem; color: var(--text-2);
}
.result-meta span { display: flex; align-items: center; gap: .3rem; }
.result-meta .ico { color: var(--text-3); }

/* --- Distintivos ---------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .69rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    padding: .2rem .55rem; border-radius: var(--radius-pill);
    background: var(--surface-hover); color: var(--text-2);
    border: 1px solid transparent; white-space: nowrap;
}
.badge-activo, .badge-busq-ok, .badge-conf-exacta, .badge-rev-emitida,
.badge-run-success, .badge-riesgo-bajo {
    background: var(--ok-soft); color: var(--ok);
}
.badge-inhabilitado, .badge-busq-captcha_requerido, .badge-busq-parcial,
.badge-conf-probable, .badge-rev-en_revision, .badge-run-partial, .badge-riesgo-medio {
    background: var(--warn-soft); color: var(--warn);
}
.badge-bloqueado, .badge-busq-fallida, .badge-rev-rechazada,
.badge-run-failed, .badge-run-stopped, .badge-riesgo-alto {
    background: var(--danger-soft); color: var(--danger);
}
.badge-evento, .badge-run-running, .badge-rev-solicitada {
    background: var(--info-soft); color: var(--info);
}
.badge-historico, .badge-desconocido, .badge-conf-sin_verificar,
.badge-riesgo-no_determinable, .badge-riesgo-sin_clasificar {
    background: var(--surface-hover); color: var(--text-3);
}
.badge-dot::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; flex: none;
}

/* --- Botones y formularios ------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .5rem 1rem; border: 1px solid transparent; cursor: pointer;
    border-radius: var(--radius-sm); font: inherit; font-size: .86rem; font-weight: 600;
    background: var(--surface-hover); color: var(--text);
    transition: background .14s ease, box-shadow .14s ease, transform .1s ease;
}
.btn:hover { text-decoration: none; background: var(--line); }
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: linear-gradient(145deg, var(--brand-2), var(--brand));
    color: #fff; box-shadow: var(--shadow-2);
}
.btn-primary:hover { background: var(--brand); filter: brightness(1.06); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--text); }
.btn-danger-ghost { background: transparent; border-color: var(--danger-soft); color: var(--danger); }
.btn-danger-ghost:hover { background: var(--danger-soft); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: .32rem .7rem; font-size: .78rem; }

.btn-icon {
    display: grid; place-items: center; width: 34px; height: 34px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text-2); cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.btn-icon:hover { background: var(--surface-hover); color: var(--text); }

.inline { display: inline; }
.inline-form { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; font-weight: 500; color: var(--text-2); }
input, select, textarea {
    font: inherit; font-size: .88rem; padding: .5rem .7rem;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text);
    transition: border-color .14s ease, box-shadow .14s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--brand-soft);
}
input::placeholder { color: var(--text-3); }
fieldset.checks { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem; grid-column: 1 / -1; }
fieldset.checks label { flex-direction: row; align-items: center; gap: .35rem; font-weight: 400; }

/* --- Buscador ------------------------------------------------------------- */
.search-hero {
    background: linear-gradient(135deg, var(--brand) 0%, #16305a 55%, #0f2445 100%);
    border: 0; color: #fff; padding: 1.7rem 1.8rem;
}
[data-theme="dark"] .search-hero { background: linear-gradient(135deg, #17233a 0%, #101828 100%); }
.search-hero h2 { color: #fff; font-size: 1.1rem; margin-bottom: .2rem; }
.search-hero p { color: rgba(255,255,255,.72); font-size: .86rem; margin-bottom: 1rem; }
.search-bar { display: flex; gap: .6rem; }
.search-bar input {
    flex: 1; font-size: .95rem; padding: .7rem 1rem;
    background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: #fff;
}
.search-bar input::placeholder { color: rgba(255,255,255,.6); }
.search-bar input:focus { background: rgba(255,255,255,.18); box-shadow: 0 0 0 3px rgba(255,255,255,.15); }
.search-bar .btn-primary { background: #fff; color: var(--brand); box-shadow: none; }
.search-bar .btn-primary:hover { background: #f0f4fa; filter: none; }

.filters summary {
    cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--text);
    display: flex; align-items: center; gap: .45rem; list-style: none;
}
.filters summary::-webkit-details-marker { display: none; }
.filters summary::before { content: "›"; color: var(--text-3); transition: transform .15s ease; }
.filters[open] summary::before { transform: rotate(90deg); }
.filter-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: .8rem; margin-top: 1rem; align-items: end;
}
.chip {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--brand-soft); color: var(--brand-2);
    border-radius: var(--radius-pill); padding: .22rem .7rem;
    font-size: .78rem; font-weight: 500; margin: .15rem .15rem 0 0;
}
.interpretacion { border-left: 3px solid var(--accent); }

/* --- Listas y filas ------------------------------------------------------- */
.row-item {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .68rem .3rem; border-bottom: 1px solid var(--line);
    color: inherit; font-size: .87rem;
}
.row-item:last-child { border-bottom: 0; }
a.row-item { border-radius: var(--radius-sm); padding-inline: .55rem; margin-inline: -.55rem; }
a.row-item:hover { background: var(--surface-hover); text-decoration: none; }
.right { margin-left: auto; text-align: right; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.prewrap { white-space: pre-wrap; }
.empty {
    padding: 2rem 1rem; text-align: center; color: var(--text-3); font-size: .87rem;
}
.empty .ico { color: var(--line-strong); margin-bottom: .4rem; }

/* --- Ficha de remate ------------------------------------------------------ */
.ficha-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem;
}
.ficha-head h1 { display: flex; align-items: center; gap: .6rem; font-size: 1.5rem; }
.ficha-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

dl.datos { margin: 0; display: grid; gap: 0; }
dl.datos div {
    display: grid; grid-template-columns: 190px 1fr; gap: 1rem;
    padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .87rem;
}
dl.datos div:last-child { border-bottom: 0; }
dl.datos dt { color: var(--text-2); }
dl.datos dd { margin: 0; font-weight: 500; }
.trace { font-size: .76rem; color: var(--text-3); margin-top: .9rem; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .7rem; }
.photo-grid a { display: block; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.photo-grid img {
    display: block; width: 100%; height: 125px; object-fit: cover;
    transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.photo-grid a:hover img { transform: scale(1.06); }

/* --- Línea de tiempo ------------------------------------------------------ */
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: .5rem 0 .5rem 1rem; font-size: .86rem; }
.timeline li::before {
    content: ""; position: absolute; left: calc(-1rem - 5px); top: .95rem;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--accent);
}
.tl-fecha { display: block; font-size: .73rem; color: var(--text-3); letter-spacing: .02em; }
.tl-tipo { font-weight: 600; margin-right: .4rem; }
.actuacion-ausente { opacity: .55; }
.actuacion-ausente::before { border-color: var(--line-strong); }

/* --- Tablas --------------------------------------------------------------- */
.tabla { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tabla th {
    text-align: left; padding: .55rem .7rem; color: var(--text-3);
    font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    border-bottom: 1px solid var(--line);
}
.tabla td { padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: var(--surface-hover); }
.tabla-wrap { overflow-x: auto; }
.tabla.logs { font-size: .78rem; }
.tabla.logs td { padding: .4rem .7rem; }
.log-error td, .log-critical td { background: var(--danger-soft); }
.log-warning td { background: var(--warn-soft); }

/* --- Capas de información (§47) ------------------------------------------- */
.capa-ia { border-left: 3px solid var(--brand-2); }
.capa-profesional { border-left: 3px solid var(--accent); background: var(--accent-soft); }
[data-theme="dark"] .capa-profesional { background: var(--surface-2); }
.capa-tag {
    font-size: .66rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    background: var(--surface-hover); color: var(--text-3);
    padding: .2rem .55rem; border-radius: var(--radius-pill);
    vertical-align: middle; margin-left: .4rem; border: 1px solid var(--line);
}
.ia-sec {
    display: flex; align-items: center; gap: .4rem;
    font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    margin: 1.2rem 0 .4rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line);
}
.ia-hecho { color: var(--ok); }
.ia-inferencia { color: var(--info); }
.ia-alerta { color: var(--danger); }
.ia-faltante { color: var(--warn); }
.ia-recomendacion { color: var(--accent); }
.ia-lista { margin: .3rem 0 .9rem; padding-left: 1.15rem; font-size: .86rem; color: var(--text-2); }
.ia-lista li { margin-bottom: .25rem; }
.disclaimer {
    font-size: .78rem; color: var(--text-3); line-height: 1.5;
    border-top: 1px dashed var(--line-strong); padding-top: .8rem; margin-top: 1.2rem;
}
.captcha-aviso { border-left: 3px solid var(--warn); background: var(--warn-soft); font-size: .86rem; }
.captcha-aviso strong { color: var(--warn); }
.actividad {
    font-size: .84rem; color: var(--text-2); background: var(--surface-2);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: .45rem .7rem; margin: .35rem 0;
}
.revision-conclusion {
    background: var(--surface); border-left: 3px solid var(--accent);
    padding: .8rem 1rem; margin: .5rem 0; font-size: .88rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* --- Avisos --------------------------------------------------------------- */
.alert {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .75rem 1rem; border-radius: var(--radius-sm);
    font-size: .87rem; margin-bottom: 1rem; border: 1px solid transparent;
}
.alert-ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.alert-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.alert-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }

/* --- Paginación ----------------------------------------------------------- */
.pager { display: flex; gap: .3rem; justify-content: center; margin: 1.5rem 0; flex-wrap: wrap; }
.pager a {
    min-width: 34px; padding: .35rem .6rem; text-align: center;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text-2); font-size: .84rem; font-weight: 500;
}
.pager a:hover { background: var(--surface-hover); text-decoration: none; }
.pager a.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- Favoritos ------------------------------------------------------------ */
.fav-item { display: flex; flex-direction: column; gap: .7rem; }
.fav-head { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.fav-notas { display: flex; gap: .5rem; }
.fav-notas input { flex: 1; }

/* ==========================================================================
   Acceso a dos mitades
   La izquierda cuenta qué es esto; la derecha pide las credenciales. En
   pantallas estrechas la izquierda desaparece: en un teléfono el formulario
   debe estar arriba, no debajo de una imagen que hay que pasar de largo.
   ========================================================================== */
body.guest {
    display: block; min-height: 100vh; padding: 0;
    background: var(--surface);
}
.guest-wrap { width: 100%; }

.acceso { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

/*
 * Las dos mitades se apartan al entrar bien.
 *
 * Ocupa el momento en que el servidor responde y deja claro que la puerta se
 * abrió, en vez de un parpadeo blanco. Cuando las credenciales fallan no se
 * mueve nada: se tiembla en el sitio y el error sale donde está la vista.
 *
 * `overflow: hidden` en la rejilla evita que aparezca una barra horizontal
 * mientras las mitades salen de la pantalla.
 */
.acceso { overflow: hidden; }
.acceso-portada,
.acceso-form {
    transition: transform .55s cubic-bezier(.6, 0, .3, 1), opacity .45s ease;
}
.acceso.entrando .acceso-portada { transform: translateX(-100%); opacity: 0; }
.acceso.entrando .acceso-form    { transform: translateX(100%);  opacity: 0; }

/* Rechazado: un temblor corto. Ni aparta nada ni recarga la página. */
@keyframes acceso-temblor {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-7px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(2px); }
}
.acceso.rechazado .acceso-caja { animation: acceso-temblor .4s ease; }

@media (prefers-reduced-motion: reduce) {
    .acceso-portada, .acceso-form { transition: none; }
    .acceso.rechazado .acceso-caja { animation: none; }
}

/* --- Mitad izquierda --- */
.acceso-portada {
    --acento-portada: #f0b429;
    position: relative; display: flex; flex-direction: column;
    padding: 2.6rem 3rem; color: #fff; overflow: hidden;
    background:
        linear-gradient(150deg, rgba(13, 26, 48, .93) 0%, rgba(18, 41, 74, .90) 55%, rgba(10, 21, 38, .95) 100%),
        var(--portada, none) center / cover no-repeat,
        linear-gradient(150deg, #0d1a30 0%, #12294a 55%, #0a1526 100%);
}
.acceso-portada-cab { display: flex; align-items: center; gap: .7rem; font-size: 1.1rem; font-weight: 700; }

/*
 * El logotipo, mucho más grande.
 *
 * A 46 px de alto sobre una fotografía a pantalla completa se perdía: era una
 * mancha en una esquina. Aquí es lo primero que tiene que reconocerse.
 */
.acceso-logo-portada {
    max-height: 84px; max-width: 340px; width: auto;
    /* Una sombra suave lo despega de la foto sin recuadros ni cajas */
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45));
}

.acceso-portada-texto { margin-top: auto; padding-top: 2rem; max-width: 30rem; }
.acceso-portada-texto h2 {
    font-size: clamp(1.6rem, 2.4vw, 2.3rem); line-height: 1.2;
    letter-spacing: -.02em; margin-bottom: .9rem;
}
.acceso-portada-texto p {
    font-size: .95rem; line-height: 1.65; color: rgba(255, 255, 255, .82); margin: 0;
}

.acceso-dibujo {
    position: absolute; right: -3rem; top: 50%; transform: translateY(-58%);
    width: 26rem; max-width: 55%; opacity: .5; pointer-events: none;
}

.acceso-notas {
    list-style: none; margin: 2.2rem 0 0; padding: 0;
    display: flex; flex-direction: column; gap: .55rem;
}
.acceso-notas li {
    display: flex; align-items: center; gap: .6rem;
    font-size: .86rem; color: rgba(255, 255, 255, .82);
}
.acceso-notas .ico { color: var(--acento-portada); }

/* --- Mitad derecha --- */
.acceso-form {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 2.5rem 2rem; background: var(--bg);
}
.acceso-caja {
    width: min(28rem, 100%);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-2);
    padding: 2.2rem 2rem;
}
/* El logotipo también dentro de la tarjeta, en todas las pantallas: sin él
   el formulario podía ser el de cualquiera. */
.acceso-logo-caja {
    display: block; max-height: 64px; max-width: 250px; width: auto;
    margin: 0 auto 1.4rem;
}
.acceso-caja h1 { font-size: 1.45rem; letter-spacing: -.02em; text-align: center; }
.acceso-sub {
    margin: .45rem 0 1.6rem; text-align: center;
    font-size: .87rem; color: var(--text-2);
}
.acceso-caja form { display: grid; gap: .35rem; }
.acceso-aviso { margin-bottom: 1rem; }

/*
 * La etiqueta va FUERA de la caja del campo.
 *
 * Antes el <label> envolvía al campo y el texto quedaba pegado encima del
 * borde; con dos campos seguidos las líneas se leían como una sola caja rara
 * partida por la mitad. Separadas, cada campo se ve como lo que es.
 */
.campo-acceso {
    display: block; margin-top: .75rem; margin-bottom: .3rem;
    font-size: .82rem; font-weight: 600; color: var(--text-2);
}
.acceso-caja form > .campo-acceso:first-of-type { margin-top: 0; }

/* El icono y el ojo van DENTRO de la caja: el campo se lee como una pieza y
   no como tres controles pegados. */
.campo-caja {
    display: flex; align-items: center; gap: .55rem;
    padding: 0 .75rem; background: var(--surface);
    /*
     * El borde del campo, medido: --line-strong sobre el blanco de la tarjeta
     * da 1,5:1 y sencillamente no se ve. Un contorno de control necesita 3:1
     * para distinguirse, y --text-3 llega a 3,5:1.
     *
     * Es un borde de campo, no una línea de tabla: aquí hay que escribir, y
     * lo primero es saber dónde.
     */
    border: 1px solid var(--text-3); border-radius: var(--radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.campo-caja:hover { border-color: var(--text-2); }
.campo-caja:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.campo-caja > .ico { color: var(--text-2); flex: none; }
.campo-caja input,
.campo-caja textarea {
    flex: 1; min-width: 0; border: 0; outline: none; background: none;
    padding: .7rem 0; font: inherit; font-size: .92rem; color: var(--text);
}
.campo-caja textarea { resize: vertical; line-height: 1.5; }
.campo-caja-alto { align-items: flex-start; padding-top: .55rem; }
.campo-caja-alto > .ico { margin-top: .5rem; }

/*
 * El relleno automático de Chrome pinta su propio fondo amarillento y se come
 * el borde del campo. Se tapa con una sombra interior del color de la
 * superficie, que es la única forma de ganarle sin usar !important en cada
 * propiedad.
 */
.campo-caja input:-webkit-autofill,
.campo-caja input:-webkit-autofill:hover,
.campo-caja input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px var(--surface) inset;
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
}

.campo-ojo {
    flex: none; display: grid; place-items: center;
    width: 30px; height: 30px; padding: 0;
    border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text-2); cursor: pointer;
}
.campo-ojo:hover, .campo-ojo.activo { color: var(--accent); background: var(--accent-soft); }

.campo-pista { margin: .3rem 0 0; font-size: .76rem; color: var(--text-2); }
.campo-pista.aviso { color: var(--danger); }
.campo-pista.bien { color: var(--ok); }

.acceso-opciones {
    display: flex; align-items: center; justify-content: space-between;
    gap: .8rem; flex-wrap: wrap; margin: .9rem 0 .3rem;
}
/*
 * La casilla A LA IZQUIERDA del texto, no encima.
 *
 * Hay una regla global `label { flex-direction: column }` para los campos con
 * su rótulo arriba. Aquí bastaba con `inline-flex` para el display, pero la
 * dirección seguía siendo columna y la casilla salía apilada sobre las
 * palabras. Hay que decir las dos cosas.
 */
.acceso-recordar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    font-size: .86rem;
    font-weight: 500;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
    width: fit-content;
}
.acceso-recordar input {
    width: 17px; height: 17px; margin: 0; flex: none;
    accent-color: var(--accent); cursor: pointer;
}
.acceso-recordar span { line-height: 1; }
.acceso-recordar:hover { color: var(--text); }

.acceso-caja .btn-block { margin-top: .9rem; }
/* Mientras se comprueba: el botón dice que está trabajando */
.btn.cargando .etiqueta::after {
    content: '…';
    animation: acceso-puntos 1s steps(4) infinite;
}
@keyframes acceso-puntos { to { opacity: .35; } }

.acceso-pie {
    margin: 1.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line);
    font-size: .84rem; color: var(--text-2); text-align: center;
}
.acceso-pie a { color: var(--accent); font-weight: 600; }
.acceso-legal {
    width: min(28rem, 100%); margin: 1.2rem 0 0;
    font-size: .76rem; line-height: 1.55; color: var(--text-2); text-align: center;
}

@media (max-width: 900px) {
    /* Fuera la portada: el formulario primero */
    .acceso { grid-template-columns: 1fr; }
    .acceso-portada { display: none; }
    .acceso-form { min-height: 100vh; justify-content: center; }
    /* Sin portada, la mitad que queda sale hacia arriba y no de lado */
    .acceso.entrando .acceso-form { transform: translateY(-40%); }
}

/* --- Adaptación a pantallas pequeñas -------------------------------------- */
@media (max-width: 900px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .22s cubic-bezier(.2,.8,.3,1);
        box-shadow: var(--shadow-3);
    }
    .sidebar.is-open { transform: none; }
    .shell { margin-left: 0; }
    .topbar { padding: .8rem 1rem .8rem 3.5rem; }
    .content { padding: 1.1rem 1rem 2rem; }
    .quick-search { width: 100%; max-width: none; order: 3; }

    .nav-toggle {
        display: grid; place-items: center; position: fixed; top: .82rem; left: .8rem;
        z-index: 45; width: 36px; height: 36px;
        background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--radius-sm); color: var(--text); cursor: pointer;
    }
    .nav-scrim {
        position: fixed; inset: 0; z-index: 35;
        background: rgba(8, 12, 20, .5); opacity: 0; pointer-events: none;
        transition: opacity .2s ease;
    }
    .nav-scrim.is-open { display: block; opacity: 1; pointer-events: auto; }
    dl.datos div { grid-template-columns: 1fr; gap: .1rem; }
}

/* --- Alternancia de iconos de tema ---------------------------------------- */
[data-theme="light"] .only-dark, [data-theme="dark"] .only-light { display: none; }
.only-light, .only-dark { display: grid; place-items: center; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --- Logotipos propios subidos desde el panel -----------------------------
   Dos piezas para dos anchos: el horizontal con el menú abierto y el símbolo
   cuadrado cuando se pliega a 72 px, donde el largo no cabe. Se pintan las
   dos y aquí se decide cuál se ve, para que no parpadee al cargar. */
/* El logotipo manda en su franja: se le deja crecer hasta 52 px y la cabecera
   se estira con él. Con 36 px quedaba pequeño para lo que es —la firma de la
   casa— y sobraba aire arriba y abajo. */
.brand-logo { max-height: 52px; max-width: 100%; width: auto; display: block; }
.brand-cuadrado {
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 10px; object-fit: contain; display: block;
}

/* Con logotipo horizontal puesto, el símbolo sobra: ese ya lo incluye */
.brand.con-horizontal .brand-cuadrado,
.brand.con-horizontal .brand-mark { display: none; }

/* Plegado es al revés: manda el símbolo y el largo se esconde */
body.nav-plegada .brand .brand-logo,
html.pre-plegada .brand .brand-logo { display: none; }
body.nav-plegada .brand.con-horizontal .brand-cuadrado,
body.nav-plegada .brand.con-horizontal .brand-mark,
html.pre-plegada .brand.con-horizontal .brand-cuadrado,
html.pre-plegada .brand.con-horizontal .brand-mark { display: grid; }
body.nav-plegada .brand.con-horizontal img.brand-cuadrado,
html.pre-plegada .brand.con-horizontal img.brand-cuadrado { display: block; }

.acceso-logo { max-height: 60px; max-width: 250px; margin: 0 auto 1.2rem; display: block; }

/* ==========================================================================
   Mapa de burbujas por provincia
   Lo comparten la pantalla de Mapa y el panel de inicio. Estaba dentro de la
   vista; al usarse en dos sitios pasa aquí, que es donde se mantiene una vez.
   ========================================================================== */
.mapa-envoltorio { display: grid; grid-template-columns: 1fr 20rem; gap: 1rem; }
.mapa-envoltorio.sin-panel { grid-template-columns: 1fr; }
.mapa-envoltorio > [id] {
    border-radius: var(--radius-sm); border: 1px solid var(--line);
    background: var(--surface-2);
}

.mapa-panel {
    display: flex; flex-direction: column; min-height: 0;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface-2); overflow: hidden;
}
.mapa-panel-cab {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .7rem .85rem; border-bottom: 1px solid var(--line); background: var(--surface);
}
.mapa-panel-cab strong { font-size: .9rem; }
.mapa-panel > div:last-child { overflow-y: auto; padding: .7rem .85rem; max-height: 30rem; }

.lista-prov { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.lista-prov button, .lista-prov a {
    width: 100%; display: flex; align-items: baseline; gap: .55rem;
    padding: .38rem .5rem; border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text); font: inherit; font-size: .84rem;
    cursor: pointer; text-align: left; text-decoration: none;
}
.lista-prov button:hover, .lista-prov a:hover { background: var(--surface-hover); text-decoration: none; }
.lista-prov .n {
    flex: 0 0 2.4rem; text-align: right; font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--text);
}
.lista-prov .nom { flex: 1; min-width: 0; }
.lista-prov .act { font-size: .74rem; color: var(--text-3); white-space: nowrap; }

/* La burbuja lleva la cifra dentro. Amarillo de marca con tinta encima: el
   mismo par que los botones, para que se lea como algo pulsable. */
.burbuja {
    display: grid; place-items: center;
    border-radius: 50%; font-weight: 700;
    color: var(--sobre-accent); background: var(--accent);
    border: 2px solid rgba(255, 255, 255, .85);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .35);
    font-variant-numeric: tabular-nums; cursor: pointer;
}
.burbuja.vacia { background: var(--surface); color: var(--text-3); border-color: var(--line-strong); }

.leaflet-container { font: inherit; }

@media (max-width: 900px) {
    .mapa-envoltorio { grid-template-columns: 1fr; }
    .mapa-panel > div:last-child { max-height: 18rem; }
}

/* El mapa del panel de inicio: a todo el ancho y con altura de verdad. En
   media columna las burbujas de la sierra se solapaban hasta no leerse. */
.mapa-inicio { margin-bottom: 1.1rem; }
.mapa-inicio .mapa-envoltorio > [id] { min-height: 30rem; }

@media (max-width: 900px) {
    .mapa-inicio .mapa-envoltorio > [id] { min-height: 20rem; height: 20rem !important; }
}

/* Contención del ancho, al final para que gane sobre lo anterior.
   Una tarjeta con una tabla dentro no debe poder estirar la página: lo ancho
   se desplaza dentro de su propio marco. */
.card { min-width: 0; }
.tabla-wrap { overflow-x: auto; max-width: 100%; }
.chart-wrap { overflow-x: auto; max-width: 100%; }

/* Rejilla de formulario. Se usaba en Alertas y NO estaba definida: los campos
   salían uno debajo de otro en una sola columna, y los `grid-column: 1/-1`
   escritos en el marcado no hacían nada porque no había rejilla. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .85rem 1rem;
}
.form-grid > * { min-width: 0; }
.form-grid label { display: flex; flex-direction: column; gap: .25rem; font-size: .84rem; }
.form-grid input, .form-grid select, .form-grid textarea {
    padding: .5rem .65rem; font: inherit; font-size: .88rem;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
    outline: 2px solid var(--brand-2); outline-offset: -1px; border-color: transparent;
}

/* Pie de tabla o gráfico. Acompaña a .dim, que ya da el color. */
.leyenda-tabla { margin-top: .6rem; }

/* Burbuja de cantón: más pequeña y con el borde del acento, para que al
   cambiar de nivel se note que ya no son provincias. */
.burbuja.canton {
    border-color: var(--accent);
    box-shadow: 0 2px 6px rgba(16, 24, 40, .3);
}

/* ==========================================================================
   Filtros de búsqueda
   Se veían anticuados: etiqueta encima, caja gris, todo del mismo peso. Ahora
   la etiqueta es pequeña y en versalita, la caja tiene aire y el foco se
   marca con el color de marca en vez de con el contorno del navegador.
   ========================================================================== */
.filter-grid > label {
    display: flex; flex-direction: column; gap: .3rem;
    font-size: .7rem; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-3);
}
.filter-grid input,
.filter-grid select {
    padding: .55rem .7rem; font: inherit; font-size: .88rem;
    font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.filter-grid input:hover,
.filter-grid select:hover { border-color: var(--line-strong); }
.filter-grid input:focus,
.filter-grid select:focus {
    outline: none; border-color: var(--brand-2);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.filter-grid input::placeholder { color: var(--text-3); }

/* --- Deslizador de precio -------------------------------------------------
   Dos controles nativos superpuestos: no existe uno con dos tiradores. El de
   arriba solo recibe el ratón en su tirador, para poder alcanzar al de abajo. */
.rango-precio { grid-column: span 2; display: flex; flex-direction: column; gap: .1rem; }
.rango-titulo {
    font-size: .7rem; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-3);
}
.rango-precio output {
    font-size: .92rem; font-weight: 600; color: var(--text);
    font-variant-numeric: tabular-nums; margin-bottom: .35rem;
}

.rango-pista { position: relative; height: 26px; }
.rango-pista::before {
    content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 4px;
    background: var(--line); border-radius: 2px;
}
.rango-relleno {
    position: absolute; top: 11px; height: 4px;
    background: var(--brand-2); border-radius: 2px;
}
.rango-pista input[type=range] {
    position: absolute; left: 0; width: 100%; top: 0; height: 26px;
    margin: 0; padding: 0; background: none; appearance: none;
    pointer-events: none;   /* el clic pasa al de abajo; el tirador sí lo recibe */
}
.rango-pista input[type=range]::-webkit-slider-thumb {
    appearance: none; pointer-events: auto;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--brand-2);
    box-shadow: var(--shadow-1); cursor: grab;
}
.rango-pista input[type=range]::-moz-range-thumb {
    pointer-events: auto;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--brand-2);
    box-shadow: var(--shadow-1); cursor: grab;
}
.rango-pista input[type=range]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--brand-soft);
}

.rango-cajas { display: flex; gap: .5rem; margin-top: .5rem; }
.rango-cajas label {
    flex: 1; display: flex; flex-direction: column; gap: .25rem;
    font-size: .68rem; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-3);
}

@media (max-width: 700px) { .rango-precio { grid-column: span 1; } }

/* ==========================================================================
   Filtros: estructura en tres bloques
   Con una rejilla auto-fit el deslizador (dos columnas, más alto) se colocaba
   donde cabía y dejaba huecos. Ahora el orden es fijo.
   ========================================================================== */
.filtros-form { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1rem; }
.filtros-form .filter-grid { margin-top: 0; }

.filtros-precio {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.4rem;
    align-items: start;
    padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.filtros-precio .rango-precio { grid-column: auto; }
.filtros-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; align-items: end; }
.filtros-fechas label {
    display: flex; flex-direction: column; gap: .3rem;
    font-size: .7rem; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-3);
}

.filtros-pie {
    display: flex; justify-content: flex-end; gap: .6rem;
    padding-top: 1rem; border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
    .filtros-precio { grid-template-columns: 1fr; }
    .filtros-pie { flex-direction: column-reverse; }
    .filtros-pie .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Desplegable con buscador
   El nativo lo pinta el sistema operativo y no admite estilo. Con 24
   provincias y 200+ cantones, teclear tres letras gana a recorrer la lista.
   El <select> real sigue ahí, oculto, enviando lo mismo que siempre.
   ========================================================================== */
.selector { position: relative; }
.selector-nativo {
    position: absolute; opacity: 0; pointer-events: none;
    width: 1px; height: 1px; overflow: hidden;
}

.selector-boton {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; padding: .55rem .7rem;
    font: inherit; font-size: .88rem; text-align: left; color: var(--text);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-sm); cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.selector-boton::after {
    content: ""; flex: none; width: 8px; height: 8px;
    border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3);
    transform: rotate(45deg) translate(-2px, -2px);
}
.selector-boton:hover { border-color: var(--line-strong); }
.selector.abierto .selector-boton {
    border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--brand-soft);
}
/* «Todo el país» es la ausencia de filtro: se atenúa para que se note cuál
   está puesto de verdad. */
.selector-boton.es-vacio { color: var(--text-3); }

.selector-panel {
    position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px);
    background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-3);
    overflow: hidden;
}
.selector.hacia-arriba .selector-panel { top: auto; bottom: calc(100% + 4px); }
.selector-panel[hidden] { display: none; }

.selector-busca {
    width: 100%; padding: .55rem .7rem; font: inherit; font-size: .86rem;
    color: var(--text); background: var(--surface-2);
    border: 0; border-bottom: 1px solid var(--line); outline: none;
}

.selector-lista {
    list-style: none; margin: 0; padding: .25rem;
    max-height: 15rem; overflow-y: auto;
}
.selector-lista li {
    padding: .42rem .55rem; border-radius: var(--radius-sm);
    font-size: .87rem; cursor: pointer;
}
.selector-lista li:hover { background: var(--surface-hover); }
.selector-lista li[aria-selected="true"] {
    background: var(--brand-soft); color: var(--brand-2); font-weight: 600;
}
.selector-nada { color: var(--text-3); cursor: default; font-style: italic; }
.selector-nada:hover { background: none; }
.selector.inerte .selector-boton { opacity: .55; cursor: not-allowed; }

/* Autorrelleno de Chrome.
   Al recordar la contraseña pinta un fondo azulado propio que tapa el borde y
   deja los campos sin contorno: parecen texto suelto. No se puede quitar ese
   fondo, pero sí sustituirlo por el nuestro con una sombra interior enorme. */
.campo-caja input:-webkit-autofill,
.campo-caja input:-webkit-autofill:hover,
.campo-caja input:-webkit-autofill:focus,
.filter-grid input:-webkit-autofill,
.rango-cajas input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px var(--surface) inset;
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    transition: background-color 100000s ease-in-out 0s;
}

/* En oscuro el borde también tiene que verse: --line-strong sobre la
   superficie oscura se confunde con ella. */
.campo-caja { border-color: var(--text-3); }
.campo-caja:hover { border-color: var(--text-2); }

/* ---------------------------------------------------------------------------
   Logotipo según el fondo
   El de la marca es azul marino: sobre la barra oscura del tema oscuro se
   pierde. Si hay una versión clara subida se pintan los dos y aquí se decide
   cuál se ve, sin JavaScript y por tanto sin parpadeo al cargar.
   --------------------------------------------------------------------------- */
.brand-logo.solo-oscuro { display: none; }
[data-theme="dark"] .brand-logo.solo-claro { display: none; }
[data-theme="dark"] .brand-logo.solo-oscuro { display: block; }

/* ---------------------------------------------------------------------------
   Cuenta libre: la salida siempre a la vista
   Enterarse de que algo es de pago al pulsarlo y que no pase nada es la peor
   forma de descubrirlo. El menú lo dice desde el primer momento.
   --------------------------------------------------------------------------- */
.nav-item.nav-plus { color: var(--accent); font-weight: 600; }
.nav-item.nav-plus .ico { color: var(--accent); }
.nav-item.nav-plus:hover { background: var(--accent-soft); }

/* Aviso de suscripción incrustado en una pantalla, donde estaría el control */
.aviso-plus {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    padding: .85rem 1rem; margin-bottom: 1rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    font-size: .87rem; color: var(--text);
}
.aviso-plus .ico { color: var(--accent); flex: none; }
.aviso-plus p { margin: 0; flex: 1 1 260px; min-width: 0; line-height: 1.5; }
.aviso-plus .btn { flex: none; }

/*
 * Controles a la vista pero apagados: se entiende qué se está perdiendo. Un
 * hueco vacío no lo contaría.
 *
 * Los HIJOS no reciben el ratón, pero el formulario SÍ: así el clic llega y
 * abre el modal que explica. Con `pointer-events: none` en todo el bloque el
 * clic no iba a ninguna parte y no pasaba nada, que es peor que un no.
 */
.filtros-form.apagado, form.apagado {
    opacity: .55;
    filter: grayscale(.55);
    cursor: pointer;
}
.filtros-form.apagado > *, form.apagado > * { pointer-events: none; }


/* ---------------------------------------------------------------------------
   Suscripción en la tabla de cuentas
   El estado y el control juntos: mirar quién tiene Plus y dárselo o quitárselo
   son la misma tarea, y separarlas en dos pantallas obliga a ir y volver.
   --------------------------------------------------------------------------- */
.plan-vence { display: block; font-size: .76rem; margin-top: .15rem; color: var(--text-2); }
.plan-vence.pronto { color: var(--danger); font-weight: 600; }
.plan-form { display: flex; gap: .3rem; align-items: center; margin-top: .4rem; flex-wrap: wrap; }
.plan-form select {
    font-size: .78rem; padding: .25rem .4rem; max-width: 10rem;
    border: 1px solid var(--text-3); border-radius: 6px;
    background: var(--surface); color: var(--text);
}

/* ---------------------------------------------------------------------------
   Cambiar la contraseña desde la tabla de cuentas
   Plegado: no es tarea de todos los días, y abierto ocuparía la fila entera de
   cada cuenta. Se despliega solo la que hace falta.
   --------------------------------------------------------------------------- */
.clave-caja { display: inline-block; margin-right: .4rem; vertical-align: top; }
.clave-caja > summary {
    cursor: pointer; list-style: none;
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .78rem; color: var(--text-2);
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    padding: .28rem .55rem; white-space: nowrap;
}
.clave-caja > summary::-webkit-details-marker { display: none; }
.clave-caja > summary:hover { border-color: var(--accent); color: var(--accent); }
.clave-form {
    display: flex; flex-direction: column; gap: .35rem;
    margin-top: .5rem; width: 15rem; text-align: left;
}
.clave-form input {
    padding: .4rem .55rem; font-size: .82rem;
    border: 1px solid var(--text-3); border-radius: 7px;
    background: var(--surface); color: var(--text);
}
.clave-nota { margin: 0; font-size: .74rem; color: var(--text-2); line-height: 1.45; }

/* Un botón suelto apagado —el informe, seguir— sigue recibiendo el clic para
   poder explicar por qué no hace lo suyo. */
.btn.apagado {
    opacity: .55;
    filter: grayscale(.55);
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Modal de suscripción
   Es el momento en que alguien decide si paga: merece leerse cómodo. Texto de
   tamaño normal, no de nota al pie.
   --------------------------------------------------------------------------- */
.plus-fondo {
    position: fixed; inset: 0; z-index: 200;
    display: grid; place-items: center;
    padding: 1.2rem;
    background: rgba(16, 24, 40, .55);
    backdrop-filter: blur(3px);
    animation: plus-entra .16s ease;
}
.plus-fondo[hidden] { display: none; }
body.plus-abierto { overflow: hidden; }

@keyframes plus-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes plus-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.plus-modal {
    position: relative;
    width: min(30rem, 100%);
    max-height: 88vh; overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-3);
    padding: 2rem 1.9rem 1.7rem;
    text-align: center;
    animation: plus-sube .22s cubic-bezier(.2, .8, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
    .plus-fondo, .plus-modal { animation: none; }
}

.plus-cerrar {
    position: absolute; top: .7rem; right: .7rem;
    width: 32px; height: 32px; padding: 0;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: none; color: var(--text-2); cursor: pointer;
}
.plus-cerrar:hover { background: var(--surface-hover); color: var(--text); }

.plus-sello {
    display: grid; place-items: center;
    width: 58px; height: 58px; margin: 0 auto .9rem;
    border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
}
.plus-modal h2 { margin: 0 0 .3rem; font-size: 1.3rem; letter-spacing: -.01em; }
.plus-que {
    margin: 0 0 .8rem; font-size: 1rem; font-weight: 600; color: var(--accent);
}
.plus-que:empty, .plus-que[hidden] { display: none; }
.plus-texto {
    margin: 0 auto 1.2rem; max-width: 34ch;
    font-size: .95rem; line-height: 1.6; color: var(--text-2);
}

.plus-lista {
    list-style: none; margin: 0 0 1.2rem; padding: 0;
    display: flex; flex-direction: column; gap: .5rem;
    text-align: left;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 1rem .2rem;
}
.plus-lista li {
    display: flex; align-items: flex-start; gap: .55rem;
    font-size: .92rem; line-height: 1.45; color: var(--text);
}
.plus-lista .ico { color: var(--ok); flex: none; margin-top: .12rem; }

.plus-precio { margin: 0 0 1.1rem; font-size: .95rem; color: var(--text-2); }
.plus-precio strong { font-size: 1.35rem; color: var(--text); }

.plus-acciones { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.plus-acciones .btn { flex: 1 1 auto; justify-content: center; min-width: 9rem; }

/* ---------------------------------------------------------------------------
   Prueba gratis: dos remates enteros
   Se dice ANTES de que la persona pulse, no después. Enterarse de que se ha
   gastado una prueba cuando ya está gastada no es un aviso, es una factura.
   --------------------------------------------------------------------------- */
.aviso-prueba {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    padding: .9rem 1.1rem; margin-bottom: 1rem;
    border: 1px solid var(--ok); border-radius: var(--radius-sm);
    background: var(--ok-soft);
    font-size: .9rem; line-height: 1.55; color: var(--text);
}
.aviso-prueba .ico { color: var(--ok); flex: none; }
.aviso-prueba p { margin: 0; flex: 1 1 300px; min-width: 0; }
.aviso-prueba .btn { flex: none; }

/* ---------------------------------------------------------------------------
   Progreso de descargas y generaciones
   Un botón que tarda un minuto sin decir nada no se distingue de uno roto.
   Ver public/assets/js/progreso.js.
   --------------------------------------------------------------------------- */
.pg-rueda {
    display: inline-block; width: 14px; height: 14px; flex: none;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; vertical-align: -2px;
    animation: pg-gira .7s linear infinite;
}
@keyframes pg-gira { to { transform: rotate(360deg); } }

.pg-texto { margin-left: .45rem; }

/* Un enlace no se puede «desactivar»: se le quitan los clics a mano */
.pg-inerte { pointer-events: none; opacity: .75; }

.pg-barra { margin-top: .9rem; }
.pg-pista {
    height: 6px; border-radius: 999px; overflow: hidden;
    background: var(--surface-hover);
}
.pg-avance {
    height: 100%; width: 0; border-radius: 999px;
    background: var(--accent);
    transition: width .35s ease;
}
/* Sin cuenta conocida se mueve sola en vez de inventarse un porcentaje */
.pg-barra.indeterminada .pg-avance {
    width: 35%;
    animation: pg-vaiven 1.1s ease-in-out infinite;
}
@keyframes pg-vaiven {
    0%   { margin-left: -35%; }
    100% { margin-left: 100%; }
}
.pg-paso {
    margin: .5rem 0 0; font-size: .85rem; line-height: 1.45; color: var(--text-2);
}
.pg-barra.bien .pg-avance { background: var(--ok); }
.pg-barra.bien .pg-paso { color: var(--ok); font-weight: 600; }
.pg-barra.mal .pg-avance { background: var(--danger); }
.pg-barra.mal .pg-paso { color: var(--danger); font-weight: 600; }

/* Quien pidió que no le muevan cosas en pantalla, no las ve moverse */
@media (prefers-reduced-motion: reduce) {
    .pg-rueda { animation-duration: 2s; }
    .pg-barra.indeterminada .pg-avance { animation: none; width: 100%; opacity: .5; }
}