/* © 2026 Juan Jose Barón. Todos los derechos reservados. Ver LICENSE. */

/* Tipografía propia, servida por la app. Con fuentes del sistema cada equipo ve una
   letra distinta —y las capturas que se le mandan al cliente no coinciden con lo que
   él tiene enfrente—; con una web font de un CDN habría una llamada a un tercero en
   cada pantalla. Subconjunto latino y sin cursivas: pesa como una foto chica. */
@font-face {
  font-family: "Inter app"; src: url("/static/fonts/inter.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat app"; src: url("/static/fonts/montserrat-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Marca del cliente: Alfa Boutique Inmobiliaria S.A.S — naranja + gris carbón,
     tomados del logo y las piezas oficiales (2026-08-10). */
  --navy: #191e22; --navy-2: #191e2200; --navy-claro: #232a30;
  --azul: #f07c08; --azul-claro: #fdf0e2;
  --verde: #16a34a; --verde-claro: #e6f6ec;
  --rojo: #dc2626; --rojo-claro: #fdeaea;
  --naranja: #ea9010; --naranja-claro: #fdf3e0;
  --morado: #7c3aed; --morado-claro: #f1eafd;
  --gris: #6b7280; --gris-claro: #f4f6fa; --borde: #e5e9f0;
  --tinta: #111827; --blanco: #fff; --radio: 12px;
  /* Un botón necesita tres tonos del mismo color —reposo, encima, apretado— o el
     click no se siente. Se derivan de la marca una sola vez, acá. */
  --azul-fuerte: #d46c04; --azul-hondo: #b25a03;
  --verde-fuerte: #12833b; --rojo-fuerte: #b91c1c;
  /* Segundo nivel de tinta y de borde: el gris de las etiquetas es demasiado claro
     para texto corrido, y el borde de una tarjeta es más suave que el de un control. */
  --tinta-2: #3b4453; --borde-fuerte: #d3dae6; --borde-suave: #f0f2f7;
  --fila-hover: #fafbfd;
  /* Blanco translúcido para separar sobre el carbón del menú, y el velo del modal. */
  --sobre-carbon: #ffffff12; --linea-carbon: #ffffff14; --velo: #191e2299;
  /* Menú sobre carbón: el gris azulado de antes no pertenece a esta marca. */
  --menu-txt: #c6ccd4; --menu-txt-2: #8d95a1;
  /* Radios en escala: control chico, control normal, contenedor. */
  --radio-ch: 7px; --radio-sm: 9px; --radio-lg: 14px;
  /* Una sola sombra, y suave: la profundidad la da el borde, no el drama.
     La alta es solo para lo que flota de verdad (menú de campana, modal). */
  --sombra: 0 1px 2px #191e220d;
  --sombra-alta: 0 16px 40px #191e2226;
  /* Anillo de foco: tiene que verse sobre blanco y sobre carbón. */
  --anillo: #f07c0840;
  /* Montserrat pone la marca en los títulos; Inter hace legibles las cifras, que es
     lo que más se mira en esta app. */
  --fuente-titulo: "Montserrat app", Georgia, serif;
  --fuente-texto: "Inter app", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
body {
  font-family: var(--fuente-texto);
  background: var(--gris-claro); color: var(--tinta); font-size: 14.5px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .kpi-valor, .logo-txt { font-family: var(--fuente-titulo); }
/* Cifras de ancho fijo: sin esto las columnas de plata bailan de fila en fila. */
.kpi-valor, .tabla td, .tabla th, .num { font-variant-numeric: tabular-nums; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Los títulos apretados leen como producto; los sueltos, como plantilla. */
h1 { font-size: 21px; letter-spacing: -.02em; }
h2 { font-size: 14.5px; letter-spacing: -.01em; margin-bottom: 10px; }
h3 { font-size: 11.5px; margin: 16px 0 6px; color: var(--gris); text-transform: uppercase;
  letter-spacing: .5px; }
small { font-weight: normal; color: var(--gris); }

/* El foco tiene que VERSE: se navega con teclado y es accesibilidad, no adorno. */
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
/* Íconos SVG monocromos: el color lo pone quien los contiene (currentColor). */
.ico { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }

.layout { display: flex; min-height: 100vh; }

/* ── Sidebar ── */
.sidebar {
  width: 232px; background: var(--navy); color: var(--menu-txt); flex-shrink: 0;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
}
.logo { display: flex; gap: 10px; align-items: center; padding: 18px 16px; color: var(--blanco);
  font-weight: 700; font-size: 13px; line-height: 1.25; border-bottom: 1px solid var(--linea-carbon);
  letter-spacing: .2px; }
.logo-ico { font-size: 26px; }
.logo-img { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; }
.login-logo-img { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 12px; display: block; }
.sidebar nav { flex: 1; padding: 10px 8px; }
.nav-item { display: flex; align-items: center; gap: 10px; color: var(--menu-txt);
  padding: 9px 12px; border-radius: var(--radio-sm); margin-bottom: 2px; font-size: 13.5px;
  transition: background-color .12s, color .12s; }
.nav-item:hover { background: var(--sobre-carbon); color: var(--blanco); text-decoration: none; }
.nav-item.activo { background: var(--azul); color: var(--blanco); font-weight: 600; }
/* El ícono acompaña, no compite: entero solo donde está la mirada. */
.nav-ico { width: 20px; height: 20px; display: inline-flex; align-items: center;
  justify-content: center; flex: none; opacity: .72; }
.nav-item:hover .nav-ico, .nav-item.activo .nav-ico { opacity: 1; }
.nav-ico .ico { width: 18px; height: 18px; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-top: 1px solid var(--linea-carbon); }
.chip-nombre { color: var(--blanco); font-weight: 600; font-size: 13px; }
.chip-rol { font-size: 11.5px; color: var(--menu-txt-2); }
.salir { margin-left: auto; color: var(--menu-txt-2); font-size: 18px; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radio-sm);
  flex: none; }
.salir:hover { background: var(--sobre-carbon); color: var(--blanco); text-decoration: none; }
.chip-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--azul);
  color: var(--blanco); display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0; }
.chip-avatar.chico { width: 28px; height: 28px; font-size: 12px; background: var(--azul-claro);
  color: var(--azul); }

/* ── Topbar / contenido ── */
.main { flex: 1; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 16px; padding: 13px 24px;
  background: var(--blanco); border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 5; }
.titulo-bloque { flex: 1; min-width: 0; }
.subtitulo { color: var(--gris); font-size: 12.5px; margin-top: 3px; }
.topbar-der { display: flex; align-items: center; gap: 10px; }
/* Campana: único lugar de las notificaciones (no hay pantalla propia) */
.campana-wrap { position: relative; }
.campana { position: relative; font-size: 18px; cursor: pointer; list-style: none;
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radio-sm); user-select: none; color: var(--tinta-2);
  transition: background-color .12s; }
.campana:hover { background: var(--gris-claro); }
.campana::-webkit-details-marker { display: none; }
.campana-wrap[open] .campana { background: var(--gris-claro); }
/* El contador va montado sobre la campana, no al lado: al lado empuja el topbar. */
.campana .badge-rojo { position: absolute; top: 0; right: 0; margin: 0; }
.campana-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  width: 360px; max-width: calc(100vw - 32px); background: var(--blanco);
  border: 1px solid var(--borde); border-radius: var(--radio-lg);
  box-shadow: var(--sombra-alta); overflow: hidden; }
.campana-head { display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--borde); font-size: 14px; }
.campana-lista { max-height: 60vh; overflow-y: auto; }
.campana-item { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px;
  border-bottom: 1px solid var(--borde-suave); text-decoration: none; color: inherit; }
.campana-item:last-child { border-bottom: 0; }
.campana-item:hover { background: var(--gris-claro); text-decoration: none; }
.campana-item b { display: block; font-size: 13.5px; }
.campana-item .gris { font-size: 12.5px; }
.campana-vacio { padding: 22px 14px; text-align: center; font-size: 14px; margin: 0; }
.badge-rojo { background: var(--rojo); color: var(--blanco); font-size: 10.5px; font-weight: 700;
  border-radius: 99px; padding: 1px 5px; margin-left: 4px; vertical-align: top;
  border: 2px solid var(--blanco); }
.fecha-chip { border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 0 12px;
  height: 34px; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--tinta-2); background: var(--blanco); white-space: nowrap; }
.fecha-chip .ico { width: 16px; height: 16px; color: var(--gris); }
.hamburguesa { display: none; background: none; border: 0; font-size: 20px; cursor: pointer;
  color: var(--tinta); padding: 4px 6px; border-radius: var(--radio-sm); }
.contenido { padding: 14px 20px 24px; }
/* Barra del grupo: el menú agrupa, acá se elige la pantalla.
   OJO: clase propia — .tabs/.tab ya existen para las pestañas DENTRO de una pantalla. */
.tabs-grupo { display: flex; gap: 2px; padding: 0 24px; background: var(--blanco);
  border-bottom: 1px solid var(--borde); overflow-x: auto; }
.tab-grupo { padding: 11px 14px; font-size: 13px; color: var(--gris); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500;
  transition: color .12s, border-color .12s; }
.tab-grupo:hover { color: var(--tinta); text-decoration: none; }
.tab-grupo.activo { color: var(--azul); border-bottom-color: var(--azul); font-weight: 600; }

/* ── Cards / grids ── */
.card { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-lg);
  padding: 14px 16px; margin-bottom: 0; min-width: 0; box-shadow: var(--sombra); }
.gap { gap: 12px; margin-bottom: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start; }

/* Mosaico: las tarjetas fluyen y la corta no deja un hueco esperando a la fila
   siguiente. Con una grilla de filas, el alto lo manda la tarjeta más alta y debajo
   de las demás queda aire — que es exactamente lo que se veía en el inicio. */
.mosaico { columns: 2; column-gap: 12px; margin-bottom: 12px; }
.mosaico > .card { break-inside: avoid; -webkit-column-break-inside: avoid;
  margin-bottom: 12px; display: inline-block; width: 100%; }
@media (max-width: 1100px) { .mosaico { columns: 1; } }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin-bottom: 12px; }
.card-head h2 { margin-bottom: 0; }
.link { font-size: 12.5px; font-weight: 600; }
.con-panel { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.panel-det { position: sticky; top: 76px; }
.cerrar { color: var(--gris); font-size: 16px; }

/* ── KPIs ── */
/* La tarjeta se lee en dos tiempos: primero el número, después la etiqueta. El ícono
   es una marca de esquina —acento por el trazo, no un globo pastel con emoji. */
/* auto-FILL, no auto-fit: en una pantalla con un solo indicador, auto-fit lo estira
   a media pantalla y el dato queda flotando en el vacío. */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: 12px; margin-bottom: 12px; }
.kpi { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-lg);
  padding: 11px 14px; display: flex; gap: 10px; align-items: flex-start; min-height: 0;
  box-shadow: var(--sombra); }
.kpi > div { flex: 1; min-width: 0; }
.kpi > .kpi-ico { order: 2; margin-left: auto; }
.kpi-accion { justify-content: center; align-items: center; background: none;
  border-style: dashed; border-color: var(--borde-fuerte); box-shadow: none; }
.kpi-label { font-size: 11px; color: var(--gris); text-transform: uppercase;
  font-weight: 600; letter-spacing: .5px; line-height: 1.35; }
/* La cifra no se parte: "$" arriba y el número abajo se lee como dos valores. */
.kpi-valor { font-size: 23px; font-weight: 700; margin-top: 2px; letter-spacing: -.02em;
  line-height: 1.15; white-space: nowrap; }
.kpi-valor small { font-size: 12.5px; font-weight: 600; margin-left: 2px; }
.kpi-ico { width: 26px; height: 26px; display: inline-flex; flex-shrink: 0;
  align-items: center; justify-content: center; font-size: 18px; line-height: 1;
  color: var(--gris); }
.kpi-ico .ico { width: 22px; height: 22px; }
.kpi-ico.verde { color: var(--verde); } .kpi-ico.rojo { color: var(--rojo); }
.kpi-ico.azul { color: var(--azul); } .kpi-ico.naranja { color: var(--naranja); }
.kpi-ico.morado { color: var(--morado); }
.kpis-mini { display: flex; gap: 22px; margin-bottom: 12px; flex-wrap: wrap; }
.kpis-mini > div { display: flex; flex-direction: column; }

/* ── Tablas ── */
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th { text-align: left; color: var(--gris); font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; font-weight: 600; padding: 7px 12px;
  border-bottom: 1px solid var(--borde); }
.tabla td { padding: 7px 12px; border-bottom: 1px solid var(--borde-suave); vertical-align: middle; }
/* Las columnas de los extremos van al filo del contenedor: si no, la tabla se ve
   metida hacia adentro y desalineada con el título de la tarjeta. */
.tabla th:first-child, .tabla td:first-child { padding-left: 0; }
.tabla th:last-child, .tabla td:last-child { padding-right: 0; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: var(--fila-hover); }
/* Una tabla ancha dentro de una card angosta cortaba la última columna sin avisar:
   scrollea ELLA, a cualquier ancho de pantalla, no solo en móvil. */
.tabla-wrap { overflow-x: auto; }
.error-msg { background: var(--rojo-claro); color: var(--rojo-fuerte); padding: 10px 12px;
  border-radius: var(--radio-sm); font-size: 13px; margin-bottom: 10px;
  border-left: 3px solid var(--rojo); }

/* ── Puesta en marcha (solo hasta que estén todos los pasos) ── */
.arranque { border-left: 3px solid var(--azul); }
.pasos { list-style: none; padding: 0; margin: 10px 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; }
.paso { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.paso-marca { width: 21px; height: 21px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--azul-claro); color: var(--azul); font-weight: 700; font-size: 11.5px; }
.paso.hecho .paso-marca { background: var(--verde-claro); color: var(--verde); }
.paso.hecho b { color: var(--gris); font-weight: 600; }
/* Una cifra partida en dos renglones ("$" arriba, el número abajo) se lee mal y
   se confunde con dos valores distintos. Lo mismo con una fecha cortada al medio
   ("2026-08-" arriba y "05" abajo) y con los chips de estado. */
.tabla .num, .tabla .fecha, .tabla .chip { white-space: nowrap; }
.filtros .filtro-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--gris); font-weight: 600; }
.fila-sel td { background: var(--azul-claro); }
.tabla tbody tr.fila-sel:hover td { background: var(--azul-claro); }
.vacio-msg { color: var(--gris); text-align: center; padding: 22px 0 !important; }
.avatar-fila { display: flex; gap: 10px; align-items: center; }

/* ── Chips de estado ── */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: 99px; font-size: 11px; font-weight: 600; letter-spacing: .2px;
  line-height: 1.55; white-space: nowrap; }
.chip-verde { background: var(--verde-claro); color: var(--verde-fuerte); }
.chip-rojo { background: var(--rojo-claro); color: var(--rojo-fuerte); }
.chip-naranja { background: var(--naranja-claro); color: var(--naranja); }
.chip-morado { background: var(--morado-claro); color: var(--morado); }
.chip-gris { background: var(--gris-claro); color: var(--gris); }
.verde-txt { color: var(--verde); } .rojo-txt { color: var(--rojo); }
.naranja-txt { color: var(--naranja); } .azul-txt { color: var(--azul); }
.gris { color: var(--gris); font-size: 12.5px; }
.verde-bg { background: var(--verde); } .rojo-bg { background: var(--rojo); }

/* ── Botones ── */
/* Tres jerarquías y una sola forma: primario (la acción de la pantalla), de borde
   (todo lo demás) y rojo (lo que destruye). El estado se siente: encima aclara,
   apretado hunde, y el foco deja anillo. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--radio-sm); padding: 0 15px; min-height: 36px; font-size: 13.5px;
  font-weight: 600; line-height: 1; font-family: inherit; cursor: pointer;
  border: 1px solid var(--borde-fuerte); background: var(--blanco); color: var(--tinta);
  text-decoration: none; white-space: nowrap; user-select: none;
  transition: background-color .12s, border-color .12s, box-shadow .12s, transform .06s; }
.btn:hover { background: var(--gris-claro); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn .ico { width: 16px; height: 16px; }
.btn-azul { background: var(--azul); border-color: var(--azul); color: var(--blanco);
  box-shadow: var(--sombra); }
.btn-azul:hover { background: var(--azul-fuerte); border-color: var(--azul-fuerte); }
.btn-azul:active { background: var(--azul-hondo); border-color: var(--azul-hondo); }
.btn-verde { background: var(--verde); border-color: var(--verde); color: var(--blanco);
  box-shadow: var(--sombra); }
.btn-verde:hover { background: var(--verde-fuerte); border-color: var(--verde-fuerte); }
.btn-rojo { background: var(--rojo); border-color: var(--rojo); color: var(--blanco);
  box-shadow: var(--sombra); }
.btn-rojo:hover { background: var(--rojo-fuerte); border-color: var(--rojo-fuerte); }
.btn-borde { background: var(--blanco); border-color: var(--borde-fuerte); color: var(--tinta); }
.btn-borde:hover { background: var(--gris-claro); border-color: var(--gris); }
.btn-ancho { width: 100%; margin-top: 10px; }
.btn-chico { min-height: 28px; padding: 0 10px; font-size: 12px; border-radius: var(--radio-ch); }
.btn-chico .ico { width: 14px; height: 14px; }
/* Un botón apagado no puede parecer apretable. */
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed;
  box-shadow: none; transform: none; }
.btn:disabled:hover, .btn[disabled]:hover { background: var(--blanco); }
.btn-azul:disabled:hover { background: var(--azul); }
.btn-verde:disabled:hover { background: var(--verde); }
.btn-rojo:disabled:hover { background: var(--rojo); }

/* ── Forms ── */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.filtros input, .filtros select { padding: 8px 12px; border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm); font-size: 13px; min-width: 150px; min-height: 36px;
  background: var(--blanco); color: var(--tinta); font-family: inherit; }
.filtros input[name=q] { flex: 1; min-width: 200px; }
.form-col { display: flex; flex-direction: column; gap: 12px; }
.form-col label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px;
  color: var(--gris); font-weight: 600; }
.form-col input, .form-col select, .form-col textarea { padding: 9px 12px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm); font-size: 13.5px;
  font-family: inherit; color: var(--tinta); background: var(--blanco); min-height: 38px; }
.form-col .check { flex-direction: row; align-items: center; gap: 8px; color: var(--tinta);
  font-size: 13px; }
/* Un campo enfocado se marca con el color de la marca, no con el borde del navegador. */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--anillo); }
input:hover:not(:focus):not(:disabled), select:hover:not(:focus):not(:disabled) {
  border-color: var(--gris); }
input:disabled, select:disabled, textarea:disabled { background: var(--gris-claro);
  color: var(--gris); cursor: not-allowed; }
::placeholder { color: var(--gris); opacity: 1; }
.fila-botones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px;
  flex-wrap: wrap; }
.fila-inline { display: inline-flex; gap: 6px; margin-top: 6px; }
.input-chico { width: 110px; padding: 5px 8px; border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-ch); font-family: inherit; }
.der { text-align: right; }

/* ── Tabs ── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 14px;
  align-items: center; flex-wrap: wrap; }
.tabs-solas { background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio-lg); padding: 6px; margin-bottom: 16px; box-shadow: var(--sombra); }
.tab { padding: 9px 14px; color: var(--gris); font-weight: 600; font-size: 13px;
  border-radius: var(--radio-sm) var(--radio-sm) 0 0; border-bottom: 2px solid transparent; }
.tab:hover { color: var(--tinta); text-decoration: none; }
.tabs-solas .tab { border-radius: var(--radio-sm); border-bottom: 0; }
.tab.activo { color: var(--azul); border-bottom-color: var(--azul); }
.tabs-solas .tab.activo { background: var(--azul-claro); }
.tab-der { margin-left: auto; }

/* ── Piezas dashboard ── */
.mini-fila { display: flex; gap: 10px; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--borde-suave); }
.mini-fila:last-child { border-bottom: 0; }
.alerta-ico { font-size: 17px; flex: none; display: inline-flex; }
.alerta-ico .ico { width: 18px; height: 18px; }
.fila-kv { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--borde-suave); font-size: 13px; }
.fila-kv span { color: var(--gris); }
.fila-kv.saldo { border-top: 2px solid var(--borde); font-size: 14.5px; }
.barra { height: 7px; background: var(--gris-claro); border-radius: 99px; overflow: hidden;
  margin-top: 6px; }
.barra span { display: block; height: 100%; border-radius: 99px; }
/* Las barras que SON el dato (cobro del mes, ocupación, avance del arranque) piden
   más cuerpo que las de adorno. */
.barra-alta { height: 12px; }
.pasos-det summary { cursor: pointer; padding: 4px 0; font-size: 13px; }
.pasos-det[open] summary { margin-bottom: 4px; }
.pie-transparencia { background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio-lg); padding: 12px 16px; color: var(--tinta-2); font-size: 12.5px;
  margin-top: 16px; display: flex; gap: 9px; align-items: flex-start; }
.pie-transparencia .ico { width: 17px; height: 17px; color: var(--azul); flex: none; }
.pie-legal { color: var(--gris); font-size: 11.5px; margin-top: 14px; text-align: center; }

/* ── Caja ── */
.banner-bienvenida { display: flex; justify-content: space-between; align-items: center;
  background: var(--azul-claro); border-radius: var(--radio-lg); padding: 15px 18px;
  margin-bottom: 14px; gap: 12px; }
.banner-ico { font-size: 30px; color: var(--azul); display: inline-flex; }
.banner-ico .ico { width: 30px; height: 30px; }
.denoms { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.denoms label { font-size: 12px; }
.denom-total { color: var(--gris); font-size: 12px; }
.total-verde { background: var(--verde-claro); border-radius: var(--radio-sm); padding: 11px 14px;
  display: flex; justify-content: space-between; font-weight: 700; margin: 6px 0; }

/* ── Modales / detalles ── */
/* Galería de evidencias del inventario (fotos y videos) */
.galeria { display: grid; gap: 10px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.galeria-item { display: block; border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; background: var(--gris-claro); }
.galeria-item:hover { border-color: var(--borde-fuerte); text-decoration: none; }
.galeria-item img, .galeria-item video { display: block; width: 100%; height: 170px;
  object-fit: cover; background: var(--navy); }
.galeria-pie { display: block; padding: 7px 9px; font-size: 11.5px; color: var(--gris);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.galeria-mini { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); margin-top: 8px; }
.galeria-mini img, .galeria-mini video { height: 80px; }
.tabla-acta td { vertical-align: top; }
.ambiente { padding: 0; }
.ambiente > summary { display: flex; gap: 10px; align-items: center; cursor: pointer;
  padding: 14px 18px; font-size: 14px; list-style: none; }
.ambiente > summary::-webkit-details-marker { display: none; }
.ambiente > summary::before { content: "▸"; color: var(--gris); font-size: 12px; }
.ambiente[open] > summary::before { content: "▾"; }
.ambiente[open] > summary { border-bottom: 1px solid var(--borde); }
.ambiente .tabla { padding: 0 8px 8px; }
.tabla-acta .col-item { width: 42%; }
.fila-item { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.fila-item input[type=text], .fila-item input:not([type]) { flex: 1; min-width: 140px; }
.fila-item input, .fila-item select { padding: 7px 10px; border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-ch); font-size: 13px; background: var(--blanco); font-family: inherit; }
.borde-rojo { border-color: var(--rojo); border-width: 2px; }
.evidencia .card-head { align-items: flex-start; }
.evidencia h2 { margin-bottom: 2px; }

/* El `* { margin: 0 }` de arriba le quita al <dialog> el margin:auto del navegador y
   la ventana queda pegada arriba a la izquierda: se lo devolvemos. */
.modal { border: 0; border-radius: var(--radio-lg); padding: 22px; max-width: 500px; width: 92vw;
  margin: auto; box-shadow: var(--sombra-alta); color: var(--tinta); }
.modal h2 { font-size: 16px; margin-bottom: 14px; }
.modal::backdrop { background: var(--velo); }
.usuario-det { border-bottom: 1px solid var(--borde); padding: 10px 0; }
.usuario-det summary { display: flex; align-items: center; gap: 10px; cursor: pointer;
  list-style: none; }
.tabla-permisos td, .tabla-permisos th { text-align: center; }
.tabla-permisos td:first-child, .tabla-permisos th:first-child { text-align: left; }
.stub { text-align: center; padding: 40px 20px; }
.stub-ico { font-size: 40px; color: var(--gris); margin-bottom: 8px; display: inline-flex; }
.stub-ico .ico { width: 38px; height: 38px; }
.stub ul { text-align: left; max-width: 460px; margin: 14px auto 0; color: var(--gris);
  line-height: 1.9; }

/* ── Login ── */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: var(--navy); }
.login-caja { background: var(--blanco); border-radius: 16px; padding: 34px 30px;
  width: 372px; max-width: 92vw; text-align: center; box-shadow: var(--sombra-alta); }
.login-logo { font-size: 40px; color: var(--azul); }
.login-caja h1 { font-size: 19px; margin: 8px 0 2px; }
.login-sub { color: var(--gris); font-size: 13px; margin-bottom: 18px; }
.login-caja form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.login-caja label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px;
  font-weight: 600; color: var(--gris); }
.login-caja input { padding: 10px 12px; border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-sm); font-family: inherit; font-size: 14px; }
.alerta-error { background: var(--rojo-claro); color: var(--rojo-fuerte);
  border-radius: var(--radio-sm); padding: 10px; font-size: 13px; margin-bottom: 12px; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .sidebar { position: fixed; z-index: 20; transform: translateX(-100%);
    transition: transform .2s; }
  .sidebar.abierto { transform: none; }
  .hamburguesa { display: block; }
  .con-panel { grid-template-columns: 1fr; }
  .panel-det { position: static; }
  .contenido { padding: 14px; }
  .fecha-chip { display: none; }
  .topbar { padding: 11px 14px; gap: 10px; }
  .tabs-grupo { padding: 0 14px; }
  /* En pantalla táctil el botón se toca con el dedo, no con el mouse. */
  .btn { min-height: 40px; }
  .btn-chico { min-height: 32px; }
  /* Dos por fila y la cifra un punto más chica: entra "$ 11.000.000" sin partirse. */
  .kpis { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
  .kpi { padding: 13px 14px; min-height: 0; gap: 8px; }
  .kpi-valor { font-size: 19px; }
  .kpi > .kpi-ico { width: 20px; height: 20px; font-size: 15px; }
  .kpi > .kpi-ico .ico { width: 18px; height: 18px; }
  .card { padding: 15px; }
  /* Una tabla de 5+ columnas no cabe en 390px: scrollea ELLA, no la página. */
  .tabla { display: block; overflow-x: auto; }
  /* Si ya está envuelta, el scroll lo pone el wrapper: dos scrolls anidados
     desalinean el encabezado. */
  .tabla-wrap .tabla { display: table; }
  .mini-fila, .fila-inline { flex-wrap: wrap; }
  .der { max-width: 100%; }
}
/* Quien pide menos movimiento no ve ninguno. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}