/* ============================================================================
   ARQYURB · estilos
   ============================================================================ */

/* v638 · tipografías de la marca, servidas desde la app (licencia OFL en css/fonts) */
@font-face { font-family: "Jost"; src: url("fonts/jost-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ----------------------------------------------------------------------------
   TEMAS · dos paletas: oscuro (por defecto) y claro estilo "estudio cálido"
   El cambio entre temas se hace con data-theme="light" en <html>. La JS lo
   alterna y persiste en localStorage.
   ---------------------------------------------------------------------------- */
:root, :root[data-theme="dark"] {
  /* v638 · nueva imagen FLORENSA + ESPAÑOL · ARQYURB: carbón cálido + dorado */
  --bg: #161513;
  --bg-elev: #1F1E1B;
  --bg-elev-2: #2A2925;
  --surface-2: #2A2925;
  --ink: #ECE9E1;
  --ink-muted: #B1ACA1;
  --ink-dim: #847F75;
  --primary: #C9B451;          /* dorado claro: botón con texto oscuro */
  --primary-dark: #7A6A1F;
  --primary-hover: #D8C56A;
  --on-primary: #161513;
  --primary-rgb: 201, 180, 81;
  --accent: #C9B451;
  --accent-line: #C9B451;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --border: #3A3832;
  --radius: 12px;
  --radius-sm: 8px;
  --font-head: "Jost", "Inter", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.2);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.5);
  --modal-backdrop: rgba(0, 0, 0, 0.65);
}

/* Paleta cálida estilo despacho de arquitectura · "modo día" */
:root[data-theme="light"] {
  /* v638 · blanco roto + dorado oscuro (el dorado del logo #AC972F no llega
     a 4,5:1 sobre blanco: solo para líneas y detalles, nunca para texto) */
  --bg: #F7F6F2;
  --bg-elev: #FFFFFF;
  --bg-elev-2: #F1EFE9;
  --surface-2: #F1EFE9;
  --ink: #1F1E1B;
  --ink-muted: #5E5A52;
  --ink-dim: #8A857B;
  --primary: #7A6A1F;          /* dorado oscuro: 5,4:1 con texto blanco */
  --primary-dark: #5C4F14;
  --primary-hover: #66581A;
  --on-primary: #FFFFFF;
  --primary-rgb: 172, 151, 47;
  --accent: #7A6A1F;
  --accent-line: #AC972F;
  --success: #5a8a3a;          /* verde olivo */
  --warning: #c89c3a;          /* ámbar mostaza */
  --danger: #b13a3a;           /* rojo teja */
  --danger-hover: #8a2c2c;
  --border: #E2DED4;
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.10);
  --modal-backdrop: rgba(31, 30, 27, 0.40);
}

/* Botón toggle del tema en el topbar */
.btn-tema {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 8px;
  width: 32px; height: 32px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: background 0.15s, border-color 0.15s;
}
.btn-tema:hover { background: var(--bg-elev-2); }
/* Por defecto (oscuro) mostramos el sol (para cambiar a claro). En claro,
   mostramos la luna (para cambiar a oscuro). */
.btn-tema .tema-icon-sol { display: inline; }
.btn-tema .tema-icon-luna { display: none; }
:root[data-theme="light"] .btn-tema .tema-icon-sol { display: none; }
:root[data-theme="light"] .btn-tema .tema-icon-luna { display: inline; }

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px; line-height: 1.5;
  min-height: 100vh;
}

button { font-family: inherit; }
/* v639 · enlaces con el color de la marca (antes salía el azul por defecto del navegador) */
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
/* v639 · campos sin estilo propio (p. ej. Ajustes › Umbrales ESS) salían blancos en tema oscuro.
   :where() no suma especificidad: cualquier regla con clase manda sobre esta. */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"]), select, textarea) {
  background-color: var(--bg-elev); color: var(--ink); border: 1px solid var(--border); border-radius: 6px;
}

/* ============================================================================
   TOPBAR
   ============================================================================ */
.topbar {
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
}
.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 56px;
}

/* ----- Brand (logo + nombre) ----- */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand-mark { width: auto; height: 34px; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--primary);
  white-space: nowrap;
}
.brand-sub {
  font-family: var(--font-head);
  font-size: 10.5px;
  letter-spacing: 0.42em;
  color: var(--ink-muted);
}

/* ----- Nav principal ----- */
.main-nav {
  display: flex;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.main-nav-link {
  background: transparent;
  border: none;
  padding: 8px 14px;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background .15s, color .15s;
  font-family: inherit;
}
.main-nav-link:hover {
  color: var(--ink);
  background: var(--bg-elev-2);
}
.main-nav-link.active {
  color: var(--ink);
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--accent-line);
  border-radius: 0;
}
.main-nav-link { font-family: var(--font-head); font-weight: 500; font-size: 14px; letter-spacing: 0.04em; }

/* ----- Bloque de usuario ----- */
.user-block {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: right;
}
.user-name { font-weight: 600; font-size: 13px; }
.user-email { font-size: 11px; color: var(--ink-muted); }

/* ============================================================================
   Layout
   ============================================================================ */
.container { max-width: 880px; margin: 0 auto; padding: 32px 24px; }
.container-wide { max-width: 1280px; margin: 0 auto; padding: 32px 24px; }
.container-sm { max-width: 440px; margin: 0 auto; padding: 64px 24px; }

.main-section { display: block; }
.main-section.hidden { display: none; }

/* ----- Placeholder de secciones futuras ----- */
.placeholder {
  text-align: center;
  padding: 80px 24px;
  background: var(--bg-elev);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--ink-muted);
}
.placeholder-icon {
  font-size: 56px;
  margin-bottom: 16px;
  opacity: 0.6;
}
.placeholder h2 {
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.placeholder p {
  font-size: 14px;
  max-width: 540px;
  margin: 0 auto 8px;
  line-height: 1.6;
}
.placeholder-meta {
  margin-top: 16px;
  color: var(--ink-dim);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

header { text-align: left; margin-bottom: 24px; }
.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 24px; text-align: left;
}
.page-header h1 { font-size: 30px; font-weight: 300; margin: 0 0 4px; letter-spacing: 0.02em; }
.page-header .subtitle { font-size: 14px; color: var(--ink-muted); margin: 0; }

.logo {
  width: 64px; height: 64px; border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white; font-size: 32px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; box-shadow: var(--shadow);
}

h1 { font-family: var(--font-head); font-size: 32px; font-weight: 300; margin: 0 0 8px; letter-spacing: 0.02em; }
.subtitle { color: var(--ink-muted); margin: 0; font-size: 15px; }

/* ============================================================================
   Card
   ============================================================================ */
.card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.card-table { padding: 0; overflow: hidden; }
.card.hidden { display: none; }
.hidden { display: none !important; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }

h2 {
  font-family: var(--font-head);
  font-size: 14px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-muted); margin: 0;
}

/* ============================================================================
   Badges
   ============================================================================ */
.badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--bg-elev-2); color: var(--ink);
}
.badge-loading { background: var(--warning); color: #1a1a1a; }
.badge-ok { background: var(--success); color: white; }
.badge-error { background: var(--danger); color: white; }
.badge-warning {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f59e0b;
  margin-left: 6px;
  font-size: 11px;
  padding: 2px 8px;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-block; padding: 4px 10px; border-radius: 6px;
  background: var(--bg-elev-2); color: var(--ink);
  font-size: 12px; border: 1px solid var(--border);
}

/* ============================================================================
   Forms
   ============================================================================ */
/* Pantallas legales (Política, Aviso, Cookies) */
.priv-doc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 760px;
}
.priv-doc h3 {
  margin: 0 0 16px;
  font-size: 20px;
  color: var(--ink);
}
.priv-doc h4 {
  margin: 22px 0 6px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.priv-doc p { margin: 0 0 10px; }
.priv-doc ul { margin: 0 0 10px; padding-left: 22px; }
.priv-doc ul li { margin-bottom: 4px; }
.priv-doc a { color: var(--primary); }

/* Pantalla de login (visible cuando no hay sesión) */
.login-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 28px;
  box-shadow: 0 4px 30px rgba(0,0,0,0.25);
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 24px;
}
.login-brand .brand-name { color: var(--primary); }
.login-brand .brand-mark { height: 44px; }
.login-title {
  margin: 0 0 4px;
  font-size: 22px;
  text-align: center;
  color: var(--ink);
}
.login-subtitle {
  margin: 0 0 20px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 14px;
}

.form { display: flex; flex-direction: column; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
  font-size: 13px; font-weight: 600; color: var(--ink-muted);
  display: flex; align-items: center; justify-content: space-between;
}
.form-group label .req { color: var(--danger); margin-left: 2px; }
.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.form-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-row.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Aviso amarillo bajo el campo Planeamiento cuando el sugerido por CCAA
   no coincide con el valor actual. Permite aplicar el sugerido con 1 clic. */
.planeamiento-aviso {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 10px;
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.40);
  border-left: 3px solid var(--warning, #f59e0b);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--ink);
}
.planeamiento-aviso > span { flex: 1; }
.planeamiento-aviso strong { color: var(--warning, #f59e0b); }
.planeamiento-aviso.hidden { display: none; }

/* Alinear los inputs/select de cada form-group al fondo, aunque los labels
   rompan a 2 líneas (caso "Tipo de recogida de residuos" vs "Nº trasteros").
   Cada form-group queda en flex column, etiqueta arriba con altura mínima
   constante, input/select abajo. */
.form-row .form-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.form-row .form-group > label {
  min-height: 2.6em;
  line-height: 1.3;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  flex-wrap: wrap;
}
.form-row .form-group > label + * {
  margin-top: auto;
}
/* Las columnas dentro de un form-row NO deben llevar el margin-top
   que separa filas distintas (regla más abajo). */
.modal-body .form-row > .form-group + .form-group,
.modal-body .form-row > .form-group + .form-row,
.modal-body .form-row > .form-row + .form-group { margin-top: 0; }

.input, .select, .form-group input, .form-group select, .form-group textarea {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border);
  font-size: 14px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-group textarea { resize: vertical; min-height: 70px; }
.input:focus, .select:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18);
}
.input:disabled, .select:disabled { opacity: 0.6; cursor: not-allowed; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filters .input { flex: 1 1 280px; min-width: 220px; }
.filters .select { flex: 0 0 auto; min-width: 160px; }

/* ============================================================================
   Buttons
   ============================================================================ */
.btn {
  display: inline-block; padding: 10px 16px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: 14px; font-weight: 600;
  cursor: pointer; text-align: center;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-ghost { background: transparent; color: var(--ink-muted); border-color: var(--border); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-elev-2); color: var(--ink); }
/* v638 · .btn-secondary no tenía estilo propio y salía blanco en tema oscuro */
.btn-secondary { background: var(--bg-elev-2); color: var(--ink); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { border-color: var(--accent-line); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover:not(:disabled) { background: var(--danger-hover); }
.btn-block { width: 100%; display: block; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-link {
  background: transparent; border: none; color: var(--primary);
  font-size: 12px; cursor: pointer; padding: 0;
  font-weight: 500; text-decoration: underline;
}
.btn-link:hover { color: var(--primary-hover); }

/* ============================================================================
   Alert
   ============================================================================ */
.alert {
  padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: 13px; border: 1px solid transparent;
}
.alert-error {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--danger); color: #fecaca;
}
.aviso-codigo-duplicado {
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 12px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-sm);
  color: var(--warning);
}
:root[data-theme="light"] .aviso-codigo-duplicado {
  background: #f4e2c4; color: #6e4815; border-color: #d8b97a;
}

/* Aviso de "otros usuarios viendo el mismo proyecto" (Realtime Presence) */
.aviso-presencia {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: rgba(245, 158, 11, 0.10);
  border-bottom: 1px solid rgba(245, 158, 11, 0.30);
  font-size: 13px;
  color: var(--ink);
}
:root[data-theme="light"] .aviso-presencia {
  background: #fdf4e0; border-bottom-color: #e0c890;
}
.presencia-avatares {
  display: flex; gap: -6px; flex-shrink: 0;
}
.presencia-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: white;
  border: 2px solid var(--bg-elev);
  margin-left: -8px;
}
.presencia-avatar:first-child { margin-left: 0; }
.presencia-msg {
  flex: 1;
  line-height: 1.4;
  color: var(--ink);
}
.presencia-msg strong { color: var(--warning); }
:root[data-theme="light"] .presencia-msg strong { color: #6e4815; }
.alert-success {
  background: rgba(16, 185, 129, 0.1);
  border-color: var(--success); color: #6ee7b7;
}
:root[data-theme="light"] .alert-error {
  background: #fef2f2; color: #6e1d1d; border-color: #d89898;
}
:root[data-theme="light"] .alert-success {
  background: #f0f9f2; color: #2d4a1a; border-color: #b8d49a;
}

/* ============================================================================
   Tabla
   ============================================================================ */
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; padding: 12px 16px;
  background: var(--bg-elev-2); color: var(--ink-muted);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
thead th[data-sort] {
  cursor: pointer; user-select: none;
  position: relative; padding-right: 18px;
}
thead th[data-sort]:hover { color: var(--ink); }
thead th[data-sort]::after {
  content: "⇅";
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--ink-dim);
  opacity: 0.5;
}
thead th[data-sort].sort-asc::after  { content: "▲"; opacity: 1; color: var(--primary); }
thead th[data-sort].sort-desc::after { content: "▼"; opacity: 1; color: var(--primary); }
tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:hover { background: rgba(255,255,255,0.04); }
tbody tr.row-clickable { cursor: pointer; }
tbody tr:last-child td { border-bottom: none; }
.cell-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.cell-name { font-weight: 600; max-width: 280px; }
.cell-resp { white-space: nowrap; }
/* v581 · Nota interna bajo el nombre del proyecto. Una sola línea con
   ellipsis; el texto completo está en el title del elemento. Peso normal y
   color apagado para que no compita con el nombre. */
.cell-nota {
  font-weight: 400;
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
}
/* Casilla de una columna que no debería compartirse por descuido */
.exp-col-sensible span { color: var(--warning); }
.empty { text-align: center; padding: 32px; color: var(--ink-muted); }
.meta { color: var(--ink-dim); font-size: 11px; }

.avatar {
  display: inline-flex; width: 22px; height: 22px; border-radius: 50%;
  align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: white;
  margin-right: 4px; vertical-align: middle;
}

.badge-status {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em;
}
.estado-activo { background: rgba(16,185,129,0.18); color: #6ee7b7; }
.estado-pausa { background: rgba(245,158,11,0.18); color: #fcd34d; }
.estado-cerrado { background: rgba(100,116,139,0.18); color: #cbd5e1; }
.prio-pill { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.prio-1 { background: rgba(239,68,68,0.18); color: #fca5a5; }
.prio-2 { background: rgba(245,158,11,0.18); color: #fcd34d; }
.prio-3 { background: rgba(100,116,139,0.18); color: #94a3b8; }

/* En modo día, las pills necesitan más contraste */
:root[data-theme="light"] .estado-activo  { background: #dcebcc; color: #2d4a1a; }
:root[data-theme="light"] .estado-pausa   { background: #f4e8c4; color: #6a4d10; }
:root[data-theme="light"] .estado-cerrado { background: #e8e6e0; color: #4a4a4a; }
:root[data-theme="light"] .prio-1 { background: #f4d4d4; color: #6e1d1d; }
:root[data-theme="light"] .prio-2 { background: #f4e2c4; color: #6e4815; }
:root[data-theme="light"] .prio-3 { background: #d4e2f0; color: #1f3a5a; }

footer { text-align: center; color: var(--ink-dim); font-size: 12px; margin-top: 32px; }

/* ============================================================================
   MODAL
   ============================================================================ */
.modal {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9999;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5vh 16px;
  overflow-y: auto;
  background: var(--modal-backdrop);
  backdrop-filter: blur(2px);
}
.modal-backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; }
.modal-dialog {
  position: relative; z-index: 1;
  width: 100%; max-width: 720px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  margin: auto;
  display: flex; flex-direction: column;
  height: 90vh;          /* altura fija para que todas las pestañas tengan */
  max-height: 90vh;      /* el mismo tamaño y el cambio de tab no encoja el modal */
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--border);
}
.modal-header h2 {
  font-size: 18px; text-transform: none; letter-spacing: 0.01em;
  color: var(--ink); font-weight: 500;
}
.modal-close {
  background: transparent; border: none; color: var(--ink-muted);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px;
  border-radius: 4px;
}
.modal-close:hover { background: var(--bg-elev-2); color: var(--ink); }
.modal-body { padding: 20px 24px; overflow-y: auto; overflow-x: hidden; flex: 1; }
.modal-body .form-group + .form-group,
.modal-body .form-group + .form-row,
.modal-body .form-row + .form-group,
.modal-body .form-row + .form-row { margin-top: 14px; }
.modal-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}
.flex-spacer { flex: 1; }

.form-group-municipio { position: relative; }
.municipio-buscar { position: relative; }

.autocomplete-dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  z-index: 5; margin-top: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  max-height: 280px; overflow-y: auto;
}
.autocomplete-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background: var(--bg-elev-2); }
.autocomplete-name { font-weight: 500; }
.autocomplete-meta { font-size: 11px; color: var(--ink-muted); font-family: ui-monospace, Menlo, Consolas, monospace; }
.autocomplete-empty { padding: 12px; color: var(--ink-muted); font-size: 13px; text-align: center; }
.autocomplete-hint {
  padding: 6px 12px;
  font-size: 11px;
  color: var(--ink-dim);
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
/* Línea especial "+ Crear nuevo cliente" en el desplegable de búsqueda */
.autocomplete-item.autocomplete-crear {
  border-top: 1px solid var(--border);
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
  font-weight: 600;
}
.autocomplete-item.autocomplete-crear:hover {
  background: rgba(var(--primary-rgb), 0.18);
}
.autocomplete-item.autocomplete-crear .autocomplete-meta {
  background: rgba(var(--primary-rgb), 0.18);
  color: var(--primary);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  text-transform: uppercase;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

.municipio-chip {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(var(--primary-rgb), 0.15);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
/* Fecha de tarea marcada cuando el asignado está de ausencia ese día */
.tarea-fecha-aviso {
  border-color: var(--warning) !important;
  background: rgba(245, 158, 11, 0.12);
}

/* Aviso de ausencia del responsable en la fecha de entrega */
.aviso-ausencia {
  margin: 8px 0 0;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid var(--warning);
  color: var(--warning);
  font-size: 12.5px;
}

/* Código postal del municipio · solo lectura, dentro del chip */
.municipio-chip-cp {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  user-select: text;
}
.municipio-chip-cp:empty { display: none; }
.municipio-chip button {
  background: transparent; border: none; color: var(--ink-muted);
  cursor: pointer; font-size: 16px; padding: 0; line-height: 1;
}
.municipio-chip button:hover { color: var(--ink); }

/* ============================================================================
   Sub-tabs Tabla / Kanban / Equipo
   ============================================================================ */
.view-tabs {
  display: flex; gap: 4px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.view-tab {
  padding: 8px 16px;
  background: transparent; border: none;
  color: var(--ink-muted);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
}
.view-tab:hover { color: var(--ink); }
.view-tab.active { color: var(--ink); border-bottom-color: var(--accent-line); }
.view.hidden { display: none; }

/* ============================================================================
   KANBAN
   ============================================================================ */
.kanban-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.kanban-col {
  flex: 0 0 280px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 280px);
}
.kanban-col-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.kanban-col-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); }
.kanban-col-count {
  font-size: 11px; font-weight: 700;
  background: var(--bg-elev-2); color: var(--ink-muted);
  padding: 2px 8px; border-radius: 999px;
  min-width: 24px; text-align: center;
}
.kanban-col-cards { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; }
.kanban-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ink-dim);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.kanban-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.kanban-card.priority-1 { border-left-color: var(--danger); }
.kanban-card.priority-2 { border-left-color: var(--warning); }
.kanban-card.priority-3 { border-left-color: var(--ink-dim); }
.kanban-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.kanban-card-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--ink-muted); }
.kanban-card-name { font-weight: 600; font-size: 13px; line-height: 1.35; margin-bottom: 6px; }
.kanban-card-meta { font-size: 12px; color: var(--ink-muted); margin-bottom: 8px; line-height: 1.3; }
.kanban-card-bottom { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.kanban-empty { color: var(--ink-dim); font-size: 12px; text-align: center; padding: 20px 0; font-style: italic; }

/* ============================================================================
   EQUIPO
   ============================================================================ */
.equipo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.equipo-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; }
.equipo-card-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); position: relative; }
/* Botón editar miembro (esquina superior derecha de la tarjeta) */
.equipo-edit {
  position: absolute; top: 0; right: 0;
  background: transparent; border: none; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 4px 6px;
  border-radius: 4px; opacity: 0.5; transition: opacity 0.15s, background 0.15s;
}
.equipo-edit:hover { opacity: 1; background: var(--bg-elev-2); }
/* Tarjeta "+ Añadir miembro" */
.equipo-card-add {
  background: var(--bg-elev);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 180px;
  cursor: pointer;
  color: var(--ink-muted);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.equipo-card-add:hover {
  border-color: var(--primary);
  background: var(--bg-elev-2);
  color: var(--primary);
}
.equipo-add-icon {
  font-size: 36px;
  line-height: 1;
  font-weight: 300;
}
.equipo-add-text {
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

/* Chips de color para selección rápida en el modal de miembro */
.m-color-chip {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--bg-elev);
  outline: 1px solid var(--border);
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s;
}
.m-color-chip:hover { transform: scale(1.15); }
.equipo-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: white; flex-shrink: 0;
}
.equipo-card-info { flex: 1; min-width: 0; }
.equipo-card-info h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; }
.equipo-stats { font-size: 12px; color: var(--ink-muted); display: flex; gap: 4px; flex-wrap: wrap; }
.equipo-stats strong { color: var(--ink); font-weight: 600; }
.equipo-card-body { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.equipo-proyecto {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center;
  padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
  border-left: 3px solid var(--ink-dim); background: var(--bg);
  font-size: 12px; transition: background .15s;
}
.equipo-proyecto:hover { background: var(--bg-elev-2); }
.equipo-proyecto.priority-1 { border-left-color: var(--danger); }
.equipo-proyecto.priority-2 { border-left-color: var(--warning); }
.equipo-proyecto.priority-3 { border-left-color: var(--ink-dim); }
.equipo-proyecto-code { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--ink-muted); font-size: 11px; }
.equipo-proyecto-name { font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.equipo-proyecto-muni { color: var(--ink-muted); font-size: 11px; white-space: nowrap; max-width: 100px; overflow: hidden; text-overflow: ellipsis; }

/* Separador entre secciones dentro del card (Proyectos | Tareas) */
.equipo-section-divider {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 12px 0 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.equipo-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.equipo-section-meta {
  font-size: 11px;
  color: var(--ink-dim);
}
/* Fila de tarea dentro de la sección "Tareas" */
.equipo-tarea {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border-left: 3px solid var(--ink-dim);
  background: var(--bg);
  font-size: 12px;
  transition: background 0.15s;
}
.equipo-tarea:hover { background: var(--bg-elev-2); }
.equipo-tarea.priority-1 { border-left-color: var(--danger); }
.equipo-tarea.priority-2 { border-left-color: var(--warning); }
.equipo-tarea.priority-3 { border-left-color: var(--ink-dim); }
.equipo-tarea-code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--ink-muted);
  font-size: 11px;
}
.equipo-tarea-text {
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.equipo-tarea-estado {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--bg-elev-2);
  padding: 2px 6px;
  border-radius: 4px;
}
.equipo-tarea-mas {
  text-align: center;
  font-size: 11px;
  color: var(--ink-muted);
  padding: 6px 0;
  font-style: italic;
}
.equipo-empty { color: var(--ink-dim); font-size: 12px; font-style: italic; padding: 12px 0; text-align: center; }

/* ============================================================================
   TAREAS dentro del modal
   ============================================================================ */
.form-group-tareas { display: flex; flex-direction: column; gap: 8px; }
.form-group-tareas > label {
  display: flex; justify-content: space-between; align-items: center;
}
.toggle-finalizadas,
.toggle-cerrados {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; color: var(--ink-muted);
  cursor: pointer; text-transform: none; letter-spacing: 0;
}
.toggle-finalizadas input[type="checkbox"],
.toggle-cerrados input[type="checkbox"] {
  width: 14px; height: 14px; margin: 0; cursor: pointer;
}
/* En la fila de filtros: que respire al lado de los selects */
.filters .toggle-cerrados {
  padding: 0 10px;
  border-left: 1px solid var(--border);
  margin-left: 4px;
  font-size: 13px;
  color: var(--ink);
}

.tareas-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 280px; overflow-y: auto;
  padding: 4px 0;
}
.tareas-empty {
  text-align: center; padding: 16px;
  color: var(--ink-dim); font-size: 12px; font-style: italic;
  border: 1px dashed var(--border); border-radius: var(--radius-sm);
}

.tarea-row {
  display: grid;
  grid-template-columns: 24px 1fr 110px 130px 80px 140px 24px;
  gap: 6px;
  align-items: center;
  padding: 6px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
}
.tarea-fecha {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}
.tarea-fecha:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.18);
}
.tarea-row.tarea-finalizada .tarea-text {
  text-decoration: line-through;
  color: var(--ink-dim);
}
.tarea-row.tarea-finalizada { opacity: 0.65; }

.tarea-check { width: 16px; height: 16px; cursor: pointer; margin: 0; }
.tarea-text {
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--ink);
  border-radius: var(--radius-sm);
  outline: none;
  width: 100%;
}
.tarea-text:hover { border-color: var(--border); }
.tarea-text:focus {
  background: var(--bg-elev);
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.18);
}
.tarea-estado, .tarea-persona, .tarea-prio {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 4px 6px;
  font-size: 11px;
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
}
.tarea-estado:focus, .tarea-persona:focus, .tarea-prio:focus { border-color: var(--primary); }
.tarea-del {
  background: transparent; border: none;
  color: var(--ink-muted);
  cursor: pointer; font-size: 18px; line-height: 1;
  padding: 2px 4px; border-radius: 4px;
  transition: background .15s, color .15s;
}
.tarea-del:hover { background: rgba(239,68,68,0.18); color: var(--danger); }

#btn-add-tarea { align-self: flex-start; margin-top: 4px; }

/* ============================================================================
   SUB-TABS (dentro de Maestros / Ajustes)
   ============================================================================ */
.sub-tab {
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
}
.sub-tab:hover { color: var(--ink); }
.sub-tab.active { color: var(--ink); border-bottom-color: var(--primary); }
.subview.hidden { display: none; }

/* Alert OK (success) */
.alert-ok {
  background: rgba(16,185,129,0.12);
  border-color: var(--success);
  color: #6ee7b7;
}

/* ============================================================================
   COLEGIOS dentro del modal técnico
   ============================================================================ */
.colegios-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 8px;
}
.colegio-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 28px;
  gap: 6px;
  align-items: center;
}
.colegio-select, .colegio-num {
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: var(--radius-sm);
  font-size: 13px;
  outline: none;
  min-width: 0;
  width: 100%;
}
.colegio-select { text-overflow: ellipsis; }
.colegio-select:focus, .colegio-num:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.18);
}
.colegio-del {
  background: transparent; border: none;
  color: var(--ink-muted);
  cursor: pointer; font-size: 18px; line-height: 1;
  padding: 4px 6px; border-radius: 4px;
}
.colegio-del:hover { background: rgba(239,68,68,0.18); color: var(--danger); }

/* ============================================================================
   Técnicos asignados al proyecto
   ============================================================================ */
.tecnicos-asignados-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 8px;
}
.tecnico-asignado-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 230px) 28px;
  gap: 6px;
  align-items: center;
}
.cliente-asignado-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 36px;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.10), rgba(var(--primary-rgb), 0.02));
  border: 1px solid rgba(var(--primary-rgb), 0.30);
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  margin-bottom: 6px;
  transition: border-color 0.15s, background 0.15s;
}
.cliente-asignado-row:hover {
  border-color: var(--primary);
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.14), rgba(var(--primary-rgb), 0.04));
}
.cliente-asignado-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.cliente-asignado-info .cliente-edit-link {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed var(--border);
  align-self: flex-start;
}
.cliente-asignado-info .cliente-edit-link:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.cliente-asignado-info .meta {
  font-size: 12px;
  color: var(--ink-muted);
}

/* ============================================================================
   Icono de ayuda (ⓘ) con tooltip
   - Aparece pequeño y discreto al lado de los labels de formulario.
   - Muestra el texto al hacer hover, focus o clic (toggle).
   - Reemplaza los antiguos <p class="meta"> descriptivos largos.
   ============================================================================ */
.help-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 50%;
  background: var(--bg-elev, #1e293b);
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
  margin-left: 6px;
  cursor: help;
  user-select: none;
  border: 1px solid var(--border);
  transition: all 0.15s;
  vertical-align: middle;
  position: relative;
  text-transform: none;
  letter-spacing: 0;
}
.help-i:hover,
.help-i:focus,
.help-i.is-open {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
  outline: none;
}

/* Popup global del tooltip (singleton inyectado en <body> por JS). Usa
   position:fixed para evitar que un ancestro con overflow:hidden lo recorte.
   La posición exacta la calcula el JS según el icono activo. */
#help-tip-popup {
  position: fixed;
  background: var(--bg-elev, #1e293b);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  max-width: 320px;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  white-space: normal;
  text-align: left;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  text-transform: none;
  letter-spacing: 0;
}
#help-tip-popup.visible { opacity: 1; }

/* Campos de schema avanzados */
.num-con-unidad {
  display: flex; align-items: center; gap: 8px;
}
.num-con-unidad input { flex: 1; }
.num-unidad {
  color: var(--ink-muted);
  font-size: 13px;
  white-space: nowrap;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  padding: 4px 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
/* Botones «Marcar todo / Desmarcar todo» sobre un grupo de checkboxes. */
.checkbox-acc {
  display: flex;
  gap: 8px;
  margin: 2px 0 6px;
}
/* Cada opción como chip seleccionable. Texto a la izquierda del checkbox,
   alineado a la izquierda. Estado OFF: borde fino, texto apagado. Estado ON:
   fondo azul suave, borde azul, texto destacado. Mismo estilo que las
   instalaciones del modal proyecto. */
.checkbox-line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  font-size: 13px;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  min-height: 38px;
}
.checkbox-line:hover {
  background: rgba(var(--primary-rgb), 0.06);
  border-color: rgba(var(--primary-rgb), 0.40);
  color: var(--ink);
}
.checkbox-line input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--primary);
}
.checkbox-line > span {
  flex: 1;
  line-height: 1.3;
  text-align: left;
}
/* Estado seleccionado */
.checkbox-line:has(input:checked) {
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.16), rgba(var(--primary-rgb), 0.06));
  border-color: var(--primary);
  color: var(--ink);
}
.checkbox-line:has(input:checked) > span {
  font-weight: 600;
}
.checkbox-line input:checked ~ span { color: var(--ink); font-weight: 600; }

.form-group-check { padding: 4px 0; }

.toggle-seccion {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 4px;
}
.toggle-line {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
}
.toggle-line input[type="checkbox"] {
  width: 18px; height: 18px; cursor: pointer;
}
.toggle-label {
  flex: 1; font-weight: 600;
  color: var(--ink);
}
.toggle-estado {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.form-group-tabla {
  overflow-x: auto;
  padding-bottom: 4px;
}
.tabla-schema {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 4px;
}
.tabla-schema th,
.tabla-schema td {
  border: 1px solid var(--border);
  padding: 2px 4px;
  min-width: 80px;
}
.tabla-schema th {
  background: var(--bg-elev-1);
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
}
.tabla-schema input,
.tabla-schema select {
  width: 100%;
  padding: 3px 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
}
.tabla-schema input:focus,
.tabla-schema select:focus {
  border-color: var(--primary);
  background: var(--bg);
  outline: none;
}
.tabla-quitar { padding: 2px 8px; font-size: 14px; line-height: 1; }

/* Celda calculada (readonly, valor derivado de otras celdas de la fila) */
.tabla-schema .celda-calc {
  background: rgba(34, 197, 94, 0.10);
  color: var(--success, #22c55e);
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
/* v345 · calc cumple/no cumple */
.tabla-schema .celda-calc.celda-no-cumple {
  background: rgba(239, 68, 68, 0.14);
  color: var(--danger, #ef4444);
}
.tabla-schema .celda-calc.celda-cumple {
  background: rgba(34, 197, 94, 0.14);
  color: var(--success, #22c55e);
}


.sol-libre { width: 100%; }

/* Resumen calculado bajo una tabla del schema (tipificación, designación…) */
.tabla-resumen {
  margin-top: 10px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.30);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.tabla-resumen-titulo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #34d399;
  margin-bottom: 6px;
}
.tabla-resumen-grid {
  display: flex; flex-direction: column; gap: 3px;
}
.tabla-resumen-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  font-size: 12px;
}
.tabla-resumen-elem {
  color: var(--ink-muted);
}
.tabla-resumen-valor {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: #6ee7b7;
  font-weight: 600;
}

/* Fila destacada de tipificación / designación al pie de cada ficha del
   documento. Gris neutro con borde superior fino para separarla del resto. */
.doc-tficha-tipificacion td {
  background: var(--bg-elev-2) !important;
  color: var(--ink) !important;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.3px;
  border-top: 1px solid var(--border) !important;
}

/* Badge de completitud en tabs */
.proy-tab .tab-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 99px;
  font-weight: 600;
  background: var(--bg-elev-2);
  color: var(--ink-muted);
}
.proy-tab .tab-badge.complete { background: #dcfce7; color: #166534; }
.proy-tab .tab-badge.partial  { background: #fef3c7; color: #92400e; }
.proy-tab .tab-badge.empty    { background: var(--bg-elev-2); color: var(--ink-muted); }

/* Tabs internas del modal de proyecto */
.proy-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: -8px -4px 16px;
  padding: 6px 4px 0;
  /* v433b · Scroll horizontal si no caben todas las pestañas */
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  /* Fila fija al hacer scroll dentro del modal del proyecto */
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.10), rgba(var(--primary-rgb), 0.04));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.proy-tabs::-webkit-scrollbar { height: 4px; }
.proy-tabs::-webkit-scrollbar-thumb { background: rgba(127,127,127,0.4); border-radius: 4px; }
.proy-tab {
  background: transparent;
  border: 0;
  padding: 10px 10px;  /* v433b · padding lateral más ajustado para que quepan más tabs */
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;  /* v433b · evita que tabs como "Mis notas" rompan en 2 líneas */
  flex-shrink: 0;
}
.proy-tab:hover { color: var(--ink); }
.proy-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.proy-tab-content.hidden { display: none; }

/* Cuadro de superficies del proyecto */
.sup-planta {
  margin-bottom: 18px;
  padding: 10px 12px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.sup-planta-cabecera {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 8px;
}
.sup-planta-nombre {
  flex: 1;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.sup-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sup-tabla th,
.sup-tabla td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.sup-tabla th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  text-align: left;
  font-weight: 600;
}
.sup-tabla input {
  width: 100%;
  padding: 4px 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink);
  font-size: 13px;
}
.sup-tabla input:focus {
  border-color: var(--primary);
  background: var(--bg);
  outline: none;
}
.sup-total-planta td { background: var(--bg-elev-2); }
.sup-construida-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 4px 0;
  font-size: 13px;
}
.sup-construida-row label {
  color: var(--ink-muted);
  font-weight: 600;
}
.sup-construida-row .sup-construida-input {
  width: 110px;
  padding: 4px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--ink);
}
.superficies-total {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

/* Lista de anejos del proyecto */
.anejos-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 6px;
}
.anejo-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 160px 160px 32px;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.anejo-row .anejo-icon {
  font-size: 18px;
  text-align: center;
}
.anejo-row .anejo-info {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.anejo-row .anejo-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.anejo-row .anejo-name a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed var(--border);
}
.anejo-row .anejo-name a:hover { color: var(--primary); }
.anejo-row .anejo-meta {
  font-size: 11px;
  color: var(--ink-muted);
}
.anejo-row select {
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 4px;
  font-size: 12px;
}
.anejo-row .anejo-quitar { padding: 4px 8px; }
.anejo-empty {
  padding: 12px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
  font-style: italic;
}
.cliente-asignado-row .cliente-quitar {
  margin-left: 4px;
}
.tec-select, .tec-rol, .tec-rol-libre {
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: var(--radius-sm);
  font-size: 13px;
  outline: none;
  min-width: 0;
  width: 100%;
}
.tec-select:focus, .tec-rol:focus, .tec-rol-libre:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.18);
}
.tec-rol-wrap {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.tec-rol-libre.hidden { display: none; }
.tec-del {
  background: transparent; border: none;
  color: var(--ink-muted);
  cursor: pointer; font-size: 18px; line-height: 1;
  padding: 4px 6px; border-radius: 4px;
}
.tec-del:hover { background: rgba(239,68,68,0.18); color: var(--danger); }

/* ============================================================================
   Barra "Control del despacho" en la parte superior del modal de proyecto
   Estado · Prioridad · Responsable · Fechas. Visual distinto al resto del
   modal (fondo dorado/ámbar muy desaturado) para separar "gestión" de
   "datos del proyecto".
   ============================================================================ */
.control-despacho {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.04));
  border-bottom: 1px solid rgba(245, 158, 11, 0.25);
  padding: 10px 24px 14px;
  flex-shrink: 0;
}
.cd-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.cd-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #f59e0b;
}
/* Chip de tareas en la cabecera de la barra · clickable, lleva a tab Tareas */
.cd-tareas-chip {
  background: rgba(148, 163, 184, 0.15);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  padding: 3px 12px 3px 10px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: filter 0.12s ease, background 0.12s ease;
}
.cd-tareas-chip:hover { filter: brightness(1.2); }
.cd-tareas-chip[data-estado="vacio"] {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.30);
  color: var(--ink-muted);
}
.cd-tareas-chip[data-estado="hecho"] {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.55);
  color: #6ee7b7;
}
.cd-tareas-chip[data-estado="pendiente"] {
  background: rgba(249, 115, 22, 0.18);
  border-color: rgba(249, 115, 22, 0.55);
  color: #fdba74;
}
.cd-tareas-icon { font-size: 11px; }

/* Badge de la tab "Tareas" en la barra de tabs del modal proyecto */
.tab-tareas-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
  background: rgba(148, 163, 184, 0.25);
  color: var(--ink-muted);
}
.tab-tareas-badge.pendiente {
  background: rgba(249, 115, 22, 0.28);
  color: #fdba74;
}
.tab-tareas-badge.hecho {
  background: rgba(16, 185, 129, 0.28);
  color: #6ee7b7;
}
.tab-tareas-badge:empty { display: none; }
/* En modo "Nuevo proyecto" (state.editing == null) ocultamos los bloques
   marcados con .solo-edicion para que el formulario inicial sea mínimo. */
.modal-dialog.modo-nuevo .solo-edicion {
  display: none !important;
}

/* Barra Control del despacho · 6 campos repartidos en 3 columnas × 2 filas
   (Estado / Prioridad / Fase  |  Responsable / Fecha inicio / Fecha entrega) */
.cd-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px;
  align-items: end;
}
.cd-field {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.cd-field label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cd-field select,
.cd-field input {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  font-size: 13px;
  outline: none;
  min-width: 0;
  width: 100%;
}
.cd-field select:focus,
.cd-field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.18);
}
@media (max-width: 720px) {
  .cd-row { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================
   Tab "Gestión" · diario cronológico del proyecto
   ============================================================================ */
.gestion-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.gestion-tabla thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.gestion-tabla tbody tr {
  border-bottom: 1px solid var(--border);
}
.gestion-tabla tbody td {
  padding: 6px 4px;
  vertical-align: middle;
}
.gestion-tabla input.g-fecha,
.gestion-tabla input.g-texto,
.gestion-tabla select.g-tipo {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 5px 7px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  width: 100%;
}
.gestion-tabla input.g-fecha:focus,
.gestion-tabla input.g-texto:focus,
.gestion-tabla select.g-tipo:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.18);
}
.gestion-autor {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 10px; font-weight: 700; color: white;
}
.gestion-acciones-cell {
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
}
.gestion-tarea-check {
  font-size: 11px; font-weight: 600;
  color: var(--success);
  padding: 3px 7px;
  background: rgba(16, 185, 129, 0.12);
  border-radius: 4px;
}
.gestion-empty {
  padding: 40px 12px;
  text-align: center;
  color: var(--ink-muted);
}
.gestion-empty p { margin: 6px 0; }
.btn-icono {
  background: transparent; border: none;
  color: var(--ink-muted);
  cursor: pointer; font-size: 16px; line-height: 1;
  padding: 4px 6px; border-radius: 4px;
}
.btn-icono:hover { background: rgba(239,68,68,0.18); color: var(--danger); }

/* Cuadros de "Notas de gestión" y "Documentos de gestión" debajo del diario */
.form-group-gestion-notas,
.form-group-gestion-archivos {
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.form-group-gestion-notas label,
.form-group-gestion-archivos label {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 6px;
}
.form-group-gestion-notas textarea {
  width: 100%;
  resize: vertical;
}

/* Bloque "Comentarios" en la pestaña Tareas (avances, progreso) */
.form-group-comentarios {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.form-group-comentarios label {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 6px;
}
.form-group-comentarios .meta-inline {
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 400;
  font-style: italic;
}
.form-group-comentarios textarea {
  width: 100%;
  resize: vertical;
}

/* Notas internas del despacho: textarea pegado debajo de la fila de campos */
.cd-notas {
  margin-top: 10px;
}
.cd-notas label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 3px;
}
.cd-notas-meta {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.2px;
  text-transform: none;
  color: var(--ink-dim);
  font-style: italic;
}
.cd-notas textarea {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  resize: vertical;
}
.cd-notas textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.18);
}

/* --- Badges de color para Estado y Prioridad ---------------------------- */
/* Mantenemos el <select> nativo pero le damos apariencia de pill colorido
   según su valor seleccionado. El JS escribe data-valor en el select al
   cargar y al cambiar. */
select#f_estado[data-valor="activo"] {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.55);
  color: #6ee7b7;
  font-weight: 600;
}
select#f_estado[data-valor="en_pausa"] {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.55);
  color: #fcd34d;
  font-weight: 600;
}
select#f_estado[data-valor="cerrado"] {
  background: rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.45);
  color: #cbd5e1;
  font-weight: 600;
}
select#f_prioridad[data-valor="1.Alta"] {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.55);
  color: #fca5a5;
  font-weight: 600;
}
select#f_prioridad[data-valor="2.Media"] {
  background: rgba(249, 115, 22, 0.18);
  border-color: rgba(249, 115, 22, 0.55);
  color: #fdba74;
  font-weight: 600;
}
select#f_prioridad[data-valor="3.Baja"] {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.55);
  color: #93c5fd;
  font-weight: 600;
}

/* Las <option> heredan el color del select, lo que queda ilegible sobre
   el fondo blanco del menú desplegable nativo del navegador. Forzamos
   fondo oscuro y texto claro en las opciones de Estado y Prioridad
   (Chrome/Edge respetan estos estilos; Safari los ignora — fallback OK). */
select#f_estado option,
select#f_prioridad option {
  background: var(--bg-elev);
  color: var(--ink);
  font-weight: 500;
}

/* En modo día, los chips coloreados de Estado y Prioridad de la barra de
   Organización estudio necesitan texto más oscuro para que se lean bien. */
:root[data-theme="light"] select#f_estado[data-valor="activo"] {
  background: #dcebcc; border-color: #b8d49a; color: #2d4a1a;
}
:root[data-theme="light"] select#f_estado[data-valor="en_pausa"] {
  background: #f4e8c4; border-color: #d8be7a; color: #6a4d10;
}
:root[data-theme="light"] select#f_estado[data-valor="cerrado"] {
  background: #e8e6e0; border-color: #c5c1b5; color: #4a4a4a;
}
:root[data-theme="light"] select#f_prioridad[data-valor="1.Alta"] {
  background: #f4d4d4; border-color: #d89898; color: #6e1d1d;
}
:root[data-theme="light"] select#f_prioridad[data-valor="2.Media"] {
  background: #f4e2c4; border-color: #d8b97a; color: #6e4815;
}
:root[data-theme="light"] select#f_prioridad[data-valor="3.Baja"] {
  background: #d4e2f0; border-color: #98b8d4; color: #1f3a5a;
}

/* ============================================================================
   Diálogo de confirmación "Cambios sin guardar"
   ============================================================================ */
.confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100500;        /* por encima de TODO: modal proyecto, sub-modal memoria, etc. */
  animation: confirm-fade-in 0.12s ease-out;
}
.confirm-box {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 24px 18px;
  max-width: 460px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.confirm-box h3 {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--ink);
}
.confirm-box p {
  margin: 0 0 18px;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
}
.confirm-actions {
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
}
@keyframes confirm-fade-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* ============================================================================
   Papelera · proyectos eliminados (soft-deleted)
   ============================================================================ */
.papelera-badge {
  display: inline-block;
  background: var(--danger);
  color: white;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
}
.papelera-badge:empty { display: none; }
.papelera-header { margin-bottom: 14px; }
.papelera-tabla td { vertical-align: middle; }
.papelera-tabla .btn-sm { margin-right: 4px; }
.papelera-dias-pocos { color: var(--danger); font-weight: 600; }
.papelera-dias-medio { color: var(--warning); font-weight: 600; }
.papelera-dias-bien  { color: var(--ink-muted); }
.papelera-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-muted);
}
.papelera-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
.papelera-empty p { margin: 6px 0; }

/* ============================================================================
   Calendario · proyectos y tareas con fecha de entrega
   ============================================================================ */
.cal-toolbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cal-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--ink);
  cursor: pointer;
}
.cal-toggle input { width: 16px; height: 16px; cursor: pointer; margin: 0; }
.cal-leyenda {
  font-size: 11px;
  color: var(--ink-muted);
  margin-left: auto;
  display: flex; align-items: center; gap: 4px;
}
.cal-leyenda-chip {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 4px;
}
.cal-leyenda-miembros { margin-left: 0; flex-wrap: wrap; gap: 3px 8px; }
.cal-leyenda-titulo { font-weight: 600; margin-right: 2px; }

/* ── v528 · Vista MAPA de proyectos ─────────────────────────────────── */
.mapa-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 10px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.mapa-info { font-size: 13px; font-weight: 500; color: var(--ink); }
.mapa-leyenda { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-left: auto; }
.mapa-leyenda-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--ink-muted);
  background: transparent; border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 9px; cursor: pointer;
  transition: opacity .15s, border-color .15s;
}
.mapa-leyenda-item:hover { border-color: var(--primary); }
.mapa-leyenda-item.off { opacity: 0.4; text-decoration: line-through; }
.mapa-leyenda-chip {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
}
#mapa-container {
  height: calc(100vh - 230px); min-height: 460px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  z-index: 0;
}
.mapa-sinubicar-btn {
  background: transparent; border: 1px solid var(--warning);
  color: var(--warning); border-radius: 999px;
  padding: 2px 10px; font-size: 12px; cursor: pointer;
}
.mapa-sinubicar-btn:hover { background: color-mix(in srgb, var(--warning) 15%, transparent); }
.mapa-info-exactos { color: var(--success, #16a34a); font-weight: 600; }
.mapa-precisar-btn {
  background: transparent; border: 1px solid var(--primary);
  color: var(--primary); border-radius: 999px;
  padding: 2px 10px; font-size: 12px; cursor: pointer; margin-left: 6px;
}
.mapa-precisar-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 15%, transparent); }
.mapa-precisar-btn:disabled { opacity: .5; cursor: progress; }
.mapa-popup-prec { font-size: 11px; color: #666; margin-top: 4px; font-style: italic; }
.mapa-sin-ubicar {
  margin-bottom: 12px; padding: 10px 14px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 4px;
  max-height: 220px; overflow-y: auto;
}
.mapa-sinubicar-tit { font-size: 12px; font-weight: 600; color: var(--ink-muted); margin-bottom: 2px; }
.mapa-sinubicar-item {
  display: flex; align-items: center; gap: 8px; text-align: left;
  background: transparent; border: 0.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 5px 8px;
  font-size: 12.5px; color: var(--ink); cursor: pointer;
}
.mapa-sinubicar-item:hover { border-color: var(--primary); }
.mapa-sinubicar-muni { margin-left: auto; font-size: 11.5px; color: var(--ink-muted); }
/* v535 · Marcadores de ubicación exacta: anillo negro + halo claro para que
   el contorno también se lea sobre zonas oscuras del mapa (bosque, agua). */
.mapa-marker-exacto {
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9));
}
.mapa-popup { min-width: 180px; }
.mapa-popup-cod { font-size: 11px; font-weight: 700; color: var(--primary); }
.mapa-popup-nom { font-size: 13px; font-weight: 600; margin: 2px 0 4px; line-height: 1.25; }
.mapa-popup-meta { font-size: 11.5px; color: #555; margin-bottom: 2px; }
.mapa-popup-btn { margin-top: 8px; width: 100%; }
@media (max-width: 900px) {
  #mapa-container { height: 60vh; min-height: 340px; }
  .mapa-leyenda { margin-left: 0; }
}
#calendario-container {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
/* Adapta los colores de FullCalendar al tema oscuro/claro */
.fc {
  --fc-border-color: var(--border);
  --fc-page-bg-color: var(--bg-elev);
  --fc-neutral-bg-color: var(--bg);
  --fc-list-event-hover-bg-color: var(--bg-elev-2);
  --fc-today-bg-color: rgba(var(--primary-rgb), 0.08);
  color: var(--ink);
}
:root[data-theme="light"] .fc { --fc-today-bg-color: rgba(var(--primary-rgb), 0.10); }
.fc .fc-toolbar-title { font-size: 16px !important; color: var(--ink); }
.fc .fc-button {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
  text-transform: none;
  font-size: 12px;
}
.fc .fc-button:hover { background: var(--bg-elev-2) !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--on-primary) !important;
}
.fc-event {
  cursor: pointer;
  border-radius: 4px;
  font-size: 11px;
  padding: 2px 4px;
  border: none;
}
.fc-event-proyecto { border-left: 4px solid currentColor; }
.fc-event-tarea { border-left: 2px solid currentColor; opacity: 0.95; }
.fc-event-recordatorio { border-left: 3px dashed rgba(255,255,255,0.6); font-weight: 500; }
.fc-event-completado { opacity: 0.5; text-decoration: line-through; }
.fc-event:hover { filter: brightness(1.1); }

/* Modal recordatorio · más estrecho */
.modal-dialog-narrow { max-width: 560px; }

/* Buscador de proyecto en el modal recordatorio */
.rec-proy-wrap { position: relative; }
.rec-proy-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.rec-proy-dropdown.hidden { display: none; }
.rec-proy-opt {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.rec-proy-opt:last-child { border-bottom: none; }
.rec-proy-opt:hover { background: var(--bg-elev-2); }
.rec-proy-opt-cliente {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
}
.rec-proy-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--primary) 18%, var(--bg));
  border-radius: 6px;
  font-size: 13px;
}
.rec-proy-chip.hidden { display: none; }
.rec-proy-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}

/* ============================================================================
   Dashboard · KPIs y gráficos del despacho
   ============================================================================ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.kpi {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.kpi-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.kpi-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--ink);
  line-height: 1;
}
.kpi-value-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-dim);
  margin-left: 6px;
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}
.dash-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex; flex-direction: column;
  min-height: 260px;
}
.dash-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.dash-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.dash-card-meta {
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.dash-chart-wrap {
  position: relative;
  height: 220px;
}
.dash-bar-list {
  display: flex; flex-direction: column; gap: 6px;
}
.dash-bar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}
.dash-bar-label {
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-bar-meta {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--ink-muted);
  font-size: 12px;
}
.dash-bar-track {
  grid-column: 1 / 3;
  height: 6px;
  background: var(--bg-elev-2);
  border-radius: 3px;
  overflow: hidden;
}
.dash-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.dash-bar-fill.color-alta   { background: var(--danger); }
.dash-bar-fill.color-media  { background: var(--warning, #f59e0b); }
.dash-bar-fill.color-baja   { background: #3b82f6; }
.dash-empty {
  text-align: center;
  color: var(--ink-dim);
  font-size: 13px;
  padding: 18px;
}
/* Tarjeta de "Próximas entregas" ocupa todo el ancho del grid */
.dash-card-wide { grid-column: 1 / -1; }
.dash-entregas-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 360px; overflow-y: auto;
}
.dash-entrega-row {
  display: grid;
  grid-template-columns: 64px 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border-left: 3px solid var(--ink-dim);
  cursor: pointer;
  transition: background 0.15s;
  font-size: 13px;
}
.dash-entrega-row:hover { background: var(--bg-elev-2); }
.dash-entrega-row.urg-vencido { border-left-color: var(--danger); background: rgba(239,68,68,0.06); }
.dash-entrega-row.urg-10      { border-left-color: var(--warning); }
.dash-entrega-row.urg-30      { border-left-color: #facc15; }
.dash-entrega-row.urg-lejos   { border-left-color: var(--ink-dim); }
.dash-entrega-code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--ink-muted); font-size: 11px;
}
.dash-entrega-name {
  color: var(--ink); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-entrega-fecha {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--ink-muted); font-size: 12px;
}
.dash-entrega-dias {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 4px;
}
.dash-entrega-dias.urg-vencido { background: rgba(239,68,68,0.18); color: var(--danger); }
.dash-entrega-dias.urg-10      { background: rgba(245,158,11,0.18); color: var(--warning); }
.dash-entrega-dias.urg-30      { background: rgba(250,204,21,0.18); color: #ca8a04; }
.dash-entrega-dias.urg-lejos   { background: var(--bg-elev-2); color: var(--ink-muted); }
.dash-entrega-resp {
  font-size: 11px; color: var(--ink-muted);
  max-width: 110px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-entrega-icono {
  font-size: 11px;
  opacity: 0.85;
  margin-right: 2px;
}
.dash-entrega-ref {
  color: var(--ink-dim);
  font-weight: 400;
  font-size: 11px;
}
/* Dropdown del topbar "🔔 Próximas entregas" */
.entregas-wrap {
  position: relative;
  display: inline-flex;
}
.entregas-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--danger);
  color: white;
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px;
  pointer-events: none;
}
.entregas-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-height: 480px;
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  padding: 8px;
}
.entregas-dropdown-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 6px 8px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.entregas-toggle-mias {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--ink-muted);
  text-transform: none;
  cursor: pointer;
}
.entregas-toggle-mias input[type="checkbox"] {
  width: 13px; height: 13px; margin: 0; cursor: pointer;
}

/* Popup autocomplete @persona en textareas (notas, comentarios) */
.mencion-popup {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  min-width: 200px; max-width: 280px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 1500;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}
.mencion-popup.hidden { display: none; }
.mencion-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.mencion-item:hover, .mencion-item.activa {
  background: var(--bg-elev-2);
}
.mencion-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: white;
  flex-shrink: 0;
}
.mencion-nombre {
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Filas del dropdown de notificaciones (📨) */
.notif-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: 4px;
  background: var(--bg);
  transition: background 0.15s;
}
.notif-row:hover { background: var(--bg-elev-2); }
.notif-row.no-leida {
  background: rgba(var(--primary-rgb), 0.10);
  border-left: 3px solid var(--primary);
  padding-left: 7px;
}
.notif-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: white;
  flex-shrink: 0;
}
.notif-body { min-width: 0; }
.notif-msg {
  font-size: 13px; color: var(--ink); line-height: 1.4;
}
.notif-extracto {
  font-size: 11px;
  color: var(--ink-muted);
  font-style: italic;
  margin-top: 4px;
  padding: 4px 6px;
  background: var(--bg-elev-2);
  border-radius: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-fecha {
  font-size: 10px;
  color: var(--ink-dim);
  margin-top: 4px;
}

/* Toast flotante (esquina inferior derecha) */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100000;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 12px 38px 12px 14px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  pointer-events: auto;
  animation: toast-in 0.18s ease-out;
  max-width: 380px;
  position: relative;
  white-space: pre-line;       /* respeta \n en el texto */
  line-height: 1.4;
}
.toast-success { border-color: var(--success); color: var(--success); }
.toast-error   { border-color: var(--danger);  color: var(--danger); }
.toast-warning {
  border-color: var(--warning);
  color: var(--ink);
  background: color-mix(in srgb, var(--warning) 12%, var(--bg-elev));
}
.toast-destacado {
  border-width: 2px;
  font-size: 14px;
  padding: 16px 40px 16px 18px;
  min-width: 320px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4), 0 0 0 1px var(--warning);
  animation: toast-in 0.18s ease-out, toast-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes toast-pulse {
  from { box-shadow: 0 10px 40px rgba(0,0,0,0.4), 0 0 0 1px var(--warning); }
  to   { box-shadow: 0 10px 40px rgba(0,0,0,0.4), 0 0 0 3px var(--warning); }
}
.toast-close {
  position: absolute;
  top: 4px; right: 6px;
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.toast-close:hover { background: var(--bg-hover); color: var(--ink); }
.toast-out { opacity: 0; transform: translateX(20px); transition: all 0.3s; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.entregas-dropdown-empty {
  text-align: center;
  padding: 30px 12px;
  color: var(--ink-muted);
  font-size: 13px;
}
.entregas-dropdown .dash-entrega-row {
  margin-bottom: 4px;
  grid-template-columns: 50px 1fr auto;  /* más compacto en el dropdown */
}
.entregas-dropdown .dash-entrega-resp { display: none; }
.entregas-dropdown .dash-entrega-fecha { display: none; }

/* ============================================================================
   Copias de seguridad (Ajustes → Copias de seguridad)
   ============================================================================ */
.backup-zone {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}
@media (max-width: 720px) {
  .backup-zone { grid-template-columns: 1fr; }
}
.backup-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.backup-card h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--ink);
}
.backup-card p { margin: 0; }
.backup-card button { align-self: flex-start; }

/* ============================================================================
   Inputs de fecha · icono del calendario en modo oscuro
   El icono nativo del navegador es negro y se pierde sobre fondo oscuro.
   Lo invertimos para que se vea blanco/claro.
   ============================================================================ */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.4);
  cursor: pointer;
  opacity: 0.75;
}
/* En modo día NO invertimos el icono; se ve oscuro sobre fondo claro */
:root[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
:root[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
:root[data-theme="light"] input[type="month"]::-webkit-calendar-picker-indicator,
:root[data-theme="light"] input[type="week"]::-webkit-calendar-picker-indicator {
  filter: none;
  opacity: 0.6;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ============================================================================
   Instalaciones grid
   ============================================================================ */
.instalaciones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 4px;
}
/* Checkbox + label como chip seleccionable. Texto a la derecha del check,
   alineado a la izquierda. Estado OFF: borde fino y texto apagado. Estado ON:
   fondo azul suave, borde azul, texto destacado. */
.instalacion-check {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-muted);
  transition: background .15s, color .15s, border-color .15s;
  min-height: 38px;
}
.instalacion-check:hover {
  background: rgba(var(--primary-rgb), 0.06);
  border-color: rgba(var(--primary-rgb), 0.40);
  color: var(--ink);
}
.instalacion-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--primary);
}
.instalacion-check > span {
  flex: 1;
  line-height: 1.3;
  text-align: left;
}
/* Estado seleccionado: chip azul */
.instalacion-check:has(input:checked) {
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.16), rgba(var(--primary-rgb), 0.06));
  border-color: var(--primary);
  color: var(--ink);
}
.instalacion-check:has(input:checked) > span {
  font-weight: 600;
}
/* Fallback antiguo (sin :has) por si algún navegador lo necesita */
.instalacion-check input:checked ~ span { color: var(--ink); font-weight: 600; }

/* ============================================================================
   DOCUMENTOS · Modal de previsualización
   ============================================================================ */
.modal-dialog-wide { max-width: 900px; }

.doc-preview-wrap {
  background: #d1d5db;
  padding: 24px;
  max-height: calc(90vh - 140px);
  overflow-y: auto;
}
.doc-preview {
  background: white;
  color: #1a1a1a;
  margin: 0 auto;
  width: 210mm;
  min-height: 297mm;
  padding: 18mm 16mm;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9.5pt;        /* base ligeramente más compacto · cabe más por página */
  line-height: 1.4;
}
@media (max-width: 980px) {
  .doc-preview { width: 100%; padding: 16mm 12mm; }
}

/* ─────────────────────────────────────────────────────────────────────── */
/* Separadores visuales de página en el preview (solo pantalla)             */
/* Marcan los puntos donde habrá salto de página en el PDF impreso.         */
/* NO rompemos el layout del .doc-preview · solo añadimos margen y un chip. */
/* ─────────────────────────────────────────────────────────────────────── */
@media screen {
  .doc-preview .doc-portada,
  .doc-preview .indice-memoria,
  .doc-preview .memoria-apartado,
  .doc-preview .subportada-seccion,
  .doc-preview .hoja-firmas-final {
    position: relative;
    margin-bottom: 30px;
    padding-bottom: 24px;
    border-bottom: 2px dashed #cbd5e1;
  }
  /* Chip indicador del tipo de sección · solo informativo en pantalla */
  .doc-preview .doc-portada::after,
  .doc-preview .indice-memoria::after,
  .doc-preview .memoria-apartado::after,
  .doc-preview .subportada-seccion::after,
  .doc-preview .hoja-firmas-final::after {
    content: "↕ salto de página ↕";
    display: block;
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #475569;
    color: #fff;
    font-size: 9px;
    padding: 3px 12px;
    border-radius: 12px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0.5px;
    font-weight: 600;
    white-space: nowrap;
  }
  .doc-preview .subportada-seccion::after {
    content: "── subportada de sección ──";
    background: #c8643c;
  }
  .doc-preview .hoja-firmas-final::after {
    content: "── fin del documento ──";
    background: #1F1E1B;
  }
  /* La subportada ya es un bloque destacado de altura natural (v263) ·
     solo añadimos sombra suave en preview para resaltarla. */
  .doc-preview .subportada-seccion {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  }
}

/* En print, los separadores visuales NO se imprimen */
@media print {
  /* GLOBAL · forzar impresión de colores en TODO el documento para que las
     bandas, cabeceras y backgrounds salgan sí o sí. Combinado con
     "Gráficos de fondo" del diálogo de Chrome es a prueba de balas. */
  .doc-preview *,
  .documento * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  .doc-preview .doc-portada,
  .doc-preview .indice-memoria,
  .doc-preview .memoria-apartado,
  .doc-preview .subportada-seccion,
  .doc-preview .hoja-firmas-final {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .doc-preview .doc-portada::after,
  .doc-preview .indice-memoria::after,
  .doc-preview .memoria-apartado::after,
  .doc-preview .subportada-seccion::after,
  .doc-preview .hoja-firmas-final::after { display: none; }
}

/* Saltos de página REALES en print.
   Regla simple: la portada rompe DESPUÉS, el índice NO rompe (deja que el
   apartado siguiente fuerce su propio salto). Cada apartado rompe ANTES de
   sí mismo. Así el page-break del apartado se ENCADENA con el anterior y
   solo genera un salto (no dos), evitando páginas en blanco y h1 colgados. */
.doc-portada {
  page-break-after: always;
  break-after: page;
}
.memoria-apartado,
.hoja-firmas-final {
  page-break-before: always;
  break-before: page;
}

/* ============================================================================
   Estilos del documento (HTML que va al PDF)
   ============================================================================ */
.documento { color: #1a1a1a; }
.documento h1, .documento h2, .documento h3 { color: #0f172a; }
.documento p { margin: 0 0 8pt; }
.documento ul { margin: 0 0 8pt; padding-left: 20pt; }
.documento li { margin-bottom: 3pt; }

.doc-header {
  border-bottom: 1pt solid #1a1a1a;
  padding-bottom: 6pt;
  margin-bottom: 16pt;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16pt;
}
.doc-header-left { flex: 1; min-width: 0; }
.doc-header-right { flex: 0 0 auto; }
.doc-logo { max-height: 44pt; max-width: 160pt; display: block; }
.doc-empresa-nombre {
  font-size: 9pt;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.doc-empresa-contacto {
  font-size: 8pt;
  color: #555;
  margin-top: 2pt;
}

.doc-portada {
  text-align: left;
  padding: 30pt 0 20pt;
  page-break-after: always;
}
.doc-tipo {
  font-size: 11pt;
  color: #555;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.doc-titulo {
  font-size: 28pt;
  font-weight: 700;
  margin: 4pt 0 16pt;
  letter-spacing: -0.02em;
}
.doc-divider {
  height: 2pt;
  background: #1a1a1a;
  width: 60pt;
  margin-bottom: 24pt;
}

.doc-portada-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12pt 24pt;
  margin-bottom: 30pt;
}
.doc-portada-full { grid-column: 1 / -1; }
.doc-label {
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  margin-bottom: 2pt;
}
.doc-value {
  font-size: 11pt;
  font-weight: 500;
}

.doc-tecnicos {
  margin-top: 24pt;
  border-top: 0.5pt solid #ccc;
  padding-top: 16pt;
}
.doc-tecnico {
  margin-bottom: 12pt;
}
.doc-tecnico-rol {
  font-size: 8pt;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.doc-tecnico-nombre {
  font-size: 12pt;
  font-weight: 700;
  margin: 2pt 0;
}
.doc-tecnico-dni, .doc-tecnico-col {
  font-size: 9.5pt;
  color: #444;
}

.doc-fecha {
  margin-top: 30pt;
  font-size: 10pt;
  color: #555;
  font-style: italic;
}

.doc-contenido {
  padding-top: 12pt;
}
.doc-bloque {
  margin-bottom: 18pt;
  page-break-inside: avoid;
}
.doc-bloque h3 {
  font-size: 13pt;
  font-weight: 700;
  margin: 0 0 6pt;
  border-bottom: 0.5pt solid #ccc;
  padding-bottom: 3pt;
}
.doc-bloque strong { color: #0f172a; }

/* ============================================================================
   MODAL · "Generar documentos" · popover con todas las opciones
   ============================================================================ */
.modal-genera-docs {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease-out;
}
.modal-genera-docs-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.modal-genera-docs-card {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 720px;
  width: calc(100% - 32px);
  max-height: calc(100vh - 60px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}
.modal-genera-docs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-genera-docs-titulo {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.modal-genera-docs-subtitulo {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 2px;
}
.modal-genera-docs-cerrar {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}
.modal-genera-docs-cerrar:hover { color: var(--ink); }
.modal-genera-docs-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
}
.genera-aviso-ess {
  background: #422006;
  border: 1px solid #b45309;
  color: #fde68a;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 14px;
}
.btn-genera-memoria-completa {
  width: 100%;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 18px;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  cursor: pointer;
}
.btn-genera-memoria-completa:hover {
  background: var(--primary-hover);
}
.genera-grupo {
  margin-bottom: 14px;
}
.genera-grupo-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}
.genera-grupo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.genera-grupo-botones .btn {
  font-size: 12.5px;
  padding: 7px 10px;
}
.genera-grupo-botones .recomendado {
  background: #f59e0b;
  color: #422006;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  margin-left: 6px;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* PLIEGO de condiciones · estilos del cuerpo auto-generado */
.pliego-auto .pliego-doc h2.pliego-cap {
  font-size: 13pt;
  font-weight: 700;
  margin: 16pt 0 8pt;
  padding: 4pt 0;
  border-bottom: 1.5pt solid #0f172a;
  color: #0f172a;
}
.pliego-auto .pliego-doc p {
  font-size: 10pt;
  line-height: 1.5;
  margin: 4pt 0 8pt;
  text-align: justify;
}
.pliego-auto .pliego-doc ul {
  font-size: 10pt;
  line-height: 1.5;
  margin: 4pt 0 8pt 18pt;
}
.pliego-auto .pliego-doc li {
  margin: 2pt 0;
}
.pliego-auto .pliego-doc strong {
  color: #0f172a;
  font-weight: 700;
}
.pliego-auto .pliego-doc em {
  font-style: italic;
  color: #334155;
}
/* Pliego de edificación · encabezados de unidad de obra y subapartados */
.pliego-auto .pliego-edif h3.pliego-ud {
  font-size: 11pt;
  font-weight: 700;
  color: #0f172a;
  margin: 12pt 0 4pt;
  padding: 3pt 6pt;
  background: #eef2f7;
  border-left: 3pt solid #334155;
  break-after: avoid;
}
.pliego-auto .pliego-edif h3.pliego-ud.pliego-nivel-3 {
  font-size: 10.5pt;
  background: #f4f6f9;
  border-left-color: #64748b;
}
.pliego-auto .pliego-edif p.pliego-tab {
  font-size: 10pt;
  font-weight: 700;
  color: #1e293b;
  margin: 8pt 0 2pt;
  text-transform: uppercase;
  letter-spacing: 0.3pt;
  break-after: avoid;
}
.pliego-auto .pliego-edif p.pliego-sub {
  font-size: 10pt;
  font-weight: 600;
  color: #334155;
  margin: 5pt 0 1pt;
  text-align: left;
  break-after: avoid;
}
/* Cada unidad de obra empieza sin cortar su título del contenido */
.pliego-auto .pliego-edif h2.pliego-cap {
  break-before: auto;
}
/* Uso y Mantenimiento · tablas (datos, plan de mantenimiento, registro) */
.pliego-auto .um-doc .um-tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 6pt 0 12pt;
  font-size: 9.5pt;
}
.pliego-auto .um-doc .um-tabla th,
.pliego-auto .um-doc .um-tabla td {
  border: 0.5pt solid #94a3b8;
  padding: 3pt 5pt;
  text-align: left;
  vertical-align: top;
  line-height: 1.35;
}
.pliego-auto .um-doc .um-tabla thead th {
  background: #eef2f7;
  color: #0f172a;
  font-weight: 700;
}
/* Vista previa de documentos · limitar el tamaño de los logos de empresa
   (en el PDF ya se limitan en getStylesForPrint). Evita que el logo salga enorme. */
.doc-logo,
.doc-portada-marca-logo,
.doc-portada-empresa-logo {
  max-height: 60px;
  max-width: 200px;
  height: auto;
  width: auto;
  display: block;
}
.doc-portada-marca {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid rgba(148,163,184,.4);
  padding-bottom: 10px;
  margin-bottom: 20px;
}

/* EDI-PLIEGO · árbol de selección de unidades de obra (modal) */
.pliego-arbol-topacc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 10px; }
.pliego-arbol-fuente { font-size: 12px; opacity: .75; margin-right: auto; }
.pliego-arbol { display: flex; flex-direction: column; max-height: 440px; overflow: auto; padding: 4px 6px; border: 1px solid rgba(148,163,184,.28); border-radius: 8px; }
.pliego-arbol-cap { border-bottom: 1px solid rgba(148,163,184,.14); }
.pliego-arbol-cap:last-child { border-bottom: none; }
.pliego-arbol-cap > summary { cursor: pointer; padding: 7px 4px; font-weight: 600; display: flex; align-items: center; gap: 8px; list-style: none; }
.pliego-arbol-cap > summary::-webkit-details-marker { display: none; }
.pliego-arbol-cap > summary::before { content: "\25B8"; display: inline-block; transition: transform .15s ease; opacity: .55; }
.pliego-arbol-cap[open] > summary::before { transform: rotate(90deg); }
.pliego-arbol-captit { flex: 1; }
.pliego-arbol-cnt { font-size: 11px; opacity: .7; font-weight: 400; white-space: nowrap; }
.pliego-arbol-grpacc { display: flex; gap: 4px; }
.btn-arbol-mini { font-size: 11px; padding: 1px 8px; border-radius: 5px; border: 1px solid rgba(148,163,184,.4); background: transparent; color: inherit; cursor: pointer; }
.btn-arbol-mini:hover { background: rgba(148,163,184,.18); }
.pliego-arbol-item { display: flex; align-items: flex-start; gap: 7px; padding: 3px 4px 3px 24px; font-size: 13px; cursor: pointer; }
.pliego-arbol-item.arbol-nivel-3 { padding-left: 44px; opacity: .92; }
.pliego-arbol-item input { margin-top: 2px; flex: 0 0 auto; }
.pliego-arbol-item:hover { background: rgba(148,163,184,.1); border-radius: 4px; }

/* Memoria completa · separadores entre apartados */
.memoria-apartado {
  page-break-before: always;
  margin-bottom: 24pt;
}
.memoria-apartado-titulo {
  font-size: 18pt;
  font-weight: 800;
  color: #0f172a;
  border-bottom: 2pt solid #0f172a;
  padding-bottom: 6pt;
  margin: 18pt 0 12pt;
  text-transform: uppercase;
}

/* ============================================================================
   PDF AUTO desde SCHEMA · estilos para renderSchemaToHtml()
   ============================================================================ */
.doc-bloque-auto h2.pdf-seccion {
  font-size: 13pt;
  font-weight: 700;
  margin: 14pt 0 6pt;
  color: #0f172a;
  border-bottom: 1.5pt solid #0f172a;
  padding-bottom: 3pt;
}
.doc-bloque-auto h3.pdf-subgrupo {
  font-size: 11.5pt;
  font-weight: 600;
  margin: 10pt 0 4pt;
  color: #334155;
}
.doc-bloque-auto h4 {
  font-size: 10.5pt;
  font-weight: 700;
  margin: 6pt 0 3pt;
  color: #0f172a;
}
.doc-bloque-auto .pdf-campo {
  margin: 3pt 0;
  font-size: 10pt;
  line-height: 1.4;
}
.doc-bloque-auto .pdf-campo.inline {
  display: block;
}
.doc-bloque-auto .pdf-campo-label {
  font-weight: 600;
  color: #1e293b;
}
.doc-bloque-auto .pdf-campo-valor {
  color: #0f172a;
}
.doc-bloque-auto .pdf-campo-hint {
  font-size: 9pt;
  color: #64748b;
  font-style: italic;
}
.doc-bloque-auto .pdf-multi {
  margin: 3pt 0 6pt 14pt;
  padding: 0;
  font-size: 10pt;
}
.doc-bloque-auto .pdf-multi li {
  margin: 1pt 0;
}
.doc-bloque-auto .pdf-calc {
  margin: 6pt 0;
  padding: 6pt 10pt;
  background: #f1f5f9;
  border-left: 3pt solid #0ea5e9;
  page-break-inside: avoid;
}
.doc-bloque-auto .pdf-calc-label {
  font-weight: 600;
  font-size: 10pt;
  margin-bottom: 3pt;
  color: #0f172a;
}
.doc-bloque-auto .pdf-calc-valor {
  font-family: "Courier New", monospace;
  font-size: 9.5pt;
  white-space: pre-wrap;
  margin: 0;
}
.doc-bloque-auto .pdf-revisado {
  margin: 8pt 0;
  padding: 8pt 10pt;
  border: 0.5pt solid #cbd5e1;
  border-radius: 3pt;
  page-break-inside: avoid;
}
.doc-bloque-auto .pdf-revisado.ok {
  background: #ecfdf5;
  border-color: #6ee7b7;
}
.doc-bloque-auto .pdf-revisado.pendiente {
  background: #fef3c7;
  border-color: #fcd34d;
}
.doc-bloque-auto .pdf-articulado {
  font-size: 9.5pt;
  color: #334155;
  margin: 4pt 0;
}
.doc-bloque-auto .pdf-articulado p {
  margin: 3pt 0;
}
.doc-bloque-auto .pdf-revisado-flag {
  margin-top: 6pt;
  font-weight: 600;
  font-size: 10pt;
}
.doc-bloque-auto .pdf-tabla-wrap {
  margin: 6pt 0;
  page-break-inside: avoid;
}
.doc-bloque-auto .pdf-tabla-label {
  font-weight: 600;
  font-size: 10pt;
  margin-bottom: 3pt;
}
.doc-bloque-auto .pdf-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 9pt;
  table-layout: fixed;
  word-wrap: break-word;
}
.doc-bloque-auto .pdf-tabla th,
.doc-bloque-auto .pdf-tabla td {
  border: 0.5pt solid #94a3b8;
  padding: 3pt 5pt;
  text-align: left;
  vertical-align: top;
}
.doc-bloque-auto .pdf-tabla th {
  background: #e2e8f0;
  font-weight: 700;
}

/* Tablas estructuradas embebidas en bloques del documento (preview en pantalla) */
.doc-tabla-datos {
  width: 100%;
  border-collapse: collapse;
  margin: 8pt 0 12pt;
  font-size: 9.5pt;
  page-break-inside: avoid;
  table-layout: fixed;        /* fija el ancho por columnas para que no se salga */
  word-wrap: break-word;
  overflow-wrap: anywhere;
  /* Cierre visual de la tabla: borde inferior reforzado */
  border-bottom: 1pt solid #555;
}
.doc-tabla-datos th,
.doc-tabla-datos td {
  border: 0.5pt solid #999;
  padding: 4pt 5pt;
  vertical-align: top;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: normal;        /* las cabeceras también hacen wrap si son largas */
}
.doc-tabla-datos thead th {
  background: #f0f0f0;
  font-weight: 700;
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #333;
  line-height: 1.2;
  white-space: normal;
}
.doc-tabla-datos tbody tr:nth-child(even) td { background: #fafafa; }
/* Última fila con borde inferior reforzado para cerrar visualmente la tabla */
.doc-tabla-datos tbody tr:last-child td { border-bottom: 1pt solid #555; }

/* Tabla compacta: 5+ columnas, font más pequeño y padding menor */
.doc-tabla-datos.doc-tabla-compacta {
  font-size: 8pt;
}
.doc-tabla-datos.doc-tabla-compacta thead th { font-size: 7pt; }
.doc-tabla-datos.doc-tabla-compacta th,
.doc-tabla-datos.doc-tabla-compacta td { padding: 2.5pt 3.5pt; }
/* Tabla muy compacta: 7+ columnas */
.doc-tabla-datos.doc-tabla-muy-compacta {
  font-size: 7.5pt;
}
.doc-tabla-datos.doc-tabla-muy-compacta thead th { font-size: 6.5pt; }
.doc-tabla-datos.doc-tabla-muy-compacta th,
.doc-tabla-datos.doc-tabla-muy-compacta td { padding: 2pt 3pt; }

/* Tabla-ficha vertical (una por elemento, atributo + valor) */
.doc-tabla-ficha {
  width: 100%;
  border-collapse: collapse;
  margin: 6pt 0 12pt;
  font-size: 9pt;
  page-break-inside: avoid;
}
.doc-tabla-ficha th,
.doc-tabla-ficha td {
  border: 0.5pt solid #999;
  padding: 3pt 6pt;
  vertical-align: top;
}
.doc-tabla-ficha .doc-tficha-titulo {
  background: #d0d0d0;
  text-align: center;
  font-weight: 700;
  font-size: 10pt;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.doc-tabla-ficha .doc-tficha-label {
  background: #f0f0f0;
  width: 40%;
  font-weight: 600;
  color: #333;
}
.doc-tabla-ficha .doc-tficha-valor { width: 60%; }

/* Cuadro de superficies en el documento */
.doc-cuadro-superficies { margin: 10pt 0; }
.doc-tabla-superficies {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10pt;
  font-size: 10pt;
  page-break-inside: avoid;
}
.doc-tabla-superficies th,
.doc-tabla-superficies td {
  border: 0.5pt solid #999;
  padding: 3pt 6pt;
  text-align: left;
}
.doc-tabla-superficies .doc-tsup-planta {
  background: #d0d0d0;
  text-align: center;
  font-size: 11pt;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.doc-tabla-superficies thead th {
  background: #f0f0f0;
  font-weight: 700;
  font-size: 9pt;
  text-transform: uppercase;
}
.doc-tabla-superficies .doc-tsup-num { text-align: right; font-variant-numeric: tabular-nums; }
.doc-tabla-superficies .doc-tsup-total td { background: #fafafa; }
.doc-tabla-superficies .doc-tsup-total-gen td {
  background: #1a1a1a;
  color: white;
  font-size: 11pt;
}

/* DB-SUA · cabecera de sub-sección con flag CUMPLE/No aplica a la derecha */
.documento .doc-sua-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16pt;
  margin: 12pt 0 6pt;
  padding-bottom: 3pt;
  border-bottom: 0.5pt solid #999;
}
.documento .doc-sua-titulo {
  font-weight: 700;
  font-size: 10.5pt;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.documento .doc-sua-flag {
  font-weight: 700;
  font-size: 10pt;
  text-transform: uppercase;
  padding: 1pt 8pt;
  border: 0.5pt solid #999;
  background: #f0f0f0;
  white-space: nowrap;
}
.documento h2.doc-cap,
.documento h3.doc-cap,
.documento h4.doc-cap {
  background: #1a1a1a;
  color: white;
  padding: 6pt 10pt;
  margin: 14pt 0 8pt;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.documento h2.doc-cap { font-size: 13pt; }
.documento h3.doc-cap { font-size: 12pt; }
.documento h4.doc-cap { font-size: 11pt; }
.documento h5 { font-size: 10.5pt; margin: 10pt 0 4pt; color: #0f172a; }
.documento .doc-sua-tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 6pt 0 10pt;
  font-size: 10pt;
}
.documento .doc-sua-tabla td {
  border: 0.5pt solid #999;
  padding: 3pt 8pt;
}
.documento .doc-sua-tabla td:first-child { width: 55%; background: #fafafa; }
.documento .doc-sua-veredicto {
  background: #fff7ed;
  border-left: 3pt solid #ea580c;
  padding: 6pt 10pt;
  margin: 8pt 0;
}

/* Anejos embebidos en el documento (preview en pantalla) */
.doc-anejos-wrap {
  margin-top: 30pt;
  page-break-before: always;
}
.doc-anejos-titulo {
  font-size: 18pt;
  font-weight: 700;
  margin: 0 0 20pt;
  border-bottom: 1pt solid #1a1a1a;
  padding-bottom: 4pt;
  letter-spacing: -0.01em;
}
.doc-anejo-cabecera {
  font-size: 10pt;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 22pt 0 8pt;
  padding-top: 8pt;
  border-top: 0.5pt solid #ddd;
  page-break-after: avoid;
}
.doc-anejo-cabecera:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.doc-anejo-pagina {
  margin: 8pt 0;
  page-break-inside: avoid;
}
.doc-anejo-pagina img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  /* Borde solo en preview, no en print (gestionado abajo) */
  border: 0.5pt solid #ddd;
}
/* En impresión, sin borde alrededor del anejo */
@media print {
  .doc-anejo-pagina img { border: 0; }
}

.doc-footer {
  margin-top: 24pt;
  padding-top: 8pt;
  border-top: 0.5pt solid #ccc;
  font-size: 8pt;
  color: #777;
  text-align: center;
}

/* ============================================================================
   Input clearable (X para borrar búsqueda)
   ============================================================================ */
.input-clearable {
  position: relative;
  display: flex;
}
.input-clearable input { padding-right: 36px; width: 100%; }
.input-clear {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  background: var(--bg-elev-2);
  border: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background .15s, color .15s;
}
.input-clear:hover {
  background: var(--danger);
  color: white;
}
.input-clear.hidden { display: none !important; }

/* ============================================================================
   Fieldset (agrupar campos en formularios)
   ============================================================================ */
.fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px 16px;
  margin: 8px 0;
}
.fieldset legend {
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fieldset > .form-row + .form-row { margin-top: 12px; }

/* Resumen de presupuesto (cálculo en vivo) */
.presupuesto-resumen {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.pr-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  font-size: 13px;
  color: var(--ink-muted);
}
.pr-row > span:last-child { font-weight: 600; color: var(--ink); }
.pr-subtotal {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 8px;
  font-size: 13px;
}
.pr-total {
  border-top: 2px solid var(--ink);
  margin-top: 4px;
  padding-top: 8px;
  font-size: 14px;
  color: var(--ink);
}
.pr-total > span:last-child { font-size: 15px; font-weight: 700; }

/* v445 · Panel colapsable para cálculo inverso PEM desde PBL */
.presupuesto-inverso {
  margin-top: 10px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: rgba(var(--primary-rgb), 0.04);
}
.presupuesto-inverso > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  user-select: none;
}
.presupuesto-inverso > summary::-webkit-details-marker { display: none; }
.presupuesto-inverso > summary:hover { background: rgba(var(--primary-rgb), 0.08); }
.presupuesto-inverso[open] > summary {
  border-bottom: 1px solid var(--border);
  background: rgba(var(--primary-rgb), 0.08);
}
.presupuesto-inverso-body {
  padding: 10px 14px 14px;
}
.presupuesto-inverso-body > .meta {
  font-size: 11.5px;
  margin: 0 0 10px;
}
.presupuesto-inverso-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}
.presupuesto-inverso-row label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.presupuesto-inverso-row input {
  padding: 6px 10px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
  border-radius: 4px;
}
/* Contraste explícito según tema · no fiarse de la herencia */
:root[data-theme="dark"] .presupuesto-inverso-row input,
:root .presupuesto-inverso-row input {
  background: #1F1E1B;
  color: #ECE9E1;
}
:root[data-theme="dark"] .presupuesto-inverso-row input::placeholder,
:root .presupuesto-inverso-row input::placeholder {
  color: #94a3b8;
  opacity: 0.7;
}
:root[data-theme="light"] .presupuesto-inverso-row input {
  background: #ffffff;
  color: #1F1E1B;
}
:root[data-theme="light"] .presupuesto-inverso-row input::placeholder {
  color: #94a3b8;
}
.presupuesto-inverso-row input:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.6);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
}
.presupuesto-inverso-resultado {
  margin: 8px 0 0;
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: 4px;
}
.presupuesto-inverso-resultado.ok {
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: rgba(34, 197, 94, 1);
}
.presupuesto-inverso-resultado.aviso {
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: rgba(245, 158, 11, 1);
}

/* ============================================================================
   Uploader de logo (Ajustes → Empresa)
   ============================================================================ */
.logo-uploader {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.logo-preview {
  flex: 0 0 auto;
  width: 140px; height: 80px;
  background: white;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
}
.logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.logo-actions {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.logo-actions .meta { margin-top: 4px; }

/* ============================================================================
   Editor de bloques de texto
   ============================================================================ */
.checkbox-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink);
  cursor: pointer;
  text-transform: none; letter-spacing: 0;
  padding: 10px 0;
}
.checkbox-row input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0; cursor: pointer;
  accent-color: var(--primary);
}

.bloque-editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.bloque-editor textarea {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  resize: vertical;
  outline: none;
}
.bloque-editor textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb),0.18);
}
.bloque-editor textarea.full-width {
  grid-column: 1 / -1;
}
.bloque-preview {
  background: white;
  color: #1a1a1a;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  overflow-y: auto;
  max-height: 360px;
}
.bloque-preview h3 {
  font-size: 13pt; margin: 0 0 6pt;
  border-bottom: 0.5pt solid #ccc; padding-bottom: 3pt;
  color: #0f172a;
}
.bloque-preview p { margin: 0 0 8pt; }
.bloque-preview ul { margin: 0 0 8pt; padding-left: 20pt; }
.bloque-preview li { margin-bottom: 3pt; }
.bloque-preview strong { color: #0f172a; }
.bloque-preview.hidden { display: none; }

code {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--primary);
}

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width: 880px) {
  .topbar-inner { padding: 0 16px; gap: 12px; }
  .main-nav { gap: 0; }
  .main-nav-link { padding: 6px 10px; font-size: 12px; }
  .user-info { display: none; }
}
@media (max-width: 720px) {
  .container, .container-wide { padding: 24px 16px; }
  .container-sm { padding: 48px 16px; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  thead th, tbody td { padding: 10px 12px; }
  .filters .input { min-width: 100%; }
  .form-row { grid-template-columns: 1fr; }
  .modal-dialog { max-height: 100vh; border-radius: 0; }
  .kanban-col { flex: 0 0 250px; }
  .equipo-grid { grid-template-columns: 1fr; }
  .brand-name { display: none; }
  .buscador-trigger-texto { display: none; }
  .buscador-trigger-kbd { display: none; }
}

/* ============================================================================
   BARRAS DE DESPLAZAMIENTO · estilo adaptado al tema (oscuro y claro)
   ============================================================================ */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
/* WebKit / Chromium */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink-muted) 35%, transparent);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ink-muted) 60%, transparent);
  background-clip: padding-box;
  border: 2px solid transparent;
}
::-webkit-scrollbar-corner { background: transparent; }

/* ============================================================================
   MODAL MEMORIA · Vista a pantalla completa con sub-pestañas (MD/MC/DBs/...)
   ============================================================================ */
.modal-memoria {
  position: fixed;
  inset: 0;
  z-index: 100120;
  background: var(--bg);
  display: flex;
}
.modal-memoria.hidden { display: none; }
.modal-memoria-dialog {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  animation: memoriaIn 0.18s ease-out;
}
@keyframes memoriaIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal-memoria-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.modal-memoria-header h2 {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
.memoria-dirty-indicador {
  color: var(--warning);
  font-size: 22px;
  line-height: 1;
  animation: pulse-dirty 1.4s ease-in-out infinite;
}
.memoria-dirty-indicador.hidden { display: none; }
@keyframes pulse-dirty {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
/* v312 · subtabs ULTRA compactas */
.modal-memoria-subtabs {
  display: flex;
  gap: 1px;
  padding: 8px 10px 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: thin;
  flex-shrink: 0;
  scroll-behavior: smooth;
}
/* Scrollbar más sutil pero visible */
.modal-memoria-subtabs::-webkit-scrollbar {
  height: 8px;
}
.modal-memoria-subtabs::-webkit-scrollbar-track {
  background: transparent;
}
.modal-memoria-subtabs::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.modal-memoria-subtabs::-webkit-scrollbar-thumb:hover {
  background: var(--ink-muted);
}
/* v316 · barra progreso subtabs */
.memoria-subtab {
  /* v313/v314 · ultra compacta con !important · v316 con position:relative para barra */
  background: none;
  border: 1px solid transparent;
  border-bottom: none;
  color: var(--ink-muted);
  padding: 3px 6px !important;
  padding-bottom: 5px !important; /* hueco para la barra */
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  font-size: 10.5px !important;
  font-weight: 500;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2px !important;
  transition: color 0.15s, background 0.15s;
  position: relative;
}
/* v316 · barra de progreso · 2px de alto, anchura según --progreso */
.memoria-subtab::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 1px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(to right,
    var(--prog-color, rgba(239, 68, 68, 0.85)) var(--progreso, 0%),
    rgba(148, 163, 184, 0.18) var(--progreso, 0%));
  pointer-events: none;
}
/* Cuando la pestaña está activa, la barra es ligeramente más visible */
.memoria-subtab.active::after {
  bottom: 0;
  height: 2px;
}
.memoria-subtab:hover { color: var(--ink); background: var(--bg-elev); }
.memoria-subtab.active {
  color: var(--ink);
  background: var(--bg);
  border-color: var(--border);
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}
/* v317 · badge X/Y */
.memoria-subtab .tab-tareas-badge {
  /* v317 · X/Y formato · ligeramente más ancho que v314 */
  background: var(--danger);
  color: white;
  border-radius: 8px;
  min-width: 22px !important;
  text-align: center;
  padding: 0 4px !important;
  font-size: 8.5px !important;
  font-weight: 700;
  letter-spacing: 0;
  margin-left: 3px !important;
  line-height: 1.4 !important;
  vertical-align: baseline !important;
  display: inline-block !important;
}
/* Badge azul cuando la pestaña está activa pero aún quedan campos por rellenar */
.memoria-subtab.active .tab-tareas-badge[data-estado="pending"] { background: var(--primary); }
/* Badge verde cuando todo está completo (activo o no) */
.memoria-subtab .tab-tareas-badge[data-estado="complete"] { background: var(--success); }
.modal-memoria-contenido {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  background: var(--bg);
}

/* v318 · sidebar izquierdo */
.modal-memoria-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
  min-width: 0;
}
.modal-memoria-sidebar {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-elev);
  overflow-y: auto;
  padding: 8px 6px;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
.modal-memoria-sidebar::-webkit-scrollbar { width: 6px; }
.modal-memoria-sidebar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
/* Cada subtab ahora es una fila completa en el sidebar */
.modal-memoria-sidebar .memoria-subtab {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 7px 12px !important;
  padding-right: 8px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  gap: 6px !important;
  text-align: left !important;
  background: transparent;
  color: var(--ink-muted);
}
.modal-memoria-sidebar .memoria-subtab:hover {
  background: var(--bg-2, rgba(255,255,255,0.04));
  color: var(--ink);
}
.modal-memoria-sidebar .memoria-subtab.active {
  background: var(--bg);
  border-color: var(--border) !important;
  color: var(--ink);
  margin-bottom: 0 !important;
  font-weight: 600;
}
/* La barra de progreso ahora va abajo del subtab, todo el ancho */
.modal-memoria-sidebar .memoria-subtab::after {
  left: 12px !important;
  right: 12px !important;
  bottom: 2px !important;
  height: 2px !important;
}
.modal-memoria-sidebar .memoria-subtab .tab-tareas-badge {
  margin-left: 0 !important;
  font-size: 10px !important;
  min-width: 32px !important;
  padding: 1px 6px !important;
  border-radius: 10px !important;
}
@media (max-width: 720px) {
  .modal-memoria-header { padding: 10px 14px; gap: 8px; }
  .modal-memoria-header h2 { font-size: 14px; }
  .modal-memoria-subtabs { padding: 8px 12px 0; }
  .memoria-subtab { padding: 6px 12px; font-size: 12.5px; }
  .modal-memoria-contenido { padding: 14px 16px; }
}

/* ============================================================================
   MEMORIA · Tarjetas de sección + indicadores de estado por campo
   ============================================================================ */
.mem-grupo {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 24px;
  overflow: hidden;
}
.mem-grupo-header {
  background: var(--bg-elev);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
}
.mem-grupo-titulo {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.mem-grupo-progreso {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  letter-spacing: 0.03em;
}
.mem-grupo-progreso.empty {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}
.mem-grupo-progreso.partial {
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--warning);
}
.mem-grupo-progreso.complete {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
}
.mem-grupo-progreso.neutral {
  background: var(--bg-elev-2);
  color: var(--ink-muted);
}

/* Acento lateral por estado del grupo */
.mem-grupo-empty    .mem-grupo-header { border-left: 4px solid var(--danger); }
.mem-grupo-partial  .mem-grupo-header { border-left: 4px solid var(--warning); }
.mem-grupo-complete .mem-grupo-header { border-left: 4px solid var(--success); }
.mem-grupo-neutral  .mem-grupo-header { border-left: 4px solid var(--ink-muted); }

.mem-grupo-cuerpo {
  padding: 16px 18px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
/* Cada form-group ocupa por defecto toda la fila (12 columnas). Los campos
   con propiedad ancho="medio"/"tercio"/"cuarto" del schema ocupan menos. */
.mem-grupo-cuerpo > .form-group { grid-column: 1 / -1; }
.mem-grupo-cuerpo > .form-group.mem-ancho-medio  { grid-column: span 6; }
.mem-grupo-cuerpo > .form-group.mem-ancho-tercio { grid-column: span 4; }
.mem-grupo-cuerpo > .form-group.mem-ancho-cuarto { grid-column: span 3; }
.mem-grupo-cuerpo > .form-group.mem-ancho-dos-tercios { grid-column: span 8; }
/* En móvil todos los campos ocupan el ancho completo */
@media (max-width: 720px) {
  .mem-grupo-cuerpo > .form-group.mem-ancho-medio,
  .mem-grupo-cuerpo > .form-group.mem-ancho-tercio,
  .mem-grupo-cuerpo > .form-group.mem-ancho-cuarto,
  .mem-grupo-cuerpo > .form-group.mem-ancho-dos-tercios {
    grid-column: 1 / -1;
  }
}

/* --- Campos individuales con indicador de estado --- */
.mem-campo {
  position: relative;
  padding-left: 12px;
  border-left: 3px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}
.mem-campo-empty    { border-left-color: var(--danger); }
.mem-campo-default  { border-left-color: var(--warning); }
.mem-campo-filled   { border-left-color: var(--success); }
.mem-campo-neutral  { border-left-color: var(--ink-muted); }
.mem-campo-optional { border-left-color: #e08a30; } /* v365 */

/* Punto coloreado al lado del label */
.mem-campo-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}
.mem-campo-dot-empty   { background: var(--danger); }
.mem-campo-dot-default { background: var(--warning); }
.mem-campo-dot-filled  { background: var(--success); }
.mem-campo-dot-neutral { background: var(--ink-muted); }
.mem-campo-dot-optional { background: #e08a30; } /* v365 */

/* Campo destacado: banner de cabecera de bloque (p. ej. "USO RESIDENCIAL
   VIVIENDA" en SUA 9). Mismo estilo compacto que .mem-subgrupo-header con
   el título a la izquierda y un select compacto a la derecha. */
.mem-campo-destacado {
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 14px 0 -2px;
  padding: 8px 12px !important;
  background: linear-gradient(90deg, var(--surface-2, #1e293b), transparent);
  border-left: 3px solid var(--accent, #60a5fa) !important;
  border-radius: 4px;
  grid-column: 1 / -1; /* ocupa toda la fila si está dentro de un grid */
}
.mem-campo-destacado > label {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink) !important;
  text-align: left !important;
  margin: 0 !important;
  order: 0;
}
.mem-campo-destacado > select {
  min-width: 160px;
  max-width: 200px;
  padding: 4px 8px;
  font-size: 13px;
  order: 1;
}
.mem-campo-destacado .mem-hint {
  grid-column: 1 / -1;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ink-muted);
}
/* Cuando está oculto el dot del estado (lo dejamos suave porque la cabecera no
   es un campo crítico de progreso, sino un switch de aplicabilidad). */
.mem-campo-destacado .mem-campo-dot { opacity: 0.5; }

/* Campo oculto cuando su `mostrar_si(datos)` devuelve false. Se mantiene en el
   DOM (para que los listeners sigan vivos) pero queda invisible y no cuenta
   en el progreso del grupo. */
.mem-campo-hidden { display: none !important; }
/* Sección entera oculta cuando `mostrar_seccion_si` lo decide */
.mem-grupo-hidden { display: none !important; }

/* Mini-cabecera dentro de una sección, para agrupar visualmente subgrupos
   (ej. "1.- RESBALADICIDAD DE LOS SUELOS"). No es un campo de datos. */
/* v287 · mem-subgrupo-header gris pastel */
.mem-subgrupo-header {
  margin: 14px 0 -2px;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.18), transparent);
  border-left: 3px solid #94a3b8;
  border-radius: 4px;
}
.mem-subgrupo-header .mem-subgrupo-titulo {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.mem-subgrupo-header:first-child { margin-top: 0; }

/* bool_revisado: checkbox-banner para sub-apartados de "texto fijo CTE".
   Estado OFF (sin marcar): borde rojo punteado, fondo neutro · estado ON
   (marcado): borde verde, fondo verde claro, icono ✓. */
.mem-revisado {
  border-radius: 6px;
  border: 1.5px dashed var(--danger, #ef4444);
  background: rgba(239, 68, 68, 0.06);
  padding: 10px 14px;
  transition: all 0.15s;
}
.mem-revisado-on {
  border-style: solid;
  border-color: var(--success, #22c55e);
  background: rgba(34, 197, 94, 0.10);
}
.mem-revisado-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 0;
  font-weight: 600;
  font-size: 13.5px;
  user-select: none;
}
.mem-revisado-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mem-revisado-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  border: 1.5px solid var(--danger, #ef4444);
  color: var(--danger, #ef4444);
  background: var(--surface, #0b1220);
  transition: all 0.15s;
}
.mem-revisado-on .mem-revisado-icono {
  border-color: var(--success, #22c55e);
  color: white;
  background: var(--success, #22c55e);
}
.mem-revisado-titulo {
  color: var(--ink);
  flex: 1;
}
.mem-revisado:hover { border-color: var(--accent, #60a5fa); }
.mem-revisado .meta { padding-left: 36px; }

/* Campo calc · valor derivado automáticamente, no editable */
.mem-calc-valor {
  font-weight: 700;
  font-size: 14px;
  color: var(--accent, #60a5fa);
  font-variant-numeric: tabular-nums;
  padding: 6px 10px;
  background: rgba(96, 165, 250, 0.08);
  border-radius: 4px;
  border-left: 3px solid var(--accent, #60a5fa);
}
/* Tarjeta calc destacada (para resultados de cálculo importantes) */
.mem-calc-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(96, 165, 250, 0.06);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-left: 3px solid var(--accent, #60a5fa);
}
.mem-calc-tarjeta-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.mem-calc-tarjeta-valor {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
/* Variante destacada · resultado OK / éxito (verde) */
.mem-calc-tarjeta.mem-calc-destacado {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.35);
  border-left-color: var(--success, #22c55e);
}
.mem-calc-tarjeta.mem-calc-destacado .mem-calc-tarjeta-valor {
  color: var(--success, #22c55e);
  font-size: 15px;
}
/* Variante alerta · obligación normativa o atención requerida (rojo/naranja) */
.mem-calc-tarjeta.mem-calc-alerta {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.40);
  border-left-color: var(--danger, #ef4444);
}
.mem-calc-tarjeta.mem-calc-alerta .mem-calc-tarjeta-valor {
  color: var(--danger, #ef4444);
  font-size: 15px;
}
/* Variante info · medida intermedia o nota explicativa (azul/neutro) */
.mem-calc-tarjeta.mem-calc-info {
  background: rgba(96, 165, 250, 0.08);
  border-color: rgba(96, 165, 250, 0.30);
  border-left-color: var(--accent, #60a5fa);
}
.mem-calc-tarjeta.mem-calc-info .mem-calc-tarjeta-valor {
  color: var(--accent, #60a5fa);
  font-size: 15px;
}
.mem-revisado-acciones {
  margin-top: 8px;
  padding-left: 36px;
}
.mem-revisado-ver {
  font-size: 12px;
}

/* Modal "Ver articulado completo": ventana emergente con texto del CTE */
.modal-articulado-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100600;
  padding: 24px;
  animation: fadeIn 0.15s ease-out;
}
.modal-articulado {
  background: var(--surface, #0b1220);
  border: 1px solid var(--border, #1f2937);
  border-radius: 10px;
  width: min(820px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.modal-articulado-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border, #1f2937);
  background: var(--surface-2, #111827);
}
.modal-articulado-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.modal-articulado-cerrar {
  background: transparent;
  border: 0;
  color: var(--ink-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
}
.modal-articulado-cerrar:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
}
.modal-articulado-cuerpo {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
}
.modal-articulado-cuerpo h4 {
  font-size: 13.5px;
  margin: 14px 0 6px;
  color: var(--accent, #60a5fa);
}
.modal-articulado-cuerpo h4:first-child { margin-top: 0; }
.modal-articulado-cuerpo p { margin: 0 0 10px; }
.modal-articulado-cuerpo ol, .modal-articulado-cuerpo ul { margin: 0 0 10px; padding-left: 26px; }
.modal-articulado-cuerpo li { margin-bottom: 6px; }
.modal-articulado-cuerpo .ref-cte {
  color: var(--ink-muted);
  font-style: italic;
  font-size: 12px;
}
.modal-articulado-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border, #1f2937);
  display: flex;
  justify-content: flex-end;
  background: var(--surface-2, #111827);
}

/* Mejor tipografía de labels en memoria */
.mem-campo label {
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  display: flex;
  align-items: center;
}

@media (max-width: 720px) {
  .mem-grupo-header { padding: 10px 12px; position: relative; }
  .mem-grupo-titulo { font-size: 13.5px; }
  .mem-grupo-cuerpo { padding: 12px; gap: 12px; }
  .mem-campo { padding-left: 10px; }
}

/* ============================================================================
   TRÁMITES · Pestaña administrativa del proyecto
   ============================================================================ */
.tramites-h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tramites-h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  margin: 16px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tramites-asignados {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.tramites-asignado-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.tramites-asignado-info {
  flex: 1;
  min-width: 0;
}
.tramites-asignado-nombre { font-weight: 600; }
.tramites-asignado-sub {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-top: 1px;
}
.tramites-asignado-rol-input {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--ink);
  width: 180px;
}
.tramites-asignado-del {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
}
.tramites-asignado-del:hover { background: var(--bg-elev); border-radius: 4px; }
.tramites-add {
  position: relative;
  margin-bottom: 8px;
}
.tramites-add input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--ink);
  font-size: 13px;
}
.tramites-add input:focus { outline: none; border-color: var(--primary); }
.tramites-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.tramites-dropdown.hidden { display: none; }
.tramites-dropdown-opt {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.tramites-dropdown-opt:hover { background: var(--bg-elev-2); }
.tramites-dropdown-opt:last-child { border-bottom: none; }
.tramites-dropdown-opt-sub {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
}
.tramites-dropdown-opt-nuevo {
  color: var(--primary);
  font-weight: 600;
}

/* ============================================================================
   NOTAS PRIVADAS · Panel lateral deslizable
   ============================================================================ */
.panel-notas {
  position: fixed;
  inset: 0;
  z-index: 100090;
  display: flex;
  justify-content: flex-end;
}
.panel-notas.hidden { display: none; }
.panel-notas-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}
.panel-notas-dialog {
  position: relative;
  background: var(--bg-elev);
  border-left: 1px solid var(--border);
  width: min(420px, 95vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(0,0,0,0.4);
  animation: panelNotasIn 0.22s ease-out;
}
@keyframes panelNotasIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.panel-notas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.panel-notas-header h2 { margin: 0; font-size: 15px; font-weight: 600; }
.panel-notas-buscador {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.panel-notas-buscador input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--ink);
  font-size: 13px;
}
.panel-notas-buscador input:focus { outline: none; border-color: var(--primary); }
.panel-notas-filtros {
  padding: 8px 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.notas-filtro-chip {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--ink-muted);
  padding: 3px 10px;
  border-radius: 14px;
  font-size: 11.5px;
  cursor: pointer;
  white-space: nowrap;
}
.notas-filtro-chip:hover { background: var(--bg-elev); color: var(--ink); }
.notas-filtro-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.panel-notas-lista {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nota-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ink-muted);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink);
  position: relative;
}
.nota-card.pinned { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 6%, var(--bg)); }
.nota-card[data-etiqueta="idea"]      { border-left-color: #eab308; }
.nota-card[data-etiqueta="pendiente"] { border-left-color: #f59e0b; }
.nota-card[data-etiqueta="urgente"]   { border-left-color: #ef4444; }
.nota-card[data-etiqueta="reunion"]   { border-left-color: #8b5cf6; }
.nota-card[data-etiqueta="otro"]      { border-left-color: #94a3b8; }
.nota-texto {
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.4;
  cursor: text;
}
.nota-texto[contenteditable="true"] {
  background: var(--bg-elev);
  outline: 1px solid var(--primary);
  border-radius: 4px;
  padding: 4px;
}
.nota-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--ink-muted);
  flex-wrap: wrap;
}
.nota-etiqueta-badge {
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--bg-elev);
  font-weight: 600;
  font-size: 10px;
}
.nota-vinc-chip {
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--bg-elev);
  font-size: 10px;
  cursor: pointer;
}
.nota-vinc-chip:hover { background: var(--primary); color: var(--on-primary); }
.nota-acciones {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  gap: 2px;
}
.nota-card:hover .nota-acciones { display: flex; }
.nota-acciones button {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 22px; height: 22px;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  color: var(--ink-muted);
}
.nota-acciones button:hover { color: var(--ink); }
.nota-acciones .nota-pin.active { background: var(--warning); color: white; border-color: var(--warning); }
.nota-tarea-marca {
  display: inline-block;
  font-size: 10px;
  color: var(--success);
  font-weight: 600;
  background: color-mix(in srgb, var(--success) 12%, transparent);
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
}
.panel-notas-input-zona {
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  display: flex;
  gap: 6px;
  align-items: stretch;
  flex-wrap: wrap;
}
.panel-notas-input-zona select {
  flex: 0 0 110px;
  font-size: 12px;
}
.panel-notas-input-zona textarea {
  flex: 1 1 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 36px;
}
.panel-notas-input-zona textarea:focus { outline: none; border-color: var(--primary); }
.panel-notas-input-zona .btn { flex: 0 0 auto; }
.notas-vincular-zona {
  position: relative;
  flex: 1 1 100%;
  margin-top: 2px;
}
.notas-vincular-zona input[type="text"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--ink);
  font-size: 12px;
}
.notas-vincular-zona input[type="text"]:focus { outline: none; border-color: var(--primary); }
#notas-vinc-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
}
#notas-vinc-dropdown.hidden { display: none; }
.notas-vinc-opt {
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.notas-vinc-opt:hover { background: var(--bg-elev-2); }
.notas-vinc-opt:last-child { border-bottom: none; }
#notas-vinc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--primary) 18%, var(--bg));
  color: var(--ink);
  border-radius: 12px;
  font-size: 11.5px;
}
#notas-vinc-chip.hidden { display: none; }
#notas-vinc-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.notas-vacio {
  text-align: center;
  color: var(--ink-muted);
  font-size: 12.5px;
  padding: 30px 20px;
}

/* Pestaña Mis notas dentro del modal de proyecto */
.proy-notas-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 14px;
}
.proy-notas-input-zona {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.proy-notas-input-zona select { flex: 0 0 130px; }
.proy-notas-input-zona textarea {
  flex: 1 1 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 38px;
}

/* ============================================================================
   CHAT · Adjuntos (imágenes, PDFs, archivos) en los mensajes
   ============================================================================ */
/* Zona de drag & drop visible cuando se arrastra algo encima */
.modal-chat-mensajes.dragover,
.proy-chat-mensajes.dragover {
  outline: 2px dashed var(--primary);
  outline-offset: -8px;
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

/* Lista de adjuntos pendientes (antes de enviar el mensaje) */
.chat-adjuntos-pendientes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0 10px;
  background: transparent;
}
.chat-adjuntos-pendientes.hidden { display: none; }
.adj-pendiente {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11.5px;
  position: relative;
}
.adj-pendiente img {
  width: 36px; height: 36px; object-fit: cover; border-radius: 4px;
}
.adj-pendiente .adj-quitar {
  background: var(--danger);
  color: white;
  border: none;
  border-radius: 50%;
  width: 18px; height: 18px;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.adj-pendiente.subiendo { opacity: 0.6; }
.adj-pendiente .adj-progreso {
  font-size: 10px;
  color: var(--ink-muted);
}

/* Fila del input del chat con botones a la derecha */
.chat-input-fila {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  width: 100%;
}
.chat-input-fila .modal-chat-input {
  flex: 1 1 auto;
  min-width: 0;
}
.chat-input-fila .btn {
  height: 42px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────── */
/* Checkbox "Pedir confirmación" + botones de confirmación rápida          */
/* ─────────────────────────────────────────────────────────────────────── */
.chat-pide-conf-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-muted, #94a3b8);
  cursor: pointer;
  padding: 0 8px;
  white-space: nowrap;
  user-select: none;
  flex-shrink: 0;
}
.chat-pide-conf-label input[type="checkbox"] {
  margin: 0;
  accent-color: var(--primary, #3b82f6);
}
.chat-pide-conf-label:hover { color: var(--ink, #e2e8f0); }

/* ─────────────────────────────────────────────────────────────────────── */
/* Modal de análisis automático de memoria (idea #9)                       */
/* ─────────────────────────────────────────────────────────────────────── */
/* Z-index alto · debe quedar por encima del modal de memoria (100120) */
#modal-analisis { z-index: 100200; }

/* ─────────────────────────────────────────────────────────────────────── */
/* Firma del técnico · modal técnico (preview de imagen)                   */
/* ─────────────────────────────────────────────────────────────────────── */
.firma-tecnico-zona {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background: rgba(148, 163, 184, 0.06);
  border: 1px dashed rgba(148, 163, 184, 0.3);
  border-radius: 8px;
}
.firma-preview {
  max-width: 200px;
  max-height: 80px;
  background: #fff;
  padding: 6px;
  border-radius: 4px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  align-self: flex-start;
}
.firma-acciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────────────── */
/* PDF · bloques de firma, índice y hoja final (idea #10)                  */
/* Aplican tanto en preview como en print (sin variables de color).         */
/* ─────────────────────────────────────────────────────────────────────── */

/* Índice */
.indice-memoria {
  page-break-after: always;
  break-after: page;
  padding: 30pt 20pt;
}
.indice-titulo {
  font-size: 22pt;
  margin: 0 0 24pt;
  text-align: center;
  border-bottom: 2pt solid #1e293b;
  padding-bottom: 10pt;
}
.indice-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: indice-counter;
}
.indice-item {
  display: flex;
  gap: 14pt;
  padding: 8pt 0;
  border-bottom: 1pt dotted rgba(30, 41, 59, 0.3);
  font-size: 12pt;
}
.indice-num {
  font-weight: 600;
  min-width: 36pt;
  color: #475569;
}
.indice-label { flex: 1; }

/* ─────────────────────────────────────────────────────────────────────
   ÍNDICE POR SECCIONES (modo CTE Anejo I · sesión 2026-05-22 · SW v260)
   ───────────────────────────────────────────────────────────────────── */
.indice-memoria-secciones {
  padding: 30pt 24pt;
}
.indice-memoria-secciones .indice-titulo {
  border-bottom: none;
  margin-bottom: 18pt;
  text-align: left;
  font-size: 26pt;
  font-weight: 800;
  letter-spacing: -0.5pt;
}
.indice-seccion {
  margin: 0 0 18pt;
  page-break-inside: avoid;
  break-inside: avoid;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.indice-seccion-cab {
  display: flex;
  align-items: baseline;
  gap: 14pt;
  padding: 8pt 12pt;
  background: #f1f5f9;             /* fallback */
  border-left: 4pt solid #475569;  /* fallback */
  margin: 0 0 6pt;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.indice-seccion-num {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26pt;
  font-weight: 700;
  color: #475569;                  /* fallback */
  line-height: 1;
  letter-spacing: -1pt;
}
.indice-seccion-tit {
  font-size: 11.5pt;
  font-weight: 700;
  letter-spacing: 1.2pt;
  color: #1e293b;                  /* fallback */
  text-transform: uppercase;
}

/* ── Colores HARDCODED del índice por sección · NO usamos var() · Chrome
   no resuelve custom properties al imprimir, por eso v258-v262 fallaban ── */
.indice-seccion[data-seccion="descriptiva"]  .indice-seccion-cab { background-color: #f4e2d4; background-image: linear-gradient(#f4e2d4, #f4e2d4); border-left-color: #c8643c; }
.indice-seccion[data-seccion="descriptiva"]  .indice-seccion-num { color: #c8643c; }
.indice-seccion[data-seccion="descriptiva"]  .indice-seccion-tit { color: #c8643c; }
.indice-seccion[data-seccion="constructiva"] .indice-seccion-cab { background-color: #f0dcc8; background-image: linear-gradient(#f0dcc8, #f0dcc8); border-left-color: #8a4424; }
.indice-seccion[data-seccion="constructiva"] .indice-seccion-num { color: #8a4424; }
.indice-seccion[data-seccion="constructiva"] .indice-seccion-tit { color: #8a4424; }
.indice-seccion[data-seccion="cte"]          .indice-seccion-cab { background-color: #dbe2ed; background-image: linear-gradient(#dbe2ed, #dbe2ed); border-left-color: #3a4d6b; }
.indice-seccion[data-seccion="cte"]          .indice-seccion-num { color: #3a4d6b; }
.indice-seccion[data-seccion="cte"]          .indice-seccion-tit { color: #3a4d6b; }
.indice-seccion[data-seccion="otros"]        .indice-seccion-cab { background-color: #dde6cf; background-image: linear-gradient(#dde6cf, #dde6cf); border-left-color: #5a8a3a; }
.indice-seccion[data-seccion="otros"]        .indice-seccion-num { color: #5a8a3a; }
.indice-seccion[data-seccion="otros"]        .indice-seccion-tit { color: #5a8a3a; }
.indice-seccion[data-seccion="anejos"]       .indice-seccion-cab { background-color: #f4ead0; background-image: linear-gradient(#f4ead0, #f4ead0); border-left-color: #c89c3a; }
.indice-seccion[data-seccion="anejos"]       .indice-seccion-num { color: #c89c3a; }
.indice-seccion[data-seccion="anejos"]       .indice-seccion-tit { color: #c89c3a; }
.indice-lista-sec {
  padding: 4pt 0 4pt 16pt;
}
.indice-lista-sec .indice-item {
  padding: 5pt 0;
  border-bottom: none;
  font-size: 11pt;
}
.indice-lista-sec .indice-num {
  min-width: 40pt;
  color: #64748b;
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────
   SUBPORTADA DE SECCIÓN · v264 · bloque destacado + colores hardcoded
   ─────────────────────────────────────────────────────────────────────
   v263 (bloque) + fix de colores: Chrome NO resuelve CSS custom properties
   (var(--acc)) al imprimir. Sustituimos por 5 selectores específicos con
   data-seccion y colores HEX directos para cada sección.
   ───────────────────────────────────────────────────────────────────── */
.subportada-seccion {
  display: flex;
  width: 100%;
  background: #ffffff;
  margin: 0 0 18pt;
  page-break-before: always;
  break-before: page;
  page-break-after: avoid;
  break-after: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  border-radius: 4pt;
  overflow: hidden;
  border: 1pt solid rgba(0,0,0,0.08);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  color-adjust: exact;
}
.subportada-banda {
  flex: 0 0 30%;
  width: 30%;
  background: #3a4d6b;             /* fallback · sobrescrito por data-seccion */
  color: #ffffff;
  padding: 32pt 16pt;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  color-adjust: exact;
}

/* ── Colores HARDCODED por sección · Chrome los imprime SÍ o SÍ ── */
.subportada-seccion[data-seccion="descriptiva"]  .subportada-banda { background-color: #c8643c; background-image: linear-gradient(#c8643c, #c8643c); }
.subportada-seccion[data-seccion="constructiva"] .subportada-banda { background-color: #8a4424; background-image: linear-gradient(#8a4424, #8a4424); }
.subportada-seccion[data-seccion="cte"]          .subportada-banda { background-color: #3a4d6b; background-image: linear-gradient(#3a4d6b, #3a4d6b); }
.subportada-seccion[data-seccion="otros"]        .subportada-banda { background-color: #5a8a3a; background-image: linear-gradient(#5a8a3a, #5a8a3a); }
.subportada-seccion[data-seccion="anejos"]       .subportada-banda { background-color: #c89c3a; background-image: linear-gradient(#c89c3a, #c89c3a); }

/* El prefijo "PARTE X" lleva color de texto (no fondo) ─ el divider lleva fondo */
.subportada-seccion[data-seccion="descriptiva"]  .subportada-prefijo { color: #c8643c; }
.subportada-seccion[data-seccion="descriptiva"]  .subportada-divider { background: #c8643c; }
.subportada-seccion[data-seccion="constructiva"] .subportada-prefijo { color: #8a4424; }
.subportada-seccion[data-seccion="constructiva"] .subportada-divider { background: #8a4424; }
.subportada-seccion[data-seccion="cte"]          .subportada-prefijo { color: #3a4d6b; }
.subportada-seccion[data-seccion="cte"]          .subportada-divider { background: #3a4d6b; }
.subportada-seccion[data-seccion="otros"]        .subportada-prefijo { color: #5a8a3a; }
.subportada-seccion[data-seccion="otros"]        .subportada-divider { background: #5a8a3a; }
.subportada-seccion[data-seccion="anejos"]       .subportada-prefijo { color: #c89c3a; }
.subportada-seccion[data-seccion="anejos"]       .subportada-divider { background: #c89c3a; }

.subportada-numeral {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 90pt;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -3pt;
  color: rgba(255, 255, 255, 0.96);
  margin: 0;
  display: block;
}
.subportada-label-vertical {
  display: block;
  font-size: 7.5pt;
  letter-spacing: 2.5pt;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  margin: 14pt 0 0;
}
.subportada-contenido {
  flex: 1;
  padding: 28pt 32pt;
  background: #fafaf7;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.subportada-prefijo {
  font-size: 9pt;
  letter-spacing: 3pt;
  font-weight: 700;
  text-transform: uppercase;
  color: #3a4d6b;              /* fallback */
  background: transparent !important;   /* el prefijo solo lleva color, no fondo */
  margin: 0 0 8pt;
}
.subportada-titulo {
  font-size: 24pt;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5pt;
  color: #1a1a1a;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.subportada-divider {
  display: block;
  width: 48pt;
  height: 2pt;
  background: #3a4d6b;          /* fallback */
  margin: 14pt 0 10pt;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.subportada-subtitulo {
  font-size: 10pt;
  line-height: 1.5;
  color: #555;
  margin: 0 0 18pt;
  max-width: 95%;
  font-weight: 400;
}
.subportada-pie {
  padding-top: 14pt;
  border-top: 0.5pt solid rgba(0, 0, 0, 0.10);
}
.subportada-pie-bloque {
  display: inline-block;
  width: 48%;
  vertical-align: top;
  margin-bottom: 8pt;
  line-height: 1.3;
}
.subportada-pie-label {
  font-size: 7pt;
  letter-spacing: 1.3pt;
  text-transform: uppercase;
  color: #888;
  font-weight: 600;
  margin: 0 0 2pt;
}
.subportada-pie-valor {
  font-size: 9.5pt;
  color: #1a1a1a;
  font-weight: 500;
}

/* Bloque de firma al final de cada apartado · refuerzo de estilos
   para que se imprimen correctamente en PDF (líneas y bordes visibles). */
.bloque-firma-apartado {
  margin-top: 40pt;
  page-break-inside: avoid;
  break-inside: avoid;
  padding-top: 18pt;
  border-top: 1pt solid #94a3b8;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.bloque-firma-lugar-fecha {
  font-style: italic;
  font-size: 10pt;
  text-align: right;
  margin: 0 0 32pt 0;
  color: #1e293b;
}
.bloque-firma-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* siempre 2 columnas para 2 firmantes típicos */
  gap: 24pt;
  justify-items: center;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* Si solo hay un firmante, centrarlo */
.bloque-firma-grid.uno {
  grid-template-columns: 1fr;
}
.caja-firma {
  text-align: center;
  font-size: 9.5pt;
  color: #1e293b;
  max-width: 260pt;
  width: 100%;
  page-break-inside: avoid;
  break-inside: avoid;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.caja-firma-rol {
  font-size: 9pt;
  text-transform: uppercase;
  letter-spacing: 0.5pt;
  color: #475569;
  font-weight: 600;
  margin-bottom: 8pt;
}
/* Caja delimitada para la firma manual · da espacio claro donde firmar */
.firma-img {
  display: block;
  max-width: 200pt;
  max-height: 70pt;
  margin: 6pt auto;
  border-bottom: 1pt solid #1e293b;
  padding-bottom: 2pt;
}
.firma-linea {
  display: block;
  height: 70pt;                          /* altura clara para firmar */
  margin: 6pt auto 0;
  width: 90%;
  border: 1pt dashed #94a3b8;
  border-bottom: 1.5pt solid #1e293b;    /* línea sólida abajo para firmar */
  background: transparent;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.caja-firma-fdo {
  font-weight: 700;
  margin-top: 6pt;
  font-size: 10pt;
}
.caja-firma-titulacion {
  font-size: 9pt;
  color: #475569;
  margin-top: 2pt;
}
.caja-firma-colegio {
  font-size: 8.5pt;
  color: #475569;
  margin-top: 1pt;
}

/* Hoja de firmas consolidada al final del PDF */
.hoja-firmas-final {
  page-break-before: always;
  break-before: page;
  padding: 30pt 20pt;
  min-height: 80vh;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.hoja-firmas-titulo {
  font-size: 22pt;
  margin: 0 0 30pt;
  text-align: center;
  border-bottom: 2pt solid #1e293b;
  padding-bottom: 10pt;
}
.hoja-firmas-lugar-fecha {
  font-style: italic;
  font-size: 12pt;
  text-align: center;
  margin-bottom: 50pt;
  color: #1e293b;
}
.hoja-firmas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50pt 32pt;
  justify-items: center;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.hoja-firmas-grid .caja-firma {
  max-width: 280pt;
}

/* ─────────────────────────────────────────────────────────────────────── */
/* Actualizaciones de normativa (idea #8)                                  */
/* ─────────────────────────────────────────────────────────────────────── */
#modal-aviso-actualizacion,
#modal-actualizaciones,
#modal-form-actualizacion { z-index: 100250; }

.aviso-act-version {
  font-size: 12px;
  color: var(--ink-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.aviso-act-titulo {
  font-size: 18px;
  margin: 0 0 12px;
}
.aviso-act-resumen {
  font-size: 15px;
  color: var(--ink, #e2e8f0);
  margin: 0 0 14px;
}
.aviso-act-detalle {
  font-size: 14px;
  color: var(--ink-muted, #cbd5e1);
  line-height: 1.55;
}
.aviso-act-detalle p { margin: 0 0 10px; }

.actualizaciones-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.actualizacion-item {
  padding: 14px 16px;
  background: rgba(148, 163, 184, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
}
.actualizacion-item.no-vista {
  background: rgba(var(--primary-rgb), 0.08);
  border-color: rgba(var(--primary-rgb), 0.4);
}
.actualizacion-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.actualizacion-version {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-muted, #94a3b8);
  font-weight: 600;
}
.actualizacion-fecha {
  font-size: 12px;
  color: var(--ink-muted, #94a3b8);
}
.actualizacion-nueva {
  background: var(--primary, #3b82f6);
  color: var(--on-primary);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.btn-act-eliminar {
  background: none;
  border: none;
  color: var(--ink-muted, #94a3b8);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  margin-left: auto;
  border-radius: 4px;
}
.btn-act-eliminar:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}
.actualizacion-titulo {
  font-size: 15px;
  margin: 0 0 6px;
}
.actualizacion-resumen {
  font-size: 13px;
  color: var(--ink, #e2e8f0);
  margin: 0 0 8px;
}
.actualizacion-detalle {
  font-size: 13px;
  color: var(--ink-muted, #cbd5e1);
  line-height: 1.5;
}
.actualizacion-detalle p { margin: 0 0 6px; }

#actualizaciones-admin-zona {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.25);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#actualizaciones-admin-zona #act_import_resultado {
  flex-basis: 100%;
  margin: 8px 0 0;
  white-space: pre-line;
  font-size: 0.85em;
}

.analisis-resumen { margin-bottom: 20px; }
.analisis-semaforo {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.analisis-celda {
  padding: 14px 12px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(148, 163, 184, 0.06);
}
.analisis-celda.rojo     { background: rgba(239, 68, 68, 0.12);   border-color: rgba(239, 68, 68, 0.4); }
.analisis-celda.amarillo { background: rgba(234, 179, 8, 0.12);   border-color: rgba(234, 179, 8, 0.4); }
.analisis-celda.azul     { background: rgba(59, 130, 246, 0.12);  border-color: rgba(59, 130, 246, 0.4); }
.analisis-celda.off      { opacity: 0.5; }
.analisis-celda-num {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--ink, #e2e8f0);
}
.analisis-celda-lbl {
  display: block;
  font-size: 12px;
  margin-top: 4px;
  color: var(--ink-muted, #94a3b8);
}
.analisis-ok {
  padding: 16px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 10px;
  color: #86efac;
  text-align: center;
  font-weight: 500;
}
.analisis-seccion { margin-bottom: 18px; }
.analisis-seccion h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-muted, #94a3b8);
  margin-bottom: 8px;
}
.analisis-seccion-rojo h3     { color: #fca5a5; }
.analisis-seccion-amarillo h3 { color: #fde047; }
.analisis-seccion-azul h3     { color: #93c5fd; }
.analisis-seccion ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.analisis-item {
  padding: 10px 14px;
  background: rgba(148, 163, 184, 0.06);
  border-radius: 8px;
  border-left: 3px solid rgba(148, 163, 184, 0.4);
  position: relative;
}
.analisis-seccion-rojo .analisis-item     { border-left-color: rgba(239, 68, 68, 0.7); }
.analisis-seccion-amarillo .analisis-item { border-left-color: rgba(234, 179, 8, 0.7); }
.analisis-seccion-azul .analisis-item     { border-left-color: rgba(59, 130, 246, 0.7); }
.analisis-item.clicable {
  cursor: pointer;
  transition: all 0.15s ease;
}
.analisis-item.clicable:hover {
  background: rgba(148, 163, 184, 0.14);
  transform: translateX(2px);
}
.analisis-item-cat {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ink-muted, #94a3b8);
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}
.analisis-item-msg {
  font-size: 14px;
  color: var(--ink, #e2e8f0);
}
.analisis-item-flecha {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted, #94a3b8);
  font-size: 18px;
}
.analisis-item.clicable:hover .analisis-item-flecha {
  color: var(--primary, #3b82f6);
}

/* Highlight temporal del campo al saltar desde el análisis */
.analisis-target-highlight {
  outline: 2px solid var(--primary, #3b82f6) !important;
  outline-offset: 2px !important;
  animation: analisis-pulse 1.2s ease-in-out 2;
}
@keyframes analisis-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(var(--primary-rgb), 0); }
}

.modal-dialog-narrow {
  max-width: 720px;
  width: 92%;
}

/* Tics de leído (✓ entregado, ✓✓ leído por todos) en mensajes propios */
.chat-msg-tics {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  color: var(--ink-muted, #94a3b8);
  font-weight: 600;
  letter-spacing: -2px;
  cursor: help;
}
.chat-msg-tics.leido {
  color: #38bdf8;
}

/* Botones de confirmación dentro del mensaje */
.chat-msg-confirm-zona {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(148, 163, 184, 0.25);
}
.chat-msg-confirm-btn {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(148, 163, 184, 0.1);
  color: var(--ink, #e2e8f0);
  cursor: pointer;
  transition: all 0.15s ease;
}
.chat-msg-confirm-btn:hover {
  background: rgba(var(--primary-rgb), 0.15);
  border-color: var(--primary, #3b82f6);
}
.chat-msg-confirm-btn.activo {
  background: var(--primary, #3b82f6);
  border-color: var(--primary, #3b82f6);
  color: var(--on-primary);
  font-weight: 500;
}
.chat-msg-confirmaciones {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
}
.chat-msg-confirmacion-pill {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #86efac;
  padding: 2px 8px;
  border-radius: 12px;
}
.chat-msg-confirmacion-pill.veo-luego {
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.3);
  color: #fde047;
}
.chat-msg-confirmacion-pill.no-puedo {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

/* Adjuntos dentro de un mensaje ya enviado */
.chat-msg-adjuntos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.chat-msg-adjuntos-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-msg-adj-img {
  max-width: 220px;
  max-height: 220px;
  border-radius: 8px;
  cursor: zoom-in;
  display: block;
  object-fit: cover;
}
.chat-msg-adj-archivo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.15);
  border-radius: 8px;
  font-size: 12px;
  max-width: 280px;
}
.chat-msg-row.mio .chat-msg-adj-archivo { background: rgba(255,255,255,0.18); }
.chat-msg-adj-archivo-icono { font-size: 20px; flex-shrink: 0; }
.chat-msg-adj-archivo-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.chat-msg-adj-archivo-nombre {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.chat-msg-adj-archivo-tamano { font-size: 10.5px; opacity: 0.8; }
.chat-msg-adj-archivo-acciones {
  display: flex; gap: 4px; flex-shrink: 0;
}
.chat-msg-adj-archivo-acciones a,
.chat-msg-adj-archivo-acciones button {
  background: none;
  border: none;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  padding: 2px 4px;
  opacity: 0.85;
}
.chat-msg-adj-archivo-acciones a:hover,
.chat-msg-adj-archivo-acciones button:hover { opacity: 1; }

/* Modal de previsualización de imagen */
.modal-img-preview {
  position: fixed;
  inset: 0;
  z-index: 100300;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-img-preview.hidden { display: none; }
.modal-img-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.92);
  cursor: zoom-out;
}
.modal-img-preview img {
  position: relative;
  max-width: 95vw;
  max-height: 92vh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}
.modal-img-cerrar {
  position: absolute;
  top: 16px; right: 20px;
  background: rgba(0,0,0,0.5);
  border: none;
  color: white;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  z-index: 1;
}
.modal-img-descargar {
  position: absolute;
  top: 16px; left: 20px;
  background: var(--primary);
  color: var(--on-primary);
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
  z-index: 1;
}

/* ============================================================================
   CHAT · Modal grande con sidebar de canales y vista de mensajes
   ============================================================================ */
.modal-chat {
  position: fixed;
  inset: 0;
  z-index: 100100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-chat.hidden { display: none; }
.modal-chat-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
.modal-chat-dialog {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: min(1100px, 96vw);
  height: min(85vh, 800px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.modal-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-chat-header h2 { margin: 0; font-size: 16px; font-weight: 600; }
.modal-chat-body {
  flex: 1;
  display: flex;
  min-height: 0;
}
.modal-chat-sidebar {
  width: 260px;
  border-right: 1px solid var(--border);
  background: var(--bg);
  overflow-y: auto;
  padding: 12px 8px;
}
.modal-chat-sidebar-grupo { margin-bottom: 18px; }
.modal-chat-sidebar-titulo {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  padding: 4px 10px;
  margin-bottom: 4px;
}
.modal-chat-canal {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
}
.modal-chat-canal:hover { background: var(--bg-elev); }
.modal-chat-canal.active {
  background: var(--primary);
  color: var(--on-primary);
}
.modal-chat-canal-icono { font-size: 14px; }
.modal-chat-canal-nombre {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-chat-canal-badge {
  background: var(--danger);
  color: white;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 700;
  min-width: 16px;
  text-align: center;
}
.modal-chat-canal-badge.hidden { display: none; }
.modal-chat-canal.active .modal-chat-canal-badge { background: rgba(255,255,255,0.3); }

.modal-chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.modal-chat-canal-cab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 14px;
}
.modal-chat-mensajes {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-chat-input-zona {
  border-top: 1px solid var(--border);
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.modal-chat-input-zona.hidden { display: none; }
.modal-chat-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--ink);
  font-size: 13.5px;
  font-family: inherit;
  resize: vertical;
  min-height: 42px;
  max-height: 200px;
  width: 100%;
}
.modal-chat-input:focus { outline: none; border-color: var(--primary); }
.modal-chat-input-zona .btn { height: 42px; }

/* Burbujas de mensaje */
.chat-msg-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.chat-msg-row.mio { flex-direction: row-reverse; }
.chat-msg-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.chat-msg-burbuja {
  background: var(--bg-elev);
  padding: 8px 12px;
  border-radius: 12px;
  max-width: 70%;
  font-size: 13.5px;
  line-height: 1.45;
  word-wrap: break-word;
  position: relative;
}
.chat-msg-row.mio .chat-msg-burbuja {
  background: var(--primary);
  color: var(--on-primary);
}
.chat-msg-cabecera {
  display: flex;
  gap: 8px;
  margin-bottom: 2px;
  font-size: 11px;
  color: var(--ink-muted);
}
.chat-msg-autor { font-weight: 600; }
.chat-msg-row.mio .chat-msg-cabecera { color: rgba(255,255,255,0.75); }
.chat-msg-fecha { opacity: 0.8; }
.chat-msg-texto { white-space: pre-wrap; }
.chat-msg-editado {
  font-size: 10.5px;
  opacity: 0.65;
  margin-left: 6px;
  font-style: italic;
}
.chat-msg-borrado { opacity: 0.5; font-style: italic; }
.chat-msg-acciones {
  position: absolute;
  top: -10px;
  right: 8px;
  display: none;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 4px;
  gap: 2px;
}
.chat-msg-row:hover .chat-msg-acciones { display: flex; }
.chat-msg-acciones button {
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 11px;
  padding: 3px 6px;
  cursor: pointer;
  border-radius: 4px;
}
.chat-msg-acciones button:hover { background: var(--bg-elev); color: var(--ink); }
.chat-msg-fecha-separador {
  text-align: center;
  font-size: 11px;
  color: var(--ink-muted);
  margin: 12px 0 4px;
}
.chat-vacio {
  text-align: center;
  color: var(--ink-muted);
  padding: 40px 20px;
  font-size: 13px;
}

/* Pestaña Chat dentro del modal de proyecto */
.proy-chat-wrap {
  display: flex;
  flex-direction: column;
  height: min(400px, 55vh);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}
.proy-chat-mensajes {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.proy-chat-input-zona {
  border-top: 1px solid var(--border);
  padding: 10px;
  display: flex;
  gap: 8px;
}
.proy-chat-input {
  flex: 1;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 36px;
}
@media (max-width: 720px) {
  .modal-chat-dialog { height: 100vh; border-radius: 0; width: 100vw; }
  .modal-chat-sidebar { width: 180px; }
}

/* ============================================================================
   MODAL ALARMA · "¡Es la hora!" cuando llega un recordatorio
   ============================================================================ */
.modal-alarma {
  position: fixed;
  inset: 0;
  z-index: 100200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-alarma.hidden { display: none; }
.modal-alarma-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
}
.modal-alarma-dialog {
  position: relative;
  background: var(--bg-elev);
  border: 2px solid var(--warning);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 4px color-mix(in srgb, var(--warning) 25%, transparent);
  max-width: 480px;
  width: 100%;
  overflow: hidden;
  animation: alarmaIn 0.3s ease-out, alarmaPulse 1.5s ease-in-out 0.3s infinite alternate;
}
@keyframes alarmaIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes alarmaPulse {
  from { box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 4px color-mix(in srgb, var(--warning) 25%, transparent); }
  to   { box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 10px color-mix(in srgb, var(--warning) 12%, transparent); }
}
.modal-alarma-cabecera {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  background: color-mix(in srgb, var(--warning) 18%, var(--bg-elev));
  border-bottom: 1px solid var(--border);
}
.modal-alarma-icono {
  font-size: 36px;
  animation: alarmaShake 0.5s ease-in-out infinite alternate;
}
@keyframes alarmaShake {
  from { transform: rotate(-8deg); }
  to   { transform: rotate(8deg); }
}
.modal-alarma-cabecera h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.modal-alarma-cuerpo {
  padding: 22px 24px 12px;
}
.modal-alarma-tipo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.modal-alarma-hora {
  margin-left: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
}
.modal-alarma-texto {
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 14px;
}
.modal-alarma-meta {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 4px;
}
.modal-alarma-meta.hidden { display: none; }
.modal-alarma-acciones {
  padding: 14px 24px 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.modal-alarma-acciones .btn { flex: 1 1 auto; min-height: 40px; }
.modal-alarma-posponer-wrap { position: relative; flex: 1 1 auto; }
.modal-alarma-posponer-wrap > .btn { width: 100%; }
.modal-alarma-posponer-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  padding: 6px;
  z-index: 10;
}
.modal-alarma-posponer-menu.hidden { display: none; }
.modal-alarma-posponer-menu button {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--ink);
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
}
.modal-alarma-posponer-menu button:hover { background: var(--bg-elev); }

/* ============================================================================
   BANNER · Aviso de notificaciones del navegador desactivadas
   ============================================================================ */
.banner-notif {
  background: color-mix(in srgb, var(--primary) 12%, var(--bg));
  border-bottom: 1px solid var(--primary);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink);
}
.banner-notif.hidden { display: none; }
.banner-notif-icono { font-size: 18px; flex-shrink: 0; }
.banner-notif-texto { flex: 1; min-width: 0; }
.banner-notif-acciones {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .banner-notif { flex-wrap: wrap; padding: 10px 16px; }
  .banner-notif-texto { font-size: 12px; }
}

/* ============================================================================
   BUSCADOR GLOBAL · Botón trigger en el topbar + modal Ctrl+K
   ============================================================================ */

/* Trigger en el topbar — caja tipo Linear/GitHub */
.buscador-trigger {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--ink-muted);
  border-radius: 8px;
  height: 32px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  min-width: 220px;
  justify-content: flex-start;
}
.buscador-trigger:hover {
  background: var(--bg-elev-2);
  color: var(--ink);
  border-color: var(--ink-muted);
}
.buscador-trigger-icono { font-size: 13px; }
.buscador-trigger-texto { flex: 1; text-align: left; }
.buscador-trigger-kbd {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--ink-muted);
  letter-spacing: 0.5px;
}
@media (max-width: 980px) {
  .buscador-trigger { min-width: auto; padding: 0 10px; }
}

/* Modal del buscador */
.modal-buscador {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.modal-buscador.hidden { display: none; }
.modal-buscador-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.modal-buscador-dialog {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: min(640px, 92vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  overflow: hidden;
}
.modal-buscador-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-buscador-icono {
  font-size: 16px;
  color: var(--ink-muted);
}
.modal-buscador-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-size: 15px;
  padding: 4px 0;
}
.modal-buscador-input::placeholder {
  color: var(--ink-muted);
}
.modal-buscador-kbd {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--ink-muted);
  cursor: pointer;
}
.modal-buscador-resultados {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.busc-grupo-titulo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 10px 12px 4px;
}
.busc-grupo-titulo .busc-grupo-contador {
  font-weight: 400;
  margin-left: 6px;
}
.busc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink);
  user-select: none;
}
.busc-row:hover { background: var(--bg-elev); }
.busc-row.selected {
  background: var(--primary);
  color: var(--on-primary);
}
.busc-row.selected .busc-row-sub,
.busc-row.selected .busc-row-meta { color: rgba(255,255,255,0.85); }
.busc-row-icono {
  font-size: 16px;
  width: 22px;
  text-align: center;
}
.busc-row-body {
  flex: 1;
  min-width: 0;
}
.busc-row-titulo {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.busc-row-sub {
  font-size: 12px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.busc-row-meta {
  font-size: 11px;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.busc-row-tag {
  font-size: 10px;
  background: var(--warning);
  color: white;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.busc-row.selected .busc-row-tag {
  background: rgba(255,255,255,0.25);
}
.busc-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
}
.modal-buscador-footer {
  border-top: 1px solid var(--border);
  padding: 8px 14px;
  display: flex;
  gap: 18px;
  font-size: 11px;
  color: var(--ink-muted);
}
.modal-buscador-footer kbd {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 5px;
  margin-right: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
}

/* ============================================================================
   ============================================================================
   RESPONSIVE MÓVIL · Ajustes específicos para pantallas pequeñas
   ----------------------------------------------------------------------------
   Sólo se aplican en ventanas estrechas. La versión PC queda intacta.
   Breakpoints: 980px (tablet) · 720px (móvil) · 480px (móvil pequeño)
   ============================================================================
   ============================================================================ */

/* ----- TABLET (≤ 980 px) ------------------------------------------------- */
@media (max-width: 980px) {
  /* Topbar · ocultar tipos de íconos secundarios para no saturar */
  .buscador-trigger-texto { display: none; }
  .buscador-trigger-kbd   { display: none; }
  .buscador-trigger { min-width: 36px; padding: 0 10px; gap: 0; }
}

/* ----- MÓVIL (≤ 720 px) -------------------------------------------------- */
@media (max-width: 720px) {

  /* --- Topbar más compacto --- */
  .topbar { padding: 0; }
  .topbar-inner {
    display: flex;
    flex-wrap: wrap;
    padding: 8px 10px;
    gap: 8px;
    align-items: center;
  }
  .brand {
    flex-shrink: 0;
    order: 1;
  }
  .brand-name { display: none; }
  .brand-mark { width: 28px; height: 28px; }
  .user-block {
    order: 2;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    flex: 1;
    justify-content: flex-end;
  }
  .main-nav {
    order: 3;
    width: 100%;
    flex-basis: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    gap: 4px;
    border-top: 1px solid var(--border);
    padding-top: 6px;
    margin-top: 4px;
    display: flex;
    flex-wrap: nowrap;
  }
  .main-nav-link {
    padding: 8px 14px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .user-info, .user-name, .user-email { display: none !important; }
  #logout-btn {
    padding: 6px 10px;
    font-size: 11px;
    flex-shrink: 0;
  }
  .btn-tema {
    width: 34px;
    height: 34px;
    font-size: 14px;
    flex-shrink: 0;
  }
  /* Dropdowns de notificaciones/entregas se ajustan al ancho de la ventana */
  .entregas-dropdown {
    right: -10px;
    width: calc(100vw - 24px);
    max-width: 380px;
  }

  /* --- Modal de proyecto a pantalla completa --- */
  .modal-dialog {
    max-width: 100vw;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }
  .modal-header {
    padding: 12px 14px;
    flex-wrap: wrap;
  }
  .modal-header h2 {
    font-size: 15px;
  }
  .modal-body {
    padding: 14px 14px 100px; /* espacio extra abajo para que no tape el footer */
  }
  .modal-footer {
    padding: 8px 12px;
    gap: 6px;
    flex-wrap: wrap;
    position: sticky;
    bottom: 0;
    background: var(--bg-elev);
    border-top: 1px solid var(--border);
  }
  .modal-footer .btn {
    padding: 8px 12px;
    font-size: 13px;
    min-height: 40px;
  }

  /* Tabs internas del modal proyecto con scroll horizontal */
  .proy-tabs {
    overflow-x: auto;
    scrollbar-width: thin;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .proy-tab {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 13px;
  }

  /* Form-row siempre a 1 columna en móvil */
  .form-row { grid-template-columns: 1fr !important; gap: 10px !important; }
  .form-group { width: 100%; }
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 16px; /* evita zoom auto en iOS */ }

  /* --- Sub-modal Memoria a pantalla completa --- */
  .modal-memoria-header {
    flex-wrap: wrap;
    padding: 8px 10px;
    gap: 6px;
  }
  .modal-memoria-header h2 {
    font-size: 13px;
    order: 4;
    width: 100%;
    text-align: center;
    margin-top: 4px;
  }
  #btn-memoria-volver,
  #btn-memoria-guardar {
    font-size: 12px;
    padding: 6px 10px;
  }
  .modal-memoria-subtabs {
    overflow-x: auto;
    padding: 6px 10px 0;
  }
  .memoria-subtab {
    font-size: 12.5px;
    padding: 6px 12px;
    flex-shrink: 0;
  }
  .modal-memoria-contenido { padding: 14px 12px; }

  /* --- Modal del chat · estilo WhatsApp móvil: o lista o conversación --- */
  .modal-chat-dialog {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .modal-chat-header { padding: 10px 14px; }
  .modal-chat-header h2 { font-size: 14px; }
  .modal-chat-body {
    flex-direction: row;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .modal-chat-sidebar {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    border-right: none;
    overflow-y: auto;
    padding: 10px;
  }
  .modal-chat-sidebar-grupo { margin-bottom: 14px; }
  .modal-chat-sidebar-titulo { font-size: 11px; padding: 4px 10px; }
  .modal-chat-canal {
    padding: 10px 12px;
    font-size: 14px;
    min-height: 44px;
  }
  /* Por defecto en móvil, el main del chat está oculto (solo se ve sidebar) */
  .modal-chat-main {
    display: none;
    width: 100%;
    height: 100%;
  }
  /* Cuando hay canal activo, se invierten: sidebar oculta, main visible */
  .modal-chat-dialog.canal-activo .modal-chat-sidebar { display: none; }
  .modal-chat-dialog.canal-activo .modal-chat-main {
    display: flex;
    flex-direction: column;
  }
  /* Botón "←" para volver a canales · solo se ve en móvil con canal activo */
  .chat-volver-canales {
    display: none;
    background: none;
    border: none;
    color: var(--ink);
    font-size: 22px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
  }
  .chat-volver-canales:hover { background: var(--bg-elev); }
  .modal-chat-dialog.canal-activo .chat-volver-canales {
    display: inline-flex;
  }
  .modal-chat-canal-cab {
    padding: 10px 14px;
    gap: 8px;
  }
  .modal-chat-mensajes {
    padding: 12px;
  }
  .chat-msg-burbuja {
    max-width: 85%;
    font-size: 14px;
  }
  .modal-chat-input {
    font-size: 16px;     /* evita zoom auto en iOS */
    min-height: 44px;
  }
  .modal-chat-input-zona { padding: 10px; }
  .chat-input-fila .btn { min-height: 44px; padding: 8px 14px; }
  /* Adjuntos pendientes en móvil */
  .chat-adjuntos-pendientes { padding: 6px 10px; }
  .adj-pendiente { font-size: 11px; }
  .adj-pendiente img { width: 32px; height: 32px; }

  /* --- Panel de notas: ya casi full-width --- */
  .panel-notas-dialog {
    width: 100vw;
    max-width: 100vw;
  }

  /* --- Filtros + buscadores · 1 columna --- */
  .filters {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0;
  }
  .filters .input,
  .filters .select,
  .filters .input-clearable {
    width: 100%;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    box-sizing: border-box;
  }
  .filters .input-clearable {
    position: relative;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  .filters .input-clearable .input { width: 100%; }
  /* Texto dentro de inputs siempre cabe vertical */
  .filters input,
  .filters select { line-height: normal; }

  /* --- Tabla principal · convertir filas a tarjetas --- */
  /* v536 · CORREGIDO: estas reglas apuntaban a #tabla, un id que NO existe en
     el HTML (la tabla de proyectos es #tabla-proyectos). Todo este bloque era
     código muerto y por eso en el móvil la tabla salía comprimida con las
     cabeceras en vertical. El JS ya emite data-label en cada celda. */
  #tabla-proyectos {
    border: none;
  }
  #tabla-proyectos thead { display: none; }
  #tabla-proyectos tbody { display: block; }
  #tabla-proyectos tr {
    display: block;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  #tabla-proyectos td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    padding: 3px 0;
    font-size: 13px;
    gap: 12px;
    /* El texto largo (nombre, cliente) se ajusta en vez de forzar scroll. */
    text-align: right;
    overflow-wrap: anywhere;
  }
  #tabla-proyectos td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--ink-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    text-align: left;
  }
  /* Celdas vacías: sin contenido no tiene sentido mostrar la etiqueta. */
  #tabla-proyectos td:empty { display: none; }
  #tabla-proyectos td:first-child::before { display: none; }
  #tabla-proyectos td:first-child {
    font-weight: 700;
    font-size: 15px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
    text-align: left;
    justify-content: flex-start;
    gap: 8px;
  }

  /* Otras tablas (clientes, técnicos, etc.) con scroll horizontal */
  #tabla-clientes, #tabla-constructoras, #tabla-agentes,
  #tabla-tecnicos, #tabla-bloques {
    min-width: 600px;
  }
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- Dashboard · KPIs y gráficos --- */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi { padding: 10px; }
  .kpi-value { font-size: 22px !important; }
  .kpi-label { font-size: 10px; }
  .dash-grafico-fila { grid-template-columns: 1fr !important; }
  .dash-chart-wrap { height: 240px; }

  /* --- Calendario --- */
  .cal-toolbar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
  }
  .cal-leyenda { font-size: 10px; gap: 4px; }

  /* --- Trámites: encabezados más compactos --- */
  .tramites-h3 { font-size: 13px; }
  .tramites-asignado-row { flex-wrap: wrap; }
  .tramites-asignado-rol-input { width: 100%; }

  /* --- Botones siempre con altura mínima táctil --- */
  .btn { min-height: 40px; padding: 8px 14px; }
  .btn-sm { min-height: 32px; padding: 5px 10px; }

  /* --- View tabs (Tabla/Kanban/Equipo/Dashboard/Calendario) con scroll --- */
  .view-tabs {
    overflow-x: auto;
    scrollbar-width: thin;
    flex-wrap: nowrap;
  }
  .view-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* --- Sub-tabs de Maestros y Ajustes con scroll --- */
  .view-tabs + .filters,
  .sub-tabs-wrap { overflow-x: auto; }
  .sub-tab { white-space: nowrap; flex-shrink: 0; }

  /* --- Page header · responsable encima del botón --- */
  .page-header {
    flex-direction: column;
    align-items: stretch;
  }
  .page-header-right { width: 100%; }
  .page-header-right .btn { width: 100%; }

  /* --- Toasts más estrechos --- */
  #toast-container {
    right: 10px;
    bottom: 10px;
    left: 10px;
  }
  .toast { max-width: 100%; }
}

/* ----- MÓVIL PEQUEÑO (≤ 480 px) ------------------------------------------ */
@media (max-width: 480px) {
  .modal-memoria-header {
    padding: 6px 8px;
  }
  #btn-memoria-volver { font-size: 11px; padding: 5px 8px; }
  #btn-memoria-guardar { font-size: 11px; padding: 5px 8px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .filtros-rapidos { flex-wrap: wrap; }
}
/* ============================================================================
   Modal Importar de HULC / CYPETHERM / CERMA
   ============================================================================ */
.import-hulc-dropzone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin: 12px 0 20px;
}
.import-hulc-dropzone:hover,
.import-hulc-dropzone.dragover {
  background: rgba(var(--primary-rgb), 0.08);
  border-color: var(--primary);
}
.import-hulc-dropzone-content { pointer-events: none; }
.import-hulc-icono { font-size: 36px; margin-bottom: 8px; }
.import-hulc-dropzone p { margin: 4px 0; }

.import-hulc-acciones {
  display: flex; gap: 8px; margin: 8px 0 12px;
}

.import-hulc-tabla {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.import-hulc-tabla th,
.import-hulc-tabla td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 13px;
}
.import-hulc-tabla th {
  background: var(--bg-elev, #1e293b);
  color: var(--ink-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}
.import-hulc-tabla tr.grupo-header td {
  background: rgba(var(--primary-rgb), 0.10);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  color: var(--ink);
}
.import-hulc-tabla input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}
.import-hulc-tabla .col-check { width: 36px; text-align: center; }
.import-hulc-tabla .col-actual { color: var(--ink-muted); }
.import-hulc-tabla .col-nuevo { color: var(--ink); font-weight: 500; }
.import-hulc-tabla tr.fila-cambio td.col-nuevo { color: var(--warning, #f59e0b); font-weight: 600; }
.import-hulc-tabla tr.fila-igual { opacity: 0.55; }

/* v416 · 3 estados visuales: nuevo / conflicto / igual */
.import-hulc-tabla tr.fila-nuevo {
  background: rgba(34, 197, 94, 0.06);
  border-left: 3px solid rgba(34, 197, 94, 0.75);
}
.import-hulc-tabla tr.fila-nuevo td.col-nuevo {
  color: rgba(34, 197, 94, 0.95);
  font-weight: 600;
}
.import-hulc-tabla tr.fila-conflicto {
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid rgba(245, 158, 11, 0.85);
}
.import-hulc-tabla tr.fila-conflicto td.col-actual {
  color: rgba(245, 158, 11, 0.95);
  font-weight: 500;
}
.import-hulc-tabla tr.fila-conflicto td.col-nuevo {
  color: rgba(245, 158, 11, 0.95);
  font-weight: 600;
}
/* Badges visuales del estado en cada fila */
.badge-estado-import {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 3px;
  vertical-align: middle;
}
.badge-estado-import.nuevo {
  background: rgba(34, 197, 94, 0.15);
  color: rgba(34, 197, 94, 0.95);
  border: 1px solid rgba(34, 197, 94, 0.4);
}
.badge-estado-import.conflicto {
  background: rgba(245, 158, 11, 0.15);
  color: rgba(245, 158, 11, 0.95);
  border: 1px solid rgba(245, 158, 11, 0.5);
}
.badge-estado-import.igual {
  background: rgba(148, 163, 184, 0.15);
  color: var(--ink-muted);
  border: 1px solid rgba(148, 163, 184, 0.3);
}
/* v419 · Badge "DESCARTADO ANTES" · campo descartado en imports previos */
.badge-estado-import.descartado {
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), 0.4);
}

/* ============================================================================
   v428 · Buscador en memoria · input + dropdown de resultados estilo Spotlight
   ============================================================================ */
.memoria-buscador-wrap {
  position: relative;
  flex: 1;
  max-width: 360px;
  margin-left: auto;
  margin-right: 12px;
}
#memoria-buscador {
  width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 6px;
  background: rgba(127, 127, 127, 0.08);
  color: var(--ink);
  font-size: 13px;
  transition: all 0.15s;
}
#memoria-buscador:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.6);
  background: rgba(var(--primary-rgb), 0.06);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}
.memoria-buscador-resultados {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-card, #1a1d21);
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
  z-index: 100200;
  padding: 4px;
}
.busqueda-resultado {
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.1s;
  border: 1px solid transparent;
}
.busqueda-resultado:hover,
.busqueda-resultado.active {
  background: rgba(var(--primary-rgb), 0.18);
  border-color: rgba(var(--primary-rgb), 0.4);
}
.busqueda-resultado-cabecera {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--ink-muted);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.busqueda-resultado-schema {
  font-weight: 600;
  color: var(--primary);
}
.busqueda-resultado-seccion {
  font-weight: 400;
}
.busqueda-resultado-label {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.35;
}
.busqueda-resultado-label mark {
  background: rgba(245, 158, 11, 0.35);
  color: var(--ink);
  padding: 0 2px;
  border-radius: 2px;
}
.busqueda-resultado-valor {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-top: 2px;
  font-style: italic;
}
.busqueda-vacio {
  padding: 16px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
}

/* Destacado del campo al saltar desde resultados */
@keyframes _busquedaPulso {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); }
  60%  { box-shadow: 0 0 0 14px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
.busqueda-destacado {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.7) !important;
  border-radius: 6px;
  animation: _busquedaPulso 1.2s ease-out 2;
  transition: background 0.3s;
}

/* v427b · Icono SVG silueta de España (consultor de municipios) */
.icono-espana {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.icono-espana svg {
  display: block;
}

/* v427 · Botón de mapa de zonificación junto a cada zona del consultor */
.btn-mapa-zona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  margin-left: 6px;
  padding: 0;
  background: rgba(127, 127, 127, 0.1);
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  transition: all 0.15s;
  vertical-align: middle;
}
.btn-mapa-zona:hover {
  background: rgba(var(--primary-rgb), 0.18);
  border-color: rgba(var(--primary-rgb), 0.5);
  transform: scale(1.1);
}

/* v427 · Modal del mapa de zonificación */
#modal-mapa-zona {
  z-index: 200100;
}
#modal-mapa-zona .modal-mapa-dialog {
  width: min(960px, 95vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
#modal-mapa-zona .modal-body {
  overflow-y: auto;
  text-align: center;
}
.mapa-img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 6px;
  margin: 0 auto;
  display: block;
}
.mapa-loading,
.mapa-placeholder {
  padding: 60px 20px;
  text-align: center;
  background: rgba(127, 127, 127, 0.06);
  border-radius: 8px;
  color: var(--ink);
}
.mapa-placeholder code {
  background: rgba(127, 127, 127, 0.15);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}
#modal-mapa-zona .meta {
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--ink-muted);
  font-style: italic;
}
/* Leyenda bajo los botones */
.import-hulc-leyenda {
  margin: 8px 0 12px 0;
  font-size: 12px;
  line-height: 1.5;
}
.import-hulc-leyenda .lg-nuevo     { color: rgba(34, 197, 94, 0.95); font-weight: 600; }
.import-hulc-leyenda .lg-conflicto { color: rgba(245, 158, 11, 0.95); font-weight: 600; }
.import-hulc-leyenda .lg-igual     { color: var(--ink-muted); font-weight: 600; }

/* v417 · Conflicto · vista [Actual] → [Nuevo] con flecha visible */
.conflicto-diff {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12.5px;
  line-height: 1.4;
}
.conflicto-diff .diff-actual {
  color: var(--ink-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(245, 158, 11, 0.5);
  text-decoration-thickness: 1.5px;
}
.conflicto-diff .diff-flecha {
  color: rgba(245, 158, 11, 0.95);
  font-weight: 700;
  font-size: 14px;
}
.conflicto-diff .diff-nuevo {
  color: rgba(245, 158, 11, 0.95);
  font-weight: 600;
}

/* v418 · Modal "Resumen de cambios" antes de aplicar */
#modal-import-resumen {
  z-index: 200100; /* por encima de #modal-import-hulc (200000) */
}
#modal-import-resumen .modal-dialog {
  width: min(720px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
#modal-import-resumen .modal-body {
  overflow-y: auto;
}
.resumen-import-titulo h3 { margin: 0 0 4px 0; }
.resumen-import-titulo .meta { margin: 0 0 16px 0; font-size: 12.5px; }
.resumen-import-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.stat-import {
  text-align: center;
  padding: 14px 8px;
  border-radius: 8px;
  border: 1px solid var(--border, #e3e6ea);
  background: var(--bg-soft, #f6f7f9);
}
.stat-import .stat-num {
  display: block;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}
.stat-import .stat-lbl {
  display: block;
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 4px;
  letter-spacing: 0.3px;
}
.stat-import.nuevos      { border-color: rgba(34, 197, 94, 0.5); }
.stat-import.nuevos .stat-num    { color: rgba(34, 197, 94, 0.95); }
.stat-import.conflictos  { border-color: rgba(245, 158, 11, 0.5); }
.stat-import.conflictos .stat-num { color: rgba(245, 158, 11, 0.95); }
.stat-import.descartados { border-color: rgba(148, 163, 184, 0.5); }
.stat-import.descartados .stat-num { color: var(--ink-muted); }
.resumen-import-detalles {
  margin: 0 0 10px 0;
  padding: 10px 14px;
  /* v420 · Usar fondo translúcido compatible con modo oscuro */
  background: rgba(127, 127, 127, 0.08);
  color: var(--ink);
  border-radius: 6px;
  border-left: 3px solid var(--border, #e3e6ea);
}
.resumen-import-detalles.conflictos { border-left-color: rgba(245, 158, 11, 0.85); }
.resumen-import-detalles.descartados { border-left-color: rgba(148, 163, 184, 0.7); }
.resumen-import-detalles summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  padding: 2px 0;
  color: var(--ink);
}
.resumen-import-detalles ul {
  margin: 8px 0 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--ink);
}
.resumen-import-detalles li {
  padding: 2px 0;
  color: var(--ink);
}
.resumen-import-detalles li strong { color: var(--ink); }
.resumen-import-detalles .diff-actual {
  color: var(--ink-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(245, 158, 11, 0.6);
}
.resumen-import-detalles .diff-nuevo { color: rgba(245, 158, 11, 1); font-weight: 600; }
/* v420 · Stats grandes también con fondo translúcido */
.stat-import {
  background: rgba(127, 127, 127, 0.08);
  color: var(--ink);
}
.stat-import .stat-lbl { color: var(--ink-muted); }
.resumen-import-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e3e6ea);
}

/* v409 · Botones de selección en la dropzone HULC */
.import-hulc-botones {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
  flex-wrap: wrap;
}
.import-hulc-botones .btn {
  pointer-events: auto;
}

/* v408 · Banner de archivos analizados (modal importar HULC) · v420 colores adaptables */
.import-hulc-archivos {
  background: rgba(127, 127, 127, 0.08);
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 18px 0 0 0; /* v420 · al final, no al principio */
  font-size: 13px;
  color: var(--ink);
}
.import-hulc-archivos strong { display: block; margin-bottom: 6px; color: var(--ink); }
.import-hulc-archivos ul { list-style: none; padding: 0; margin: 0; }
.import-hulc-archivos li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 2px 0;
  line-height: 1.45;
}
.import-hulc-archivos li code {
  font-size: 12px;
  background: rgba(127, 127, 127, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border, #e3e6ea);
  color: var(--ink);
}
.import-hulc-archivos li.ok { color: var(--ink); }
.import-hulc-archivos li.skip { color: var(--ink-muted); opacity: 0.7; }
.import-hulc-archivos li .meta { font-size: 11.5px; color: var(--ink-muted); }

/* Modal Importar HULC · debe ir SIEMPRE por encima del modal de memoria
   (que tiene z-index 100120). */
#modal-import-hulc {
  z-index: 200000;
}

/* ============================================================================
   MEMORIA · Banner indicador del perfil activo (tipo de proyecto)
   ============================================================================ */
#memoria-perfil-banner:empty { display: none; }
.memoria-perfil-info {
  padding: 8px 20px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 14%, var(--bg-elev)) 0%, var(--bg-elev) 80%);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  font-size: 12.5px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.memoria-perfil-info strong { color: var(--primary); font-weight: 700; }
.memoria-perfil-info .memoria-perfil-edit {
  font-size: 11.5px;
  color: var(--ink-muted);
  font-style: italic;
}
.memoria-perfil-info-warn {
  background: linear-gradient(90deg, color-mix(in srgb, var(--warning) 16%, var(--bg-elev)) 0%, var(--bg-elev) 80%);
  border-left-color: var(--warning);
}
.memoria-perfil-info-warn strong { color: var(--warning); }

/* Avisos cruzados (validaciones de coherencia) */
.memoria-avisos-cruzados {
  padding: 10px 20px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--warning) 14%, var(--bg-elev)) 0%, var(--bg-elev) 80%);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  font-size: 12.5px;
  color: var(--ink);
}
.memoria-avisos-titulo {
  font-weight: 700;
  color: var(--warning);
  margin-bottom: 4px;
}
.memoria-avisos-cruzados ul {
  margin: 0;
  padding-left: 22px;
}
.memoria-avisos-cruzados li {
  margin: 2px 0;
}
.memoria-avisos-cruzados strong {
  color: var(--ink);
  font-weight: 600;
}

/* ============================================================================
   MEMORIA v2 · REDISEÑO VISUAL MODERNO (2026)
   ----------------------------------------------------------------------------
   Aplica sobre los estilos base de .mem-grupo, .mem-subgrupo-header, etc. para
   darles un aire más moderno, organizado y elegante. Sin tocar JS ni lógica.
   ============================================================================ */
.modal-memoria-contenido {
  background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 95%, var(--primary) 5%) 100%);
}

/* --- Tarjetas de sección con elevación y bordes suaves --- */
.mem-grupo {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 28px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s, transform 0.2s;
}
.mem-grupo:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.10);
}

/* Header de sección · sticky + degradado sutil del color del estado --- */
.mem-grupo-header {
  background: linear-gradient(180deg, var(--bg-elev) 0%, color-mix(in srgb, var(--bg-elev) 92%, var(--bg) 8%) 100%);
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(8px);
}
.mem-grupo-titulo {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Antes había un border-left de 4px. Ahora una franja vertical más elegante con
   gradient + animación. */
.mem-grupo-empty    .mem-grupo-header { border-left: 4px solid; border-image: linear-gradient(180deg, var(--danger) 0%, color-mix(in srgb, var(--danger) 50%, transparent) 100%) 1; }
.mem-grupo-partial  .mem-grupo-header { border-left: 4px solid; border-image: linear-gradient(180deg, var(--warning) 0%, color-mix(in srgb, var(--warning) 50%, transparent) 100%) 1; }
.mem-grupo-complete .mem-grupo-header { border-left: 4px solid; border-image: linear-gradient(180deg, var(--success) 0%, color-mix(in srgb, var(--success) 50%, transparent) 100%) 1; }

.mem-grupo-progreso {
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mem-grupo-progreso.empty    { background: color-mix(in srgb, var(--danger)  16%, transparent); color: var(--danger);  box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent); }
.mem-grupo-progreso.partial  { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); box-shadow: 0 0 0 1px color-mix(in srgb, var(--warning) 30%, transparent); }
.mem-grupo-progreso.complete { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); box-shadow: 0 0 0 1px color-mix(in srgb, var(--success) 30%, transparent); }

.mem-grupo-cuerpo {
  padding: 20px 22px 22px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

/* --- Subgrupos · banner con icono lateral y degradado --- */
.mem-subgrupo-header {
  margin: 18px 0 4px;
  padding: 10px 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 12%, transparent) 0%, transparent 80%);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  grid-column: 1 / -1;
}
.mem-subgrupo-header .mem-subgrupo-titulo {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.mem-subgrupo-header:first-child { margin-top: 0; }

/* --- Campos individuales · borde lateral más sutil + hover --- */
.mem-campo {
  position: relative;
  padding: 4px 0 4px 14px;
  border-left: 3px solid transparent;
  border-radius: 4px;
  transition: border-color 0.2s, background 0.2s, padding 0.2s;
}
.mem-campo:hover { background: color-mix(in srgb, var(--bg-elev) 50%, transparent); }
.mem-campo-empty    { border-left-color: var(--danger);  }
.mem-campo-default  { border-left-color: var(--warning); }
.mem-campo-filled   { border-left-color: var(--success); }
.mem-campo-neutral  { border-left-color: color-mix(in srgb, var(--ink-muted) 50%, transparent); }
/* v365 · estado optional · campos no obligatorios vacíos · naranja */
.mem-campo-optional { border-left-color: #e08a30; }

/* --- bool_revisado · tarjeta más visible con accent fuerte --- */
.mem-revisado {
  border-radius: 10px;
  border: 1.5px dashed var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  padding: 12px 16px;
  transition: all 0.2s;
}
.mem-revisado-on {
  border-style: solid;
  border-color: var(--success);
  background: linear-gradient(135deg, color-mix(in srgb, var(--success) 12%, transparent) 0%, color-mix(in srgb, var(--success) 5%, transparent) 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--success) 30%, transparent);
}
.mem-revisado-label {
  font-size: 13.5px;
  font-weight: 600;
}

/* --- calc tarjeta · más impactante con borde colorido y sombras --- */
.mem-calc-tarjeta {
  border-radius: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--bg-elev)) 0%, var(--bg-elev) 100%);
  border-left: 4px solid var(--primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  transition: transform 0.2s, box-shadow 0.2s;
}
.mem-calc-tarjeta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}
.mem-calc-tarjeta-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.mem-calc-tarjeta-valor {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
/* Estados especiales según contenido del calc */
.mem-calc-alerta {
  background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 16%, var(--bg-elev)) 0%, var(--bg-elev) 100%) !important;
  border-left-color: var(--danger) !important;
}
.mem-calc-destacado {
  background: linear-gradient(135deg, color-mix(in srgb, var(--success) 14%, var(--bg-elev)) 0%, var(--bg-elev) 100%) !important;
  border-left-color: var(--success) !important;
}
.mem-calc-info {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--bg-elev)) 0%, var(--bg-elev) 100%) !important;
  border-left-color: var(--primary) !important;
}

/* --- Campos destacados · banner CTEM-style --- */
.mem-campo-destacado {
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 14%, var(--bg-elev)) 0%, var(--bg-elev) 70%) !important;
  border-left: 4px solid var(--primary) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin: 16px 0 -4px !important;
}

/* --- Labels y inputs más respirados --- */
.mem-grupo-cuerpo label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 4px;
  display: block;
}
.mem-grupo-cuerpo input[type="text"],
.mem-grupo-cuerpo input[type="number"],
.mem-grupo-cuerpo select,
.mem-grupo-cuerpo textarea {
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13.5px;
  border: 1px solid var(--border);
  background: var(--bg);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mem-grupo-cuerpo input[type="text"]:focus,
.mem-grupo-cuerpo input[type="number"]:focus,
.mem-grupo-cuerpo select:focus,
.mem-grupo-cuerpo textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  outline: none;
}

/* v313 · bloque legacy eliminado para no pisar al de v312 (línea ~3758) */

/* --- Hint (texto ayuda bajo labels) más sutil --- */
.mem-hint {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-top: 4px;
  font-style: normal;
  opacity: 0.85;
}

/* === IMPORTAR MEMORIA · Nivel 2 === */
.im-lista {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 8px;
  margin-bottom: 16px;
  background: var(--bg-2, rgba(0,0,0,0.15));
}
.im-proy-card {
  display: flex;
  gap: 14px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.05));
  transition: background 0.12s;
  align-items: center;
}
.im-proy-card:last-child { border-bottom: none; }
.im-proy-card:hover { background: var(--bg-3, rgba(255,255,255,0.04)); }
.im-proy-card:focus { outline: 2px solid var(--acc, #4a9eff); outline-offset: -2px; }
.im-proy-card-selected {
  background: var(--bg-acc-soft, rgba(74,158,255,0.12));
  border-left: 3px solid var(--acc, #4a9eff);
}
.im-proy-cod {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--text-muted, #8a92a3);
  min-width: 60px;
  flex-shrink: 0;
}
.im-proy-info { flex: 1; min-width: 0; }
.im-proy-nombre { font-weight: 500; margin-bottom: 2px; }

.im-seleccion {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
}
.im-checkboxes-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.btn-sm { padding: 4px 10px; font-size: 12px; }

.im-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
  background: var(--bg-2, rgba(0,0,0,0.1));
}
.im-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.im-check:hover { background: var(--bg-3, rgba(255,255,255,0.04)); }
.im-check input[type=checkbox] { margin: 0; }
.im-check-label { flex: 1; display: flex; align-items: center; gap: 8px; }
.im-check-tipo {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-3, rgba(255,255,255,0.06));
  color: var(--text-muted, #8a92a3);
  letter-spacing: 0.5px;
}
.im-warn {
  font-size: 11px;
  color: var(--warn, #d49a00);
  white-space: nowrap;
}


/* === IMPORTAR MEMORIA · Nivel 3 === */
.im-actualizaciones {
  margin: 16px 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(212, 154, 0, 0.08);
  border: 1px solid rgba(212, 154, 0, 0.35);
}
.im-act-aviso { display: flex; gap: 12px; align-items: flex-start; }
.im-act-aviso-icono { font-size: 20px; line-height: 1; flex-shrink: 0; }
.im-act-aviso-texto { flex: 1; font-size: 13px; line-height: 1.45; }
.im-act-aviso-texto .meta { margin-top: 4px; }
.im-act-detalle {
  margin-top: 10px;
  font-size: 12px;
}
.im-act-detalle summary {
  cursor: pointer;
  color: var(--acc, #4a9eff);
  font-weight: 500;
  padding: 4px 0;
}
.im-act-detalle summary:hover { text-decoration: underline; }
.im-act-lista {
  list-style: none;
  padding: 6px 0 0 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}
.im-act-lista li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.im-act-lista li:last-child { border-bottom: none; }
.im-act-fecha {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 11px;
  color: var(--text-muted, #8a92a3);
  margin-right: 10px;
  min-width: 80px;
}
.im-act-titulo { font-weight: 500; }


/* === IMPORTADOR CTEM · iter 1 === */
.ctem-log-resumen { margin-bottom: 12px; }
.ctem-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  margin-right: 6px;
  font-size: 12px;
  font-weight: 500;
}
.ctem-pill-ok   { background: rgba(46, 160, 67, 0.18);  color: #6fdc8c; }
.ctem-pill-miss { background: rgba(138, 146, 163, 0.18); color: #c0c8d4; }
.ctem-pill-warn { background: rgba(212, 154, 0, 0.18);  color: #ffce5a; }
.ctem-log-detalle { margin-top: 10px; }
.ctem-log-detalle summary {
  cursor: pointer;
  font-weight: 500;
  padding: 6px 0;
  color: var(--text, #e4e9f1);
}
.ctem-log-detalle summary:hover { color: var(--acc, #4a9eff); }
.ctem-log-lista {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  max-height: 220px;
  overflow-y: auto;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  background: rgba(0,0,0,0.15);
}
.ctem-log-lista li {
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.ctem-log-lista li:last-child { border-bottom: none; }


/* === CTEM OVERLAY v292 === */
.ctem-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ctemOverlayFadeIn 0.2s ease-out;
}
.ctem-overlay.hidden { display: none; }
.ctem-overlay-box {
  background: var(--surface, #0b1220);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 12px;
  padding: 32px 48px;
  text-align: center;
  min-width: 360px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.ctem-overlay-spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 18px;
  border: 4px solid rgba(96, 165, 250, 0.2);
  border-top-color: var(--accent, #60a5fa);
  border-radius: 50%;
  animation: ctemOverlaySpin 0.9s linear infinite;
}
.ctem-overlay-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink, #e2e8f0);
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}
.ctem-overlay-msg {
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  min-height: 20px;
}
@keyframes ctemOverlaySpin {
  to { transform: rotate(360deg); }
}
@keyframes ctemOverlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* === TABLA SELECTOR PREDEFINIDOS v306 === */
.tsel-lista { max-height: 380px; overflow-y: auto; }
.tsel-categoria { margin-bottom: 16px; }
.tsel-cat-titulo {
  margin: 8px 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #94a3b8);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  padding-bottom: 4px;
}
.tsel-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  margin: 2px 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink, #e4e9f1);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.tsel-item:hover {
  background: var(--bg-3, rgba(255,255,255,0.06));
  border-color: var(--accent, #60a5fa);
}


/* v308 · z-index modal selector ULTRA alto */
#modal-tabla-selector {
  z-index: 100001 !important;
}


/* === MODAL SELECTOR DIALOG v309 === */
dialog.modal-selector-d {
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 12px;
  padding: 0;
  max-width: 560px;
  width: 90vw;
  max-height: 80vh;
  background: var(--surface, #0b1220);
  color: var(--ink, #e4e9f1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
dialog.modal-selector-d::backdrop {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
}
dialog.modal-selector-d .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
dialog.modal-selector-d .modal-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
dialog.modal-selector-d .modal-close {
  background: transparent;
  border: none;
  color: var(--ink, #e4e9f1);
  font-size: 22px;
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
}
dialog.modal-selector-d .modal-body {
  padding: 14px 18px;
  overflow-y: auto;
}
dialog.modal-selector-d .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
}
dialog.modal-selector-d .form-group input[type="search"] {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-2, rgba(0,0,0,0.2));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 6px;
  color: var(--ink, #e4e9f1);
}


/* v346 · celda readonly */
.tabla-schema td.celda-readonly {
  background: rgba(148, 163, 184, 0.06);
}
.tabla-schema td.celda-readonly input {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--ink-muted, #94a3b8) !important;
  cursor: default !important;
  pointer-events: none;
}
.tabla-schema td.celda-autocalc input {
  color: var(--ink, #e4e9f1);
}
.tabla-schema td.celda-autocalc input::placeholder {
  color: var(--success, #22c55e);
  opacity: 0.7;
  font-style: italic;
}


/* v406 · consultor de municipios (limpio · solo estilos internos) */
.consultor-buscador { position: relative; }
#consultor-muni-busqueda { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--ink); font-size: 14px; }
#consultor-muni-resultados { list-style: none; margin: 4px 0 0; padding: 0; max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev); }
.consultor-item { padding: 8px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.consultor-item:hover { background: var(--bg); }
.consultor-cp { color: var(--ink-muted); font-size: 12px; }
.consultor-vacio { padding: 10px; color: var(--ink-muted); font-style: italic; }
.consultor-detalles { margin-top: 16px; }
.consultor-cabecera h3 { margin: 0 0 4px; font-size: 18px; }
.consultor-subtitulo { margin: 0 0 14px; color: var(--ink-muted); font-size: 12.5px; }
.consultor-bloque { margin-bottom: 16px; }
.consultor-bloque h4 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; color: var(--ink-muted); letter-spacing: 0.5px; }
.consultor-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.consultor-tabla td { padding: 6px 10px; border-bottom: 1px solid var(--border); }
.consultor-tabla td:first-child { color: var(--ink-muted); width: 60%; }
.consultor-tabla td:last-child { text-align: right; font-weight: 500; }
.consultor-destacado { color: var(--success); font-weight: 600; font-size: 15px; }
.consultor-help { margin: 14px 0 0; font-size: 11.5px; color: var(--ink-muted); font-style: italic; }


/* v395 · fix color input consultor altitud */
#consultor-muni-detalles input[type="number"],
#consultor-muni-detalles input[type="text"] {
  background: var(--bg-elev);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13.5px;
}
#consultor-muni-detalles input[type="number"]:focus,
#consultor-muni-detalles input[type="text"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}


/* v405 · modal consultor (clon de modal-chat) */
.modal-consultor {
  position: fixed;
  inset: 0;
  z-index: 100100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-consultor.hidden { display: none; }
.modal-consultor-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
.modal-consultor-dialog {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: min(720px, 96vw);
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.modal-consultor-dialog .modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.modal-consultor-dialog .modal-header h2 { margin: 0; font-size: 16px; font-weight: 600; }
.modal-consultor-dialog .modal-close {
  background: transparent; border: 0; font-size: 22px; cursor: pointer; color: var(--ink-muted);
}
.modal-consultor-dialog .modal-body {
  flex: 1; overflow-y: auto; padding: 16px 20px; min-height: 0;
}

/* ============================================================================
   v431b · Feed de Gestión · estilo timeline / redes sociales
   ============================================================================ */
.gestion-quick {
  background: rgba(127, 127, 127, 0.06);
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 14px;
}
.gestion-quick-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.gestion-quick-fecha { width: 140px; padding: 6px 10px; border: 1px solid var(--border, #e3e6ea); border-radius: 6px; background: var(--bg-card, transparent); color: var(--ink); }
.gestion-quick-tipo  { width: 180px; padding: 6px 10px; border: 1px solid var(--border, #e3e6ea); border-radius: 6px; background: var(--bg-card, transparent); color: var(--ink); }
.gestion-quick-texto { flex: 1; min-width: 260px; padding: 8px 12px; border: 1px solid var(--border, #e3e6ea); border-radius: 6px; background: var(--bg-card, transparent); color: var(--ink); font-size: 14px; }
.gestion-quick-texto:focus { outline: none; border-color: rgba(var(--primary-rgb), 0.6); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12); }
.gestion-quick-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gestion-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid; border-radius: 12px; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all 0.12s; user-select: none; }
.gestion-chip:hover { transform: scale(1.05); filter: brightness(1.15); }
.gestion-migrar-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 14px; background: rgba(var(--primary-rgb), 0.10); border: 1px solid rgba(var(--primary-rgb), 0.40); border-radius: 10px; color: var(--ink); }
.gestion-migrar-icon { font-size: 28px; line-height: 1; }
.gestion-migrar-texto { flex: 1; line-height: 1.4; }
.gestion-migrar-texto strong { display: block; margin-bottom: 4px; }
.gestion-migrar-texto .meta { margin: 4px 0 0 0; font-size: 11.5px; }
.gestion-filtros { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.gestion-filtros input[type="search"] { flex: 1; min-width: 220px; padding: 6px 10px; border: 1px solid var(--border, #e3e6ea); border-radius: 6px; background: var(--bg-card, transparent); color: var(--ink); }
.gestion-filtros select { width: 180px; padding: 6px 10px; border: 1px solid var(--border, #e3e6ea); border-radius: 6px; background: var(--bg-card, transparent); color: var(--ink); }
.gestion-contador { font-size: 12px; }
.gestion-feed { display: flex; flex-direction: column; gap: 8px; }
.gestion-entrada { background: rgba(127, 127, 127, 0.05); border: 1px solid var(--border, #e3e6ea); border-radius: 8px; padding: 10px 14px; transition: background 0.15s; }
.gestion-entrada:hover { background: rgba(127, 127, 127, 0.10); }
.gestion-entrada-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.gestion-entrada-header .g-fecha { width: 130px; padding: 3px 6px; font-size: 12px; border: 1px solid var(--border, #e3e6ea); border-radius: 4px; background: transparent; color: var(--ink); }
.gestion-entrada-tipo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border: 1px solid; border-radius: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.3px; }
.gestion-entrada-acciones { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.gestion-entrada-body { padding-left: 2px; }
.gestion-entrada-body textarea.g-texto { width: 100%; border: none; background: transparent; color: var(--ink); font-size: 13.5px; line-height: 1.45; resize: vertical; padding: 2px 0; font-family: inherit; }
.gestion-entrada-body textarea.g-texto:focus { outline: 1px solid rgba(var(--primary-rgb), 0.3); outline-offset: 4px; border-radius: 4px; }
.gestion-entrada-adjuntos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(127, 127, 127, 0.25); }
.gestion-adjunto-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; background: rgba(127, 127, 127, 0.12); border: 1px solid var(--border, #e3e6ea); border-radius: 12px; font-size: 11.5px; cursor: pointer; transition: all 0.12s; }
.gestion-adjunto-chip:hover { background: rgba(var(--primary-rgb), 0.18); }
.gestion-adjunto-chip .adj-nombre { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gestion-empty { padding: 30px 20px; text-align: center; background: rgba(127, 127, 127, 0.05); border-radius: 8px; color: var(--ink-muted); }
.gestion-empty p { margin: 4px 0; }
.gestion-legacy, .gestion-archivos-globales { margin-top: 18px; padding: 10px 14px; background: rgba(127, 127, 127, 0.04); border: 1px solid var(--border, #e3e6ea); border-radius: 8px; }
.gestion-legacy summary, .gestion-archivos-globales summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.gestion-legacy-body, .gestion-archivos-body { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(127, 127, 127, 0.25); }
.gestion-legacy textarea { width: 100%; padding: 8px; border: 1px solid var(--border, #e3e6ea); border-radius: 6px; background: var(--bg-card, transparent); color: var(--ink); }
.btn-xs { padding: 2px 8px !important; font-size: 11px !important; line-height: 1.4 !important; }



/* ============================================================================
   v431c · Modal "Añadir/Editar entrada" + modo compacto + agrupación por fecha
   ============================================================================ */
/* Toolbar superior (botón añadir + toggle modo) */
.gestion-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  background: rgba(127, 127, 127, 0.06);
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.gestion-toolbar-hint { font-size: 11.5px; }
.gestion-toolbar-spacer { flex: 1; }
.gestion-modo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-muted);
}
.gestion-modo-btn { padding: 3px 10px !important; font-size: 11.5px !important; }
.gestion-modo-btn.active {
  background: rgba(var(--primary-rgb), 0.18) !important;
  color: var(--primary) !important;
  border-color: rgba(var(--primary-rgb), 0.5) !important;
}

/* Modal añadir/editar entrada */
#modal-gestion-entrada { z-index: 100150; }
#modal-gestion-entrada .modal-gestion-dialog {
  width: min(560px, 95vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.modal-gestion-row { margin-bottom: 14px; }
.modal-gestion-row label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
#modal-gestion-entrada input[type="date"],
#modal-gestion-entrada textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 6px;
  background: var(--bg-card, transparent);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
}
#modal-gestion-entrada textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
#modal-gestion-entrada input:focus,
#modal-gestion-entrada textarea:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.6);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}
.modal-gestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gestion-chip-modal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: 1px solid;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  user-select: none;
  opacity: 0.75;
}
.gestion-chip-modal:hover { opacity: 1; transform: scale(1.05); }
.gestion-chip-modal.seleccionado {
  opacity: 1;
  box-shadow: 0 0 0 2px currentColor;
  filter: brightness(1.1);
}

/* Modo compacto · una línea por entrada */
.gestion-entrada.modo-compacto {
  display: grid;
  grid-template-columns: 60px auto auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  position: relative;
}
.gestion-entrada.modo-compacto:hover { background: rgba(var(--primary-rgb), 0.08); }
.gestion-entrada.modo-compacto .ge-fecha-comp {
  font-size: 11.5px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.gestion-entrada.modo-compacto .ge-texto-comp {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--ink);
}
.gestion-entrada.modo-compacto .gestion-entrada-acciones {
  margin-left: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.gestion-entrada.modo-compacto:hover .gestion-entrada-acciones { opacity: 1; }
.gestion-entrada.modo-compacto .gestion-entrada-detalle {
  display: none;
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(127, 127, 127, 0.25);
}
.gestion-entrada.modo-compacto.expandida .gestion-entrada-detalle { display: block; }
.gestion-entrada.modo-compacto.expandida .ge-texto-comp {
  white-space: normal;
  overflow: visible;
}
.ge-texto-completo {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 6px 0;
}

/* Agrupación por fecha · divisor */
.gestion-grupo-fecha { margin-bottom: 16px; }
.gestion-grupo-divisor {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 6px 0;
  padding: 4px 10px;
  background: rgba(var(--primary-rgb), 0.08);
  border-left: 3px solid rgba(var(--primary-rgb), 0.6);
  border-radius: 4px;
}
.gestion-grupo-fecha-label {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--primary);
  text-transform: capitalize;
}
.gestion-grupo-fecha-cnt {
  font-size: 11px;
  color: var(--ink-muted);
}

/* btn-icono · superíndice contador adjuntos */
.gestion-entrada-acciones .btn sup {
  font-size: 9px;
  vertical-align: super;
  margin-left: 1px;
  font-weight: 700;
}


/* ============================================================================
   v433b · Apartado HONORARIOS · KPIs + presupuesto + listas
   ============================================================================ */
.honorarios-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.honorarios-kpi {
  padding: 14px 16px;
  background: rgba(127, 127, 127, 0.06);
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 10px;
  text-align: center;
  transition: all 0.15s;
}
.honorarios-kpi:hover { background: rgba(127, 127, 127, 0.12); transform: translateY(-1px); }
.honorarios-kpi .kpi-label {
  font-size: 11.5px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.honorarios-kpi .kpi-valor {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.honorarios-kpi .kpi-meta {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 4px;
}
.honorarios-kpi[data-kpi="presupuesto"] .kpi-valor { color: var(--primary); }
.honorarios-kpi[data-kpi="facturado"]   .kpi-valor { color: rgba(245, 158, 11, 0.95); }
.honorarios-kpi[data-kpi="cobrado"]     .kpi-valor { color: rgba(34, 197, 94, 0.95); }
.honorarios-kpi[data-kpi="pendiente"]   .kpi-valor { color: rgba(239, 68, 68, 0.95); }
.honorarios-kpi[data-kpi="horas"]       .kpi-valor { color: rgba(148, 163, 184, 1); }
.kpi-valor.kpi-positivo { color: rgba(34, 197, 94, 0.95) !important; }
.kpi-valor.kpi-negativo { color: rgba(239, 68, 68, 0.95) !important; }

.honorarios-bloque {
  background: rgba(127, 127, 127, 0.04);
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 18px;
}
.honorarios-bloque h3 {
  margin: 0 0 12px 0;
  font-size: 15px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.honorarios-bloque h3 .meta { font-weight: normal; font-size: 12px; }

.honorarios-presupuesto-row {
  display: grid;
  grid-template-columns: 220px 200px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.honorarios-presupuesto-row label {
  font-size: 12.5px;
  color: var(--ink-muted);
  font-weight: 600;
}
.honorarios-presupuesto-row input,
.honorarios-presupuesto-row textarea {
  padding: 6px 10px;
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 6px;
  background: var(--bg-card, transparent);
  color: var(--ink);
  font-size: 13.5px;
}
.honorarios-presupuesto-row textarea { grid-column: 2 / -1; font-family: inherit; resize: vertical; }
.honorarios-presupuesto-row .meta { font-size: 11.5px; }

.honorarios-horas-resumen { margin-bottom: 12px; }
.horas-persona-row {
  display: grid;
  grid-template-columns: 1fr 80px 100px;
  gap: 12px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.15);
  font-size: 13px;
  align-items: center;
}
.horas-persona-row:last-child { border-bottom: none; }
.hp-nombre { font-weight: 500; }
.hp-horas, .hp-importe { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-muted); }

.factura-row {
  display: grid;
  grid-template-columns: 100px 100px 1fr 100px 130px 88px;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.15);
  font-size: 13px;
  align-items: center;
}
.factura-row:last-child { border-bottom: none; }
.fac-num     { font-weight: 600; font-family: ui-monospace, monospace; }
.fac-fecha   { color: var(--ink-muted); font-size: 12px; }
.fac-concepto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fac-importe { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.fac-acciones {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
  opacity: 0.55;
  transition: opacity 0.15s;
}
.factura-row:hover .fac-acciones { opacity: 1; }
.fac-acciones .btn-icono {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.fac-acciones .btn-icono:hover { background: rgba(var(--primary-rgb), 0.15); color: var(--ink); }
.fac-acciones .btn-fac-cobrar { color: rgba(34, 197, 94, 0.95); }
.fac-acciones .btn-fac-cobrar:hover { background: rgba(34, 197, 94, 0.15); }

/* v436 · Modal "Añadir factura" · row con base imponible + IVA en 2 columnas */
.modal-factura-importes {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 12px;
}
.modal-factura-importes label { display: block; }
.badge-fac {
  text-align: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.badge-fac.pendiente { background: rgba(245, 158, 11, 0.15); color: rgba(245, 158, 11, 0.95); border: 1px solid rgba(245, 158, 11, 0.4); }
.badge-fac.cobrada   { background: rgba(34, 197, 94, 0.15);  color: rgba(34, 197, 94, 0.95);  border: 1px solid rgba(34, 197, 94, 0.4); }
.badge-fac.anulada   { background: rgba(148, 163, 184, 0.15); color: var(--ink-muted); border: 1px solid rgba(148, 163, 184, 0.3); }

/* v433b-fix2 · "Datos del proyecto" en 2 líneas para ahorrar ancho horizontal */
.proy-tab.proy-tab-general {
  white-space: normal;
  line-height: 1.15;
  padding: 6px 10px;
  font-size: 13px;
  text-align: center;
  min-width: 70px;
}
.proy-tab.proy-tab-general span { display: inline-block; }

/* ============================================================================
   v433c · Modal "Añadir/Editar horas" + lista detallada
   ============================================================================ */
#modal-honorarios-horas { z-index: 100150; }
#modal-honorarios-horas .modal-honorarios-dialog {
  width: min(540px, 95vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.modal-honorarios-row { margin-bottom: 14px; }
.modal-honorarios-row label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
/* v436/v454c · Aplicar a TODOS los modales honorarios (horas + facturas + concepto + gasto) */
#modal-honorarios-horas input,
#modal-honorarios-horas select,
#modal-honorarios-horas textarea,
#modal-honorarios-factura input,
#modal-honorarios-factura select,
#modal-honorarios-factura textarea,
#modal-honorarios-concepto input,
#modal-honorarios-concepto select,
#modal-honorarios-concepto textarea,
#modal-honorarios-gasto input,
#modal-honorarios-gasto select,
#modal-honorarios-gasto textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 6px;
  background: var(--bg-card, transparent);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}
#modal-honorarios-horas input:focus,
#modal-honorarios-horas select:focus,
#modal-honorarios-horas textarea:focus,
#modal-honorarios-factura input:focus,
#modal-honorarios-factura select:focus,
#modal-honorarios-factura textarea:focus,
#modal-honorarios-concepto input:focus,
#modal-honorarios-concepto select:focus,
#modal-honorarios-concepto textarea:focus,
#modal-honorarios-gasto input:focus,
#modal-honorarios-gasto select:focus,
#modal-honorarios-gasto textarea:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.6);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}
/* z-index y tamaño del dialog para los nuevos modales */
#modal-honorarios-concepto, #modal-honorarios-gasto { z-index: 100150; }
#modal-honorarios-concepto .modal-honorarios-dialog,
#modal-honorarios-gasto .modal-honorarios-dialog {
  width: min(540px, 95vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
/* Compartir el dialog con su z-index y tamaño */
#modal-honorarios-factura { z-index: 100150; }
#modal-honorarios-factura .modal-honorarios-dialog {
  width: min(540px, 95vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
/* v444 · Cuando la persona NO tiene ve_honorarios, ocultar bloques económicos
   La pestaña pasa a ser solo de "Horas": registro de horas sin tarifa/importe.
   - KPIs económicos (presupuesto/facturado/cobrado/pendiente/coste/margen): ocultos
   - Bloque presupuesto editable: oculto
   - Bloque facturas: oculto
   - Importes en lista de horas: ocultos
   El usuario puede seguir añadiendo horas pero no ve cuánto valen. */
.form-group-honorarios.sin-honorarios .honorarios-resumen,
.form-group-honorarios.sin-honorarios .honorarios-bloque:has(#h-presupuesto),
.form-group-honorarios.sin-honorarios .honorarios-bloque:has(#honorarios-facturas-lista),
.form-group-honorarios.sin-honorarios #h-horas-total-meta,
.form-group-honorarios.sin-honorarios .hp-importe,
.form-group-honorarios.sin-honorarios .hd-importe {
  display: none !important;
}
.form-group-honorarios.sin-honorarios .horas-persona-row {
  grid-template-columns: 1fr auto !important;
}
.form-group-honorarios.sin-honorarios .hora-detalle-row {
  grid-template-columns: 70px 26px 110px 50px 1fr 90px !important;
}

/* En los modales de añadir horas y stop cronómetro · ocultar tarifa/importe */
.modal-honorarios-row.modal-horas-precio.sin-honorarios,
.crono-stop-row.crono-stop-importe.sin-honorarios,
.crono-stop-row:has(#mcs-tarifa-display).sin-honorarios {
  display: none !important;
}

/* ============================================================================
   ⭐⭐⭐ REGLA GLOBAL INPUTS MODALES · v446d
   ============================================================================
   Todos los <input>, <select> y <textarea> dentro de cualquier .modal heredan
   contraste correcto por defecto. Si una regla más específica los sobreescribe,
   esta queda como fallback. NUNCA ELIMINAR esta regla: evita un bug recurrente
   en el que inputs nuevos en modales aparecían con fondo blanco y texto gris.
   Las reglas específicas siguen funcionando porque tienen mayor especificidad.
   ============================================================================ */
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="password"],
.modal input[type="number"],
.modal input[type="date"],
.modal input[type="time"],
.modal input[type="datetime-local"],
.modal input[type="tel"],
.modal input[type="url"],
.modal input[type="search"],
.modal input:not([type]),
.modal select,
.modal textarea {
  background: #1F1E1B;        /* slate-800 · fondo oscuro */
  color: #ECE9E1;             /* slate-200 · texto claro */
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}
.modal input::placeholder,
.modal textarea::placeholder { color: #64748b; opacity: 1; }

:root[data-theme="light"] .modal input[type="text"],
:root[data-theme="light"] .modal input[type="email"],
:root[data-theme="light"] .modal input[type="password"],
:root[data-theme="light"] .modal input[type="number"],
:root[data-theme="light"] .modal input[type="date"],
:root[data-theme="light"] .modal input[type="time"],
:root[data-theme="light"] .modal input[type="datetime-local"],
:root[data-theme="light"] .modal input[type="tel"],
:root[data-theme="light"] .modal input[type="url"],
:root[data-theme="light"] .modal input[type="search"],
:root[data-theme="light"] .modal input:not([type]),
:root[data-theme="light"] .modal select,
:root[data-theme="light"] .modal textarea {
  background: #ffffff;
  color: #1F1E1B;
  border-color: rgba(0, 0, 0, 0.15);
}
:root[data-theme="light"] .modal input::placeholder,
:root[data-theme="light"] .modal textarea::placeholder { color: #94a3b8; }

.modal input:focus,
.modal select:focus,
.modal textarea:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.6);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
}
/* ============================================================================ */

/* v434d · Contraste GLOBAL de dropdowns nativos · regla permanente
   La app usa data-theme="light|dark" en <html> (botón ☀/🌙 manual, no el
   tema del SO). Por eso NO usamos @media (prefers-color-scheme) — usamos
   los selectores propios de la app, así un usuario con SO oscuro y app
   clara (o viceversa) ve los <option> coherentes con el resto del modal. */
:root[data-theme="light"] select option {
  background: #ffffff;
  color: #111111;
  padding: 6px;
}
:root, :root[data-theme="dark"] {
  /* Dark es el default */
}
:root select option,
:root[data-theme="dark"] select option {
  background: #1f2937;
  color: #f1f5f9;
  padding: 6px;
}

/* v442 · Modal de previsualización de archivos · grande, casi pantalla completa */
#modal-preview { z-index: 100170; }
.modal-preview-dialog {
  width: min(1100px, 95vw);
  height: 85vh;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.modal-preview-dialog .modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal-preview-dialog .modal-header h2 {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}
.modal-preview-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-preview-body {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: rgba(0, 0, 0, 0.20);
}
:root[data-theme="light"] .modal-preview-body { background: rgba(0, 0, 0, 0.04); }

.preview-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.preview-img-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 12px;
}
.preview-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.40);
}
.preview-text {
  flex: 1;
  margin: 0;
  padding: 16px 20px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
}
.preview-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--ink-muted);
  font-style: italic;
}

/* Chip de adjunto · cursor pointer para indicar que es clicable */
.gestion-adjunto-chip { cursor: pointer; }
.gestion-adjunto-chip .adj-nombre {
  cursor: pointer;
  text-decoration: underline dotted;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s;
}
.gestion-adjunto-chip:hover .adj-nombre {
  text-decoration-color: var(--ink-muted);
}
.gestion-adjunto-chip .g-adj-descargar,
.gestion-adjunto-chip .g-adj-del {
  opacity: 0.55;
  transition: opacity 0.15s;
}
.gestion-adjunto-chip:hover .g-adj-descargar,
.gestion-adjunto-chip:hover .g-adj-del {
  opacity: 1;
}

/* v446 · Vista semanal de horas (timesheet) */
#modal-horas-semanal { z-index: 100180 !important; }
#modal-hs-add { z-index: 100500 !important; }  /* por encima del modal de la semana */
#modal-hs-add .modal-dialog { z-index: 100501 !important; }
.modal-horas-semanal-dialog {
  width: min(1200px, 96vw);
  height: 90vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-horas-semanal-dialog .modal-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hs-header-izq { display: flex; align-items: baseline; gap: 12px; flex: 1; min-width: 200px; }
.hs-header-izq h2 { margin: 0; font-size: 16px; }
.hs-header-izq .meta { font-size: 13px; }
.hs-header-nav { display: flex; gap: 4px; }
.hs-header-nav .btn { padding: 4px 10px; }
.hs-header-der { display: flex; align-items: center; gap: 12px; }
.hs-total-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
}
.hs-total-semana {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  padding: 4px 10px;
  background: rgba(var(--primary-rgb), 0.10);
  border-radius: 6px;
}

/* v448 · Toggle Semana / Mes */
.hs-toggle-vista {
  display: inline-flex;
  background: rgba(127, 127, 127, 0.10);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.hs-toggle-btn {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.hs-toggle-btn:hover { color: var(--ink); }
.hs-toggle-btn.activo {
  background: rgba(var(--primary-rgb), 0.18);
  color: var(--primary);
}

/* Vista Mes · columnas equilibradas · suficiente para ver "23:02" sin agobio */
.hs-grid-mes .hs-col-dia {
  min-width: 70px;
  width: 70px;
  padding-left: 6px !important;
  padding-right: 6px !important;
}
.hs-grid-mes .hs-col-total {
  min-width: 68px;
  width: 68px;
}
.hs-grid-mes .hs-col-semana {
  cursor: pointer;
  transition: background 0.15s;
}
.hs-grid-mes .hs-col-semana:hover { background: rgba(var(--primary-rgb), 0.15); }
.hs-grid-mes .hs-celda-mes {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  font-size: 14px;
}
.hs-grid-mes .hs-vacio-sem { background: rgba(127, 127, 127, 0.03); }
.hs-grid-mes thead .hs-dia-num {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
}
.hs-mes-aviso {
  margin-top: 14px;
  text-align: center;
  font-size: 12.5px;
  padding: 10px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 6px;
  color: rgba(245, 158, 11, 1);
}
.hs-body { padding: 12px; overflow: auto; flex: 1; }
.hs-grid-contenedor { overflow-x: auto; }
.hs-grid-contenedor { width: 100%; }
.hs-footer { display: flex; align-items: center; gap: 8px; }

.hs-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.hs-grid th, .hs-grid td {
  padding: 8px 6px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.15);
  vertical-align: middle;
}
.hs-grid thead th {
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-muted);
  background: rgba(127, 127, 127, 0.05);
  position: sticky; top: 0; z-index: 2;
}
.hs-grid thead .hs-col-proy { text-align: left; }
.hs-grid .hs-dia-num { font-size: 14px; font-weight: 700; color: var(--ink); }
.hs-grid th.hs-hoy { background: rgba(var(--primary-rgb), 0.15); }
.hs-grid th.hs-hoy .hs-dia-num { color: var(--primary); }
.hs-grid th.hs-finde { color: rgba(245, 158, 11, 0.9); }
.hs-grid td.hs-finde { background: rgba(245, 158, 11, 0.03); }
.hs-col-proy {
  text-align: left;
  min-width: 180px;
  width: 180px;
  position: sticky; left: 0;
  background: var(--bg-card, #1e293b);
  z-index: 1;
}
.hs-col-proy strong { display: block; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.3; }
.hs-col-proy .hs-proy-nombre {
  display: block;
  font-size: 11.5px;
  color: var(--ink-muted);
  margin: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.hs-col-proy .hs-tipo {
  display: inline-block;
  font-size: 10.5px;
  padding: 1px 5px;
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--primary-rgb), 0.30);
  border-radius: 3px;
  color: var(--primary);
}
.hs-col-dia {
  text-align: center;
  min-width: 56px;
  width: 56px;
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.hs-col-total {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 64px;
  padding-right: 10px !important;
}

/* Inputs de la grid · contraste explícito por tema (regla CSS v445b) */
.hs-input {
  width: 100%;
  max-width: 50px;
  padding: 3px 4px;
  text-align: center;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
  border-radius: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
}
:root[data-theme="dark"] .hs-input,
:root .hs-input {
  background: #161513;
  color: #ECE9E1;
}
:root[data-theme="dark"] .hs-input::placeholder,
:root .hs-input::placeholder { color: #475569; }
:root[data-theme="light"] .hs-input {
  background: #ffffff;
  color: #1F1E1B;
}
:root[data-theme="light"] .hs-input::placeholder { color: #94a3b8; }
.hs-input:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.6);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
}
.hs-input.hs-tiene-crono {
  border-color: rgba(239, 68, 68, 0.40);
  background: linear-gradient(to bottom, rgba(239, 68, 68, 0.05), transparent);
}
.hs-input.hs-multiples {
  font-style: italic;
}

.hs-eliminar {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 16px;
  margin-left: 6px;
  opacity: 0;
  transition: opacity 0.15s;
}
.hs-grid tr:hover .hs-eliminar { opacity: 0.7; }
.hs-eliminar:hover { color: rgba(239, 68, 68, 1); opacity: 1; }

.hs-grid tfoot td {
  padding-top: 12px;
  border-top: 2px solid rgba(127, 127, 127, 0.30);
  font-size: 14px;
}
.hs-grid tfoot .hs-col-proy strong { font-family: inherit; font-size: 13px; }
.hs-grid tfoot strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.hs-vacio td { padding: 30px; text-align: center; }
.hs-vacio .meta { font-size: 14px; }

/* v452 · Donuts y widget de margen */
.dash-chart-wrap {
  position: relative;
  height: 260px;
  padding: 8px 4px;
}
.dash-chart-wrap canvas { max-width: 100%; max-height: 100%; }

/* Margen por proyecto · barras verdes (positivo) y rojas (negativo) */
.dash-bar-margen .dash-bar-fill.dash-bar-positivo {
  background: linear-gradient(90deg, #10b981, #34d399);
}
.dash-bar-margen .dash-bar-fill.dash-bar-negativo {
  background: linear-gradient(90deg, #ef4444, #f87171);
}
.dash-margen-valor {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dash-margen-valor.positivo { color: #10b981; }
.dash-margen-valor.negativo { color: #ef4444; }
.dash-margen-detalle {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
  padding-bottom: 4px;
}

/* v451 · Widget Dashboard "Horas por proyecto" · filtro compacto en cabecera */
.dash-card-honorarios .dash-card-head {
  flex-wrap: wrap;
  gap: 10px;
}
.dash-filtro-mini {
  padding: 3px 8px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
  background: #1F1E1B;
  color: #ECE9E1;
  cursor: pointer;
  margin-right: 8px;
}
:root[data-theme="light"] .dash-filtro-mini { background: #ffffff; color: #1F1E1B; }
#dash-horas-proy .dash-bar-label {
  font-size: 12.5px;
  font-family: ui-monospace, monospace;
}

/* v454 · Lista de conceptos del presupuesto y gastos directos */
.honorarios-presupuesto-lista,
.honorarios-gastos-lista {
  margin: 10px 0 12px 0;
}
.concepto-row {
  display: grid;
  grid-template-columns: 1fr 110px 60px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.15);
  font-size: 13px;
}
.concepto-row:last-child { border-bottom: none; }
.concepto-nombre { font-weight: 500; }
.concepto-importe {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.concepto-acciones,
.gasto-acciones {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.concepto-row:hover .concepto-acciones,
.gasto-row:hover .gasto-acciones { opacity: 1; }
.gasto-row {
  display: grid;
  grid-template-columns: 80px 130px 1fr 100px 60px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.15);
  font-size: 12.5px;
}
.gasto-row:last-child { border-bottom: none; }
.gasto-fecha { color: var(--ink-muted); font-size: 11.5px; }
.gasto-tipo {
  display: inline-block;
  font-size: 11px;
  padding: 2px 6px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-radius: 3px;
  color: rgba(245, 158, 11, 1);
  text-align: center;
}
.gasto-concepto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gasto-importe {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: rgba(245, 158, 11, 1);
}

/* v458 · Cobros del proyecto (mismo patrón que gastos, color verde) */
.cobro-row:hover .cobro-acciones { opacity: 1; }
.cobro-row {
  display: grid;
  grid-template-columns: 100px 1fr 120px 110px 60px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.15);
  font-size: 12.5px;
}
.cobro-row:last-child { border-bottom: none; }
.cobro-fecha { color: var(--ink-muted); font-size: 11.5px; }
.cobro-concepto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cobro-forma { font-size: 11.5px; }
.cobro-importe {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: rgba(16, 185, 129, 1);
}
.cobro-acciones {
  display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s;
  justify-content: flex-end;
}

/* v450 · Filtro de periodo en bloque Horas dedicadas */
.horas-bloque-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}
.horas-bloque-cabecera h3 { margin: 0; }
.horas-filtro-periodo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.horas-filtro-periodo label { font-size: 12px; }
.horas-filtro-periodo select {
  padding: 5px 10px;
  font-size: 13px;
  border-radius: 4px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
  background: #1F1E1B;
  color: #ECE9E1;
  cursor: pointer;
}
:root[data-theme="light"] .horas-filtro-periodo select { background: #ffffff; color: #1F1E1B; }
.horas-filtro-rango {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.horas-filtro-rango input[type="date"] {
  padding: 4px 8px;
  font-size: 12.5px;
  border-radius: 4px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
  background: #1F1E1B;
  color: #ECE9E1;
  font-family: inherit;
}
:root[data-theme="light"] .horas-filtro-rango input[type="date"] { background: #ffffff; color: #1F1E1B; }
.horas-filtro-info {
  margin: -4px 0 10px 0;
  padding: 6px 10px;
  background: rgba(var(--primary-rgb), 0.08);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  border-radius: 4px;
  font-size: 12px;
  color: var(--primary);
}

/* v447 · Menú unificado de horas en topbar */
.hbar-wrap {
  position: relative;
  display: inline-flex;
}
.btn-menu-horas {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 4px 8px !important;
  min-width: 40px;
}
.btn-menu-horas #menuhoras-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  width: 16px;
}
.btn-menu-horas .hbar-flecha {
  font-size: 10px;
  opacity: 0.6;
  margin-left: 1px;
}
.btn-menu-horas .crono-tiempo {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
  line-height: 1;
}
.btn-menu-horas.activo {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}
.btn-menu-horas.activo.pausado {
  background: rgba(245, 158, 11, 0.20);
  color: #fcd34d;
}
:root[data-theme="light"] .btn-menu-horas.activo {
  background: rgba(239, 68, 68, 0.15);
  color: #b91c1c;
}
:root[data-theme="light"] .btn-menu-horas.activo.pausado {
  background: rgba(245, 158, 11, 0.20);
  color: #b45309;
}

.hbar-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 260px;
  background: #161513;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40);
  padding: 4px;
  z-index: 100100;
}
:root[data-theme="light"] .hbar-dropdown {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
}

.hbar-item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--ink);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.hbar-item:hover {
  background: rgba(var(--primary-rgb), 0.15);
}
.hbar-item > :first-child {
  font-size: 15px;
  text-align: center;
}
.hbar-item-label {
  font-weight: 500;
}
.hbar-item-meta {
  font-size: 11px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.hbar-divider {
  height: 1px;
  background: rgba(127, 127, 127, 0.20);
  margin: 4px 6px;
}

/* Item destacado "Parar cronómetro" cuando hay uno activo */
.hbar-item-destacado {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  margin-bottom: 4px;
}
.hbar-item-destacado:hover {
  background: rgba(239, 68, 68, 0.20);
}
.hbar-item-destacado .hbar-item-label { color: rgba(252, 165, 165, 1); }
.hbar-item-destacado .hbar-item-meta { color: rgba(252, 165, 165, 0.9); font-weight: 600; }
:root[data-theme="light"] .hbar-item-destacado .hbar-item-label,
:root[data-theme="light"] .hbar-item-destacado .hbar-item-meta { color: #b91c1c; }

/* v435 · Botón cronómetro en topbar · cambia de aspecto cuando está activo */
.btn-cronometro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 38px;
  transition: background 0.15s, color 0.15s, min-width 0.15s;
}
.btn-cronometro #crono-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}
.btn-cronometro .crono-tiempo {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
  line-height: 1;
}
.btn-cronometro.activo {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  min-width: auto;
}
/* v439 · Estado pausado · color naranja (entre activo y parado) */
.btn-cronometro.activo.pausado {
  background: rgba(245, 158, 11, 0.20);
  color: #fcd34d;
}
:root[data-theme="light"] .btn-cronometro.activo {
  background: rgba(239, 68, 68, 0.15);
  color: #b91c1c;
}
:root[data-theme="light"] .btn-cronometro.activo.pausado {
  background: rgba(245, 158, 11, 0.20);
  color: #b45309;
}

/* Icono PLAY · triángulo CSS · siempre visible */
.crono-play-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-left: 2px;  /* compensa el centro óptico */
}

/* Icono PAUSA · dos rectángulos · siempre visible */
.crono-pausa-icon {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.crono-pausa-icon i {
  display: inline-block;
  width: 3.5px;
  height: 12px;
  background: currentColor;
  border-radius: 1px;
}

/* v435 · Modal "Parar cronómetro" */
#modal-cronometro-inicio,
#modal-cronometro-stop { z-index: 100160; }
#modal-cronometro-inicio .modal-honorarios-dialog,
#modal-cronometro-stop .modal-honorarios-dialog {
  width: min(540px, 95vw);
  max-height: 88vh;
}
.crono-stop-resumen {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: rgba(var(--primary-rgb), 0.06);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  border-radius: 8px;
}
.crono-stop-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 13.5px;
}
.crono-stop-row .meta { font-size: 12px; }
.crono-duracion-grande {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}
.crono-stop-importe strong { color: rgba(34, 197, 94, 0.95); font-size: 16px; }
.crono-footer { display: flex; align-items: center; gap: 8px; }

/* Inputs/selects/textarea de los modales de cronómetro (heredan de horas/facturas) */
#modal-cronometro-inicio input,
#modal-cronometro-inicio select,
#modal-cronometro-inicio textarea,
#modal-cronometro-stop input,
#modal-cronometro-stop select,
#modal-cronometro-stop textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 6px;
  background: var(--bg-card, transparent);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}
#modal-cronometro-inicio input:focus,
#modal-cronometro-inicio select:focus,
#modal-cronometro-inicio textarea:focus,
#modal-cronometro-stop input:focus,
#modal-cronometro-stop select:focus,
#modal-cronometro-stop textarea:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.6);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

/* v434b · Buscador de proyecto en modal horas · estilo autocomplete */
.mh-proyecto-buscador {
  position: relative;
  width: 100%;
}
/* El input ocupa todo el ancho del wrapper para que el × quede pegado a su borde */
.mh-proyecto-buscador > input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

/* v446f · Botón × para limpiar el input de búsqueda · DENTRO del cuadro del input */
.mh-buscador-clear {
  position: absolute;
  right: 6px;          /* pegado al borde derecho del input */
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.10);
  border: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  width: 22px;
  height: 22px;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, background 0.15s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mh-proyecto-buscador.con-texto .mh-buscador-clear {
  opacity: 0.85;
  pointer-events: auto;
}
.mh-buscador-clear:hover {
  opacity: 1 !important;
  background: rgba(239, 68, 68, 0.85);
  color: #fff;
  transform: translateY(-50%) scale(1.1);
}
:root[data-theme="light"] .mh-buscador-clear {
  background: rgba(0, 0, 0, 0.08);
  color: #1F1E1B;
}
:root[data-theme="light"] .mh-buscador-clear:hover {
  background: rgba(239, 68, 68, 0.85);
  color: #fff;
}
/* Reservar espacio para que el × no tape el texto */
.mh-proyecto-buscador.tiene-clear > input[type="text"] {
  padding-right: 32px;
}
.mh-proyecto-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  background: rgba(var(--primary-rgb), 0.10);
  border: 1px solid rgba(var(--primary-rgb), 0.40);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
}
.mh-proyecto-chip strong { font-weight: 700; }
.mh-proyecto-chip button {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  margin-left: 2px;
}
.mh-proyecto-chip button:hover { color: var(--ink); }
.mh-proyecto-resultados {
  list-style: none;
  margin: 4px 0 0 0;
  padding: 4px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 8px;
  max-height: 260px;
  overflow-y: auto;
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 10;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.mh-proyecto-resultados li {
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.4;
  border-bottom: 1px solid rgba(127, 127, 127, 0.12);
}
.mh-proyecto-resultados li:last-child { border-bottom: none; }
.mh-proyecto-resultados li:hover {
  background: rgba(var(--primary-rgb), 0.18);
}
.mh-proyecto-resultados li strong {
  font-weight: 700;
  color: rgba(129, 140, 248, 1);  /* azul lavanda · destaca el código */
}
.mh-proyecto-resultados .mh-proyecto-nombre {
  color: var(--ink);
  opacity: 0.95;
}
.mh-proyecto-resultados .mh-proyecto-cliente {
  font-size: 11.5px;
  color: var(--ink);
  opacity: 0.65;
  margin-top: 3px;
}
/* Fallback explícito por tema · usa el data-theme de la app (NO el del SO)
   para que el dropdown se vea coherente con el resto del modal en ambos modos */
:root[data-theme="light"] .mh-proyecto-resultados {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
}
:root[data-theme="light"] .mh-proyecto-resultados li         { color: #1F1E1B; }
:root[data-theme="light"] .mh-proyecto-resultados li strong  { color: #4338ca; }
:root[data-theme="light"] .mh-proyecto-resultados .mh-proyecto-nombre  { color: #1f2937; opacity: 0.9; }
:root[data-theme="light"] .mh-proyecto-resultados .mh-proyecto-cliente { color: #64748b; opacity: 1; }
:root[data-theme="light"] .mh-proyecto-resultados li:hover   { background: rgba(var(--primary-rgb), 0.10); }

:root .mh-proyecto-resultados,
:root[data-theme="dark"] .mh-proyecto-resultados {
  background: #161513;
  border-color: rgba(255, 255, 255, 0.10);
}
:root .mh-proyecto-resultados li,
:root[data-theme="dark"] .mh-proyecto-resultados li { color: #e2e8f0; }
:root .mh-proyecto-resultados li strong,
:root[data-theme="dark"] .mh-proyecto-resultados li strong { color: var(--primary); }
:root .mh-proyecto-resultados .mh-proyecto-cliente,
:root[data-theme="dark"] .mh-proyecto-resultados .mh-proyecto-cliente { color: #94a3b8; opacity: 1; }
.mh-proyecto-resultados .mh-proyecto-vacio {
  padding: 10px 12px;
  color: var(--ink-muted);
  font-style: italic;
  cursor: default;
}
.mh-proyecto-resultados .mh-proyecto-vacio:hover { background: transparent; }
#mh-rol-info { font-size: 11.5px; margin-top: 4px; display: block; }
#mh-rol-info.warning { color: rgba(245, 158, 11, 0.95); }

.modal-horas-duracion-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-muted);
}
.modal-horas-duracion-inputs input { width: 70px; text-align: center; }

.modal-horas-precio-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(var(--primary-rgb), 0.06);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  border-radius: 6px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.modal-horas-precio-info #mh-precio-hora { font-weight: 600; color: var(--primary); }
.modal-horas-precio-info #mh-duracion-display { font-weight: 500; }
.modal-horas-precio-info #mh-importe {
  margin-left: auto;
  font-size: 17px;
  color: rgba(34, 197, 94, 0.95);
}
.modal-horas-precio-info .meta { font-size: 13px; }

/* Lista detallada de horas debajo del resumen */
.honorarios-horas-personas {
  margin-bottom: 12px;
  border-bottom: 1px dashed rgba(127, 127, 127, 0.25);
  padding-bottom: 8px;
}
.honorarios-horas-lista summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 0;
  color: var(--ink-muted);
}
.honorarios-horas-lista[open] summary { color: var(--ink); }
.hora-detalle-tabla {
  margin-top: 8px;
  border-radius: 6px;
  overflow: hidden;
}
.hora-detalle-row {
  display: grid;
  grid-template-columns: 90px 32px 130px 60px 1fr 90px 60px;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.15);
}
.hora-detalle-row:last-child { border-bottom: none; }
.hora-detalle-row:hover { background: rgba(127, 127, 127, 0.06); }
.hd-fecha       { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.hd-persona     {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: white;
}
.hd-tipo        { font-size: 12px; color: var(--ink); }
.hd-duracion    { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.hd-descripcion { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-importe     { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.hd-acciones    { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; }
.hora-detalle-row:hover .hd-acciones { opacity: 1; }

/* ════════════════════════════════════════════════════════════════════════
 * v456 · Módulo FINANZAS del despacho
 * ════════════════════════════════════════════════════════════════════════ */
.finanzas-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 8px 0 16px;
}
.finanzas-periodo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.finanzas-periodo .input {
  width: 150px;
}
.finanzas-periodo .select {
  min-width: 170px;
}

/* Sub-pestañas */
#finanzas-subtabs {
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.finsub {
  animation: fadein 0.2s ease;
}
.finsub.hidden { display: none; }

.finsub-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.finsub-header h3 { margin: 0 0 4px 0; }

/* KPI cards específicas Finanzas */
.kpi-card.kpi-ingreso       { border-left: 4px solid var(--success); }
.kpi-card.kpi-gasto         { border-left: 4px solid #f59e0b; }
.kpi-card.kpi-nominas       { border-left: 4px solid #8b5cf6; }
.kpi-card.kpi-impuestos     { border-left: 4px solid #06b6d4; }
.kpi-card.kpi-margen-despacho { border-left: 4px solid var(--primary); border-width: 4px; }
.kpi-card.kpi-margen-despacho.margen-positivo { background: linear-gradient(135deg, rgba(16,185,129,0.08), transparent); }
.kpi-card.kpi-margen-despacho.margen-negativo { background: linear-gradient(135deg, rgba(239,68,68,0.08), transparent); }
.kpi-card.kpi-pendiente     { border-left: 4px solid #6b7280; }

/* Widgets del Resumen */
.finanzas-widgets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.finanzas-grafico {
  margin-top: 8px;
}
.grafico-leyenda {
  display: flex;
  gap: 16px;
  justify-content: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.grafico-leyenda .leg-chip {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 4px;
}

.tabla-resumen {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tabla-resumen th,
.tabla-resumen td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.tabla-resumen th { text-align: left; color: var(--text-muted); font-weight: 500; }
.tabla-resumen td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-resumen th.num { text-align: right; }

.equilibrio-grande {
  font-size: 26px;
  font-weight: 700;
  color: var(--primary);
  margin: 8px 0;
}
.equilibrio-desglose {
  margin: 12px 0 0;
  padding-left: 18px;
  font-size: 13px;
}
.equilibrio-desglose li { margin: 4px 0; }

.finanzas-comparativa .tabla-resumen td { padding: 8px; }

/* Sub-resumen pequeño bajo el header */
.finanzas-resumen-mini {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg-elev);
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
}

/* Tabla genérica del módulo Finanzas */
.tabla-finanzas {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tabla-finanzas thead th {
  text-align: left;
  padding: 8px 10px;
  background: var(--bg-elev);
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border);
}
.tabla-finanzas tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.tabla-finanzas tbody tr:hover { background: var(--bg-elev); }
.tabla-finanzas td.num,
.tabla-finanzas th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-finanzas td.acciones { text-align: right; white-space: nowrap; }
.tabla-finanzas tr.row-historico td { opacity: 0.55; }

.chip-recurr {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.empty-finanzas {
  text-align: center;
  padding: 30px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-muted);
}

/* Impuestos · trimestres */
.impuestos-config-resumen {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg-elev);
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}
.impuestos-trims {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.trim-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.trim-card.trim-actual {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
}
.trim-card.trim-pasado { opacity: 0.7; }
.trim-card.trim-futuro { opacity: 0.4; }
.trim-titulo {
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 14px;
}
.trim-linea {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 3px 0;
}
.trim-linea.trim-total {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 6px;
  font-size: 13px;
}
.provision-card {
  background: linear-gradient(135deg, rgba(6,182,212,0.08), transparent);
  border: 1px solid #06b6d4;
  border-radius: 10px;
  padding: 14px 18px;
}
.provision-card h4 { margin: 0 0 4px 0; color: #06b6d4; }
.provision-valor {
  font-size: 28px;
  font-weight: 700;
  color: #06b6d4;
  margin: 6px 0;
}

/* Presupuestos · barra de progreso */
.barra-progreso {
  width: 140px;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}
.barra-rellena {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}
.barra-rellena.barra-ok    { background: var(--success); }
.barra-rellena.barra-aviso { background: #f59e0b; }
.barra-rellena.barra-exceso{ background: var(--danger); }

/* Modales Finanzas · z-index y tamaño */
#modal-fin-gasto, #modal-fin-nomina, #modal-fin-cobro,
#modal-fin-impuestos-config, #modal-fin-presupuesto { z-index: 100150; }
#modal-fin-gasto .modal-honorarios-dialog,
#modal-fin-nomina .modal-honorarios-dialog,
#modal-fin-cobro .modal-honorarios-dialog,
#modal-fin-impuestos-config .modal-honorarios-dialog,
#modal-fin-presupuesto .modal-honorarios-dialog {
  width: min(620px, 95vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

/* Inputs dentro de los modales Finanzas */
#modal-fin-gasto input, #modal-fin-gasto select, #modal-fin-gasto textarea,
#modal-fin-nomina input, #modal-fin-nomina select, #modal-fin-nomina textarea,
#modal-fin-cobro input, #modal-fin-cobro select, #modal-fin-cobro textarea,
#modal-fin-impuestos-config input, #modal-fin-impuestos-config select, #modal-fin-impuestos-config textarea,
#modal-fin-presupuesto input, #modal-fin-presupuesto select, #modal-fin-presupuesto textarea {
  width: 100%;
  box-sizing: border-box;
}

.finanzas-lista { margin-top: 8px; }

/* v456t · Toggle empleado/autónomo en modal de nómina */
.fn-tipo-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
.fn-tipo-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--bg);
}
.fn-tipo-opt:hover { background: var(--bg-elev); }
.fn-tipo-opt input[type="radio"] {
  margin: 0;
  width: auto !important;
  accent-color: var(--primary);
}
.fn-tipo-opt:has(input:checked) {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.10), transparent);
}

@keyframes fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .finanzas-widgets-grid { grid-template-columns: 1fr; }
  .finanzas-resumen-mini { gap: 12px; font-size: 12px; }
  .tabla-finanzas { font-size: 12px; }
  .tabla-finanzas thead th, .tabla-finanzas tbody td { padding: 6px 8px; }
}

/* ════════════════════════════════════════════════════════════════════════
 * v458 · Mejoras generales de visualización en MÓVIL
 * (solo dentro de media queries · no afecta al PC)
 * ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  /* ─ Targets táctiles más grandes (recomendación 44px iOS/Android) ─ */
  .btn,
  .view-tab,
  .sub-tab,
  .proy-tab,
  .modal-close,
  .input-clear {
    min-height: 42px;
  }

  /* ─ Inputs y selects más cómodos al tocar ─ */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    font-size: 16px;  /* evita zoom-in automático de iOS al focus */
    min-height: 42px;
    padding: 8px 12px;
  }
  textarea { min-height: 80px; }

  /* ─ Modales casi fullscreen para más espacio de trabajo ─ */
  .modal-dialog {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 94vh !important;
    margin: 3vh auto;
  }

  /* ─ Cabeceras de página más compactas ─ */
  .page-header { padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
  .page-header h1 { font-size: 18px; line-height: 1.2; }
  .page-header .subtitle { font-size: 12px; }

  /* ─ Sub-pestañas con scroll horizontal cómodo ─ */
  .view-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }
  .view-tabs::-webkit-scrollbar { height: 4px; }
  .view-tab, .sub-tab {
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 10px 14px;
  }

  /* ─ KPI cards con tamaño coherente ─ */
  .kpi-card {
    padding: 12px 14px;
    border-radius: 10px;
  }
  .kpi-card .kpi-valor { font-size: 18px; line-height: 1.2; }
  .kpi-card .kpi-label { font-size: 10px; letter-spacing: 0.4px; }
  .kpi-card .kpi-meta { font-size: 11px; }
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* ─ Filtros de proyectos en columna ─ */
  .filters {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .filters .input,
  .filters .select { width: 100%; }

  /* ─ Tablas pequeñas con scroll horizontal ─
   * Excluye la tabla principal de proyectos para evitar que se corten nombres. */
  .tabla-finanzas,
  .tabla-resumen {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Tabla principal de proyectos · permite que el nombre se trunque con ... */
  #tabla-proyectos td,
  #tabla-proyectos th {
    white-space: normal;
    word-break: break-word;
  }

  /* ─ Cards/bloques con menos padding pero misma legibilidad ─ */
  .form-group { margin-bottom: 10px; }
  .form-row { gap: 8px; }
  .honorarios-bloque,
  .widget-card {
    padding: 12px;
    border-radius: 10px;
  }
  .widget-titulo { font-size: 14px; }

  /* ─ Topbar · padding razonable y scroll horizontal si hay muchos iconos ─ */
  .topbar {
    padding: 8px 12px;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .topbar > * { flex-shrink: 0; }
  .topbar::-webkit-scrollbar { display: none; }
  .topbar h1, .topbar .app-title { font-size: 15px; }

  /* ─ Form rows nunca en grid de 2+ columnas en móvil ─ */
  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* ─ Resúmenes mini en columna para que se lean bien ─ */
  .finanzas-resumen-mini,
  .horas-resumen-mini {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* ─ Botones de acción más legibles ─ */
  .btn.btn-primary,
  .btn.btn-secondary,
  .btn.btn-danger { font-size: 14px; }

  /* ─ Footer de modal · compacto, deja que los botones se ajusten naturales ─ */
  .modal-footer {
    padding: 10px 12px;
    gap: 6px;
    flex-wrap: wrap;
  }
  .modal-footer .btn {
    padding: 8px 12px;
    font-size: 13px;
    /* SIN flex:1 · cada botón ocupa su ancho natural · más compacto */
  }
}

/* Móvil pequeño (≤ 420px) · ajustes finos */
@media (max-width: 420px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-card .kpi-valor { font-size: 22px; }
  .page-header h1 { font-size: 16px; }
  .view-tab, .sub-tab { padding: 9px 12px; font-size: 13px; }
}

/* v460 · Modal exportar proyectos */
.exp-formato-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px;
}
.exp-formato-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 2px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: all 0.15s; text-align: left;
}
.exp-formato-opt:hover { background: var(--bg-elev); }
.exp-formato-opt input[type="radio"] { margin: 0; width: auto !important; accent-color: var(--primary); }
.exp-formato-opt:has(input:checked) {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.10), transparent);
}
.exp-cols-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 4px 12px; margin-top: 6px;
}
.exp-cols-grid label {
  display: flex; align-items: center; gap: 8px;
  justify-content: flex-start;     /* texto + tic pegados a la izquierda */
  font-size: 13px; cursor: pointer; padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.1s;
}
.exp-cols-grid label:hover { background: var(--bg-elev); }
.exp-cols-grid label span { flex: 0 0 auto; }   /* el texto NO crece */
.exp-cols-grid input[type="checkbox"] {
  width: auto !important; margin: 0; accent-color: var(--primary);
  order: 1;                        /* tic a la izquierda */
}
.exp-cols-grid label span { order: 2; }   /* texto después */

/* v461 · Reacciones a mensajes del chat */
.chat-msg-reacciones {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.chat-msg-reaccion-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(127, 127, 127, 0.10);
  border: 1px solid rgba(127, 127, 127, 0.20);
  border-radius: 12px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: all 0.12s;
}
.chat-msg-reaccion-pill:hover {
  background: rgba(var(--primary-rgb), 0.15);
  border-color: rgba(var(--primary-rgb), 0.40);
}
.chat-msg-reaccion-pill.mia {
  background: rgba(var(--primary-rgb), 0.22);
  border-color: rgba(var(--primary-rgb), 0.60);
}
.chat-msg-reaccion-pill .emj { font-size: 14px; }
.chat-msg-reaccion-pill .cnt { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.chat-msg-reaccion-pill.mia .cnt { color: var(--primary); }

/* Botón "+ reacción" como una acción más, junto a editar/borrar */
.chat-msg-acciones .chat-msg-reaccion-trigger {
  font-size: 14px;
}

/* Picker flotante */
.chat-reaccion-picker {
  position: fixed;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  display: flex;
  gap: 4px;
  z-index: 100200;
  animation: pickerIn 0.12s ease-out;
}
@keyframes pickerIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-reaccion-picker .picker-emoji {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  transition: all 0.1s;
}
.chat-reaccion-picker .picker-emoji:hover {
  background: rgba(var(--primary-rgb), 0.15);
  border-color: rgba(var(--primary-rgb), 0.40);
  transform: scale(1.15);
}

/* ════════════════════════════════════════════════════════════════════════
 * v464 · Módulo REUNIONES del despacho
 * ════════════════════════════════════════════════════════════════════════ */
.reuniones-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 8px 0 16px;
}
#reuniones-subtabs { margin-bottom: 16px; flex-wrap: wrap; }
.reusub { animation: fadein 0.2s ease; }
.reusub.hidden { display: none; }

.reuniones-resumen-mini {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg-elev);
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 14px;
}

.reuniones-lista { display: flex; flex-direction: column; gap: 10px; }
.reu-card {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  padding: 12px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.reu-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.reu-card.pasada { opacity: 0.7; }
.reu-card-fecha {
  text-align: center;
  padding: 6px 0;
  border-right: 2px solid var(--border);
  display: flex; flex-direction: column; justify-content: center;
}
.reu-fecha-grande { font-size: 30px; font-weight: 700; line-height: 1; color: var(--primary); }
.reu-fecha-mes { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-muted); }
.reu-fecha-hora { font-size: 11.5px; margin-top: 4px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.reu-card-info { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.reu-card-titulo { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.reu-card-meta { font-size: 12px; color: var(--ink-muted); }
.reu-card-asistentes { display: flex; gap: -4px; margin-top: 4px; }
.reu-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  color: white; font-size: 10px; font-weight: 600;
  border: 2px solid var(--bg-elev);
  margin-right: -6px;
}
.reu-avatar.asist-si { box-shadow: 0 0 0 2px var(--success); }
.reu-avatar.asist-no { opacity: 0.4; }
.reu-avatar.reu-mas {
  background: var(--border) !important; color: var(--ink);
}
.reu-chip-recurr {
  font-size: 10px;
  padding: 1px 6px;
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary);
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.reu-card-acciones {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end; justify-content: center;
}
.reu-respuesta-acciones { display: flex; gap: 4px; }
.btn-respuesta {
  padding: 3px 8px;
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 6px;
  cursor: pointer;
}
.btn-respuesta:hover { background: var(--bg); }
.btn-respuesta.activo { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* Vista semana */
.reuniones-semana-cabecera {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-bottom: 14px;
}
.reu-sem-cab {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; margin-bottom: 6px;
}
.reu-sem-dia-cab {
  text-align: center; padding: 8px 6px;
  background: var(--bg-elev); border-radius: 6px;
  font-size: 13px;
}
.reu-sem-dia-cab.hoy {
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15), transparent);
  border: 1px solid var(--primary);
}
.reu-sem-cuerpo {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.reu-sem-col {
  min-height: 200px;
  background: var(--bg-elev);
  border-radius: 6px;
  padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.reu-sem-evento {
  padding: 6px 8px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.20), rgba(var(--primary-rgb), 0.08));
  border-left: 3px solid var(--primary);
  border-radius: 4px;
  cursor: pointer;
  font-size: 11.5px;
  display: flex; flex-direction: column; gap: 2px;
}
.reu-sem-evento:hover { background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.30), rgba(var(--primary-rgb), 0.12)); }
.reu-sem-hora { font-weight: 600; color: var(--primary); font-variant-numeric: tabular-nums; }
.reu-sem-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Modal · recurrencia, asistentes, avisos */
.reu-recurr-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 4px; }
.reu-recurr-opt {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border: 2px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: all 0.15s;
  text-align: center; justify-content: center;
}
.reu-recurr-opt:hover { background: var(--bg-elev); }
.reu-recurr-opt input[type="radio"] { width: auto !important; margin: 0; accent-color: var(--primary); }
.reu-recurr-opt:has(input:checked) {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.10), transparent);
}

.reu-dias-grid {
  display: flex; gap: 6px; margin-top: 4px;
  flex-wrap: wrap;
}
.reu-dias-grid label {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; font-size: 13px;
}
.reu-dias-grid input { width: auto !important; margin: 0; accent-color: var(--primary); }

.reu-asistentes-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 4px;
  max-height: 200px; overflow-y: auto;
  padding: 6px; background: var(--bg); border-radius: 6px;
  margin-top: 4px;
}
.reu-asist-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px;
  cursor: pointer; font-size: 13px;
}
.reu-asist-opt:hover { background: var(--bg-elev); }
.reu-asist-opt input { width: auto !important; margin: 0; accent-color: var(--primary); }
.reu-asist-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  color: white; font-size: 10px; font-weight: 600;
}
.reu-asist-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.reu-avisos-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px;
}
.reu-avisos-grid label {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; font-size: 12.5px;
}
.reu-avisos-grid input { width: auto !important; margin: 0; accent-color: var(--primary); }

/* Banner aviso de reunión inminente */
.banner-reunion {
  position: fixed;
  top: 12px; right: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: white;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 100300;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500;
  max-width: 460px;
  animation: bannerInRight 0.3s ease-out;
}
@keyframes bannerInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.banner-reunion .btn { padding: 4px 10px; }
.banner-reunion .btn-ghost { background: rgba(255,255,255,0.15); color: white; border-color: rgba(255,255,255,0.3); }

#modal-reunion .modal-honorarios-dialog input,
#modal-reunion .modal-honorarios-dialog select,
#modal-reunion .modal-honorarios-dialog textarea,
#modal-reunion-acta .modal-honorarios-dialog input,
#modal-reunion-acta .modal-honorarios-dialog select,
#modal-reunion-acta .modal-honorarios-dialog textarea {
  width: 100%; box-sizing: border-box;
}

@media (max-width: 720px) {
  .reu-card { grid-template-columns: 60px 1fr; }
  .reu-card-acciones { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
  .reu-recurr-grid { grid-template-columns: 1fr 1fr; }
  .reu-avisos-grid { grid-template-columns: 1fr 1fr; }
  .reu-sem-cuerpo { grid-template-columns: 1fr; }
  .reu-sem-cab { grid-template-columns: 1fr; }
}

/* v465 · Chip de estado de cobro en cabecera de proyecto (junto al de tareas) */
/* v469 · 4 estados · cerrado / al-dia / deuda / sin-facturar */
.cd-cobro-chip { margin-left: 8px; }
.cd-cobro-chip[data-estado="cerrado"] {
  /* Verde oscuro · proyecto cobrado totalmente */
  background: rgba(16, 185, 129, 0.22) !important;
  border-color: rgba(16, 185, 129, 0.6) !important;
  color: rgb(34, 197, 94) !important;
}
.cd-cobro-chip[data-estado="al-dia"] {
  /* Verde claro · al día (queda por facturar pero todo lo facturado cobrado) */
  background: rgba(74, 222, 128, 0.16) !important;
  border-color: rgba(74, 222, 128, 0.45) !important;
  color: rgb(134, 239, 172) !important;
}
.cd-cobro-chip[data-estado="deuda"] {
  /* Naranja · facturas emitidas pendientes de cobro */
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  color: rgb(245, 158, 11) !important;
}
.cd-cobro-chip[data-estado="sin-facturar"] {
  /* Gris · sin facturas todavía */
  background: rgba(127, 127, 127, 0.10) !important;
  border-color: rgba(127, 127, 127, 0.3) !important;
  color: var(--ink-muted) !important;
}

/* v466 · Punto de color junto al código en tabla de proyectos · estado de cobro */
/* v469 · 4 estados · cerrado / al-dia / deuda / sin-facturar */
.cobro-punto {
  display: inline-block;
  font-size: 14px;
  margin-right: 6px;
  cursor: help;
  vertical-align: middle;
  line-height: 1;
}
.cobro-punto.cerrado      { color: rgb(34, 197, 94); }
.cobro-punto.al-dia       { color: rgb(134, 239, 172); }
.cobro-punto.deuda        { color: rgb(245, 158, 11); }
.cobro-punto.sin-facturar { color: var(--ink-muted); opacity: 0.55; }

/* v466e · Agrupar chips de tareas + cobro juntos, alineados a la derecha */
.cd-header .cd-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* v467 · Badge de origen del cobro · vinculado a factura vs manual */
.cobro-origen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  font-size: 13px;
  cursor: help;
  user-select: none;
}
.cobro-origen.vinculado { opacity: 0.95; }
.cobro-origen.manual    { opacity: 0.45; }
.cobro-row.cobro-vinculado {
  background: rgba(var(--primary-rgb), 0.06);
  border-left: 3px solid rgba(var(--primary-rgb), 0.45);
  padding-left: 5px;
}
.cobro-row .btn-icono[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* v468 · Rango personalizado en filtro del Dashboard (mismo estilo que .dash-filtro-mini) */
.dash-filtro-rango {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
}
.dash-filtro-rango input[type="date"] {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--ink);
  padding: 3px 6px;
  font-size: 12px;
  border-radius: 6px;
  color-scheme: dark;
}
.dash-filtro-rango input[type="date"]:focus {
  outline: 2px solid rgba(var(--primary-rgb), 0.55);
  outline-offset: 0;
}
.dash-filtro-rango .meta { font-size: 12px; }

/* v470 · HE 1 · Ficha resumen final estilo CTEM ───────────────────────────── */
.he1-ficha-resumen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}
.he1-ficha-cabecera {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.he1-ficha-titulo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--ink);
  text-transform: uppercase;
}
.he1-ficha-meta {
  font-size: 12px;
  color: var(--ink-muted);
}
.he1-ficha-meta strong { color: var(--ink); }

.he1-ficha-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.he1-ficha-tabla th,
.he1-ficha-tabla td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.he1-ficha-tabla th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--ink-muted);
  text-transform: uppercase;
  background: rgba(255,255,255,0.03);
}
.he1-ficha-tabla .he1-ficha-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.he1-ficha-tabla .he1-ficha-estado { text-align: right; font-weight: 600; white-space: nowrap; }
.he1-ficha-tabla .he1-ficha-param { font-weight: 500; }
.he1-ficha-tabla .he1-ficha-desc { color: var(--ink-muted); font-size: 11px; font-weight: 400; }
.he1-ficha-tabla .he1-ficha-sub td {
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.05);
  border-bottom: none;
}

.he1-ficha-fila.cumple    .he1-ficha-estado { color: rgb(34, 197, 94); }
.he1-ficha-fila.no-cumple .he1-ficha-estado { color: rgb(239, 68, 68); }
.he1-ficha-fila.no-cumple { background: rgba(239, 68, 68, 0.04); }
.he1-ficha-fila.incompleto .he1-ficha-estado { color: rgb(245, 158, 11); }
.he1-ficha-fila.vacio { opacity: 0.55; }

.he1-ficha-veredicto {
  margin-top: 4px;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0.4px;
}
.he1-ficha-veredicto.cumple {
  background: rgba(16, 185, 129, 0.14);
  color: rgb(74, 222, 128);
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.he1-ficha-veredicto.no-cumple {
  background: rgba(239, 68, 68, 0.14);
  color: rgb(252, 165, 165);
  border: 1px solid rgba(239, 68, 68, 0.4);
}
.he1-ficha-veredicto.incompleto {
  background: rgba(245, 158, 11, 0.12);
  color: rgb(252, 211, 77);
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.he1-ficha-pie {
  font-size: 11px;
  font-style: italic;
  margin: 0;
}

/* v471 · HE 1 · Justificación automática de K · qsoljul · n50 ──────────── */
.he1-justif-auto {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.he1-justif-auto p {
  margin: 0;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid rgba(var(--primary-rgb), 0.45);
  border-radius: 0 6px 6px 0;
  line-height: 1.55;
  font-size: 13px;
  color: var(--ink);
  text-align: justify;
}
.he1-justif-auto p strong { color: rgb(134, 239, 172); }
.he1-justif-acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.he1-justif-acciones .meta { font-size: 11px; font-style: italic; }
.btn-copiar-justif {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 6px;
  background: rgba(var(--primary-rgb), 0.15);
  border: 1px solid rgba(var(--primary-rgb), 0.45);
  color: rgb(147, 197, 253);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-copiar-justif:hover {
  background: rgba(var(--primary-rgb), 0.25);
}
.btn-copiar-justif.copiado {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.5);
  color: rgb(134, 239, 172);
}

/* v472 · HE 1 · Excepción K (demanda <15 kWh/m²año) ───────────────────────── */
.he1-ficha-nota {
  font-size: 12px;
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(var(--primary-rgb), 0.10);
  border-left: 3px solid rgba(var(--primary-rgb), 0.45);
  border-radius: 0 6px 6px 0;
  color: rgb(147, 197, 253);
  line-height: 1.45;
}
.he1-ficha-nota strong { color: rgb(191, 219, 254); }
.he1-ficha-fila.no-aplica { opacity: 0.65; background: rgba(var(--primary-rgb), 0.04); }
.he1-ficha-fila.no-aplica .he1-ficha-estado { color: rgb(147, 197, 253); font-style: italic; }

/* ============================================================================
   v536 · REVISIÓN MÓVIL GLOBAL (julio 2026)
   ----------------------------------------------------------------------------
   TODO lo que hay aquí vive dentro de @media (max-width: 720px). Una regla
   dentro de un media query de ancho máximo NO puede aplicarse en escritorio,
   así que este bloque no puede desconfigurar la vista de ordenador.
   Se coloca al final del archivo a propósito: al tener la misma especificidad
   que reglas móviles anteriores, gana por orden de cascada y evita tener que
   recurrir a !important.
   ========================================================================== */
@media (max-width: 720px) {

  /* ── 1 · BARRA SUPERIOR ────────────────────────────────────────────────
     Antes: flex-wrap:nowrap + overflow-x:auto + scrollbar OCULTO. Con la
     marca, el menú, el buscador, 8 iconos, el usuario y Salir, el contenido
     medía mucho más que la pantalla y los últimos iconos (entre ellos el
     CHAT) quedaban fuera, sin ninguna pista visual de que se podía deslizar.
     Ahora se envuelve en varias filas: todo queda accesible con el pulgar. */
  .topbar {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    row-gap: 8px;
    height: auto;
    min-height: 0;
  }
  .topbar-inner {
    flex-wrap: wrap;
    height: auto;
    row-gap: 8px;
  }
  /* La navegación principal ocupa su propia fila completa y se centra. */
  .main-nav {
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 4px;
  }
  /* CLAVE (v537): todos los iconos (buscador, CHAT, consultor, notas, horas,
     actualizar, notificaciones, tema, Salir) viven dentro de un único
     .user-block. Al ser un solo elemento flex de la barra, envolver la barra
     no envolvía los iconos entre sí: el bloque se alineaba a la derecha y lo
     que no cabía se desbordaba hacia la IZQUIERDA, quedando cortado. Por eso
     desaparecían justo los tres primeros, el chat entre ellos.
     Haciéndolo envolver por dentro, todos los iconos quedan accesibles. */
  .user-block {
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-shrink: 1;
    width: 100%;
    row-gap: 8px;
    gap: 8px;
    order: 2;
  }
  /* El buscador no debe comerse la fila entera. */
  .user-block .buscador-trigger {
    flex: 0 0 auto;
    min-width: 40px;
  }

  /* ── 2 · FICHA DEL PROYECTO · pestañas ─────────────────────────────────
     .proy-tabs es sticky con fondo translúcido y backdrop-filter. En el móvil
     se superponía al contenido y tapaba el campo del nombre. En pantalla
     pequeña no compensa: la dejamos en flujo normal y con fondo opaco. */
  .proy-tabs {
    position: static;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-elev);
    box-shadow: none;
    margin: 0 0 12px;
    padding: 4px 2px 0;
    border-radius: 8px;
  }
  .proy-tab {
    font-size: 12.5px;
    padding: 8px 10px;
    min-height: 40px;
  }
  /* ── 2b · "Organización estudio" plegable (v537) ───────────────────────
     Este bloque ocupaba casi toda la pantalla de la ficha y dejaba el
     formulario fuera de la vista. Ahora se pliega tocando su cabecera y
     arranca plegado. Fuera del móvil estas reglas no existen. */
  .cd-header {
    cursor: pointer;
    user-select: none;
    align-items: center;
  }
  /* Flecha indicadora de que se puede plegar/desplegar. */
  .cd-title::after {
    content: "▾";
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    opacity: 0.7;
    transition: transform 0.15s ease;
  }
  .control-despacho.cd-colapsado .cd-title::after { transform: rotate(-90deg); }
  .control-despacho.cd-colapsado .cd-row,
  .control-despacho.cd-colapsado .cd-notas,
  .control-despacho.cd-colapsado textarea {
    display: none;
  }
  .control-despacho.cd-colapsado {
    margin-bottom: 10px;
    padding-bottom: 6px;
  }

  /* Footer del modal: en el móvil ocupaba media pantalla con 7 botones. */
  .modal-footer {
    gap: 6px;
    padding: 8px 10px;
  }
  .modal-footer .btn {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    padding: 10px 8px;
  }

  /* ── 2c · CHAT · caja de escritura (v538) ──────────────────────────────
     El textarea compartía fila con el clip, la casilla "Pedir confirmación"
     y el botón Enviar, así que se quedaba en unos 90 px y la palabra
     "Escribe…" salía partida en dos líneas. Ahora el texto ocupa su propia
     fila completa y los controles bajan debajo. */
  .chat-input-fila {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
  }
  .chat-input-fila .modal-chat-input {
    flex: 1 0 100%;
    width: 100%;
    min-height: 64px;
    max-height: 140px;
    /* 16px evita que el navegador móvil haga zoom al enfocar el campo. */
    font-size: 16px;
    line-height: 1.35;
    padding: 10px 12px;
    resize: none;
  }
  .chat-input-fila #chat-btn-adjuntar { flex: 0 0 auto; }
  .chat-input-fila .chat-pide-conf-label {
    flex: 1 1 auto;
    font-size: 12px;
    white-space: nowrap;
  }
  .chat-input-fila #chat-btn-enviar {
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* ── 3 · FILAS CON COLUMNAS FIJAS ──────────────────────────────────────
     Todas estas rejillas sumaban entre 380 y 510 px de columnas de ancho fijo.
     En una pantalla de 390 px desbordaban y aplastaban el texto. Pasan a una
     sola columna, que es lo natural en vertical. */
  .tarea-row,
  .anejo-row,
  .honorarios-presupuesto-row,
  .tecnico-asignado-row,
  .cliente-asignado-row,
  .colegio-row {
    grid-template-columns: 1fr !important;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
  }
  /* Los controles de esas filas ocupan todo el ancho disponible. */
  .tarea-row > *,
  .anejo-row > *,
  .honorarios-presupuesto-row > *,
  .tecnico-asignado-row > *,
  .cliente-asignado-row > *,
  .colegio-row > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  /* Botones de borrar/acciones: no deben estirarse a todo el ancho. */
  .tarea-row .btn-icono,
  .anejo-row .btn-icono,
  .tecnico-asignado-row .btn-icono,
  .cliente-asignado-row .btn-icono,
  .colegio-row .btn-icono {
    width: auto;
    align-self: flex-end;
  }

  /* ── 4 · DASHBOARD ─────────────────────────────────────────────────────
     minmax(360px, 1fr) desbordaba en móviles de 360 px o menos. */
  .dash-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── 5 · MAPA ──────────────────────────────────────────────────────────
     La barra tiene 18 chips de leyenda: que respiren y no empujen el mapa. */
  .mapa-toolbar {
    padding: 8px 10px;
    gap: 8px;
  }
  .mapa-info { font-size: 12px; }
  .mapa-leyenda {
    margin-left: 0;
    max-height: 88px;
    overflow-y: auto;
  }
  .mapa-leyenda-item { font-size: 11px; padding: 3px 7px; }

  /* ── 6 · SEGURO ANTI-DESBORDAMIENTO ────────────────────────────────────
     NOTA: aquí iba un `html, body { overflow-x: hidden }` como red de
     seguridad, pero se ha descartado a propósito: al declarar overflow en un
     ancestro se rompe `position: sticky` en sus descendientes, y hay cabeceras
     sticky (modal de memoria) que dejarían de funcionar en el móvil. Como las
     causas reales del desbordamiento ya están corregidas arriba, no hace falta
     ese parche. Si algún día reaparece scroll horizontal, hay que localizar el
     elemento concreto que lo provoca en vez de taparlo aquí. */
  .container, .container-wide { max-width: 100%; }
}

/* ── v541 · Aviso de versionado normativo (ficha del proyecto) ───────────── */
.aviso-normativa {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--warning);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  font-size: 12px;
}
.aviso-normativa-tit { font-weight: 600; color: var(--warning); margin-bottom: 4px; }
.aviso-normativa-cong { font-weight: 400; color: var(--ink-muted); font-style: italic; }
.aviso-normativa-item { margin-top: 5px; line-height: 1.35; }
.aviso-normativa-fecha { color: var(--ink-muted); font-size: 11px; }
.aviso-normativa-trans {
  margin-top: 2px; padding-left: 8px;
  border-left: 2px solid var(--border);
  color: var(--ink-muted); font-size: 11.5px; line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════════════════
   v564 · FESTIVOS en el calendario
   Son eventos de fondo: tiñen el día entero sin robar línea a proyectos,
   tareas ni ausencias, que se siguen leyendo por encima.
   ══════════════════════════════════════════════════════════════════════════ */
.fc .fc-event-festivo {
  opacity: 1 !important;          /* el alpha lo damos nosotros en el color */
  background: transparent !important;
}
.fc .fc-daygrid-bg-harness .fc-event-festivo.fc-festivo-nacional { background: rgba(220,  38,  38, .16) !important; }
.fc .fc-daygrid-bg-harness .fc-event-festivo.fc-festivo-aragon   { background: rgba(194,  65,  12, .16) !important; }
.fc .fc-daygrid-bg-harness .fc-event-festivo.fc-festivo-local    { background: rgba(124,  58, 237, .18) !important; }

/* Nombre del festivo, abajo del todo de la celda y en pequeño */
.fc .fc-event-festivo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.fc .fc-festivo-txt {
  font-size: 10px;
  line-height: 1.15;
  font-weight: 600;
  text-align: center;
  padding: 0 3px 2px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.fc .fc-festivo-nacional .fc-festivo-txt { color: #dc2626; }
.fc .fc-festivo-aragon   .fc-festivo-txt { color: #c2410c; }
.fc .fc-festivo-local    .fc-festivo-txt { color: #7c3aed; cursor: pointer; pointer-events: auto; }

/* En tema oscuro los tonos saturados no se leen sobre el fondo */
@media (prefers-color-scheme: dark) {
  .fc .fc-festivo-nacional .fc-festivo-txt { color: #fca5a5; }
  .fc .fc-festivo-aragon   .fc-festivo-txt { color: #fdba74; }
  .fc .fc-festivo-local    .fc-festivo-txt { color: #c4b5fd; }
}

/* Vista Agenda: ahí sí conviene que ocupen su propia fila */
.fc .fc-list-event.fc-event-festivo { background: transparent !important; }

/* v568 · Código postal de obra deducido de la dirección */
#cp-obra-aviso.cp-obra-deducido {
  color: var(--success, #16a34a);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════
   v570 · Simulacro de visado · panel de coherencia del proyecto
   ══════════════════════════════════════════════════════════════════════════ */
.sim-box { max-width: 640px; max-height: 78vh; overflow-y: auto; }
.sim-bloque { margin-top: 14px; border-radius: 8px; padding: 10px 12px; }
.sim-bloque h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: .01em; }
.sim-error { background: rgba(239, 68, 68, .10); border-left: 3px solid #ef4444; }
.sim-aviso { background: rgba(245, 158, 11, .10); border-left: 3px solid #f59e0b; }
.sim-info  { background: rgba(59, 130, 246, .10); border-left: 3px solid #3b82f6; }
.sim-ok    { background: rgba(22, 163, 74, .10);  border-left: 3px solid #16a34a; }
.sim-item { padding: 7px 0; border-top: 1px solid rgba(255,255,255,.07); }
.sim-bloque .sim-item:first-of-type { border-top: 0; }
.sim-item-titulo { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.sim-item-detalle { font-size: 12px; opacity: .85; line-height: 1.45; }
.sim-item-donde {
  font-size: 11px; opacity: .6; margin-top: 3px;
  text-transform: uppercase; letter-spacing: .04em;
}

/* v608 · Simulacro · pestañas y checklist del colegio (capa 4) */
.sim-box.sim-box-ancho { max-width: 860px; }
.sim-tabs { display: flex; gap: 6px; margin-top: 12px; border-bottom: 1px solid var(--border, #2c3547); }
.sim-tab { background: none; border: 0; border-bottom: 2px solid transparent; color: inherit; font: inherit;
  font-size: 13px; padding: 6px 10px; cursor: pointer; opacity: .7; }
.sim-tab.on { border-bottom-color: var(--accent, #4f8cff); opacity: 1; font-weight: 600; }
.vis-cab { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.vis-colegio { font-size: 12px; display: flex; gap: 8px; align-items: center; }
.vis-colegio select, .vis-filtros input[type=search] {
  flex: 1; background: var(--bg-elev-2, #334155); color: inherit;
  border: 1px solid var(--border, #2c3547); border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 12px;
}
.vis-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.vis-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--bg-elev-2, #334155); }
.vis-chip-man { cursor: pointer; opacity: .7; }
.vis-chip-man.on { opacity: 1; background: rgba(79, 140, 255, .25); }
.vis-chip-man input { margin: 0 3px 0 0; vertical-align: -2px; }
.vis-man summary { font-size: 12px; cursor: pointer; opacity: .8; margin-bottom: 6px; }
.vis-progreso { margin-top: 12px; }
.vis-barra { height: 6px; border-radius: 3px; background: var(--bg-elev-2, #334155); overflow: hidden; }
.vis-barra span { display: block; height: 100%; background: #16a34a; }
.vis-cuentas { font-size: 12px; margin-top: 4px; opacity: .85; }
.vis-filtros { display: flex; gap: 12px; align-items: center; margin: 10px 0 4px; font-size: 12px; }
.vis-filtros input[type=search] { flex: 1; }
.vis-bloque { margin-top: 8px; border: 1px solid var(--border, #2c3547); border-radius: 8px; padding: 6px 10px; }
.vis-bloque summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.vis-bloque-n { font-weight: 400; font-size: 11px; opacity: .7; margin-left: 6px; }
.vis-item { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border, #2c3547); }
.vis-bloque summary + .vis-item { border-top: 0; }
.vis-item.vis-cumple .vis-texto, .vis-item.vis-no_aplica .vis-texto { opacity: .55; }
.vis-botones { display: flex; gap: 3px; flex-shrink: 0; align-self: flex-start; }
.vis-btn { min-width: 30px; font-size: 11px; padding: 3px 5px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--border, #2c3547); background: none; color: inherit; }
.vis-btn.on[data-estado=cumple] { background: #16a34a; border-color: #16a34a; color: #fff; }
.vis-btn.on[data-estado=no_aplica] { background: #64748b; border-color: #64748b; color: #fff; }
.vis-btn.on[data-estado=pendiente] { background: rgba(245, 158, 11, .25); border-color: #f59e0b; }
.vis-cuerpo { flex: 1; min-width: 0; }
.vis-texto { font-size: 13px; line-height: 1.45; }
.vis-cond { font-size: 12px; font-style: italic; opacity: .75; margin-top: 2px; }
.vis-pie { font-size: 11px; opacity: .6; margin-top: 3px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vis-fuente { text-decoration: underline dotted; cursor: help; }
.vis-auto { color: var(--accent, #4f8cff); }
.vis-link { background: none; border: 0; color: var(--accent, #4f8cff); cursor: pointer; font-size: 11px; padding: 0; }
/* v611 · Calculadora de costes de referencia del COAA */
.crc-box .vis-bloque { margin-top: 10px; }
.crc-fila { display: flex; gap: 8px; align-items: center; font-size: 12px; margin: 8px 0; }
.crc-fila select { flex: 1; background: var(--bg-elev-2, #334155); color: inherit; border: 1px solid var(--border, #2c3547); border-radius: 6px; padding: 4px 6px; font-size: 12px; }
.crc-preg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; font-size: 12px; margin: 6px 0; }
.crc-preg label { display: flex; gap: 6px; align-items: baseline; }
.crc-preg .crc-na { opacity: .4; }
.crc-v { margin-left: auto; opacity: .7; white-space: nowrap; }
.crc-sup { display: flex; flex-direction: column; gap: 4px; font-size: 12px; margin: 8px 0; }
.crc-sup label { display: flex; gap: 8px; align-items: center; }
.crc-sup .crc-v { margin-left: auto; }
.crc-num { width: 90px; text-align: right; background: var(--bg-elev-2, #334155); color: inherit; border: 1px solid var(--border, #2c3547); border-radius: 6px; padding: 3px 6px; font-size: 12px; }
.crc-g4 { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.crc-g4 select { flex: 1; min-width: 0; background: var(--bg-elev-2, #334155); color: inherit; border: 1px solid var(--border, #2c3547); border-radius: 6px; font-size: 12px; }
.crc-res { font-size: 12px; margin: 3px 0; }
@media (max-width: 640px) { .crc-preg { grid-template-columns: 1fr; } }
.vis-auto-res { font-size: 12px; margin-top: 4px; padding: 4px 8px; border-radius: 6px; }
.vis-auto-aviso { background: rgba(245, 158, 11, .12); border-left: 2px solid #f59e0b; }
.vis-auto-ok { background: rgba(22, 163, 74, .10); border-left: 2px solid #16a34a; }
.vis-auto-error { background: rgba(239, 68, 68, .10); border-left: 2px solid #ef4444; }
.vis-nota-txt { font-size: 12px; margin-top: 4px; padding: 4px 8px; border-left: 2px solid var(--accent, #4f8cff); opacity: .9; white-space: pre-wrap; }
.vis-edicion { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.vis-edicion label { display: flex; flex-direction: column; gap: 2px; }
.vis-edicion textarea, .vis-edicion input { width: 100%; font: inherit; font-size: 12px; }

/* ── v579 · Vínculos del cliente ─────────────────────────────────────────── */
.vinc-personas { display: flex; flex-wrap: wrap; gap: 6px; }
.vinc-persona {
  display: inline-flex; align-items: baseline; gap: 7px;
  background: var(--bg-elev, #1e2536); border: 1px solid var(--border, #2c3547);
  border-radius: 999px; padding: 5px 12px; cursor: pointer;
  color: inherit; font: inherit; line-height: 1.3;
}
.vinc-persona:hover { border-color: var(--accent, #4f8cff); }
.vinc-persona-nombre { font-weight: 600; }
.vinc-persona-n { font-size: 11px; opacity: .65; }
.vinc-lista { list-style: none; margin: 0; padding: 0; }
.vinc-proy { padding: 7px 0; border-top: 1px solid var(--border, #2c3547); }
.vinc-proy:first-child { border-top: 0; }
.vinc-proy-link {
  display: flex; align-items: baseline; gap: 9px; width: 100%;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; font: inherit; text-align: left;
}
.vinc-proy-link:hover .vinc-nom { text-decoration: underline; }
.vinc-cod { font-variant-numeric: tabular-nums; opacity: .7; min-width: 62px; }
.vinc-nom { flex: 1; }
.vinc-rol {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  opacity: .6; white-space: nowrap;
}
.vinc-otros { font-size: 12px; opacity: .75; margin: 2px 0 0 71px; }
.vinc-solo { opacity: .5; font-style: italic; }

/* ── v584 · Valores heredados de la ficha ──────────────────────────────────
   Línea bajo el campo que dice de dónde sale el valor que usa el cálculo. */
.mem-hereda { font-size: 11.5px; margin: 5px 0 0; line-height: 1.4; }
.mem-hereda-ok    { color: var(--success); }
.mem-hereda-sust  { color: var(--ink-muted); }
.mem-hereda-falta { color: var(--warning); }
.mem-campo input[type="number"]::placeholder { color: var(--success); opacity: .75; }

/* ── v584 · Tarjetas de cálculo con texto tabulado ──────────────────────────
   Antes el texto se aplastaba en un párrafo y se perdían las columnas. */
.mem-calc-pre {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 12px; line-height: 1.45;
  white-space: pre; overflow-x: auto;
  margin: 0; padding: 2px 0; background: none; border: 0; color: inherit;
}

/* ── v591 · Pie del modal de proyecto ───────────────────────────────────────
   Ocho botones no caben en una fila: los textos se partían en dos líneas y
   «Guardar y salir» se salía del cuadro. Dos grupos que envuelven como bloque. */
.modal-footer-proyecto { flex-wrap: wrap; row-gap: 10px; }
.modal-footer-proyecto .mfp-grupo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modal-footer-proyecto .mfp-guardar { margin-left: auto; }
.modal-footer-proyecto .btn { white-space: nowrap; }
/* Las herramientas, algo más compactas, para que quepan en una sola fila y
   dejen las acciones de guardar como protagonistas en la fila de abajo. */
.modal-footer-proyecto .mfp-herramientas { gap: 6px; }
.modal-footer-proyecto .mfp-herramientas .btn { padding: 6px 10px; font-size: 12.5px; }

/* v619 · Aviso de carga al abrir o recargar la app */
.app-cargando {
  position: fixed; inset: 0; z-index: 8000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  transition: opacity .25s ease;
}
.app-cargando.saliendo { opacity: 0; pointer-events: none; }
.app-cargando-caja { text-align: center; color: var(--ink); }
.app-cargando-texto { font-size: 18px; font-weight: 600; margin-top: 14px; letter-spacing: .02em; }
.app-cargando-sub { font-size: 13px; opacity: .65; margin-top: 4px; }
.app-cargando-spinner {
  width: 38px; height: 38px; margin: 0 auto;
  border: 3px solid rgba(148, 163, 184, .3); border-top-color: var(--primary);
  border-radius: 50%; animation: app-cargando-giro .8s linear infinite;
}
@keyframes app-cargando-giro { to { transform: rotate(360deg); } }

/* v625 · cuadro de superficies por recinto */
.sup-estado-planta { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; }
.sup-estado-planta select { width: auto; }
.sup-tabla select, .sup-estado-planta select { width: 100%; font-size: 12px; padding: 3px 4px; background: var(--bg); color: var(--ink); border: 1px solid var(--border); border-radius: 4px; }
.sup-fila-exterior td { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.sup-ficha-row { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); font-size: 13px; align-items: center; }
.sup-ficha-dif { color: #b45309; }
.sup-import-avisos { margin-bottom: 12px; padding: 10px 14px; border: 1px solid #f59e0b; border-radius: 6px; background: color-mix(in srgb, #f59e0b 10%, transparent); font-size: 13px; }
.sup-import-avisos ul { margin: 6px 0 8px 18px; padding: 0; }
.sup-import-avisos .sup-av-error { color: #b91c1c; }

/* v636 · Marcadores en PDF (js/marcadores_pdf.js) */
.confirm-box.mkp-box { max-width: 860px; width: min(860px, 94vw); max-height: 88vh; display: flex; flex-direction: column; }
.mkp-elegir { display: inline-block; margin-top: 10px; cursor: pointer; }
.mkp-lista { margin-top: 12px; overflow: auto; flex: 1; min-height: 60px; border: 1px solid var(--border); border-radius: 6px; }
.mkp-lista .hint { padding: 10px 12px; }
.mkp-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.mkp-tabla th { position: sticky; top: 0; background: var(--bg-elev-2); color: var(--ink-muted); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); font-weight: 600; }
.mkp-tabla td { text-align: left; padding: 3px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.mkp-tabla td input[type=text] { text-align: left; border: 1px solid transparent; background: transparent; font: inherit; color: var(--ink); }
.mkp-tabla td select { background: var(--bg-elev-2); color: var(--ink); border: 1px solid var(--border); border-radius: 4px; font: inherit; padding: 1px 4px; }
.mkp-tabla td input[type=text]:focus { border-color: var(--primary); background: var(--bg); }
.mkp-tabla tr.mkp-off td { opacity: .45; }
.mkp-tabla .mkp-pag { text-align: right; color: var(--ink-muted); width: 48px; }
.mkp-box .confirm-actions { display: flex; gap: 8px; align-items: center; }