/* tema.css — el kit visual de Domenia.
 *
 * Los colores viven en variables: los tres modos (claro, oscuro y alto contraste) son el mismo
 * diseño con otros valores, así que cambiar de modo no toca ninguna pantalla.
 *
 * Modos: se eligen con el atributo `data-modo` en <html> («claro», «oscuro», «contraste» o
 * «sistema»). «Sistema» no fija nada: deja actuar a `prefers-color-scheme`, o sea respeta el modo
 * oscuro de Windows o Android. La elección se guarda por dispositivo (public/tema.js).
 *
 * Acento: los colores de la marca (decidido por el Product Owner el 15-10-2026) — azul noche #16213d
 * sobre fondo claro y dorado #c9974b sobre fondo oscuro, los del logo. Sigue la regla de siempre: no puede
 * ser un verde: se parece a la marca de EdiPro, y un acento no debe leerse como el de un proveedor.
 */
:root{
  --fondo:#f4f6f9; --card:#ffffff; --tinta:#15202b; --gris:#6b7c8a; --linea:#e3e9ee;
  --acento:#16213d; --acento-suave:#f2efe7; --acento-texto:#f4f1ea;
  --ok:#0f7a52; --ok-suave:#e6f4ee; --pend:#b45309; --pend-suave:#fdf0e3;
  --alerta:#b91c1c; --alerta-suave:#fdeaea;
  --sombra:0 1px 2px rgba(20,33,43,.06), 0 6px 18px rgba(20,33,43,.05);
  --radio:14px; --radio-chico:10px; --radio-pastilla:999px;
}
html[data-modo="oscuro"]{
  --fondo:#0e1620; --card:#17222e; --tinta:#e8eef3; --gris:#93a4b3; --linea:#26333f;
  --acento:#c9974b; --acento-suave:#2a2214; --acento-texto:#1a1206;
  --ok:#4ade80; --ok-suave:#12301f; --pend:#fbbf24; --pend-suave:#33270c;
  --alerta:#f87171; --alerta-suave:#3a1414;
  --sombra:none;
}
html[data-modo="contraste"]{
  --fondo:#000000; --card:#0d0d0d; --tinta:#ffffff; --gris:#c9d4dd; --linea:#5b6b78;
  --acento:#e8c07d; --acento-suave:#241c0e; --acento-texto:#120c04;
  --ok:#86efac; --ok-suave:#0d2417; --pend:#fcd34d; --pend-suave:#2e2306;
  --alerta:#fca5a5; --alerta-suave:#2e1010;
  --sombra:none;
}
@media (prefers-color-scheme: dark){
  html[data-modo="sistema"]{
    --fondo:#0e1620; --card:#17222e; --tinta:#e8eef3; --gris:#93a4b3; --linea:#26333f;
    --acento:#c9974b; --acento-suave:#2a2214; --acento-texto:#1a1206;
    --ok:#4ade80; --ok-suave:#12301f; --pend:#fbbf24; --pend-suave:#33270c;
    --alerta:#f87171; --alerta-suave:#3a1414;
    --sombra:none;
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:13px; line-height:1.5;
}
a{color:var(--acento)}

/* --- cabecera y pie --- */
.cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--linea)}
.cab b{font-size:14px}
.cab .quien{color:var(--gris);font-size:12px}
.cab .crece{flex:1}
.volver{text-decoration:none;color:var(--acento);font-weight:600}
.pie{color:var(--gris);font-size:11.5px;padding:16px;border-top:1px solid var(--linea);
     display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.pie-linea{max-width:520px}
/* La marca del producto va discreta en el pie de TODA pantalla (como los informes y correos de EdiPro):
   la de la administración manda arriba; abajo, en chico, dice quién es la plataforma. */
.pie-logo{height:22px;width:auto;opacity:.9}
html[data-modo="oscuro"] .pie-logo,html[data-modo="contraste"] .pie-logo{filter:invert(1) hue-rotate(180deg) brightness(1.35)}
/* El logo en imagen de la administración, cuando lo subió (si no, queda su sigla de texto). */
.logo-img{height:34px;max-width:180px;object-fit:contain;display:block}
/* La marca del producto en el encabezado de las pantallas (su versión clara, para el azul noche) y la
   identificación de la administración al comenzar el contenido. */
/* La franja azul es del producto: su logo —a la izquierda, que es la marca de la casa— y el nombre de la
   pantalla. La marca de la administración no va acá: su identificación va al comenzar el contenido. */
/* La franja azul, en DOS filas (pedido del Product Owner, 15-10-2026): arriba el logo del producto —grande,
   es la marca de la casa— y al otro extremo el selector de modo con la flecha; abajo el nombre de la pantalla
   con «Salir · <nombre>». Las filas las arma inquilino.js, que conoce el orden de cada página. */
/* Con dos clases para que gane a la regla de styles.css (.cab-in trae max-width 640 y margin auto, que en
   escritorio dejaba el encabezado centrado y angosto). */
.cab .cab-in{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:4px;
  width:100%;max-width:none;margin:0}
.cab-in .cab-fila1{display:flex;align-items:center;gap:12px}
/* El logo manda a la izquierda y la flecha va al otro extremo (con el selector de modo a su lado). */
.cab-in .cab-fila1 .marca-plataforma{order:-1;margin-right:12px}
.cab-in .cab-fila1 .volver{margin-left:auto}
.cab-in .cab-fila2{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cab-in .logo{display:none}
/* El logo del producto va a tamaño de barra, no de portada (DEC-034): a 72 px, el bloque de marca más la
   barra de módulos se comían la primera pantalla de un portátil. */
.cab-in .marca-plataforma{height:28px;width:auto;display:block;flex:0 0 auto}
.cab-in .volver{margin-left:auto;font-size:1.5rem;line-height:1}
/* El «Salir · <nombre>» en la fila del nombre, y el selector de modo junto a la flecha. Con dos clases para
   ganarle a la hoja de las pantallas del residente, que le pone margen de 8 px al salir y `auto` al modo
   (o sea, lo mandaba al otro extremo, después de la flecha). */
.cab .cab-in .salir{margin-left:auto;flex:0 0 auto;width:auto}
.cab .cab-in .modo{margin-left:0}
.cab .cab-in .volver{margin-left:auto}
.cab-in h1{margin:0}
@media (max-width:520px){
  /* En el celular el logo también manda: se achica menos que antes. */
  .cab-in .marca-plataforma{height:24px}
  .cab-in h1{font-size:1.1rem}
  /* El logo, la flecha, el selector de modo, quién entró y «Salir» no caben en una sola fila a lo ancho
     de un teléfono: bajan de línea (como ya hace cab-fila2 con el nombre de la pantalla) en vez de
     salirse de la pantalla. Y si el nombre y el rol son largos, se recortan con puntos suspensivos antes
     de forzar el ancho. */
  .cab-in .cab-fila1{flex-wrap:wrap;row-gap:6px}
  .cab .quien{flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* En el encabezado ya no queda bajada (la explicación del formulario vive bajo el nombre de la
   administración): el nombre de la pantalla manda y el encabezado no crece de más. */
.cab .cab-in p{font-size:.8rem;opacity:.85}
.identidad-admin{margin:0 0 14px;padding:10px 13px;background:var(--card);border:1px solid var(--linea);
  border-radius:var(--radio-chico);color:var(--gris);font-size:12.5px;letter-spacing:.01em}
/* El nombre y el RUT, cada uno en su línea: en una sola, en un celular angosto el RUT se partía o se cortaba
   con puntos suspensivos, y un RUT cortado es información equivocada. */
.identidad-admin b{display:block;color:var(--tinta);font-size:13px}
.identidad-admin .rut{display:block;color:var(--gris);font-size:12.5px;letter-spacing:.02em}
.identidad-admin .explicacion{margin:5px 0 0;font-size:12.5px;line-height:1.45;color:var(--gris)}
/* Dos marcas de la portada: lo que pide clave y lo que no. La primera es para que un residente no
   aterrice en el login al tocar algo que creía de él; la segunda, para que quede claro de un vistazo. */
.clave{display:inline-block;vertical-align:middle;margin-left:6px;font-size:10px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;background:var(--acento-suave);color:var(--acento);border:1px solid var(--linea);
  border-radius:99px;padding:2px 7px}
.sin-clave{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin-left:6px}
/* La marca en imagen de la administración en la pantalla de la consola. */
.marca-caja{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.marca-vista{min-width:110px;min-height:52px;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--linea);border-radius:var(--radio-chico);padding:8px 12px;background:var(--card)}
.marca-logo{max-height:48px;max-width:200px;object-fit:contain;display:block}
.marca-sin{font-weight:800;letter-spacing:.08em;color:var(--gris);font-size:13px}
/* El ícono del producto (.logo-icono) se usaba en la consola y el alta; ahora esas pantallas llevan el mismo
   logo de la franja azul, así que la regla se retiró con su último uso. */
.lienzo{padding:16px;max-width:1080px;margin:0 auto}
/* Los paneles internos aprovechan el ancho en escritorio (una lista en 640 px deja media pantalla vacía);
   las pantallas del residente se quedan con su ancho, que es el de un teléfono. */
.wrap.ancho{max-width:1040px}

/* --- tarjetas --- */
.card{background:var(--card);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);padding:14px 16px;margin-bottom:14px}
html[data-modo="contraste"] .card{border-width:2px;box-shadow:none}
.card h2{font-size:12px;margin:0 0 10px;color:var(--gris);text-transform:uppercase;letter-spacing:.06em}

/* --- pestañas --- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
/* Las pestañas de un módulo con varias pantallas propias (Tareas) son enlaces, no botones que
   cambien una sección: necesitan URL propia (volver, compartir, abrir en otra pestaña). Mismo molde
   que las pestañas que sí cambian de sección (Personas, Compras) — misma clase, mismo aspecto. */
.tabs a,.tabs button{font:inherit;font-size:12.5px;font-weight:600;padding:7px 15px;border-radius:var(--radio-pastilla);border:1px solid var(--linea);background:var(--card);color:var(--tinta);cursor:pointer;text-decoration:none;display:inline-block}
.tabs a[aria-selected="true"],.tabs button[aria-selected="true"]{background:var(--acento);border-color:var(--acento);color:var(--acento-texto)}
html[data-modo="contraste"] .tabs a,html[data-modo="contraste"] .tabs button{border-width:2px}

/* --- tablas --- */
table{border-collapse:collapse;width:100%;font-size:12.5px}
th,td{padding:8px 6px;text-align:left;border-bottom:1px solid var(--linea)}
th{font-size:10.5px;color:var(--gris);text-transform:uppercase;letter-spacing:.04em}
tr:last-child td{border-bottom:0}
.der{text-align:right}

/* --- pastillas de estado --- */
.tag{display:inline-block;border-radius:var(--radio-pastilla);padding:2px 9px;font-size:11px;font-weight:700;background:var(--acento-suave);color:var(--acento)}
.tag.ok{background:var(--ok-suave);color:var(--ok)}
.tag.pend{background:var(--pend-suave);color:var(--pend)}
.tag.alerta{background:var(--alerta-suave);color:var(--alerta)}

/* --- botones --- */
.b{font:inherit;font-size:12px;font-weight:700;padding:7px 14px;border-radius:var(--radio-pastilla);border:0;background:var(--acento);color:var(--acento-texto);cursor:pointer}
.b.sec{background:transparent;color:var(--acento);border:1px solid var(--acento)}
.b.plano{background:transparent;color:var(--tinta);border:1px solid var(--linea)}
.b:disabled{opacity:.5;cursor:not-allowed}
html[data-modo="contraste"] .b,html[data-modo="contraste"] .b.sec,html[data-modo="contraste"] .b.plano{border:2px solid var(--tinta)}
.acciones{display:flex;gap:6px;flex-wrap:wrap}

/* --- campos --- */
/* La etiqueta de un campo, en oración (pedido del Product Owner, 15-10-2026): en mayúsculas se leía como
   un formulario viejo, y además el nombre del campo es información, no un grito. */
label{display:block;font-size:12.5px;font-weight:600;color:var(--tinta);margin:0 0 4px}
input,select,textarea{font:inherit;font-size:13px;padding:8px 10px;border-radius:var(--radio-chico);border:1px solid var(--linea);background:var(--card);color:var(--tinta);width:100%}
html[data-modo="contraste"] input,html[data-modo="contraste"] select{border-width:2px}
.campo{margin-bottom:10px}
.fila-campos{display:flex;gap:12px;flex-wrap:wrap}
.fila-campos > *{flex:1 1 200px}

/* --- avisos --- */
/* El aviso neutro: una caja fría con la marca al costado. Antes el neutro era el crema del acento, casi
   igual al ámbar de «pendiente», así que un aviso informativo y uno de atención se veían iguales. */
.aviso{border-radius:var(--radio-chico);padding:10px 12px;font-size:12px;margin:0 0 14px;background:var(--fondo);color:var(--tinta);border:1px solid var(--linea);border-left:3px solid var(--acento)}
.aviso.ok{background:var(--ok-suave)}
.aviso.pend{background:var(--pend-suave)}
.aviso.alerta{background:var(--alerta-suave)}
code{background:var(--acento-suave);padding:1px 5px;border-radius:5px;font-size:12px}

/* --- selector de modo --- */
.modo{position:relative;display:flex;align-items:center}
.modo button{font:inherit;font-size:11.5px;padding:5px 11px;border-radius:var(--radio-pastilla);border:1px solid var(--linea);background:var(--card);color:var(--tinta);cursor:pointer}
.modo button[aria-pressed="true"]{background:var(--acento);border-color:var(--acento);color:var(--acento-texto)}
/* El selector de modo en la franja azul: un botón chico con un menú, no cuatro botones con nombre ocupando
   media pantalla. Lo importante ahí es la marca y el nombre de la pantalla. */
.modo-boton{width:30px;height:30px;padding:0 !important;border-radius:50% !important;font-size:14px !important;
  line-height:1;display:flex;align-items:center;justify-content:center}
.modo-menu{position:absolute;top:36px;right:0;z-index:40;min-width:168px;padding:5px;display:flex;
  flex-direction:column;background:var(--card);border:1px solid var(--linea);border-radius:var(--radio-chico);box-shadow:var(--sombra)}
.modo-menu[hidden]{display:none}
.modo-menu button{border:0;background:transparent;text-align:left;white-space:nowrap;padding:8px 10px;
  border-radius:8px;font-size:12.5px}
.modo-menu button[aria-pressed="true"]{background:var(--acento-suave);color:var(--acento);font-weight:700}

/* --- la barra de módulos (menu.js, pieza 3 de 3) --- */
/* Pegada arriba al bajar (maqueta aprobada): cuando la cabecera entera ya salió de la pantalla, la barra
   se queda sola arriba, así que necesita su propio fondo opaco (si no, se lee transparente sobre el
   contenido que pasa debajo). Vive DENTRO de `.cab` (menu.js la agrega ahí, bajo la fila del título). */
/* `#menu` es el ítem flex que menu.js rellena; sin `min-width:0` toma el ancho de su contenido (los
   ocho módulos) y EMPUJA el ancho de la página: en el celular la pantalla entera se corre de lado y el
   `overflow-x:auto` de la barra no alcanza a activarse. Con esto la barra se desliza sola. */
#menu{min-width:0;width:100%}
.menu-modulos{display:flex;gap:16px;overflow-x:auto;width:100%;min-width:0;margin-top:4px;padding:6px 0;
  border-top:1px solid var(--linea);background:var(--card);position:sticky;top:0;z-index:20;
  -webkit-overflow-scrolling:touch}
/* `min-width:0` no es adorno: sin él, un ítem flex se niega a bajar de su ancho de contenido, así que
   el `overflow-x:auto` no llega a activarse y la barra EMPUJA el ancho de la página (en el celular, la
   pantalla entera se corre de lado). Con esto la barra se desliza sola y el cuerpo queda quieto. */
.menu-modulos a{flex:0 0 auto;padding:2px 2px 6px;font-size:12.5px;font-weight:600;color:var(--gris);
  text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.menu-modulos a:hover{color:var(--tinta)}
.menu-modulos a[aria-current="page"]{color:var(--acento);border-bottom-color:var(--acento)}
html[data-modo="contraste"] .menu-modulos a[aria-current="page"]{border-bottom-width:3px}

/* --- ficha de reserva (la usa la conserjería) --- */
.ficha{border:1px solid var(--linea);border-radius:var(--radio);padding:12px 14px;margin-bottom:10px;background:var(--card)}
.ficha .h{font-weight:700}
.ficha .m{color:var(--gris);font-size:11.5px;margin:3px 0 8px}
.cifras{display:flex;gap:14px;flex-wrap:wrap}
.cifras div{flex:1;min-width:90px}
.cifras b{display:block;font-size:17px;color:var(--acento)}
.cifras small{color:var(--gris);font-size:11px}

@media (max-width:560px){
  body{font-size:15px}
  .lienzo{padding:12px}
  .card{padding:12px}
  th,td{padding:9px 5px}
  .b{padding:9px 16px;min-height:44px}
}