/* Zona — sistema visual.
   ===========================================================================
   Referencia: el plano catastral y la placa de calle. Líneas finas de tinta,
   papel cálido, azul de azulejo para lo que se puede pulsar, y los números
   siempre en la misma columna. Nada de sombras gordas ni esquinas muy
   redondeadas: esto es una herramienta de trabajo, no una landing.

   Cómo está organizado este archivo:

     1. Tipografías
     2. Fichas de color (cuatro paletas completas)
     3. Medidas, formas, sombras y tiempos
     4. Marcas de cadena
     5. Base
     6. Controles
     7. Piezas
     8. Movimiento
     9. Barra de arriba
    10. Protección de pantalla

   Dos reglas que se siguen en todo el archivo:

   - Sobre un fondo de color nunca se escribe `#fff` a pelo, sino
     `var(--sobre-acento)`. En modo oscuro el azul (y el verde de Tecnocasa)
     se aclaran para verse sobre negro, y encima de ese tono claro el blanco
     no se lee: la tinta tiene que oscurecerse con él.
   - El verde, el ámbar y el rojo no son decoración: significan interesado,
     hay que volver y no le interesa. No se usan para nada más.

   Las tipografías están alojadas aquí, no en Google: además de cargar más
   rápido, evita mandar la IP de cada visitante a un tercero, que en Europa
   ha costado multas.
   =========================================================================== */

/* ==========================================================================
   1. Tipografías
   ========================================================================== */

/* Libre Franklin — grotesca institucional, la de la señalética y los impresos
   oficiales. Variable: un solo archivo de 400 a 700. */
@font-face {
  font-family: 'Franklin';
  src: url('/fuentes/franklin-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Franklin';
  src: url('/fuentes/franklin-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* La serif de lectura (Newsreader) ya no se usa: la aplicación va entera de un
   solo palo. Los archivos siguen en public/fuentes por si se quisiera
   recuperar para la portada, pero no se cargan, y por eso tampoco están en la
   lista del service worker.

   IBM Plex Mono — TODAS las cifras, y además las referencias catastrales y
   las coordenadas.

   El motivo de que los números vayan de aquí y no del texto: Libre Franklin
   no trae cifras tabulares. Sus dígitos miden cada uno lo suyo —un 1 ocupa
   bastante menos que un 8—, así que en una columna de una tabla no cuadran, y
   pedir `font-variant-numeric: tabular-nums` no arregla nada porque la
   tipografía no tiene esa variante que dar. Una hoja de CRM con las unidades
   sin alinear se lee mal y, sobre todo, se ve descuidada. Un palo seco
   monoespaciado es tabular por definición, así que ahí cuadran siempre. */
@font-face {
  font-family: 'Datos';
  src: url('/fuentes/mono-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Datos';
  src: url('/fuentes/mono-400-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Datos';
  src: url('/fuentes/mono-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Datos';
  src: url('/fuentes/mono-500-latin-ext.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Fichas de color
   --------------------------------------------------------------------------
   Cuatro paletas completas, una por combinación de marca y tema: Zona en
   claro y en oscuro, y lo mismo vestido con la marca de una cadena. Las dos
   últimas están más abajo, en el apartado de marcas, y se enganchan por el
   atributo data-marca de la etiqueta html.

   (Ese atributo no se escribe aquí entero a propósito: hay una prueba en
   src/revisar-todo.js que lee este archivo y mira que dentro de una regla de
   marca no se toquen el verde, el ámbar ni el rojo. Nombrar la regla en un
   comentario la despistaría.)

   Cada bloque escribe la paleta entera en vez de retocar la anterior. Es más
   largo de leer, pero se cambia un color sin tener que llevar en la cabeza
   qué hereda de dónde, y no depende del orden de las reglas.

   El tema NO se decide aquí con `prefers-color-scheme`, sino con el atributo
   `data-tema` que pone el guion de la cabecera de cada página antes de pintar
   nada (ver "tema" en js/comun.js). Así el que lo elige a mano manda sobre el
   sistema, y no hay parpadeo de blanco a negro al cargar.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Superficies, de atrás hacia delante. */
  --fondo: #F4F2EE;        /* el papel */
  --panel: #FFFFFF;        /* tarjetas, tablas, ventanas */
  --panel-alto: #FFFFFF;   /* lo que flota por encima del panel */
  --hundido: #EAE7E1;      /* cabeceras de tabla, casillas, lo desactivado */

  /* Líneas. La fina separa dentro de una tarjeta; la de borde la rodea. */
  --linea: #E4E0D9;
  --borde: #D2CDC4;
  --borde-fuerte: #B5AFA4;

  /* Tinta. --texto 16:1 y --suave 5,8:1 sobre --panel; --tenue solo para
     cosas que no hay que leer (marcas de posición, iconos apagados). */
  --texto: #16181C;
  --suave: #5C636D;
  --tenue: #8B919B;

  /* El azul de las placas de calle: identifica la marca y lo pulsable. */
  --acento: #16457F;         /* 9,7:1 sobre blanco */
  --acento-alto: #0F3462;    /* pulsado */
  --acento-vivo: #2C6BB8;    /* detalles y realces */
  --acento-claro: #E7EEF8;   /* fondo teñido */
  --acento-borde: #BED2EC;
  --sobre-acento: #FFFFFF;   /* lo que se escribe encima del acento */

  /* Los tres significados. No son decoración. */
  --bien: #1F6B4D;
  --bien-claro: #E3F0E9;
  --bien-borde: #B2D7C5;
  --aviso: #96600C;
  --aviso-claro: #FAEEDA;
  --aviso-borde: #E4CA99;
  --peligro: #97283C;
  --peligro-claro: #FAE6E9;
  --peligro-borde: #E8BEC6;

  /* Tono con el que se tiñen las sombras: el gris frío puro deja las
     tarjetas sucias sobre papel cálido. */
  --tinta-sombra: 24 22 18;
}

:root[data-tema="oscuro"] {
  color-scheme: dark;

  --fondo: #121417;
  --panel: #191C21;
  --panel-alto: #20242B;
  --hundido: #23272E;

  --linea: #272B32;
  --borde: #343A43;
  --borde-fuerte: #474E59;

  --texto: #E8E7E3;
  --suave: #9BA2AC;
  --tenue: #6E757F;

  /* El azul de la placa no se ve sobre negro: esta es la misma tinta
     aclarada. Y encima de ella se escribe oscuro, no blanco. */
  --acento: #83ACE1;
  --acento-alto: #A5C6EF;
  --acento-vivo: #9DC0EC;
  --acento-claro: #172739;
  --acento-borde: #2E4761;
  --sobre-acento: #0D1A2A;

  --bien: #65B492;
  --bien-claro: #142520;
  --bien-borde: #274336;
  --aviso: #D6A257;
  --aviso-claro: #2A2114;
  --aviso-borde: #4B3B1F;
  --peligro: #E28397;
  --peligro-claro: #2C181D;
  --peligro-borde: #4D2C34;

  --tinta-sombra: 0 0 0;
}

/* ==========================================================================
   4. Marcas de cadena
   --------------------------------------------------------------------------
   La aplicación vestida para una cadena concreta (ver js/marca.js). Se
   enciende sola cuando la empresa tiene marca; las demás no ven nada de esto.
   Solo cambian los grises y el color de lo pulsable: el verde, el ámbar y el
   rojo dicen siempre lo mismo y no se tocan.

   Tecnocasa: su verde es #158140. La barra de arriba se pinta entera de ese
   verde, con su logotipo en blanco en medio, que es como se les reconoce de
   lejos. Abajo, en la zona de trabajo, el verde se usa con cuentagotas: solo
   en lo que se pulsa. El papel se entibia un punto hacia el verde para que la
   barra no quede pegada encima, pero sigue siendo una herramienta de trabajo.

   Un cuidado: en Zona el verde ya significa "interesado". Por eso el de la
   marca es el vivo y saturado de la cadena, y el de los estados sigue siendo
   el apagado de siempre, sin tocarlo. Además nunca coinciden en el mismo
   sitio: el de la marca vive en la barra y en los botones, el de los estados
   en los puntos del mapa y en la columna Estado.
   ========================================================================== */

:root[data-marca="tecnocasa"] {
  color-scheme: light;

  --fondo: #F2F5F1;
  --panel: #FFFFFF;
  --panel-alto: #FFFFFF;
  --hundido: #E7ECE5;

  --linea: #E2E8DF;
  --borde: #D0D8CC;
  --borde-fuerte: #B2BCAD;

  --texto: #171D19;
  --suave: #58635B;
  --tenue: #879088;

  --acento: #158140;        /* 4,95:1 sobre blanco, y blanco encima también */
  --acento-alto: #0F6431;
  --acento-vivo: #1C9E4F;
  --acento-claro: #E3F1E8;
  --acento-borde: #B6DCC4;
  --sobre-acento: #FFFFFF;

  /* Aquí NO se redeclaran los colores de estado, y es a propósito: se heredan
     de la ficha de Zona de arriba. Quien ha aprendido a leer el mapa en una
     oficina lo lee igual en la de al lado, lleve la marca que lleve. Hay una
     prueba en src/revisar-todo.js que falla si una marca los toca. */

  --tinta-sombra: 20 26 21;

  /* La barra de arriba, en su verde. Es el mismo en claro y en oscuro: es el
     color de la cadena y no se destiñe. */
  --marca-barra: #158140;
  --marca-barra-texto: #FFFFFF;
}

:root[data-marca="tecnocasa"][data-tema="oscuro"] {
  color-scheme: dark;

  --fondo: #111512;
  --panel: #181D19;
  --panel-alto: #1F2520;
  --hundido: #222822;

  --linea: #262C27;
  --borde: #333B34;
  --borde-fuerte: #464F48;

  --texto: #E6EAE6;
  --suave: #97A199;
  --tenue: #6C756E;

  --acento: #56BF80;        /* 7,1:1 sobre el panel oscuro */
  --acento-alto: #7CD09E;
  --acento-vivo: #6BC98E;
  --acento-claro: #13251A;
  --acento-borde: #28422F;
  --sobre-acento: #071710;

  /* Los colores de estado tampoco se tocan aquí: caen de la ficha oscura de
     Zona, que gana a la clara por especificidad. Ver la nota de arriba. */

  --tinta-sombra: 0 0 0;

  --marca-barra: #158140;
  --marca-barra-texto: #FFFFFF;
}

/* ==========================================================================
   3. Medidas, formas, sombras y tiempos
   --------------------------------------------------------------------------
   Van aparte de los colores porque no cambian con el tema ni con la marca,
   salvo las sombras, que se tiñen con --tinta-sombra.
   ========================================================================== */

:root {
  /* Formas. Esquinas apenas matadas: lo justo para que un canto no corte, y
     nada más. Una esquina redonda de verdad es alegre, y esto es una
     herramienta de trabajo con la que se enseñan datos de clientes.

     Tampoco van a noventa grados del todo: un filo perfectamente vivo se lee
     como un borrador sin terminar. Dos o tres píxeles no se ven, pero se
     notan.

     --redondo queda solo para lo que es un círculo de verdad: los puntos de
     color de los estados y el anillo del testigo de conexión. Nada que lleve
     texto dentro es una pastilla. */
  --radio-xs: 2px;   /* pastillas de estado, marcas pequeñas */
  --radio: 3px;      /* botones, campos, lo que se pulsa */
  --radio-g: 4px;    /* tarjetas, tablas, bloques */
  --radio-xg: 6px;   /* ventanas y la hoja del mapa */
  --redondo: 999px;  /* círculos, y nada más */

  /* Espacio. Una sola escala, para que las separaciones rimen entre
     pantallas en vez de ir cada una por su lado. */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 22px;
  --e6: 30px;
  --e7: 42px;
  --e8: 58px;

  /* Sombras. Dos capas cada una: un filete muy pegado que dibuja el canto, y
     una difusa que separa del papel. Una sola capa siempre parece un
     desenfoque, no una elevación. */
  --sombra: 0 1px 1px rgb(var(--tinta-sombra) / .04),
            0 1px 2px rgb(var(--tinta-sombra) / .05);
  --sombra-media: 0 1px 1px rgb(var(--tinta-sombra) / .05),
                  0 3px 8px rgb(var(--tinta-sombra) / .07);
  --sombra-alta: 0 1px 2px rgb(var(--tinta-sombra) / .06),
                 0 12px 32px rgb(var(--tinta-sombra) / .10);
  --sombra-flotante: 0 2px 4px rgb(var(--tinta-sombra) / .08),
                     0 18px 48px rgb(var(--tinta-sombra) / .16);

  /* Tiempos. Lo que responde al dedo va por debajo de 160 ms: por encima se
     nota el retraso. Lo que entra o sale de la pantalla puede tomarse más,
     porque ahí el recorrido es lo que se lee. */
  --rapido: 120ms;
  --medio: 190ms;
  --lento: 320ms;
  --muy-lento: 520ms;

  /* Curvas. --salida arranca deprisa y se posa: es la de las cosas que
     aparecen. --entrada es simétrica, para cambios de estado. --muelle pasa
     un pelo de largo y vuelve, solo para lo que se pulsa. */
  --salida: cubic-bezier(.22, 1, .36, 1);
  --entrada: cubic-bezier(.4, 0, .2, 1);
  --muelle: cubic-bezier(.34, 1.26, .64, 1);

  /* Dos tipografías y se acabó: una grotesca institucional para las palabras
     y una monoespaciada para las cifras. Es el reparto de un impreso serio —
     un informe anual, un extracto de banco— y no hace falta nada más. */
  --fuente: 'Franklin', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'Datos', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* El rótulo pequeño en versalitas: el que dice de qué periodo es una cifra
     o cómo se llama una columna. Va del mismo palo que el texto, no de la
     monoespaciada: en versalitas, una monoespaciada suena a máquina de
     escribir y le quita formalidad a toda la pantalla. Se usa con
     `font: var(--rotulo)` y las dos líneas de debajo. */
  --rotulo: 600 10.5px/1.45 var(--fuente);
  --rotulo-letra: .085em;
}

/* ==========================================================================
   5. Base
   ========================================================================== */

* { box-sizing: border-box; }

/* Lo que lleva 'hidden' se esconde, y no se discute.
   Sin esto, cualquier regla que fije un display (por ejemplo .vivo, que es
   inline-flex) le gana al atributo y el elemento sigue viéndose aunque el
   código lo haya escondido. Pasó con el aviso de "conectando" del panel, y es
   un fallo que puede repetirse en cualquier pantalla. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; height: 100%; }

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 15.5px;
  line-height: 1.55;
  /* 'kern' junta los pares que lo piden; 'ss01' y 'cv05' no existen en
     Franklin, así que no se piden. 'tnum' NO se pone global: en un párrafo
     las cifras tabulares dejan huecos. Va pieza a pieza, en .n y .mono. */
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

/* Los títulos van apretados: es lo que separa un impreso serio de una
   plantilla. El peso se queda en 600; el 700 se reserva para el H1. */
h1, h2, h3 {
  margin: 0;
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.018em; }
h2 { font-size: 1.1rem; letter-spacing: -.012em; }
h3 { font-size: .95rem; letter-spacing: -.006em; }
p { margin: 0 0 12px; text-wrap: pretty; }

a { color: var(--acento); text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 2px; }

/* El rótulo de sección. Se usa para decir de qué periodo es una cifra o cómo
   se llama una columna, no para titular. */
.etiqueta {
  font: var(--rotulo);
  letter-spacing: var(--rotulo-letra);
  text-transform: uppercase;
  color: var(--suave);
}

.suave { color: var(--suave); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Todo lo que sea una cifra va de la monoespaciada, y así cuadra en columna.
   Ver la nota de arriba, junto a las tipografías: el palo del texto no tiene
   cifras tabulares que dar, por mucho que se le pidan. */
.n, td.n, .cifra b, .cuenta {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Que el ratón no arrastre por accidente los rótulos de una tabla. */
th { user-select: none; }

/* Barras de scroll discretas dentro de los paneles. En Firefox y en los
   navegadores de Chromium se piden de forma distinta; las dos van. */
* { scrollbar-width: thin; scrollbar-color: var(--borde) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--borde);
  border-radius: var(--redondo);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--borde-fuerte); background-clip: content-box; }

::selection { background: var(--acento-claro); color: var(--texto); }

/* ==========================================================================
   6. Controles
   ========================================================================== */

.boton {
  appearance: none;
  position: relative;
  border: 1px solid var(--borde);
  background: var(--panel);
  color: var(--texto);
  font: inherit;
  font-weight: 500;
  letter-spacing: -.005em;
  padding: 10px 15px;
  min-height: 42px;
  border-radius: var(--radio);
  cursor: pointer;
  /* Hay botones que son enlaces (<a class="boton">): sin esto salen subrayados. */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-shadow: var(--sombra);
  transition:
    background var(--rapido) var(--entrada),
    border-color var(--rapido) var(--entrada),
    box-shadow var(--medio) var(--entrada),
    transform var(--rapido) var(--muelle);
}
.boton:hover {
  background: var(--hundido);
  border-color: var(--borde-fuerte);
}
/* Se hunde bajo el dedo. Un botón que no acusa el clic parece roto cuando la
   respuesta tarda. */
.boton:active { transform: translateY(1px) scale(.994); box-shadow: none; }
.boton:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
.boton[disabled] { opacity: .45; cursor: default; box-shadow: none; transform: none; }
.boton[disabled]:hover { background: var(--panel); border-color: var(--borde); }

.boton.principal {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--sobre-acento);
  box-shadow: var(--sombra-media);
}
/* El principal se levanta un punto al pasar por encima en vez de aclararse:
   `filter: brightness()` sobre un color de marca lo desvía de su tono, y el
   verde de una cadena es el verde de esa cadena. */
.boton.principal:hover {
  background: var(--acento-alto);
  border-color: var(--acento-alto);
  transform: translateY(-1px);
  box-shadow: var(--sombra-alta);
}
.boton.principal:active { transform: translateY(0) scale(.994); box-shadow: var(--sombra); }

.boton.fantasma { background: transparent; border-color: transparent; box-shadow: none; }
.boton.fantasma:hover { background: var(--hundido); border-color: transparent; }
.boton.peligro { color: var(--peligro); border-color: var(--peligro-borde); }
.boton.peligro:hover { background: var(--peligro-claro); border-color: var(--peligro); }
.boton.ancho { width: 100%; }
.boton.pequeno { min-height: 33px; padding: 5px 11px; font-size: .87rem; }

.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
/* Dos campos que van juntos y se leen como uno: el día y la hora de la
   próxima visita. La hora ocupa menos, que es lo que pide. */
.campo-doble { display: flex; gap: 10px; }
.campo-doble > .campo { flex: 1; margin-bottom: 13px; }
.campo-doble > .campo:last-child { flex: 0 0 38%; }
.campo > span {
  font-size: .78rem;
  font-weight: 500;
  color: var(--suave);
  letter-spacing: .005em;
}

input, select, textarea {
  font: inherit;
  color: var(--texto);
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 10px 12px;
  min-height: 42px;
  width: 100%;
  transition:
    border-color var(--rapido) var(--entrada),
    box-shadow var(--medio) var(--entrada),
    background var(--rapido) var(--entrada);
}
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) {
  border-color: var(--borde-fuerte);
}
textarea { min-height: 80px; resize: vertical; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: var(--tenue); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-claro);
}
/* El autorrelleno de Chrome pinta el campo de amarillo y se salta el tema.
   No hay forma de quitar ese fondo, pero sí de taparlo con una sombra
   interior del color del panel, que es lo que se hace aquí. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--texto);
  -webkit-box-shadow: 0 0 0 40px var(--panel) inset;
  caret-color: var(--texto);
}
/* La flecha del desplegable, dibujada aquí para que siga al tema. */
select:not([multiple]):not([size]) {
  appearance: none;
  padding-right: 32px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--acento); }
input[type="file"] { padding: 8px 10px; }

.aviso {
  padding: 10px 13px;
  border-radius: var(--radio);
  font-size: .88rem;
  line-height: 1.5;
  margin-bottom: 13px;
  border: 1px solid var(--linea);
  background: var(--hundido);
}
.aviso.error { background: var(--peligro-claro); border-color: var(--peligro-borde); color: var(--texto); }
.aviso.bien  { background: var(--bien-claro);    border-color: var(--bien-borde);    color: var(--texto); }
.aviso:empty { display: none; }
/* Un aviso que aparece después de pulsar algo tiene que notarse llegar, o se
   pierde entre lo que ya había en pantalla. */
.aviso:not(:empty) { animation: avisar var(--lento) var(--salida) backwards; }
@keyframes avisar {
  from { opacity: 0; transform: translateY(-4px); }
}

/* ==========================================================================
   7. Piezas
   ========================================================================== */

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-g);
  padding: 16px;
  box-shadow: var(--sombra);
}
/* Una tarjeta que se pulsa entera. */
.tarjeta.pulsable {
  cursor: pointer;
  transition: box-shadow var(--medio) var(--entrada),
              border-color var(--medio) var(--entrada),
              transform var(--medio) var(--salida);
}
.tarjeta.pulsable:hover {
  border-color: var(--borde);
  box-shadow: var(--sombra-media);
  transform: translateY(-2px);
}

.punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 3px 8px;
  border-radius: var(--radio-xs);
  background: var(--hundido);
  color: var(--texto);
  white-space: nowrap;
}

.filtros { display: flex; gap: 6px; overflow-x: auto; padding: 3px 1px; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }

.filtro {
  appearance: none;
  border: 1px solid var(--borde);
  background: var(--panel);
  color: var(--suave);
  font: inherit;
  font-size: .84rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radio);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--rapido) var(--entrada),
    color var(--rapido) var(--entrada),
    border-color var(--rapido) var(--entrada),
    transform var(--rapido) var(--muelle);
}
.filtro:hover { color: var(--texto); background: var(--hundido); border-color: var(--borde-fuerte); }
.filtro:active { transform: scale(.96); }
.filtro[aria-pressed="true"] {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--sobre-acento);
}
.filtro:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.vacio { padding: 26px 16px; text-align: center; color: var(--suave); font-size: .89rem; }

/* --- Pestañas -------------------------------------------------------------
   El apartado abierto se marca con un filete que crece desde el centro al
   cambiar, en vez de aparecer de golpe. Lo usan el panel y Gestión. */

.pestanas {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: 0 0 var(--e5);
  border-bottom: 1px solid var(--linea);
}
.pestanas button {
  appearance: none; border: 0; background: none; cursor: pointer;
  position: relative;
  font: inherit; font-weight: 600; font-size: .92rem; color: var(--suave);
  padding: 9px 14px; border-radius: var(--radio) var(--radio) 0 0;
  transition: color var(--rapido) var(--entrada), background var(--rapido) var(--entrada);
}
.pestanas button::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--acento);
  transform: scaleX(0);
  transition: transform var(--medio) var(--salida);
}
.pestanas button:hover { color: var(--texto); background: var(--hundido); }
.pestanas button[aria-current="page"] { color: var(--acento); }
.pestanas button[aria-current="page"]::after { transform: scaleX(1); }
.pestanas button:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

/* --- Paginación ----------------------------------------------------------
   Saber en qué página estás y poder saltar a otra. Un botón de "cargar más"
   deja al usuario sin ninguna referencia de dónde está. */

.paginas { display: flex; align-items: center; gap: 3px; }
.paginas button {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--suave);
  font: inherit;
  font-size: .82rem;
  font-weight: 500;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border-radius: var(--radio);
  cursor: pointer;
  transition: background var(--rapido) var(--entrada), color var(--rapido) var(--entrada);
}
.paginas button:hover:not([disabled]):not([aria-current]) { background: var(--hundido); color: var(--texto); }
.paginas button[aria-current="page"] {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--sobre-acento);
}
.paginas button[disabled] { opacity: .3; cursor: default; }
.paginas button:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.paginas .puntos { color: var(--tenue); padding: 0 2px; user-select: none; font-size: .85rem; }
.paginas input {
  width: 52px; min-height: 30px; height: 30px; padding: 0 6px;
  text-align: center; font-size: .82rem;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}

/* --- Ventanas -------------------------------------------------------------
   Lo común a todos los <dialog>. Cada pantalla ajusta el suyo, pero el fondo
   y la entrada son los mismos en toda la aplicación. */

dialog {
  border: 1px solid var(--borde);
  border-radius: var(--radio-g);
  padding: 0;
  background: var(--panel);
  color: var(--texto);
  box-shadow: var(--sombra-flotante);
}
dialog::backdrop {
  background: rgb(var(--tinta-sombra) / .5);
  backdrop-filter: blur(2px);
  animation: fundir var(--medio) var(--entrada);
}
dialog[open] { animation: ventana var(--lento) var(--salida); }
@keyframes ventana {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
}
@keyframes fundir { from { opacity: 0; } }

/* ==========================================================================
   8. Movimiento
   --------------------------------------------------------------------------
   Todo lo de aquí es adorno y tiene que poder apagarse: el último bloque lo
   desactiva entero para quien ha pedido en su sistema que no se mueva nada.
   Ninguna animación tapa ni retrasa nada que haya que pulsar.
   ========================================================================== */

/* Lo que llega de una petición aparece subiendo un poco, en vez de dar un
   salto en la página. Con `backwards` el elemento ya está invisible antes de
   empezar, así que no parpadea. */
.aparece { animation: subir var(--muy-lento) var(--salida) backwards; }
@keyframes subir {
  from { opacity: 0; transform: translateY(10px); }
}

/* Una lista que entra escalonada se lee en orden en vez de toda a la vez. El
   retraso lo pone quien pinta la lista con `style="--i:3"`, y se corta a los
   ocho para que el último no se haga esperar. */
.aparece { animation-delay: calc(min(var(--i, 0), 8) * 45ms); }

/* Barras que crecen desde la izquierda al pintarse: el embudo, el progreso de
   una zona, el reparto de estados. */
.crece-barra { animation: crecer var(--muy-lento) var(--salida) backwards; transform-origin: left center; }
@keyframes crecer {
  from { transform: scaleX(0); }
}

/* Esperando datos: un barrido de luz sobre el hueco que van a ocupar. */
.cargando { position: relative; overflow: hidden; }
.cargando::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--tinta-sombra) / .04) 20%,
    var(--hundido) 50%,
    rgb(var(--tinta-sombra) / .04) 80%,
    transparent
  );
  animation: barrido 1.4s var(--entrada) infinite;
  pointer-events: none;
}
@keyframes barrido { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* El latido de "estás conectado": un anillo que se abre y se apaga. Es más
   tranquilo que un punto que parpadea, y se distingue de un error. */
.late { position: relative; }
.late::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: currentColor;
  animation: anillo 2.4s var(--salida) infinite;
  pointer-events: none;
}
@keyframes anillo {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(3.2); }
  100% { opacity: 0;   transform: scale(3.2); }
}

/* Un dato que acaba de cambiar se enciende un momento y se apaga solo. */
.recien { animation: destacar 1.6s var(--entrada); }
@keyframes destacar {
  from { background: var(--acento-claro); }
  to   { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .boton:hover, .boton.principal:hover, .tarjeta.pulsable:hover { transform: none; }
}

/* ==========================================================================
   9. Barra de arriba: la misma en Mapa, CRM, Panel y Gestión (js/barra.js)
   ========================================================================== */

.barra-app {
  flex: none; position: sticky; top: 0; z-index: 700;
  background: var(--panel); border-bottom: 1px solid var(--borde);
  /* En el móvil, por debajo de la muesca y de la hora. */
  padding-top: env(safe-area-inset-top);
}
.barra-app-dentro {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 18px; min-height: 52px;
}
.barra-app-logo {
  display: flex; align-items: center; gap: 8px; flex: none;
  color: var(--texto); text-decoration: none;
  border-radius: var(--radio);
}
.barra-app-logo img { width: 26px; height: 26px; border-radius: var(--radio); display: block; }
.barra-app-logo b { font-weight: 700; letter-spacing: -.02em; }

.barra-app-nav { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.barra-app-nav::-webkit-scrollbar { display: none; }
.barra-app-nav a {
  position: relative;
  flex: none; font-size: .88rem; font-weight: 600; color: var(--suave);
  text-decoration: none; padding: 7px 12px; border-radius: var(--radio); white-space: nowrap;
  transition: background var(--rapido) var(--entrada), color var(--rapido) var(--entrada);
}
.barra-app-nav a:hover { background: var(--hundido); color: var(--texto); }
.barra-app-nav a[aria-current="page"] { background: var(--acento-claro); color: var(--acento); }
/* La sección donde estás lleva además un filete debajo, pegado al borde de la
   barra: con solo el fondo teñido se confunde con el estado de "encima". */
.barra-app-nav a[aria-current="page"]::after {
  content: '';
  position: absolute; left: 12px; right: 12px; bottom: -10px; height: 2px;
  background: var(--acento);
  border-radius: 1px;
}
.barra-app-nav a:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

.barra-app-hueco { flex: 1; }
.barra-app-quien { text-align: right; font-size: .8rem; line-height: 1.3; min-width: 0; }
/* Es un botón (abre "Tu perfil", ver js/barra.js), pero se lee como texto. */
button.barra-app-quien {
  appearance: none; background: none; border: 0; margin: 0;
  padding: 4px 8px; border-radius: var(--radio);
  font: inherit; font-size: .8rem; color: var(--texto); cursor: pointer;
  transition: background var(--rapido) var(--entrada);
}
button.barra-app-quien:hover { background: var(--hundido); }
button.barra-app-quien:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.barra-app-quien b {
  display: block; font-size: .86rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch;
}
.barra-app-quien span {
  display: block; color: var(--suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26ch;
}
.barra-app-salir { flex: none; }

/* El interruptor de tema. Dos iconos en la misma casilla: el que toca crece y
   el otro se encoge y se va. Es un adorno de medio segundo, pero es de las
   primeras cosas que alguien prueba cuando le enseñas el programa. */
.barra-app-tema {
  flex: none;
  appearance: none;
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--panel); color: var(--suave);
  cursor: pointer;
  transition: background var(--rapido) var(--entrada),
              color var(--rapido) var(--entrada),
              border-color var(--rapido) var(--entrada);
}
.barra-app-tema:hover { background: var(--hundido); color: var(--texto); border-color: var(--borde-fuerte); }
.barra-app-tema:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.barra-app-tema svg { grid-area: 1 / 1; width: 17px; height: 17px; display: block; }
.barra-app-tema svg { transition: opacity var(--medio) var(--salida), transform var(--medio) var(--salida); }
.barra-app-tema .icono-luna { opacity: 0; transform: scale(.4) rotate(-70deg); }
:root[data-tema="oscuro"] .barra-app-tema .icono-sol { opacity: 0; transform: scale(.4) rotate(70deg); }
:root[data-tema="oscuro"] .barra-app-tema .icono-luna { opacity: 1; transform: none; }

/* En el móvil caben las cuatro secciones y Salir; quién eres ya lo sabes. */
@media (max-width: 720px) {
  .barra-app-quien { display: none; }
}
@media (max-width: 520px) {
  .barra-app-dentro { gap: 8px; padding: 7px 10px; min-height: 48px; }
  .barra-app-logo b { display: none; }
  .barra-app-nav a { padding: 7px 9px; font-size: .84rem; }
  .barra-app-nav a[aria-current="page"]::after { left: 9px; right: 9px; bottom: -8px; }
  .barra-app-salir.boton.pequeno { padding: 5px 9px; font-size: .82rem; }
  .barra-app-tema { width: 30px; height: 30px; }
}

/* --- La barra con la marca de una cadena --------------------------------- */

:root[data-marca] .barra-app {
  background: var(--marca-barra);
  border-bottom-color: transparent;
  /* Una barra de color a sangre queda pegada al contenido: un filete de luz
     por debajo la despega sin meter una línea de otro color. */
  box-shadow: 0 1px 0 rgb(0 0 0 / .12), 0 1px 12px rgb(0 0 0 / .08);
}
:root[data-marca] .barra-app-nav a,
:root[data-marca] .barra-app-quien,
:root[data-marca] .barra-app-quien b,
:root[data-marca] .barra-app-tema,
:root[data-marca] .barra-app-salir.boton,
:root[data-marca] .barra-app-marca-nombre {
  color: var(--marca-barra-texto);
}
/* Los velos y la letra de la barra van con variables porque la marca propia de
   una empresa puede ser de un color claro, y encima de ese la letra es negra
   (ver paletaDe en js/marca.js). Con las preparadas salen blancos, como antes. */
:root[data-marca] .barra-app-quien span { color: rgb(var(--marca-barra-velo, 255 255 255) / .72); }
:root[data-marca] button.barra-app-quien:hover { background: rgb(var(--marca-barra-velo, 255 255 255) / .14); }
:root[data-marca] .barra-app-nav a:hover { background: rgb(var(--marca-barra-velo, 255 255 255) / .14); color: var(--marca-barra-texto); }
:root[data-marca] .barra-app-nav a[aria-current="page"] {
  background: rgb(var(--marca-barra-velo, 255 255 255) / .18);
  color: var(--marca-barra-texto);
}
:root[data-marca] .barra-app-nav a[aria-current="page"]::after { background: var(--marca-barra-texto); }
:root[data-marca] .barra-app-salir.boton,
:root[data-marca] .barra-app-tema {
  background: transparent;
  border-color: rgb(var(--marca-barra-velo, 255 255 255) / .38);
  box-shadow: none;
}
:root[data-marca] .barra-app-salir.boton:hover,
:root[data-marca] .barra-app-tema:hover {
  background: rgb(var(--marca-barra-velo, 255 255 255) / .14);
  border-color: rgb(var(--marca-barra-velo, 255 255 255) / .6);
  color: var(--marca-barra-texto);
}

/* El logotipo, centrado en la barra y por detrás de lo que se pulsa. */
.barra-app-marca {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; pointer-events: none;
}
.barra-app-marca img { height: 31px; width: auto; display: block; }
/* El logotipo que sube una empresa puede ser de cualquier color, y sobre su
   barra podría no verse: va en una placa blanca. */
.barra-app-marca.placa img { max-width: 220px; object-fit: contain; background: #fff; padding: 3px 8px; border-radius: var(--radio-g); }
.barra-app-marca-nombre { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; white-space: nowrap; }
:root[data-marca] .barra-app-dentro { position: relative; }
.barra-app-dentro:has(> .barra-app-marca) { position: relative; }

/* En pantallas estrechas no hay hueco en medio: el logotipo se va a la
   izquierda, en el sitio donde estaba el de Zona. */
@media (max-width: 860px) {
  .barra-app-marca { position: static; transform: none; order: -1; flex: none; }
  .barra-app-marca img { height: 22px; }
}

/* En un móvil de 360-420 píxeles, con el logotipo de una cadena (más ancho que
   el de Zona) y la campanita, "Gestión" se cortaba. Se aprieta lo justo. */
@media (max-width: 420px) {
  .barra-app-dentro { gap: 5px; padding-left: 8px; padding-right: 8px; }
  .barra-app-nav a { padding: 7px 5px; font-size: .8rem; }
  .barra-app-marca img { height: 19px; }
  .barra-app-marca.placa img { padding: 2px 5px; }
  .barra-app-salir.boton.pequeno { padding: 5px 7px; }
}

/* ==========================================================================
   10. Protección de la pantalla (js/proteccion.js)
   ========================================================================== */

/* Marca de agua con quién mira y cuándo: sale en cualquier captura. */
.marca-agua {
  position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background-image: var(--marca-agua); background-repeat: repeat;
}
/* Las ventanas (<dialog>) se pintan por encima de todo: llevan su propia marca. */
dialog::after {
  content: ''; position: absolute; inset: 0; z-index: 10; pointer-events: none;
  background-image: var(--marca-agua); background-repeat: repeat;
}

/* La pantalla en negro. */
.cortina {
  position: fixed; inset: 0; z-index: 2147483647;
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: #000; color: #8a8a8a;
  display: none; place-items: center; text-align: center;
  box-shadow: none; border-radius: 0;
}
.cortina.visible { display: grid; }
/* La cortina no es un <dialog>, sino un div con `popover` (ver
   js/proteccion.js): así sube a la capa de arriba del navegador y tapa
   también las ventanas abiertas. Un popover tiene su propio ::backdrop, y
   aquí va negro y sin desvanecido: la pantalla tiene que caer al instante,
   no posarse. */
.cortina::backdrop { background: #000; animation: none; }
.cortina b { display: block; color: #d6d6d6; font-size: 1.05rem; font-weight: 600; margin-bottom: 6px; }
.cortina span { font-size: .85rem; }
/* Mientras corre la espera del destape (ver js/proteccion.js) cambia el aviso,
   para que se vea que se ha pulsado y que está en camino. */
.cortina .cortina-espera { display: none; }
.cortina.esperando .cortina-vuelve { display: none; }
.cortina.esperando .cortina-espera { display: block; }

/* ==========================================================================
   11. Tu perfil y los cambios del administrador (js/barra.js, js/comun.js)
   ========================================================================== */

/* "Tu perfil": quién eres para la aplicación y qué puedes hacer. */
dialog.perfil { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; }

/* --- La campanita (js/campanita.js) ------------------------------------------
   El botón es el del tema (.barra-app-tema); aquí solo va el contador, en la
   esquina, y la ventana con la lista. Lo justo para que funcione y se lea: el
   acabado es cosa del diseño. */
.campanita { position: relative; }
.campanita-cuenta {
  position: absolute; top: -5px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; display: grid; place-items: center;
  font: 700 .66rem/1 var(--mono);
  background: var(--suave); color: var(--fondo);
  pointer-events: none;
}
/* Algo que ya tocaba o es de hoy: la cuenta en rojo, para que se vea sin abrir. */
.campanita-cuenta.urgente { background: var(--peligro); color: #fff; }

dialog.avisos { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; }
.avisos-cab {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3);
  padding: var(--e5) var(--e5) var(--e2);
}
.avisos-cab h2 { font-size: 1.1rem; font-weight: 700; }
.avisos-explica { padding: 0 var(--e5) var(--e3); font-size: .82rem; color: var(--suave); border-bottom: 1px solid var(--borde); }
.avisos-lista { display: grid; padding: var(--e2) var(--e3) var(--e4); }
.avisos-vacio { padding: var(--e4) var(--e3); font-size: .86rem; color: var(--suave); }
.aviso-fila {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e3); border-radius: var(--radio);
  color: var(--texto); text-decoration: none;
}
.aviso-fila:hover, .aviso-fila:focus-visible { background: var(--hundido); }
.aviso-punto { flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--suave); }
.aviso-fila.tarde .aviso-punto { background: var(--peligro); }
.aviso-fila.hoy .aviso-punto { background: var(--aviso); }
.aviso-fila.manana .aviso-punto { background: var(--acento); }
.aviso-fila.frio .aviso-punto { background: var(--tenue); }
/* Los movimientos del equipo, para el administrador y el jefe de oficina. */
.aviso-fila.equipo .aviso-punto { background: var(--acento-vivo); }
.avisos-titulo {
  font: var(--rotulo); letter-spacing: var(--rotulo-letra); text-transform: uppercase;
  color: var(--suave); padding: var(--e4) var(--e3) 0;
}
.avisos-nota { padding: 2px var(--e3) var(--e2); font-size: .78rem; color: var(--suave); }
.aviso-cuando { font-size: .72rem; color: var(--suave); white-space: nowrap; margin-left: auto; padding-left: var(--e2); }
.aviso-donde { font-size: .78rem; }
.aviso-donde.cerca { color: var(--bien); font-weight: 600; }
.aviso-donde.medio { color: var(--suave); }
.aviso-donde.lejos { color: var(--aviso); font-weight: 600; }
.aviso-texto { display: grid; gap: 2px; min-width: 0; }
.aviso-texto b { font-weight: 650; }
.aviso-fila.tarde .aviso-texto b { color: var(--peligro); }
.aviso-texto span { font-size: .8rem; color: var(--suave); }

/* --- Fotos y documentos de una vivienda (js/archivos.js) ---------------------
   El mismo bloque en la ficha del mapa y en el panel del CRM. Lo justo para
   que funcione y se lea: el acabado es cosa del diseño. */
.archivos { display: grid; gap: var(--e2); margin-top: var(--e3); }
.archivos-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin-top: var(--e2); }
.archivos-titulo { font: var(--rotulo); letter-spacing: var(--rotulo-letra); text-transform: uppercase; color: var(--suave); }
.archivos-anadir { cursor: pointer; }
.archivos-anadir:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }
.archivos-vacio { font-size: .8rem; color: var(--suave); }
.archivos-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--e2); }
.archivos-foto { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radio); overflow: hidden; background: var(--hundido); }
.archivos-foto a { display: block; width: 100%; height: 100%; }
.archivos-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.archivos-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); }
.archivos-docs li {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 var(--e2);
  padding: var(--e2) var(--e3); border: 1px solid var(--borde); border-radius: var(--radio);
}
.archivos-docs a { font-weight: 600; overflow-wrap: anywhere; }
.archivos-meta { grid-column: 1; font-size: .74rem; color: var(--suave); }
.archivos-docs .archivos-quitar { grid-column: 2; grid-row: 1 / span 2; }
.archivos-quitar {
  width: 30px; height: 30px; border: 0; border-radius: var(--radio);
  background: var(--panel); color: var(--texto); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.archivos-foto .archivos-quitar { position: absolute; top: 4px; right: 4px; box-shadow: var(--sombra); }
.archivos-quitar:hover { color: var(--peligro); }
.archivos-aviso { font-size: .8rem; color: var(--suave); }
.archivos-aviso:empty { display: none; }
.archivos-aviso.mal { color: var(--peligro); }
/* En el panel del CRM el bloque va en su propia sección: si no hay nada que
   enseñar (sin permiso para documentos y la casa sin encargo), ni se ve. */
.pv-archivos:has(> .archivos[hidden]), .pv-archivos:empty { display: none; }
.pv-archivos .archivos { margin-top: 0; }
.perfil-cab {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3);
  padding: var(--e5) var(--e5) var(--e3);
}
.perfil-cab h2 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
.perfil-cab span { display: block; margin-top: 2px; font-size: .8rem; color: var(--suave); }
.perfil-rol { padding: 0 var(--e5) var(--e4); border-bottom: 1px solid var(--borde); }
.perfil-rol p { margin-top: var(--e2); font-size: .84rem; color: var(--suave); line-height: 1.5; }
.perfil-insignia {
  display: inline-block; padding: 3px 9px; border-radius: var(--radio);
  font-size: .78rem; font-weight: 700; letter-spacing: .01em;
  background: var(--acento-claro); color: var(--acento);
}
.perfil-insignia.rol-admin { background: var(--acento); color: var(--sobre-acento); }
.perfil h3 { font: var(--rotulo); letter-spacing: var(--rotulo-letra); text-transform: uppercase; color: var(--suave); padding: var(--e4) var(--e5) var(--e2); }
.perfil-permisos { list-style: none; margin: 0; padding: 0 var(--e3); }
.perfil-permisos li {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--e2);
  padding: 7px var(--e2); border-radius: var(--radio);
}
.perfil-permisos b { display: block; font-size: .87rem; font-weight: 600; }
.perfil-permisos li span:not(.perfil-marca) { display: block; font-size: .78rem; color: var(--suave); line-height: 1.45; }
.perfil-marca { font-weight: 700; text-align: center; line-height: 1.35; }
.perfil-permisos li.si .perfil-marca { color: var(--bien); }
.perfil-permisos li.no { opacity: .62; }
.perfil-permisos li.no .perfil-marca { color: var(--suave); }
.perfil-pie { padding: var(--e3) var(--e5) var(--e5); font-size: .78rem; color: var(--suave); line-height: 1.5; }

/* El aviso de que el administrador ha cambiado lo que puedes hacer. Sale
   arriba en el centro, por encima de todo, y la pantalla se rehace sola. */
.aviso-cambio {
  /* Centrado con márgenes y no con transform: la animación de entrada usa
     transform y se lo comía, y el aviso salía corrido a la derecha. */
  position: fixed; inset: 16px 0 auto 0; margin: 0 auto;
  z-index: 2147482000;
  width: min(460px, calc(100vw - 32px));
  padding: var(--e4) var(--e5); border: 1px solid var(--borde); border-left: 4px solid var(--acento);
  border-radius: var(--radio-g); background: var(--panel); color: var(--texto);
  box-shadow: var(--sombra-flotante);
  animation: ventana var(--lento) var(--salida);
}
.aviso-cambio b { display: block; font-size: .95rem; margin-bottom: var(--e2); }
.aviso-cambio p { font-size: .86rem; line-height: 1.5; margin-top: 2px; }
.aviso-cambio p span { color: var(--suave); }
.aviso-cambio small { display: block; margin-top: var(--e2); font-size: .76rem; color: var(--suave); }

/* Imprimir o "guardar como PDF": la página sale en blanco. */
@media print {
  body > * { display: none !important; }
  body::before {
    content: 'Zona: esta página no se puede imprimir ni guardar.';
    display: block; padding: 40px; font: 16px sans-serif; color: #000;
  }
}