:root {
  --cinco-black: #111111;
  --cinco-orange: #f5a623;
  --cinco-orange-dark: #d9820b;
  --bg: #f4f5f7;
  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --sidebar-bg: #eef0f2;
  --sidebar-hover: #f4f5f7;
  --text: #1c1c1c;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --danger: #d64545;
  --success: #2e9e5b;
  --warning: #d9820b;
  --radius: 12px;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

  /* Tema por copropiedad (ver aplicarTema() en utils.js): el administrador
     de cada copropiedad puede sobrescribir estas tres variables desde
     "Apariencia" — el resto del CSS las hereda, así que no hace falta
     tocar nada más para que el cambio se vea en toda la plataforma. */
  --nav-section-color: var(--text-muted);
  --font-scale: 1;
}

/* Modo oscuro: mismo naranja de marca, fondos oscuros con buen contraste. */
:root[data-theme="dark"] {
  --bg: #16171a;
  --card-bg: #1f2023;
  --input-bg: #26272b;
  --sidebar-bg: #1a1b1e;
  --sidebar-hover: #2a2b2f;
  --text: #f0f1f3;
  --text-muted: #9aa0aa;
  --border: #34363b;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a { color: var(--cinco-orange-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.pago-banner {
  width: 100%;
  padding: 10px 20px;
  text-align: center;
  font-size: calc(var(--font-scale) * 13.5px);
  font-weight: 600;
  color: #ffffff;
}
.pago-banner.pendiente { background: var(--warning); }
.pago-banner.suspendido { background: var(--danger); }

/* Encabezado con el nombre y NIT de la copropiedad: tarjeta blanca (igual que
   el resto) con ribete lateral del color de marca — antes era una franja de
   degradado saturado con nombre y NIT del mismo tamaño, que pesaba demasiado y
   hacía competir los dos datos. Ahora el nombre manda y el NIT va aparte, como
   dato secundario en una píldora de color suave. */
.cop-header-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 12px;
  background: var(--card-bg);
  border-left: 6px solid var(--cinco-orange);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 9px 18px 9px 16px;
  margin-bottom: 20px;
}
.cop-header-nombre { font-size: calc(var(--font-scale) * 17px); font-weight: 800; color: var(--text); letter-spacing: -0.1px; }
.cop-header-nit {
  font-size: calc(var(--font-scale) * 12px);
  font-weight: 700;
  color: var(--text);
  background: color-mix(in srgb, var(--cinco-orange) 16%, transparent);
  padding: 3px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .cop-header-bar { flex-wrap: wrap; }
}

.bienvenida-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.bienvenida-texto h1 {
  margin: 0;
  font-size: calc(var(--font-scale) * 26px);
  color: var(--text);
}
.bienvenida-texto p {
  margin: 4px 0 0;
  font-size: calc(var(--font-scale) * 13.5px);
}
@media (max-width: 560px) {
  .bienvenida-header { flex-wrap: wrap; }
}

.bienvenida-logo-grande {
  position: fixed;
  right: 32px;
  bottom: 28px;
  width: 150px;
  height: 150px;
  object-fit: contain;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 900px) {
  .bienvenida-logo-grande { display: none; }
}

/* ---- página "Bienvenida": sin barra lateral, los módulos se muestran como
   tarjetas grandes (igual que la pantalla de inicio de Firebase Console) ---- */
.bienvenida-page { min-height: 100vh; background: var(--bg); }

.bienvenida-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 36px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}
.bienvenida-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: calc(var(--font-scale) * 15px);
}
.bienvenida-brand img { height: 30px; border-radius: 6px; }

.bienvenida-page .main { max-width: 1100px; margin: 0 auto; }

.bienvenida-modulos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.modulo-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 20px;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.1s ease, border-color 0.1s ease;
}
.modulo-card:hover {
  transform: translateY(-2px);
  border-color: var(--cinco-orange);
  text-decoration: none;
}
.modulo-card .modulo-icon { font-size: calc(var(--font-scale) * 28px); }
.modulo-card .modulo-icon img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: var(--shadow);
}
.modulo-card .modulo-label { font-weight: 700; font-size: calc(var(--font-scale) * 15px); }
.modulo-card .modulo-desc { font-size: calc(var(--font-scale) * 12.5px); color: var(--text-muted); }

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, #1c1c1c 0%, #000000 100%);
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 32px;
}

.auth-card .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.auth-card .brand img {
  height: 72px;
  margin-bottom: 8px;
}

.auth-card h1 {
  font-size: calc(var(--font-scale) * 20px);
  text-align: center;
  margin: 0 0 24px;
  color: var(--text);
}

/* ---- Página de invitación (registro.html): versión más cálida de
   .auth-page, con una columna de bienvenida junto al formulario. No se
   reutiliza .auth-page/.auth-card como contenedor porque esas clases las
   comparten login/recuperar/cambiar-password/suspendido — un cambio ahí
   afectaría esas páginas también; .auth-card sí se reutiliza tal cual para
   la tarjeta del formulario, para heredar el mismo estilo de inputs/botón. */
.invitacion-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, #1c1c1c 0%, #000000 100%);
  padding: 32px 24px;
}
.invitacion-shell {
  width: 100%;
  max-width: 980px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.invitacion-hero { flex: 1 1 380px; padding: 8px; }
.invitacion-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.invitacion-marca img {
  height: 34px;
  background: #ffffff;
  border-radius: 8px;
  padding: 5px 8px;
}
.invitacion-marca span { font-weight: 700; font-size: 12px; letter-spacing: .8px; color: var(--cinco-orange); }
.invitacion-hero h1 { font-size: 28px; line-height: 1.28; margin: 0 0 16px; color: #ffffff; }
.invitacion-hero > p { font-size: 14.5px; line-height: 1.65; color: #c7c9cd; max-width: 440px; margin: 0 0 28px; }
.invitacion-modulos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 12px;
  max-width: 380px;
  margin-bottom: 22px;
}
.invitacion-modulo { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.invitacion-modulo img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(245, 166, 35, 0.55);
}
.invitacion-modulo span { font-size: 11px; color: #b7b9bd; }
.invitacion-nota { font-size: 12.5px; color: var(--cinco-orange); font-weight: 600; margin: 0; }
.invitacion-card { flex: 1 1 380px; }

@media (max-width: 820px) {
  .invitacion-shell { flex-direction: column; }
  .invitacion-hero { text-align: center; }
  .invitacion-hero > p { margin-left: auto; margin-right: auto; }
  .invitacion-marca, .invitacion-modulos { justify-content: center; margin-left: auto; margin-right: auto; }
}

label {
  display: block;
  font-size: calc(var(--font-scale) * 13px);
  font-weight: 600;
  margin: 14px 0 6px;
  color: var(--text-muted);
}

/* Etiquetas de nombre de campo (Nombre, Ubicación, Estado...) con la
   identidad de marca: negrilla + naranja + un punto de acento antes del
   texto, para que se distingan del resto del formulario de un vistazo —
   antes eran del mismo gris apagado que cualquier texto secundario.
   :not(:has(input)) las separa de las que SÍ envuelven un checkbox (ver
   .multiselect-panel label y los checkboxes "Incluir Sótano/Semisótano/
   Terraza"): esas siguen leyéndose como una opción normal junto a su
   casilla, no como el nombre de un campo. */
label:not(:has(input)) {
  font-weight: 700;
  color: var(--cinco-orange-dark);
  letter-spacing: 0.1px;
}
label:not(:has(input))::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cinco-orange-dark);
  margin-right: 7px;
  vertical-align: middle;
}

input, select, textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: calc(var(--font-scale) * 14px);
  background: var(--input-bg);
  color: var(--text);
}

.inicio-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.inicio-grid > .card { margin: 0; display: flex; flex-direction: column; }
.inicio-grid > .card:nth-child(1) { grid-column: 1; grid-row: 1; }
.inicio-grid > .card:nth-child(2) { grid-column: 1; grid-row: 2; }
.inicio-grid > .card:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
.inicio-grid > .card:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
@media (max-width: 1200px) {
  .inicio-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; }
  .inicio-grid > .card:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
  .inicio-grid > .card:nth-child(4) { grid-column: 1 / span 2; grid-row: 3; }
}
@media (max-width: 900px) {
  .inicio-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .inicio-grid > .card:nth-child(1),
  .inicio-grid > .card:nth-child(2),
  .inicio-grid > .card:nth-child(3),
  .inicio-grid > .card:nth-child(4) { grid-column: 1; grid-row: auto; }
}

.mapa-ubicacion { flex: 1; min-height: 380px; border-radius: 10px; overflow: hidden; z-index: 0; }
.mapa-ubicacion-vacio {
  flex: 1;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--sidebar-bg);
  border-radius: 10px;
  padding: 20px;
}

.bar-chart { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; flex: 1; justify-content: center; }
.bar-chart-row { display: flex; align-items: center; gap: 12px; }
.bar-chart-label { width: 150px; flex-shrink: 0; font-size: calc(var(--font-scale) * 12.5px); color: var(--text-muted); text-align: right; }
.bar-chart-track { flex: 1; background: var(--sidebar-bg); border-radius: 6px; overflow: hidden; height: 22px; }
.bar-chart-fill {
  height: 100%;
  /* Color sólido, no degradado: un degradado se ve distinto según el ancho
     de cada barra (una barra corta como "Recaudado" apenas mostraba el
     extremo claro del degradado y quedaba pálida, muy distinta del tono
     fuerte que sí alcanza a verse en una barra casi llena como
     "Presupuestado") — con un color fijo todas las barras se ven
     consistentes sin importar qué tan corto o largo sea su valor. */
  background: #d9820b;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  color: #fff;
  font-size: calc(var(--font-scale) * 11.5px);
  font-weight: 700;
  /* min-width: max-content (no un número fijo en px): cuando el valor es un
     texto largo (ej. "$100.548.507 (8%)" en Recaudo) y la barra le
     correspondería un ancho angosto por su porcentaje, el texto ya no se
     parte en dos líneas ni se sale de la franja de color hacia el fondo
     claro de la pista (quedaba blanco sobre blanco, ilegible) — la barra
     misma crece lo necesario para contener su propio texto. */
  white-space: nowrap;
  min-width: max-content;
  transition: width .4s ease;
}

/* Variante compacta para gráficas con muchas categorías (ej. "Activos por
   tipo": un tablero por cada tipo de activo distinto que tenga la
   copropiedad) — fila más baja, etiqueta más angosta y letra más chica que
   el .bar-chart genérico, para que la tarjeta no crezca sin límite fila por
   fila y quede pareja con el mapa/informes generados al lado, en vez de esa
   columna quedando mucho más alta que las otras dos. */
.bar-chart-compacto { gap: 6px; }
.bar-chart-compacto .bar-chart-row { gap: 8px; }
.bar-chart-compacto .bar-chart-label {
  width: 128px;
  font-size: calc(var(--font-scale) * 11px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-chart-compacto .bar-chart-track { height: 15px; }
.bar-chart-compacto .bar-chart-fill { font-size: calc(var(--font-scale) * 10px); padding-right: 6px; white-space: nowrap; min-width: max-content; }

.month-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.month-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--text);
  font-size: calc(var(--font-scale) * 13px);
  cursor: pointer;
  text-align: left;
}
.month-chip:hover { background: var(--sidebar-hover); }
.month-chip-badge {
  display: inline-block;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: calc(var(--font-scale) * 12px);
  font-weight: 700;
  text-align: center;
}
.month-chip-badge.ok { background: #fff4e0; color: var(--warning); }
.month-chip-badge.muted { background: var(--sidebar-bg); color: var(--text-muted); }

.password-field { position: relative; }
.password-field input { padding-right: 42px; }
.password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: calc(var(--font-scale) * 16px);
  line-height: 1;
  padding: 8px;
  border-radius: 6px;
  color: var(--text-muted);
}
.password-toggle:hover { background: var(--sidebar-hover); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cinco-orange);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  margin-top: 22px;
  border: none;
  border-radius: 8px;
  background: var(--cinco-orange-dark);
  color: #fff;
  font-weight: 600;
  font-size: calc(var(--font-scale) * 14px);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
}

.btn:hover { background: var(--cinco-orange); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14); }
.btn:active { transform: scale(0.99); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.btn.secondary {
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
  font-weight: 500;
}
.btn.secondary:hover { background: var(--sidebar-hover); }

.btn.danger {
  background: var(--danger);
  color: #fff;
}

.link-row {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-size: calc(var(--font-scale) * 13px);
}

.alert {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: calc(var(--font-scale) * 13px);
  display: none;
}

.alert.error { background: #fdecec; color: var(--danger); display: block; }
.alert.success { background: #e9f8ef; color: var(--success); display: block; }
.alert.info { background: #eef6fb; color: #1f6fb2; display: block; }

/* ---- app shell (dashboard + módulos) ---- */

.app-shell {
  display: flex;
  min-height: 100vh;
  gap: 20px;
  padding: 20px;
  background: var(--bg);
}

/* El menú lateral como una tarjeta flotante más (separada del borde de la
   pantalla y del contenido principal), igual que las tarjetas del
   contenido — antes iba pegado al borde izquierdo, de punta a punta. */
.sidebar {
  width: 250px;
  background: var(--card-bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  flex-shrink: 0;
  position: relative;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.sidebar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cinco-orange) 0%, var(--cinco-orange-dark) 100%);
}

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}

.sidebar .brand img {
  height: 36px;
  border-radius: 8px;
}
.sidebar .brand span { font-weight: 700; font-size: calc(var(--font-scale) * 15px); letter-spacing: 0.2px; color: var(--text); }
.sidebar .brand:hover { text-decoration: none; opacity: 0.85; }

.sidebar nav a {
  display: flex;
  align-items: center;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: calc(var(--font-scale) * 14px);
  margin-bottom: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar nav a:hover {
  background: var(--sidebar-hover);
  color: var(--text);
  text-decoration: none;
}

.sidebar nav a.active {
  background: rgba(245, 166, 35, 0.12);
  color: var(--cinco-orange-dark);
  font-weight: 600;
  text-decoration: none;
  box-shadow: inset 3px 0 0 var(--cinco-orange);
}

/* ---- grupos plegables del menú lateral (Gestión de Activos / Finanzas
   e Informes / Administración): mismo lenguaje visual que .collapsible-toggle
   (Panel administrador), adaptado a un encabezado de sección dentro de la
   barra lateral en vez de una tarjeta. ---- */
.sidebar .nav-group { margin-bottom: 2px; }
.sidebar .nav-group-toggle {
  padding: 10px 14px 4px;
  font-size: calc(var(--font-scale) * 11px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nav-section-color);
}
.sidebar .nav-group-toggle:hover { color: var(--text); }
.sidebar .nav-group-toggle .chevron { font-size: calc(var(--font-scale) * 11px); }
.sidebar .nav-group-body a { margin-left: 4px; }

/* "Informes" es un enlace directo, sin acordeón (un solo destino no
   necesita plegarse) — pero debe verse igual que los encabezados de
   sección (Gestión de Activos, Finanzas, Administración) en vez de
   como un enlace normal: mismo tratamiento tipográfico de
   .nav-group-toggle, aplicado sobre un <a> real. */
.sidebar nav a.nav-section-link {
  font-size: calc(var(--font-scale) * 11px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nav-section-color);
}
.sidebar nav a.nav-section-link:hover { color: var(--text); }
.sidebar .nav-icon-img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* "Recaudo" no tiene una foto propia en assets/img/modulos/ (comparte la de
   Ejecución Presupuestal) — para no verse idéntico a ese otro enlace en el
   menú, usa un emoji del mismo ancho/margen que las demás fotos en vez de
   repetir la imagen. */
.sidebar .nav-icon-emoji {
  display: inline-block;
  width: 18px;
  margin-right: 8px;
  flex-shrink: 0;
  text-align: center;
  font-size: 14px;
  line-height: 18px;
}

.sidebar .spacer { flex: 1; }

.sidebar .user-box {
  border-top: 1px solid var(--border);
  padding: 14px 4px 4px;
  font-size: calc(var(--font-scale) * 12px);
  color: var(--text-muted);
  margin-top: 4px;
}

.main {
  flex: 1;
  padding: 28px 36px;
  max-width: 1600px;
}

/* Mientras js/arranque.js tiene la página "preparando" (requireAuth todavía
   está armando sesión, tema, encabezado y nombre de la copropiedad), el
   contenido principal se mantiene oculto — el menú lateral sí se ve — para no
   mostrar 1-2 segundos la pantalla por defecto antes de la real. */
html.cs-preparando .main > * { visibility: hidden; }
html.cs-preparando .user-box #userName,
html.cs-preparando .user-box #userCopropiedad { visibility: hidden; }
html.cs-preparando .main::before {
  content: "Cargando…";
  position: fixed;
  top: 45vh;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-muted);
  font-size: 14px;
}

.grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .grid-6 { grid-template-columns: repeat(2, 1fr); }
}

.main header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 30px;
}

.main h1 {
  font-size: calc(var(--font-scale) * 26px);
  font-weight: 800;
  margin: 0;
  color: var(--text);
  letter-spacing: -0.3px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.main header::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--cinco-orange) 0%, var(--cinco-orange-dark) 100%);
}

/* ---- Encabezado compacto (ver combinarEncabezadoConBanner en utils.js):
   título + banner de la copropiedad + un aviso opcional (.aviso-encabezado),
   los tres en una sola fila en vez de apilados, para ganarle espacio
   vertical al contenido. Usado en cualquier página con <header><h1>. ---- */
.fila-encabezado {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}
.fila-encabezado header {
  flex: 0 0 auto;
  flex-direction: row;
  margin-bottom: 0;
  text-align: left;
}
.fila-encabezado header::after { content: none; }
.fila-encabezado h1 { font-size: calc(var(--font-scale) * 20px); white-space: nowrap; }
.fila-encabezado .cop-header-bar { flex: 0 1 auto; margin: 0; min-width: 0; }
.fila-encabezado .cop-header-nombre,
.fila-encabezado .cop-header-nit { white-space: nowrap; }
.fila-encabezado .aviso-encabezado {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--sidebar-bg);
  white-space: nowrap;
}

.card h2 {
  font-size: calc(var(--font-scale) * 15px);
  font-weight: 700;
  color: var(--cinco-orange-dark);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-tile.icon-tile { display: flex; align-items: center; gap: 14px; }
.stat-tile.icon-tile .icon {
  font-size: calc(var(--font-scale) * 26px);
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(245, 166, 35, 0.14);
}
.stat-tile.icon-tile .icon img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.stat-tile.icon-tile .text { min-width: 0; }

.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  margin-bottom: 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

/* Pone tarjetas cortas (formularios de ajustes, resúmenes) una al lado de
   la otra en vez de apiladas — aprovecha el ancho disponible en vez de
   alargar la página hacia abajo. Cae a una sola columna en pantallas
   angostas. Envolver: <div class="cards-row"><div class="card">…</div>…</div> */
.cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}
.cards-row > .card { margin-bottom: 0; }

/* Fila de indicadores tipo "semáforo" (Inicio, Portal de transparencia):
   reparte los indicadores en tantas columnas como quepan en el ancho
   disponible en vez de apilarlos en una sola columna angosta, que deja
   la tarjeta con un vacío enorme al lado. Envolver:
   <div id="semaforoLista" class="semaforo-lista">…</div> */
.semaforo-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.stat-tile {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}

.stat-tile .value { font-size: calc(var(--font-scale) * 28px); font-weight: 800; color: var(--text); }
.stat-tile .label { font-size: calc(var(--font-scale) * 13px); color: var(--text-muted); margin-top: 4px; }

/* Las 4 tarjetas de resumen del Inicio (#statTiles): letra/ícono más chicos
   que el .stat-tile genérico de arriba, a propósito — con el tamaño normal,
   4 tarjetas no cabían en una sola fila en pantallas de portátil (quedaban
   3 y una cuarta huérfana en su propia fila). Escenario pedido explícito
   del usuario: que las 4 siempre queden en una sola fila. Solo #statTiles
   (por id), no toca el .stat-tile genérico que usa Informes con su propio
   conteo de tarjetas. */
#statTiles { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 12px; }
#statTiles .stat-tile { padding: 12px 14px; }
#statTiles .stat-tile.icon-tile { gap: 10px; }
#statTiles .stat-tile.icon-tile .icon { width: 34px; height: 34px; font-size: calc(var(--font-scale) * 18px); border-radius: 9px; }
#statTiles .stat-tile .value { font-size: calc(var(--font-scale) * 19px); }
#statTiles .stat-tile .label { font-size: calc(var(--font-scale) * 10.5px); margin-top: 2px; }

/* Mini-resumen dentro de una tarjeta-toolbar (ver Activos): filas
   etiqueta/valor apiladas en vertical, con el mismo tamaño de letra
   compacto que el resto de tarjetas-toolbar (no números grandes tipo
   .stat-tile, que se ve fuera de tono ahí adentro). Los valores reflejan
   lo que queda tras aplicar los filtros activos — se recalculan en cada
   render(). */
.resumen-activos-mini { display: flex; flex-direction: column; gap: 5px; }
.resumen-activos-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: calc(var(--font-scale) * 12px);
}
.resumen-activos-fila .label { color: var(--text-muted); }
.resumen-activos-fila .valor { font-weight: 700; color: var(--text); }
.resumen-activos-fila .valor.ok { color: var(--success); }
.resumen-activos-fila .valor.danger { color: var(--danger); }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(var(--font-scale) * 13.5px);
}

th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

th { color: var(--text-muted); font-weight: 600; font-size: calc(var(--font-scale) * 12px); text-transform: uppercase; }

tr:hover td { background: var(--sidebar-hover); }

/* Listas largas (tablas de la página o dentro de un modal): se acotan a
   una altura máxima con scroll propio en vez de dejar crecer la página
   sin límite, para que el encabezado (thead) se quede fijo arriba —
   "pegado" — y los nombres de columna sigan visibles mientras se
   recorren las filas. Envolver la tabla en <div class="tabla-scroll">. */
.tabla-scroll {
  max-height: 65vh;
  overflow: auto;
}
.tabla-scroll table { margin: 0; }
.modal .tabla-scroll { max-height: 40vh; }

.tabla-scroll thead th,
.modal thead th {
  position: sticky;
  top: 0;
  background: var(--card-bg);
  z-index: 1;
  box-shadow: 0 1px 0 var(--border);
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: calc(var(--font-scale) * 11.5px);
  font-weight: 700;
}

.badge.ok { background: #e9f8ef; color: var(--success); }
.badge.warn { background: #fff4e0; color: var(--warning); }
.badge.danger { background: #fdecec; color: var(--danger); }
.badge.muted { background: var(--sidebar-bg); color: var(--text-muted); }

.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  align-items: center;
}

.toolbar .btn { width: auto; margin-top: 0; padding: 9px 16px; font-size: calc(var(--font-scale) * 13px); }
.toolbar input, .toolbar select { width: auto; margin-top: 0; padding: 8px 10px; font-size: calc(var(--font-scale) * 13px); }

/* ---- toolbar "en tarjetas": cada control más chico — buscador, filtros y
   botones se ven como tarjetas pequeñas en línea, en vez de botones
   grandes. Ojo: NO usar overflow-x:auto aquí — el desplegable de los
   filtros (Tipo/Estado/Completitud) es un .multiselect-panel posicionado
   "absolute" que sale de esta fila hacia abajo, y overflow-x:auto obliga a
   que overflow-y también recorte (regla del CSS: no puede haber solo un
   eje "visible" si el otro no lo es) — eso lo dejaba invisible/cortado
   aunque el filtro sí funcionara por dentro. Sin overflow-x, en pantallas
   angostas pasa a una segunda línea en vez de scroll horizontal — es el
   trade-off para que los filtros se puedan seguir viendo y usando. ---- */
.toolbar-compacto {
  gap: 5px;
}
.toolbar-compacto .btn,
.toolbar-compacto .multiselect-btn {
  padding: 4px 8px;
  font-size: calc(var(--font-scale) * 10px);
  white-space: nowrap;
  flex: 0 0 auto;
}
.toolbar-compacto input,
.toolbar-compacto select {
  padding: 4px 6px;
  font-size: calc(var(--font-scale) * 10px);
  flex: 0 0 auto;
}
.toolbar-compacto #buscarInput { max-width: 140px; }

/* ---- Fila de tarjetas de la barra de herramientas de Activos (Filtros /
   Resumen / Exportar / Acciones): cada grupo de controles en su propia
   tarjeta, con el fondo de la página separándolas — mismo lenguaje visual
   que las demás tarjetas de la página.
   Pedido explícito del usuario: las 4 SIEMPRE en la misma fila, nunca una
   bajando sola a una fila aparte (se probaron varias variantes con
   flex-wrap:wrap — flex-grow parejo, flex-grow desigual, sin grow — y en
   todas, en algún ancho de pantalla realista de portátil, Acciones o
   alguna otra terminaba sola en su propia fila). La única forma de
   garantizarlo en cualquier ancho es flex-wrap:nowrap con las 4 a ancho
   IGUAL (flex:1 1 0 + min-width:0, el 0 de min-width es necesario para que
   puedan encogerse por debajo del ancho de su contenido en vez de
   desbordar): si no caben con su contenido normal, cada tarjeta encoge
   pareja y sus propios controles (.toolbar-compacto ya tiene flex-wrap)
   pasan a más líneas — pero la tarjeta en sí nunca cae a otra fila.
   align-items:flex-start (no stretch): cada tarjeta ocupa solo el alto que
   necesita — con stretch, la más alta de la fila forzaba a las demás a esa
   misma altura y dejaba huecos vacíos debajo de su contenido real. ---- */
.fila-tarjetas-toolbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  margin-bottom: 20px;
  align-items: flex-start;
}
.tarjeta-toolbar {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
  padding: 14px 16px;
}
/* Tamaño de letra de la etiqueta de cada tarjeta ("FILTROS", "EXPORTAR"…);
   los valores del detalle de un activo (.vista-previa-activo .vp-valor) usan
   este mismo, para que todo el texto de las tarjetas guarde una sola escala. */
:root { --tam-tarjeta-etiqueta: 10px; }
.etiqueta-tarjeta-toolbar {
  margin: 0 0 8px;
  font-size: var(--tam-tarjeta-etiqueta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}

/* Ribete lateral de color en tarjetas y subtarjetas — mismos 4 colores primarios
   y mismo orden que las tarjetas de punto de LBDC Neiva (.bosquejo-vp-punto
   .color-0..3), para diferenciarlas de un vistazo. Por ahora solo se usa en
   Activos (inventario.html): las 4 tarjetas de la barra de herramientas llevan
   .cinta .cinta-N a mano, y las subtarjetas del detalle (.vp-grupo) toman el
   color por posición. Para llevarlo a otra página basta con agregar esas
   clases. --cinta = color del ribete; --cinta-texto = el mismo tono, ajustado
   para leerse como texto (el amarillo puro no se lee sobre fondo claro). */
.cinta-0, .vista-previa-activo .vp-grupo:nth-child(4n + 1), .vista-previa-medidor .vp-grupo:nth-child(4n + 1), .vista-previa-copropiedad .vp-grupo:nth-child(4n + 1), .vista-previa-usuario .vp-grupo:nth-child(4n + 1) { --cinta: #1f5fbf; --cinta-texto: #1f5fbf; }
.cinta-1, .vista-previa-activo .vp-grupo:nth-child(4n + 2), .vista-previa-medidor .vp-grupo:nth-child(4n + 2), .vista-previa-copropiedad .vp-grupo:nth-child(4n + 2), .vista-previa-usuario .vp-grupo:nth-child(4n + 2) { --cinta: #d93636; --cinta-texto: #d93636; }
.cinta-2, .vista-previa-activo .vp-grupo:nth-child(4n + 3), .vista-previa-medidor .vp-grupo:nth-child(4n + 3), .vista-previa-copropiedad .vp-grupo:nth-child(4n + 3), .vista-previa-usuario .vp-grupo:nth-child(4n + 3) { --cinta: #f2b90f; --cinta-texto: #b8860b; }
.cinta-3, .vista-previa-activo .vp-grupo:nth-child(4n + 4), .vista-previa-medidor .vp-grupo:nth-child(4n + 4), .vista-previa-copropiedad .vp-grupo:nth-child(4n + 4), .vista-previa-usuario .vp-grupo:nth-child(4n + 4) { --cinta: #1e9e57; --cinta-texto: #1e9e57; }
:root[data-theme="dark"] .cinta-0, :root[data-theme="dark"] .vista-previa-activo .vp-grupo:nth-child(4n + 1), :root[data-theme="dark"] .vista-previa-medidor .vp-grupo:nth-child(4n + 1), :root[data-theme="dark"] .vista-previa-copropiedad .vp-grupo:nth-child(4n + 1), :root[data-theme="dark"] .vista-previa-usuario .vp-grupo:nth-child(4n + 1) { --cinta-texto: #7fa8f0; }
:root[data-theme="dark"] .cinta-1, :root[data-theme="dark"] .vista-previa-activo .vp-grupo:nth-child(4n + 2), :root[data-theme="dark"] .vista-previa-medidor .vp-grupo:nth-child(4n + 2), :root[data-theme="dark"] .vista-previa-copropiedad .vp-grupo:nth-child(4n + 2), :root[data-theme="dark"] .vista-previa-usuario .vp-grupo:nth-child(4n + 2) { --cinta-texto: #f08a8a; }
:root[data-theme="dark"] .cinta-2, :root[data-theme="dark"] .vista-previa-activo .vp-grupo:nth-child(4n + 3), :root[data-theme="dark"] .vista-previa-medidor .vp-grupo:nth-child(4n + 3), :root[data-theme="dark"] .vista-previa-copropiedad .vp-grupo:nth-child(4n + 3), :root[data-theme="dark"] .vista-previa-usuario .vp-grupo:nth-child(4n + 3) { --cinta-texto: #f2c94c; }
:root[data-theme="dark"] .cinta-3, :root[data-theme="dark"] .vista-previa-activo .vp-grupo:nth-child(4n + 4), :root[data-theme="dark"] .vista-previa-medidor .vp-grupo:nth-child(4n + 4), :root[data-theme="dark"] .vista-previa-copropiedad .vp-grupo:nth-child(4n + 4), :root[data-theme="dark"] .vista-previa-usuario .vp-grupo:nth-child(4n + 4) { --cinta-texto: #6fd39a; }

.cinta { border-left: 6px solid var(--cinta); }
.cinta .etiqueta-tarjeta-toolbar { color: var(--cinta-texto); }
.vista-previa-activo .vp-grupo, .vista-previa-medidor .vp-grupo, .vista-previa-copropiedad .vp-grupo, .vista-previa-usuario .vp-grupo { border-left: 5px solid var(--cinta); }
.vista-previa-activo .vp-grupo .vp-grupo-titulo, .vista-previa-medidor .vp-grupo .vp-grupo-titulo, .vista-previa-copropiedad .vp-grupo .vp-grupo-titulo, .vista-previa-usuario .vp-grupo .vp-grupo-titulo { color: var(--cinta-texto); }

.checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 6px 0 2px;
}
.checklist label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(var(--font-scale) * 13px);
  font-weight: 400;
  color: var(--text);
  margin: 0;
  cursor: pointer;
}
.checklist input[type="checkbox"] {
  width: auto;
  padding: 0;
  margin: 0;
  accent-color: var(--cinco-orange-dark);
}

/* ---- filtro desplegable con selección múltiple (estilo filtro de Excel) ---- */
.multiselect { position: relative; display: inline-block; }

.multiselect-btn {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  font-size: calc(var(--font-scale) * 13px);
  cursor: pointer;
  position: relative;
}
.multiselect-btn:hover { background: var(--sidebar-hover); }

/* Filtro activo (no está marcado "Todos"): borde/fondo de marca + punto en
   la esquina, para que se note de un vistazo cuál filtro está reduciendo lo
   que se ve en la tabla — ver actualizarAspectoFiltro() en utils.js. */
.multiselect-btn.filtro-activo {
  border-color: var(--cinco-orange-dark);
  background: rgba(245, 166, 35, 0.14);
  color: var(--cinco-orange-dark);
  font-weight: 600;
}
.multiselect-btn.filtro-activo::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cinco-orange-dark);
  border: 2px solid var(--card-bg);
}

.multiselect-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  flex-direction: column;
  gap: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 12px 16px;
  min-width: 190px;
}
.multiselect.open .multiselect-panel { display: flex; }

.multiselect-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(var(--font-scale) * 13px);
  font-weight: 400;
  color: var(--text);
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
}
.multiselect-panel label.multiselect-all {
  font-weight: 700;
  padding-bottom: 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.multiselect-panel input[type="checkbox"] {
  width: auto;
  padding: 0;
  margin: 0;
  accent-color: var(--cinco-orange-dark);
}

/* ---- Filtro combinado "Ubicación ▾" (inventario.js, renderFiltrosUbicacion):
   los 6 niveles (Etapa/Torre/Piso/Zona/Sector/Cuarto) comparten un solo
   botón y un panel más ancho en vez de 6 botones en línea — eso era lo que
   no dejaba caber la tarjeta de Filtros en una fila. Cada nivel sigue
   siendo su propio .multiselect-panel[data-nivel] por dentro (el filtrado
   en JS no cambió), pero acá se muestran todos a la vez como columnas de
   una grilla en vez de flyouts independientes. ---- */
.multiselect-panel-ubicacion {
  min-width: 460px;
  max-width: 620px;
  /* Respaldo: si aun así el panel completo no cabe (pantalla baja, o el
     botón abre cerca del borde inferior), que se desplace él en vez de
     salirse de la ventana. El límite por columna de abajo
     (.multiselect-nivel-opciones) ya evita llegar a este caso en el uso
     normal (ej. "Piso" con 20+ valores). */
  max-height: min(70vh, 480px);
  overflow-y: auto;
}
.multiselect.open .multiselect-panel-ubicacion {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 14px 20px;
}
.multiselect-panel-nivel {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
}
.multiselect-nivel-titulo {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
/* Lista de valores de un nivel (ej. los 20+ pisos de una torre): el título
   y "Todos" quedan fijos arriba de la columna, y solo esta lista interna
   se desplaza — así una torre con muchos pisos no alarga el panel entero
   ni lo saca de la pantalla. */
.multiselect-nivel-opciones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 4px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal-backdrop.open { display: flex; }

/* Franja de marca (degradado del color de marca) arriba de
   cada ventana emergente, para que se distinga de una tarjeta cualquiera —
   es un ::before posicionado respecto al padding-box de .modal, así que
   queda pegada al borde superior real sin necesitar overflow:hidden (que
   rompería el overflow-y:auto que ya usan los formularios largos). */
.modal {
  position: relative;
  background: var(--card-bg);
  border-radius: 16px;
  padding: 28px 26px 26px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22), 0 2px 10px rgba(0,0,0,0.08);
  animation: modal-entrada 0.18s ease-out;
}
.modal::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, var(--cinco-orange) 0%, var(--cinco-orange-dark) 100%);
}
@keyframes modal-entrada {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modal { animation: none; }
}

.modal h2 {
  margin: 0 0 18px;
  font-size: calc(var(--font-scale) * 19px);
  font-weight: 800;
  color: var(--cinco-orange-dark);
  letter-spacing: -0.2px;
}

/* Pares de campos cortos (ej. Tipo/Nombre, Estado/Periodicidad) lado a lado
   en vez de uno debajo del otro — para modales anchos como Nuevo/Editar
   activo. Cada campo va en su propio <div> con su label+input dentro, así
   el label conserva su margen normal y ambas columnas quedan alineadas. En
   pantallas angostas (el modal se encoge a 100% de ancho) vuelve a una sola
   columna para que los campos no queden apretados. */
.form-fila-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
@media (max-width: 480px) {
  .form-fila-2col { grid-template-columns: 1fr; }
}

.icon-btn {
  border: none;
  background: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: calc(var(--font-scale) * 13px);
  color: var(--text);
}

.icon-btn:hover { background: var(--sidebar-hover); }
.icon-btn.danger { color: var(--danger); }

/* Botones que en realidad son un enlace a más detalle (ej: código/nombre de
   un activo que abre su historial) — se ven como un link de verdad, no como
   texto plano, para que quede claro que se puede hacer clic. */
.link-like {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--cinco-orange-dark);
  text-decoration: underline;
  cursor: pointer;
}
.link-like:hover { opacity: 0.75; }

.hidden { display: none !important; }

/* ---- tarjetas plegables (Panel administrador) ---- */
.collapsible-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.collapsible-toggle .chevron {
  color: var(--text-muted);
  font-size: calc(var(--font-scale) * 13px);
  transition: transform 0.15s ease;
}

.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }

/* ---- tabla de Ejecución Presupuestal agrupada por grupo contable ---- */
.presupuesto-grupo-header td {
  background: var(--sidebar-bg);
  font-weight: 700;
  padding-top: 14px;
  border-top: 2px solid var(--border);
}
/* La celda de la fila de grupo (colspan="16") va en flujo normal, no fija
   — fijar la celda entera fue lo que tapaba el encabezado al desplazar
   verticalmente (ver más abajo). En cambio, solo la etiqueta de texto de
   adentro queda fija a la izquierda al desplazar horizontalmente, igual que
   la columna Categoría de las filas normales — así "Cuotas y cartera" no se
   pierde de vista al recorrer la tabla hacia los meses. */
.grupo-header-fijo {
  display: inline-block;
  position: sticky;
  left: 6px;
  background: var(--sidebar-bg);
}
.presupuesto-subtotal td {
  background: var(--bg);
  font-weight: 600;
  font-style: italic;
  color: var(--text-muted);
}
.presupuesto-total-general td {
  background: var(--cinco-orange);
  color: #111;
  font-weight: 700;
}

/* Compacta: 16 columnas (categoría + 12 meses + 3 totales) no caben cómodas
   con el tamaño de tabla por defecto — se achica para que se vea más de un
   vistazo y los botones de acción no queden fuera de pantalla. */
/* border-collapse: separate (en vez de collapse, que es lo que usa el resto
   de tablas del sitio) + border-spacing: 0 — solo en esta tabla, que es la
   única con encabezado fijo arriba Y columna fija a la izquierda al mismo
   tiempo. Con border-collapse: collapse el navegador puede dejar de repintar
   los th que no son la esquina fija al desplazar la tabla (títulos de
   columna que "se pierden" al hacer scroll) — es un problema conocido de
   combinar sticky con bordes colapsados en tablas. Con border-spacing: 0 no
   se nota diferencia visual (ya se pone border-right/bottom a mano en cada
   celda), pero corrige el repintado. */
/* NO table-layout: fixed aquí (se probó y se revirtió): esta tabla necesita
   poder ser más ancha que su contenedor y desplazarse de lado a lado — con
   table-layout: fixed + colgroup en % las 17 columnas quedaban obligadas a
   caber siempre dentro del ancho visible, y los números de cada mes
   terminaban encimados/ilegibles en vez de simplemente pedir scroll
   horizontal (que es como funcionaba antes). Se deja con el ancho
   automático (el default) a propósito. */
.tabla-presupuesto { font-size: calc(var(--font-scale) * 10.5px); border-collapse: separate; border-spacing: 0; }
.tabla-presupuesto th, .tabla-presupuesto td { padding: 5px 6px; border-right: 1px solid var(--border); }
.tabla-presupuesto th { font-size: calc(var(--font-scale) * 8.5px); white-space: normal; line-height: 1.2; text-align: center; }

/* Más semejanza a Excel: cuadrícula vertical entre columnas (arriba, el
   border-right en cada th/td — el border-bottom ya lo pone la regla general
   de th/td) y la primera columna (Categoría) fija al desplazar horizontal,
   igual que "Inmovilizar panel" — el encabezado ya quedaba fijo arriba (ver
   .tabla-scroll thead th); con esto las dos fijaciones coinciden en la
   esquina superior izquierda. Usado en Recaudo y Ejecución Presupuestal
   (ambos con esta misma tabla de 16 columnas). */
.tabla-presupuesto td:first-child,
.tabla-presupuesto th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--card-bg);
  box-shadow: 1px 0 0 var(--border);
}
.tabla-presupuesto thead th:first-child {
  z-index: 3;
  box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border);
}
/* La fila de grupo (ej. "Cuotas y cartera") es una sola celda con
   colspan="16" que ocupa todo el ancho — no es "la columna Categoría de esa
   fila", es la fila entera. Por error heredaba la misma regla de columna
   fija (position: sticky; left: 0; z-index: 2) de arriba: esa celda, ya de
   por sí tan ancha como la tabla, con fondo sólido, pasaba por ENCIMA de los
   títulos del encabezado (que tienen z-index más bajo) al desplazar y los
   tapaba — se veían "perdidos" aunque seguían ahí debajo. Se anula esa
   fijación solo para esta fila: no necesita quedar fija a los lados, ya
   ocupa todo el ancho. */
.tabla-presupuesto .presupuesto-grupo-header td:first-child {
  position: static;
  z-index: auto;
  background: var(--sidebar-bg);
}
.tabla-presupuesto .presupuesto-subtotal td:first-child { background: var(--bg); }
.tabla-presupuesto .presupuesto-total-general td:first-child { background: var(--cinco-orange); }

/* Ribetes muy tenues por grupo (concepto), no por categoría (subconcepto):
   las filas de un mismo grupo (encabezado, sus categorías y su subtotal)
   comparten el mismo hilo de color, distinto del que ya usan las tarjetas
   (.cinta) para no confundirse con esos — 4 tonos suaves que rotan según la
   posición del grupo. Se dibuja como una franja fina dentro de la primera
   columna (que ya es la que queda fija al desplazar), combinada con la
   línea divisoria que separa esa columna del resto. TOTAL GENERAL no lleva
   ribete: ya tiene su propio color de marca. */
.grupo-color-0 { --ribete-grupo: #b9a4e0; }
.grupo-color-1 { --ribete-grupo: #8fd6cf; }
.grupo-color-2 { --ribete-grupo: #eeaed0; }
.grupo-color-3 { --ribete-grupo: #d9b08c; }
.tabla-presupuesto .grupo-color-0 td:first-child,
.tabla-presupuesto .grupo-color-1 td:first-child,
.tabla-presupuesto .grupo-color-2 td:first-child,
.tabla-presupuesto .grupo-color-3 td:first-child {
  box-shadow: inset 4px 0 0 var(--ribete-grupo), 1px 0 0 var(--border);
}

/* ---- tabla compacta genérica (renglones más bajos, para listados largos) —
   mismo nombre/valores que en los demás aplicativos del usuario, para poder
   reutilizar el criterio entre proyectos. Combinar con un <colgroup> propio
   de cada tabla (anchos en % proporcionales al contenido real) cuando haya
   columnas de texto corto y largo mezcladas, en vez de dejar el ancho al
   layout automático del navegador. */
.tabla-compacta th, .tabla-compacta td { padding: 5px 10px; font-size: calc(var(--font-scale) * 12.5px); }
.tabla-compacta td[rowspan] { vertical-align: middle; }
/* Celda con 2+ botones de acción (Editar/Eliminar...): que no se
   partan en dos líneas dentro de su columna angosta — se combina con un
   ancho de columna generoso en el <colgroup> de cada tabla, no basta con
   esto solo. */
.tabla-compacta .celda-acciones { white-space: nowrap; }
.tabla-compacta .celda-acciones .icon-btn { padding: 4px 6px; }

/* Para tablas sin columnas condicionales ni contenido con tamaño en píxeles
   fijado a mano (ver criterio en CLAUDE.md): combinar con <colgroup> +
   anchos en % para que el navegador respete esos anchos de verdad, en vez
   de tratarlos como una simple sugerencia (que es lo que pasa con
   table-layout: auto, el default). Texto largo se ajusta solo en varias
   líneas dentro de su columna en vez de desbordar. */
.tabla-fija { table-layout: fixed; }
.tabla-fija td { word-break: break-word; }

/* ---- tabla densa (genérica, cualquier página): FILA DELGADA DE UNA SOLA LÍNEA,
   como en los demás aplicativos — letra chica, poco relleno, y todo texto
   que no quepa en su columna se recorta con "…" en vez de partirse en dos
   líneas (el valor completo queda disponible al pasar el mouse: ver
   .celda-trunc + activarTooltipCeldas en utils.js, o el panel de detalle
   propio de Activos / Seguimiento SSPD / Panel administrador).
   table-layout: fixed es lo que hace respetar de verdad los anchos de cada
   columna (con el layout automático el ancho del <th> era solo una
   sugerencia y una fecha larga terminaba partida en dos líneas) — por eso
   TODA tabla .tabla-densa debe traer anchos en % en sus <th> o en un
   <colgroup>, proporcionales al contenido real de cada columna. Las
   columnas sin ancho se reparten lo que sobra. ---- */
.tabla-densa { table-layout: fixed; }
.tabla-densa th, .tabla-densa td { padding: 3px 8px; font-size: calc(var(--font-scale) * 11px); }
.tabla-densa td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* El encabezado sí puede partirse ("Fecha programada" en una columna angosta):
   truncar el nombre de la columna dejaría la tabla ilegible. */
.tabla-densa th { white-space: normal; line-height: 1.2; }
/* .celda-trunc trae un max-width en píxeles pegado en el HTML — en una tabla
   fija se recorta mejor contra el ancho real de su columna. */
.tabla-densa .celda-trunc { max-width: 100% !important; }
/* Campos dentro de una fila (fecha, responsable, estado...): los input/select
   normales son mucho más altos que el texto y eran los que marcaban el alto
   de la fila. !important porque varios traen min-width/max-width en línea. */
.tabla-densa input:not([type="checkbox"]):not([type="radio"]),
.tabla-densa select {
  padding: 1px 5px;
  font-size: calc(var(--font-scale) * 11px);
  line-height: 1.3;
  height: auto;
  min-height: 0;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100%;
  border-radius: 6px;
  box-sizing: border-box;
}
/* Fecha + 📌 lado a lado: el campo toma el espacio que sobra y el botón queda a su tamaño. */
.tabla-densa td > div[style*="display:flex"] { min-width: 0; }
.tabla-densa td > div[style*="display:flex"] input { flex: 1 1 0; width: auto; }
/* Botones de texto grandes (.btn "Ver PDF" / "Eliminar" con padding en línea)
   dentro de una fila: los que vienen con estilo pegado en el HTML dejaban
   filas altas — !important para poder achicarlos sin editar cada módulo. */
.tabla-densa td .btn {
  width: auto !important;
  margin: 0 0 0 4px !important;
  padding: 2px 8px !important;
  font-size: calc(var(--font-scale) * 11px) !important;
  line-height: 1.3;
  vertical-align: middle;
}
.tabla-densa td .btn:first-child { margin-left: 0 !important; }
.tabla-densa .celda-acciones { white-space: nowrap; }
.tabla-densa .icon-btn { padding: 1px 4px; font-size: calc(var(--font-scale) * 12px); line-height: 1.3; }
.tabla-densa .badge { padding: 1px 6px; font-size: calc(var(--font-scale) * 10.5px); }
.tabla-densa .link-like { font-size: inherit; }

/* ---- Extras de las tablas con panel de detalle propio (Activos y
   Seguimiento SSPD): fijar una fila con clic para que se quede mostrada en
   el panel de arriba aunque el mouse pase por otras filas, hasta volver a
   hacer clic sobre ella. El resto de tablas del sitio no tiene ese panel,
   así que este pedazo no es parte de .tabla-densa. */
.tabla-activos tbody tr, .tabla-medidores tbody tr, .tabla-mantenimientos tbody tr { cursor: pointer; }
.tabla-activos tr.fila-fijada, .tabla-medidores tr.fila-fijada, .tabla-mantenimientos tr.fila-fijada { background: rgba(245, 166, 35, 0.16); }
.tabla-activos tr.fila-fijada:hover, .tabla-medidores tr.fila-fijada:hover, .tabla-mantenimientos tr.fila-fijada:hover { background: rgba(245, 166, 35, 0.24); }

.celda-trunc {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  max-width: 100%;
}

/* Tooltip flotante de .celda-trunc para tablas SIN un panel de vista previa
   propio (ver activarTooltipCeldas en utils.js) — sigue al cursor, aparece
   al instante, no depende del title nativo del navegador. */
.tooltip-celda {
  display: none;
  position: fixed;
  z-index: 500;
  max-width: 320px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--cinco-black);
  color: #fff;
  font-size: 12.5px;
  line-height: 1.4;
  white-space: normal;
  word-wrap: break-word;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* ---- Vista previa del activo bajo el mouse (ver mostrarVistaPrevia en
   inventario.js): vive entre la barra de herramientas y la tabla, para que
   la fila en la tabla pueda quedar angosta (foto chica, texto recortado)
   sin perder nada de información al pasar el mouse por encima. ---- */
/* .card ya pone fondo/borde/sombra/relleno/margen — acá solo el layout
   interno (foto + tarjetas de datos en fila). */
.vista-previa-activo {
  display: flex;
  align-items: stretch;
  gap: 16px;
}
/* La foto ocupa TODO el alto de las tarjetas de datos (no una altura fija de
   220px que quedaba más corta o más larga según cuántos campos traiga el
   activo): el contenedor .vp-foto se estira con la fila (align-items:
   stretch de arriba) y la imagen va absoluta dentro de él, así su alto propio
   no empuja la altura de la fila — la mandan las tarjetas. */
.vista-previa-activo .vp-foto {
  position: relative;
  flex: 0 0 220px;
  min-height: 110px;
  border-radius: 8px;
  overflow: hidden;
}
.vista-previa-activo .vp-foto img,
.vista-previa-activo .vp-foto .vp-sin-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vista-previa-activo .vp-foto img { object-fit: cover; }
.vista-previa-activo .vp-sin-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--sidebar-bg);
  color: var(--text-muted);
  font-size: 13px;
  padding: 4px;
}
/* Tres tarjetas de grupo (Identificación / Ubicación / Mantenimiento) en
   vez de una tarjeta suelta por dato: cada grupo es su propia caja con
   título, y adentro los campos van en una mini-grilla de 2 columnas — así
   la subdivisión se ve (no solo se infiere del orden) y se gana espacio
   porque el fondo/borde ya no se repite dato por dato. flex-wrap para que
   en pantallas angostas los grupos bajen de línea en vez de aplastarse.
   .vista-previa-medidor reutiliza este mismo bloque de grupos/campos para
   el detalle de un medidor en Seguimiento SSPD (sin foto, así que no toma
   las reglas de .vista-previa-activo de más arriba). Lo mismo hacen
   .vista-previa-copropiedad y .vista-previa-usuario en el Panel
   administrador — mismo criterio de "tarjetas por grupo" en vez de columnas
   de botones sueltas por fila. */
.vista-previa-activo .vp-grupos, .vista-previa-medidor .vp-grupos,
.vista-previa-copropiedad .vp-grupos, .vista-previa-usuario .vp-grupos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.vista-previa-activo .vp-grupo, .vista-previa-medidor .vp-grupo,
.vista-previa-copropiedad .vp-grupo, .vista-previa-usuario .vp-grupo {
  flex: 1 1 200px;
  min-width: 180px;
  padding: 7px 10px 8px;
  border-radius: 8px;
  background: var(--sidebar-bg);
}
.vista-previa-activo .vp-grupo-titulo, .vista-previa-medidor .vp-grupo-titulo,
.vista-previa-copropiedad .vp-grupo-titulo, .vista-previa-usuario .vp-grupo-titulo {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin-bottom: 5px;
}
/* Filas apiladas (no grid de 2 columnas): un grupo con número impar de
   campos dejaba un hueco vacío en la segunda columna de la última fila —
   apilar en una sola columna, con una línea divisoria entre campos, evita
   ese hueco sin importar cuántos campos tenga cada grupo. Mismo criterio ya
   adoptado en Cinco Conecta (Empleados), portado aquí para que las tarjetas
   de detalle se vean igual entre los dos aplicativos. */
.vista-previa-activo .vp-grupo-campos, .vista-previa-medidor .vp-grupo-campos,
.vista-previa-copropiedad .vp-grupo-campos, .vista-previa-usuario .vp-grupo-campos {
  display: flex;
  flex-direction: column;
}
.vista-previa-activo .vp-campo, .vista-previa-medidor .vp-campo,
.vista-previa-copropiedad .vp-campo, .vista-previa-usuario .vp-campo {
  min-width: 0;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.vista-previa-activo .vp-campo:last-child, .vista-previa-medidor .vp-campo:last-child,
.vista-previa-copropiedad .vp-campo:last-child, .vista-previa-usuario .vp-campo:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.vista-previa-activo .vp-campo:first-child, .vista-previa-medidor .vp-campo:first-child,
.vista-previa-copropiedad .vp-campo:first-child, .vista-previa-usuario .vp-campo:first-child {
  padding-top: 0;
}
.vista-previa-activo .vp-etiqueta, .vista-previa-medidor .vp-etiqueta,
.vista-previa-copropiedad .vp-etiqueta, .vista-previa-usuario .vp-etiqueta {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}
/* Viñeta colgante: padding-left + ::before en vez de "• " como texto — así,
   si el valor es largo y pasa a una segunda línea, esa línea queda alineada
   con el texto de la primera (no debajo de la viñeta). Color naranja de
   marca (--cinco-orange-dark, igual en modo claro y oscuro) para diferenciar
   el valor del texto neutro del resto de la tarjeta. */
.vista-previa-activo .vp-valor, .vista-previa-medidor .vp-valor,
.vista-previa-copropiedad .vp-valor, .vista-previa-usuario .vp-valor {
  display: block;
  position: relative;
  padding-left: 13px;
  font-size: calc(var(--font-scale) * 12.5px);
  font-weight: 700;
  color: var(--cinco-orange-dark);
  white-space: normal;
  word-break: break-word;
}
.vista-previa-activo .vp-valor::before, .vista-previa-medidor .vp-valor::before,
.vista-previa-copropiedad .vp-valor::before, .vista-previa-usuario .vp-valor::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cinco-orange-dark);
}

/* Detalle (Activos, Seguimiento SSPD y Panel administrador): cada dato en UNA
   fila con su etiqueta ("CÓDIGO: L01028") en vez de etiqueta arriba y valor
   abajo, que gastaba el doble de alto. Es una mini-grilla de 2 columnas por
   dato: la etiqueta a su ancho natural y el valor en el resto; si el valor es
   largo pasa solo a otra línea, alineada con el inicio del valor (no debajo de
   la etiqueta). Sin viñeta. Valores al mismo tamaño que la etiqueta de las
   tarjetas de arriba. En Activos la foto y las tarjetas toman la altura que
   resulte de esto (ver .vp-foto). Criterio aprobado por el usuario para
   todos los aplicativos. */
.vista-previa-activo .vp-campo,
.vista-previa-medidor .vp-campo,
.vista-previa-copropiedad .vp-campo,
.vista-previa-usuario .vp-campo {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 6px;
  align-items: baseline;
  padding: 3px 0;
}
.vista-previa-activo .vp-etiqueta,
.vista-previa-medidor .vp-etiqueta,
.vista-previa-copropiedad .vp-etiqueta,
.vista-previa-usuario .vp-etiqueta { white-space: nowrap; }
.vista-previa-activo .vp-etiqueta::after,
.vista-previa-medidor .vp-etiqueta::after,
.vista-previa-copropiedad .vp-etiqueta::after,
.vista-previa-usuario .vp-etiqueta::after { content: ":"; }
.vista-previa-activo .vp-valor,
.vista-previa-medidor .vp-valor,
.vista-previa-copropiedad .vp-valor,
.vista-previa-usuario .vp-valor {
  padding-left: 0;
  font-size: var(--tam-tarjeta-etiqueta);
  line-height: 1.35;
}
.vista-previa-activo .vp-valor::before,
.vista-previa-medidor .vp-valor::before,
.vista-previa-copropiedad .vp-valor::before,
.vista-previa-usuario .vp-valor::before { content: none; }

/* ---- Panel administrador: fila con clic para fijar el detalle (mismo
   criterio que .tabla-activos/.tabla-medidores, ver comentario arriba). ---- */
.tabla-copropiedades tbody tr, .tabla-usuarios-plataforma tbody tr { cursor: pointer; }
.tabla-copropiedades tr.fila-fijada, .tabla-usuarios-plataforma tr.fila-fijada { background: rgba(245, 166, 35, 0.16); }
.tabla-copropiedades tr.fila-fijada:hover, .tabla-usuarios-plataforma tr.fila-fijada:hover { background: rgba(245, 166, 35, 0.24); }
.vista-previa-copropiedad, .vista-previa-usuario { display: flex; flex-direction: column; gap: 10px; }
.vista-previa-copropiedad .vp-encabezado, .vista-previa-usuario .vp-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.vista-previa-copropiedad .vp-nombre, .vista-previa-usuario .vp-nombre {
  font-size: calc(var(--font-scale) * 16px);
  font-weight: 800;
  color: var(--text);
}
.vista-previa-copropiedad .vp-acciones, .vista-previa-usuario .vp-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---- Seguimiento SSPD: dos gráficas lado a lado (consumo / valor de
   factura) bajo las tarjetas descriptivas del medidor seleccionado. Alto
   fijo en el lienzo porque Chart.js necesita un contenedor con medidas
   reales (responsive:true + maintainAspectRatio:false en el JS). ---- */
.graficas-sspd {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
}
.grafica-sspd-caja { flex: 1 1 320px; min-width: 260px; }
.grafica-sspd-titulo {
  font-size: calc(var(--font-scale) * 12.5px);
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.grafica-sspd-lienzo { position: relative; height: 220px; }

/* ---- lista de conceptos con checkbox (modal "Agregar conceptos") ---- */
.concepto-check-grupo {
  font-size: calc(var(--font-scale) * 11px);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 14px 0 6px;
}
.concepto-check-grupo:first-child { margin-top: 0; }
.concepto-check-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(var(--font-scale) * 13.5px);
  font-weight: 400;
  color: var(--text);
  margin: 0 0 8px;
  cursor: pointer;
}
.concepto-check-list input[type="checkbox"] {
  width: auto;
  padding: 0;
  margin: 0;
  accent-color: var(--cinco-orange-dark);
}

/* ---- selector de tema (claro/oscuro) ---- */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
  font-size: calc(var(--font-scale) * 16px);
  line-height: 1;
  transition: background 0.15s ease, transform 0.1s ease;
}

.theme-toggle:hover { background: var(--sidebar-hover); }
.theme-toggle:active { transform: scale(0.94); }

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; }
  .main { padding: 20px; }
}

/* Inicio compacto (caber en una sola pantalla): en las 4 tarjetas de resumen el
   número y su etiqueta van en la misma fila ("1700 Activos en inventario"), y el
   subtítulo de "Estado general" va al lado del título en vez de debajo. */
#statTiles .stat-tile .text { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#statTiles .stat-tile .label { margin-top: 0; }
.cabecera-en-linea { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 10px; }
.cabecera-en-linea h2 { margin: 0; }
.cabecera-en-linea p { margin: 0; font-size: calc(var(--font-scale) * 12.5px); }
/* El gráfico de "Estado general" arranca justo debajo del título, sin centrarse en la tarjeta. */
#graficoGeneral { justify-content: flex-start; margin-top: 0; }

/* Menú lateral en dos pilares: "Vida útil de los equipos" (azul) y "Transparencia y
   sana convivencia" (verde). Un rótulo pequeño + un ribete vertical que recorre todos
   los ítems del pilar; mismos colores primarios de los ribetes de las tarjetas. */
.sidebar .nav-pilar { --pilar: #1f5fbf; --pilar-texto: #1f5fbf; border-left: 3px solid var(--pilar); border-radius: 3px; margin: 10px 0 6px; padding-left: 6px; }
.sidebar .nav-pilar-1 { --pilar: #1e9e57; --pilar-texto: #1e9e57; }
:root[data-theme="dark"] .sidebar .nav-pilar-0 { --pilar-texto: #7fa8f0; }
:root[data-theme="dark"] .sidebar .nav-pilar-1 { --pilar-texto: #5fd08f; }
.sidebar .nav-pilar-titulo { padding: 2px 8px 0; font-size: calc(var(--font-scale) * 9.5px); font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; color: var(--pilar-texto); }

/* Bienvenida: el ribete de cada módulo no debe perderse con el borde del :hover. */
.modulo-card.cinta:hover { border-left-color: var(--cinta); }