/* ==========================================================================
   SISTEMA DE DISEÑO - CORE PLATFORM 2.0
   ========================================================================== */

:root {
  /* Paleta de Colores (Basada en MOTS) */
  --mots-navy: #080456;
  --mots-navy-light: #120A8F;
  --mots-green: #00CBA4;
  --mots-blue: #A4D8FC;
  --mots-red: #FF4D4D;
  /* Coral y Gold: tokens del MOTS UI Design System (accent-coral #FB6C65,
     accent-yellow #FFD272) que no estaban usados todavía como color de UI —
     solo en el documento de cotización. Se agregan aquí para los chips de
     ícono de pestaña (2026-08-12, ver --tab-ico-* abajo). */
  --mots-coral: #FB6C65;
  --mots-gold: #FFD272;

  /* Fondos y Superficies */
  --bg-color: #F4F7FB;
  --surface-color: #FFFFFF;
  --sidebar-bg: var(--mots-navy);
  
  /* Textos */
  --text-primary: #1A1A2E;
  --text-secondary: #6B7280;
  --text-sidebar: rgba(255, 255, 255, 0.75);
  --text-sidebar-hover: #FFFFFF;
  
  /* UI Elements */
  --border-color: #E5E7EB;
  --border-sidebar: rgba(255, 255, 255, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.2);
  
  /* Sombras */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Radios */
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Easings (ver sección de animación) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Layout */
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 76px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   CLASES UTILITARIAS (Glassmorphism & Animaciones)
   ========================================================================== */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
}

.fade-in {
  /* Sin "forwards" a propósito: con fill:forwards la animación deja un
     Animation activo sobre el elemento de forma indefinida — y mientras ese
     Animation exista (aunque su valor final sea transform:none/identidad),
     Chrome lo sigue tratando como "elemento transformado" y crea un
     containing block nuevo para sus descendientes position:fixed. Un
     modal-overlay (fixed) anidado dentro de #main-content (que lleva esta
     clase) terminaba posicionado relativo a #main-content en vez de al
     viewport — aparecía pegado arriba y roto en vez de centrado (mismo bug
     ya resuelto en Producción usando un portal a document.body). Sin
     "forwards", al terminar la animación no queda ningún Animation colgado
     y el elemento vuelve a su transform:none normal del cascade — mismo
     resultado visual, sin el efecto colateral. Verificado en navegador.  */
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   PANTALLA DE LOGIN
   ========================================================================== */
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--mots-navy) 0%, #1a1a2e 100%);
}

.login-card {
  width: 100%;
  max-width: 420px;
  padding: 40px;
  border-radius: var(--radius-xl);
  text-align: center;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  margin: 20px;
  border-top: 3px solid var(--mots-green);
  animation: loginCardIn 380ms var(--ease-out);
}

@keyframes loginCardIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.login-logo {
  height: 48px;
  margin-bottom: 24px;
}

.login-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--mots-navy);
  margin-bottom: 8px;
}

.login-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.g-btn-wrapper {
  display: flex;
  justify-content: center;
  min-height: 44px; /* Altura del botón de google */
}

.login-error-msg {
  margin-top: 20px;
  padding: 12px;
  background-color: rgba(255, 77, 77, 0.1);
  color: var(--mots-red);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
}

.login-loading {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 14px;
}

.spinner {
  width: 72px;
  height: 72px;
  border: 3px solid rgba(8, 4, 86, 0.1);
  border-top-color: var(--mots-navy);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Una vez que app.js monta la animación Lottie dentro del .spinner (ver
   _initLottieSpinners), se quita el anillo CSS para no encimar los dos. */
.spinner[data-lottie] {
  border: none;
  animation: none;
}

@keyframes spin { 
  to { transform: rotate(360deg); } 
}

/* ==========================================================================
   LAYOUT PRINCIPAL (SPA)
   ========================================================================== */
.app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* SIDEBAR */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  color: #fff;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-right: 1px solid var(--border-sidebar);
  z-index: 50;
  position: relative;
  /* Anulamos el glassmorphism del padre para el sidebar y usamos solido */
  backdrop-filter: none;
  transition: width 220ms var(--ease-out);
}

/* Botón de colapso (solo escritorio): pastilla anclada al borde derecho,
   a la mitad de la altura del sidebar para no invadir nunca el logo. */
.sb-collapse-btn {
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: #fff;
  color: var(--mots-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  z-index: 60;
  padding: 0;
  transition: box-shadow 160ms ease;
}

.sb-collapse-btn:hover { box-shadow: var(--shadow-md); }
.sb-collapse-btn:active { transform: translateY(-50%) scale(0.9); }

.sb-collapse-icon {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  transition: transform 220ms var(--ease-out);
}

.sidebar.collapsed .sb-collapse-icon { transform: rotate(180deg); }

.sb-brand {
  padding: 24px 20px;
  border-bottom: 1px solid var(--border-sidebar);
  overflow: hidden;
}

.sb-logo-img {
  height: 32px;
  max-width: 100%;
  filter: brightness(0) invert(1);
}

/* Marca compacta (isotipo) para cuando el sidebar está colapsado: el wordmark
   completo no cabe en el riel de 76px sin recortarse feo. Oculta por defecto. */
.sb-logo-mini {
  display: none;
  height: 34px;
  width: auto;
  max-width: 100%;
}

.sb-subtitle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 8px;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 120ms ease-out;
}

.sb-menu {
  padding: 16px 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.sb-section {
  padding: 16px 20px 8px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  transition: opacity 120ms ease-out;
}

.sb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  margin: 4px 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-sidebar);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 120ms var(--ease-out);
}

.sb-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-sidebar-hover);
}

.sb-item:active { transform: scale(0.97); }

.sb-item.active {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-weight: 600;
}

.sb-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.sb-item span:last-child {
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 120ms ease-out;
}

.sb-spacer {
  flex: 1;
}

/* --- SIDEBAR COLAPSADO (escritorio): solo íconos, ancho reducido --- */
.sidebar.collapsed {
  width: var(--sidebar-w-collapsed);
}

.sidebar.collapsed .sb-subtitle,
.sidebar.collapsed .sb-section,
.sidebar.collapsed .sb-item span:last-child,
.sidebar.collapsed .sb-user-info {
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  white-space: nowrap;
}

/* .sb-user-info además sale del flujo flex por completo (no solo width:0) — si no,
   sigue "contando" como hijo del flex row junto a su gap, y descentra el avatar +
   botón de logout como pareja dentro del riel angosto. */
.sidebar.collapsed .sb-user-info { display: none; }

.sidebar.collapsed .sb-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 8px;
}

/* El wordmark completo no cabe en 76px sin recortarse: se reemplaza por
   la marca compacta "M" mientras el sidebar está colapsado. */
.sidebar.collapsed .sb-logo-img { display: none; }
.sidebar.collapsed .sb-logo-mini { display: block; }

.sidebar.collapsed .sb-item {
  justify-content: center;
  gap: 0;
}

/* Con el padding normal (20px por lado) el avatar (36px) + el botón de logout no
   caben lado a lado en el riel de 76px — se apilan verticalmente en su lugar. */
.sidebar.collapsed .sb-user {
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
}

/* SIDEBAR USER AREA */
.sb-user {
  padding: 16px 20px;
  border-top: 1px solid var(--border-sidebar);
  display: flex;
  align-items: center;
  gap: 12px;
}

.sb-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.sb-avatar img { width: 100%; height: 100%; object-fit: cover; }

.sb-user-info {
  min-width: 0;
  flex: 1;
}

.sb-user-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-role-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
  background: var(--mots-green);
  color: var(--mots-navy);
}

.btn-logout {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 16px;
  padding: 6px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease, transform 120ms var(--ease-out);
}

.btn-logout:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.btn-logout:active { transform: scale(0.9); }

/* --- FONDO DEL DRAWER MÓVIL --- */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 4, 86, 0.45);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out;
}

.sidebar-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* --- TOPBAR MÓVIL (oculto en escritorio) --- */
.mobile-topbar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--mots-navy);
  color: #fff;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 80;
}

.mt-menu-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 150ms ease, transform 120ms var(--ease-out);
}

.mt-menu-btn:hover { background: rgba(255, 255, 255, 0.2); }
.mt-menu-btn:active { transform: scale(0.92); }

.mt-logo {
  height: 20px;
  filter: brightness(0) invert(1);
}

.mt-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* COLUMNA DE CONTENIDO (vista + footer persistente) */
.content-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ÁREA DE CONTENIDO */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
  position: relative;
  min-width: 0;
}

/* DASHBOARD (Ventas): filtros, KPIs, barras, aging */
.dash-filters { display: flex; gap: 18px; align-items: flex-end; margin-bottom: 18px; flex-wrap: wrap; }
.dash-fgroup { display: flex; flex-direction: column; gap: 6px; }
.dash-fgroup label { font-size: 11px; color: var(--text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.dash-toggle { display: flex; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.dash-tbtn { padding: 8px 16px; border: none; background: #fff; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-secondary); transition: background .15s, color .15s; }
.dash-tbtn.active { background: var(--mots-navy); color: #fff; }
.kpi-card { background: #fff; border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; }
.kpi-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.kpi-value { font-size: 22px; font-weight: 700; color: var(--mots-navy); margin-top: 6px; }
.kpi-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 18px; }
.dash-row { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; margin-bottom: 18px; }
.dash-card { background: #fff; border: 1px solid var(--border-color); border-radius: 12px; padding: 18px; }
.dash-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.dash-card-head h3 { font-size: 14px; color: var(--mots-navy); text-transform: uppercase; letter-spacing: .5px; }
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; }
.bar-label { width: 120px; color: #1a1a2e; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { flex: 1; background: var(--bg-color); border-radius: 6px; height: 18px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--mots-navy); border-radius: 6px; }
.bar-val { width: 110px; text-align: right; color: var(--text-secondary); flex-shrink: 0; white-space: nowrap; }
.aging-list { display: flex; flex-direction: column; gap: 8px; max-height: 380px; overflow-y: auto; }
.aging-item { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--border-color); border-radius: 8px; cursor: pointer; }
.aging-item:hover { background: var(--bg-color); }
.aging-days { font-weight: 700; font-size: 13px; width: 48px; text-align: center; flex-shrink: 0; }
.aging-ok { color: var(--mots-green); } .aging-warn { color: #d97706; } .aging-risk { color: var(--mots-red); }
.aging-info { flex: 1; min-width: 0; }
.aging-q { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aging-rec { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.catalog-empty-mini { color: var(--text-secondary); font-size: 13px; padding: 8px 0; }
@media (max-width: 768px) {
  .dash-row { grid-template-columns: 1fr; }
  .dash-filters { flex-direction: column; align-items: stretch; gap: 10px; }
}

/* GESTIÓN (Ventas): subnav, badges, tabla ordenable/expandible, paginador, detalle */
.gst-subnav { display: flex; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; width: fit-content; margin-bottom: 16px; }
.gst-subbtn { padding: 9px 22px; border: none; background: #fff; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 7px; }
.gst-subbtn.active { background: var(--mots-navy); color: #fff; }
.gst-count { background: rgba(255,255,255,.25); font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; }
.gst-subbtn:not(.active) .gst-count { background: var(--bg-color); color: var(--text-secondary); }
.gst-filterbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 16px;
  background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md);
}
.gst-filterbar .form-input, .gst-filterbar .form-select { padding: 8px 12px; font-size: 13px; flex: none; }
/* Franja de KPIs de cobranza (Gestión › Proyectos) — variante compacta y sin
   estirar del .kpi-card/.kpi-grid genérico: acá caben 4 tarjetas cortas para
   que la tabla quede visible sin bajar, en vez de las tarjetas grandes que sí
   tienen sentido en Inicio/Dashboard (una sola franja, con más aire). */
.gst-cobranza-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 220px)); gap: 10px; margin-bottom: 14px; }
.gst-cobranza-grid .kpi-card { padding: 9px 14px; }
.gst-cobranza-grid .kpi-value { font-size: 19px; margin-top: 3px; }
.gst-cobranza-grid .kpi-sub { margin-top: 1px; }
.gst-rc { font-size: 12px; color: var(--text-secondary); font-weight: 500; white-space: nowrap; }
.gst-b { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.gst-b::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.gb-planning { background: #fff8e1; color: #92400e; } .gb-planning::before { background: #f59e0b; }
.gb-ongoing  { background: #ecfdf5; color: #065f46; } .gb-ongoing::before  { background: var(--mots-green); }
.gb-finished { background: #eff6ff; color: #1e40af; } .gb-finished::before { background: #3b82f6; }
.gb-cancelled{ background: #fef2f2; color: #991b1b; } .gb-cancelled::before{ background: #FB6C65; }
.gb-pagado   { background: #ecfdf5; color: #065f46; } .gb-pagado::before   { background: var(--mots-green); }
.gb-facturado{ background: #eff6ff; color: #1e40af; } .gb-facturado::before{ background: #3b82f6; }
.gb-porfacturar{ background:#fff8e1; color:#92400e; } .gb-porfacturar::before{ background:#f59e0b; }
.gst-pct { min-width: 95px; }
.gst-pwrap { display: flex; align-items: center; gap: 8px; }
.gst-ptrack { flex: 1; height: 6px; background: var(--border-color); border-radius: 99px; overflow: hidden; }
.gst-pfill { height: 100%; border-radius: 99px; }
.gst-plabel { font-size: 12px; font-weight: 600; white-space: nowrap; min-width: 34px; text-align: right; }
.gst-amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
th.gst-sort { cursor: pointer; user-select: none; }
th.gst-sort:hover { background: #1a1570; }
th.gst-sort.asc .gst-si::after { content: ' ▲'; font-size: 10px; }
th.gst-sort.desc .gst-si::after { content: ' ▼'; font-size: 10px; }
th.gst-sort:not(.asc):not(.desc) .gst-si::after { content: ' ⇅'; font-size: 10px; opacity: .35; }
.gst-chev { background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 4px; border-radius: 4px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.gst-chev:hover { color: var(--mots-navy); background: var(--bg-color); }
.gst-chev .ci { display: inline-block; transition: transform .2s; font-size: 13px; }
.gst-chev.open .ci { transform: rotate(180deg); color: var(--mots-navy); }
.gst-exrow { display: none; background: #f8faff; }
.gst-exrow.open { display: table-row; }
.gst-excell { padding: 0 12px 12px 40px; }
.gst-expanel { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; background: #fff; }
.gst-exhead { padding: 9px 14px; background: var(--bg-color); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gst-exlabel { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .4px; }
.gst-exempty { padding: 14px; font-size: 13px; color: var(--text-secondary); font-style: italic; }
.gst-subt { width: 100%; border-collapse: collapse; font-size: 12px; }
.gst-subt thead { background: var(--bg-color); color: var(--text-secondary); }
.gst-subt th { padding: 7px 12px; text-align: left; font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.gst-subt td { padding: 8px 12px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.gst-subt tr:last-child td { border-bottom: none; }
.gst-addpago { padding: 5px 12px; border-radius: 6px; border: 1.5px dashed var(--mots-green); background: none; color: #065f46; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.gst-addpago:hover { background: #ecfdf5; border-style: solid; }
.gst-locked { width: 100%; padding: 9px 12px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 13px; color: var(--text-secondary); background: var(--bg-color); font-family: monospace; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.detail-item { display: flex; flex-direction: column; gap: 3px; }
.detail-label { font-size: 11px; color: var(--text-secondary); font-weight: 500; }
.detail-value { font-size: 13px; font-weight: 500; color: #1a1a2e; }
.detail-full { grid-column: 1/-1; }
.pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; justify-content: center; }
.pager-info { color: var(--text-secondary); font-size: 12px; margin-left: 8px; }
.pager-dots { color: var(--text-secondary); padding: 0 2px; }
@media (max-width: 768px) {
  .detail-grid { grid-template-columns: 1fr; }
}

/* FOOTER */
.footer {
  background: var(--mots-navy);
  color: rgba(255, 255, 255, 0.7);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  flex-shrink: 0;
}
.footer-actions { display: flex; align-items: center; gap: 10px; }

/* Notificaciones + feedback (campana en el footer) */
.notif-wrap { position: relative; }
.notif-bell { background: rgba(255,255,255,.1); border: none; color: #fff; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px; position: relative; display: flex; align-items: center; justify-content: center; transition: background .15s, transform 120ms var(--ease-out); }
.notif-bell:hover { background: rgba(255,255,255,.22); }
.notif-bell:active { transform: scale(0.9); }
.notif-badge { position: absolute; top: -4px; right: -4px; background: var(--mots-red); color: #fff; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 99px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.notif-panel {
  position: fixed;
  width: 300px;
  max-width: calc(100vw - 24px);
  max-height: 380px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  z-index: 1200;
  transform-origin: bottom right;
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  transition: opacity 150ms ease-out, transform 150ms ease-out;
}
.notif-panel.open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border-color); font-weight: 700; color: var(--mots-navy); font-size: 13px; }
.notif-head a { color: var(--mots-navy); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.notif-item { padding: 10px 14px; border-bottom: 1px solid var(--border-color); cursor: pointer; font-size: 13px; color: #1a1a2e; }
.notif-item:hover { background: #f8faff; }
.notif-item.unread { background: #eef3ff; }
.notif-item.unread .notif-msg { font-weight: 600; }
.notif-msg { line-height: 1.4; }
.notif-meta { font-size: 11px; color: var(--text-secondary); margin-top: 3px; }
.notif-empty { padding: 14px; color: var(--text-secondary); font-size: 13px; text-align: center; font-style: italic; }

/* RH: perfil, vacaciones, festivos, empleados */
.st { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.st-activo { background: #dcfce7; color: #166534; }
.st-inactivo { background: #fee2e2; color: #991b1b; }
.section-sep { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .6px; grid-column: 1/-1; padding-top: 6px; border-top: 1px solid var(--border-color); margin-top: 4px; }
.toggle-row { display: flex; align-items: center; gap: 10px; grid-column: 1/-1; }
.toggle-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: #cbd5e1; border-radius: 22px; cursor: pointer; transition: .2s; }
.toggle-slider:before { content: ''; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.toggle-switch input:checked + .toggle-slider { background: var(--mots-green); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); }
.toggle-label { font-size: 13px; color: #1a1a2e; }
.perfil-header { display: flex; align-items: center; gap: 20px; background: #fff; border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.perfil-foto { width: 96px; height: 96px; border-radius: 50%; background: var(--mots-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; flex-shrink: 0; overflow: hidden; position: relative; }
.perfil-foto img { width: 100%; height: 100%; object-fit: cover; }
.perfil-nombre { font-size: 20px; font-weight: 700; color: var(--mots-navy); }
.perfil-puesto { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.perfil-card { background: #fff; border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.perfil-card-title { font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 14px; }
.perfil-ro { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.perfil-ro-item .lbl { font-size: 10px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; }
.perfil-ro-item .val { font-size: 13px; color: #1a1a2e; margin-top: 2px; word-break: break-word; }
.vac-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.vac-kpi { background: #fff; border: 1px solid var(--border-color); border-radius: 10px; padding: 14px 16px; }
.vac-kpi .n { font-size: 26px; font-weight: 700; color: var(--mots-navy); line-height: 1; }
.vac-kpi .l { font-size: 11px; color: var(--text-secondary); margin-top: 4px; line-height: 1.3; }
.vch { display: inline-flex; padding: 2px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.vch-Pendiente { background: #fef9c3; color: #713f12; }
.vch-Aprobada { background: #dcfce7; color: #166534; }
.vch-Rechazada { background: #fee2e2; color: #991b1b; }
.vch-Cancelada { background: #f1f5f9; color: #64748b; }
.cal-month-sep { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .7px; padding: 18px 0 8px; border-bottom: 2px solid var(--border-color); margin-bottom: 2px; }
.festivo-item { display: flex; align-items: center; gap: 14px; padding: 11px 4px; border-bottom: 1px solid var(--border-color); }
.festivo-item:last-child { border-bottom: none; }
.festivo-item:hover { background: #f8faff; }
.festivo-date { background: var(--bg-color); border-radius: 8px; padding: 6px 10px; text-align: center; min-width: 52px; flex-shrink: 0; }
.festivo-date-n { font-size: 20px; font-weight: 700; color: var(--mots-navy); line-height: 1; }
.festivo-date-m { font-size: 9px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .4px; margin-top: 1px; }
.festivo-info { flex: 1; min-width: 0; }
.festivo-name { font-size: 14px; font-weight: 600; color: #1a1a2e; }
.festivo-dow { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.festivo-notas { font-size: 12px; color: var(--text-secondary); margin-top: 2px; font-style: italic; }
.festivo-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cal-empty { text-align: center; padding: 40px 20px; color: var(--text-secondary); font-size: 13px; font-style: italic; }
.cal-year-badge { display: inline-block; background: var(--mots-navy); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; margin-left: 8px; vertical-align: middle; }

/* PRODUCCIÓN (módulo React): detalle de proyecto, donas, hitos, OS */
.btn-warn { background: #d97706; color: #fff; }
.btn-warn:hover { background: #b45309; }
.card-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; row-gap: 10px; font-weight: 700; font-size: 13px; color: var(--mots-navy); margin-bottom: 14px; text-transform: uppercase; letter-spacing: .5px; }
.card-h .btn { white-space: nowrap; }
.card-h .pill-ro { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--text-secondary); background: var(--bg-color); padding: 2px 8px; border-radius: 99px; letter-spacing: .4px; }

/* Toggle Lista/Gantt (Hitos y tareas) */
.seg-toggle { display: inline-flex; background: var(--bg-color); border-radius: 8px; padding: 3px; gap: 2px; text-transform: none; letter-spacing: normal; }
.seg-toggle button { border: none; background: transparent; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--text-secondary); border-radius: 6px; cursor: pointer; transition: background-color 150ms ease-out, color 150ms ease-out, transform 120ms ease-out; }
.seg-toggle button:active { transform: scale(0.96); }
.seg-toggle button.active { background: #fff; color: var(--mots-navy); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.detail-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px; }
.proyecto-layout { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
.proyecto-main { min-width: 0; }
.proyecto-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
/* Colapsar barra lateral (OS/Inventario/Documentación) para dar todo el ancho a las
   tarjetas centrales — toggle en Proyectos.jsx, preferencia persistida en localStorage. */
.proyecto-layout.sidebar-colapsado { grid-template-columns: 1fr; }
.proyecto-layout.sidebar-colapsado .proyecto-sidebar { display: none; }
.donut-row { display: flex; gap: 16px; justify-content: space-around; flex-wrap: wrap; padding: 6px 0; }
.donut-item { text-align: center; }
.donut { width: 100px; height: 100px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; }
.donut-inner { width: 72px; height: 72px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-pct { font-size: 16px; font-weight: 700; color: var(--mots-navy); }
.donut-frac { font-size: 10px; color: var(--text-secondary); }
.donut-label { font-size: 11px; font-weight: 700; color: var(--mots-navy); text-transform: uppercase; letter-spacing: .4px; }
.side-os-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border-color); cursor: pointer; }
.side-os-row:last-child { border-bottom: none; }
.side-clickable { cursor: pointer; border-radius: 8px; margin: -6px; padding: 6px; transition: background .15s; }
.side-clickable:hover { background: var(--bg-color); }
.side-stat-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 13px; }
.side-stat-row .n { font-weight: 700; color: var(--mots-navy); }
.side-doc-group { margin-bottom: 10px; }
.side-doc-group:last-child { margin-bottom: 0; }
.side-doc-group-label { font-size: 10px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.side-doc-item { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 3px 0; }
.doc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* Hitos y Tareas - Jerarquía visual mejorada (Asana-like) */
/* El "highlight" del título (nivel Hito) es solo tipografía — negritas + navy —
   para que la celda respete el mismo padding/fondo blanco que el resto de la
   cuadrícula (antes tenía fondo gris + barra de color propios que la hacían ver
   como una caja aparte, rompiendo la alineación con las demás columnas). */
.hito-indent-0 {
  padding-left: 14px;
  font-weight: 600;
  color: var(--mots-navy);
  display: flex;
  align-items: center;
}

/* Ancho de columna fijo por <colgroup> (Proyectos.jsx) — sin esto, "Título" y
   "Responsable" crecían con el contenido y forzaban texto largo (nombres
   completos, títulos largos) a partirse en varias líneas; como el alto de fila
   no era uniforme, las líneas verticales de jerarquía (::before/::after de
   hito-indent-1/2, pensadas para una sola fila de alto) quedaban cortadas o
   desalineadas entre hitos/tareas/actividades consecutivos. */
.hito-table { table-layout: fixed; min-width: 960px; }
.hito-titulo-txt, .hito-ellipsis-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hito-titulo-txt { flex: 1; min-width: 0; }

/* Nivel 1: TAREA (sub-hito) */
.hito-indent-1 {
  padding-left: 54px;
  color: var(--mots-navy);
  position: relative;
  border-left: 1px solid #cbd5e1;
  font-weight: 500;
  font-size: 13px;
  display: flex;
  align-items: center;
}
.hito-indent-1::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #cbd5e1;
}
.hito-indent-1::after {
  content: '';
  position: absolute;
  left: 19px;
  top: 50%;
  width: 16px;
  height: 1px;
  background: #cbd5e1;
  transform: translateY(-50%);
}

/* Nivel 2: ACTIVIDAD (sub-tarea) */
.hito-indent-2 {
  padding-left: 72px;
  color: var(--text-secondary);
  position: relative;
  border-left: 1px solid #e2e8f0;
  font-weight: 400;
  font-size: 12px;
  display: flex;
  align-items: center;
}
.hito-indent-2::before {
  content: '';
  position: absolute;
  left: 37px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e2e8f0;
}
.hito-indent-2::after {
  content: '';
  position: absolute;
  left: 37px;
  top: 50%;
  width: 16px;
  height: 1px;
  background: #e2e8f0;
  transform: translateY(-50%);
}

/* Botón chevron mejorado */
.btn-chevron-hito {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: var(--mots-green);
  color: var(--mots-navy);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
  transition: background .15s, transform .08s;
  box-shadow: 0 1px 2px rgba(8,4,86,.12);
  flex-shrink: 0;
}
.btn-chevron-hito:hover { background: #00b090; }
.btn-chevron-hito:active { transform: scale(.92); }
.btn-chevron-hito.colapsado { background: #cbd5e1; color: var(--text-secondary); }
.btn-chevron-hito.colapsado:hover { background: #a0aec0; }

.hito-sin-hijos {
  display: inline-block;
  width: 30px;
  flex-shrink: 0;
}
.hito-drag-handle {
  display: inline-block;
  width: 18px;
  color: #cbd5e1;
  cursor: grab;
  user-select: none;
  touch-action: none;
  margin-right: 4px;
  flex-shrink: 0;
  transition: color .15s;
}
.hito-drag-handle:hover {
  color: var(--text-secondary);
}
.hito-table tbody tr { transition: transform .18s ease; }
.hito-row-dragging { position: relative; z-index: 20; background: #fff; box-shadow: 0 10px 24px rgba(8,4,86,.22); }
.hito-row-dragging .hito-drag-handle { cursor: grabbing; }
.proj-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
/* Ícono de acciones rápidas en la esquina de una tarjeta (hoy: Plantillas del
   proyecto) — pensado para reusarse con otros paneles a futuro, no solo este. */
.corner-gear-btn {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
  border-radius: 50%; border: 1px solid var(--border-color); background: #fff;
  font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.corner-gear-btn:hover { background: var(--bg-color); transform: rotate(20deg); }
.proj-title { font-size: 20px; font-weight: 700; color: var(--mots-navy); }
.back-link { color: var(--mots-navy); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 14px; }
.back-link:hover { text-decoration: underline; }
.hist { margin-top: 6px; border-top: 1px dashed var(--border-color); padding-top: 10px; }
.hist-item { font-size: 12px; color: var(--text-secondary); padding: 3px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.hist-item b { color: var(--mots-navy); }
.prod-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.prod-table thead tr { background: var(--mots-navy); color: #fff; }
.prod-table th { padding: 11px 14px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.prod-table td { padding: 11px 14px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.prod-table tbody tr:last-child td { border-bottom: none; }
.prod-table tbody tr.clickable { cursor: pointer; }
.prod-table tbody tr.clickable:hover { background: #f8faff; }
@media (max-width: 900px) {
  .proyecto-layout { grid-template-columns: 1fr; }
  .proyecto-sidebar { position: static; }
  .detail-grid-3 { grid-template-columns: 1fr; }
}

/* INICIO (Home): grids de layout — antes eran inline styles fijos que no
   respondían a ningún breakpoint y se traslapaban en móvil/plegable. */
.home-layout { display: grid; grid-template-columns: 1fr 272px; gap: 20px; align-items: start; }
.home-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.home-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 20px; }
/* Los grid items tienen min-width:auto por default — con filas internas de
   texto largo (proyecto/tarea + fecha, sin quiebre de línea) eso hace que la
   tarjeta crezca más allá de su columna y se monte sobre el panel derecho.
   min-width:0 fuerza a que respeten el ancho de su columna (el truncado con
   ellipsis de los spans internos, ver home.js, es lo que evita perder texto). */
.home-grid-2 > .card, .home-grid-3 > .card { min-width: 0; }
/* Lista de Tareas Pendientes (Inicio): scroll propio para no alargar la
   página cuando hay muchas tareas — se muestran todas, ordenadas por fecha
   más cercana a terminar (ver home.js), pero contenidas en este alto fijo. */
.home-scroll-list { max-height: 340px; overflow-y: auto; }
/* Panel derecho (Próximas fechas / Acceso rápido): fijo dentro del scroll de
   .main-content para que no se mueva ni quede tapado al haber muchas tareas. */
.home-layout > aside { position: sticky; top: 20px; }
.ticket-row { display: grid; grid-template-columns: 130px 1fr; gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--border-color); align-items: start; }

/* Grid de 2 columnas genérico (Ventas: KPIs de dashboard, detalle de cotización) */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 768px) {
  .home-layout,
  .home-grid-2,
  .home-grid-3,
  .grid-2col {
    grid-template-columns: 1fr;
  }
  .home-layout > aside { position: static; }
  .ticket-row { grid-template-columns: 100px 1fr; }
}

@media (max-width: 380px) {
  .ticket-row { grid-template-columns: 1fr; gap: 2px; }
}

/* INICIO (Home): acceso rápido */
.rec-link { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: #1a1a2e; cursor: pointer; text-decoration: none; transition: background .12s; }
.rec-link:hover { background: var(--bg-color); color: var(--mots-navy); }
.rec-link.disabled { opacity: .45; pointer-events: none; }
.rec-icon { font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; }
.rec-pronto { margin-left: auto; font-size: 9px; background: #fef3c7; color: #92400e; padding: 1px 6px; border-radius: 99px; font-weight: 700; }

/* Tickets IT */
.fb-card { background: #fff; border: 1px solid var(--border-color); border-radius: 10px; padding: 14px 18px; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; transition: box-shadow .15s; margin-bottom: 8px; }
.fb-card:hover { box-shadow: 0 2px 12px rgba(8,4,86,.1); }
.fb-tipo-chip { padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.fb-estado-chip { padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; }
.fb-abierto { background: #fef9c3; color: #713f12; }
.fb-cerrado { background: #dcfce7; color: #166534; }

/* Laboratorio */
.lab-hist-row { padding: 4px 0; border-bottom: 1px solid var(--border-color); }
.lab-hist-row:last-child { border-bottom: none; }
.lab-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }

.footer a { color: var(--mots-blue); text-decoration: none; font-weight: 600; }
.footer a:hover { text-decoration: underline; }
.footer-ver { color: rgba(255, 255, 255, 0.45); font-size: 11px; letter-spacing: 0.5px; cursor: pointer; }
.footer-ver:hover { color: rgba(255, 255, 255, 0.75); }

@media (max-width: 768px) {
  .footer { flex-direction: column; gap: 4px; text-align: center; padding: 10px 16px; }
}

/* MODAL: novedades de CORE */
#rnBody .rn-item { padding: 14px 0; border-bottom: 1px solid var(--border-color); }
#rnBody .rn-item:last-child { border-bottom: none; }
#rnBody .rn-ver { font-size: 13px; font-weight: 700; color: var(--mots-navy); margin-bottom: 6px; }
#rnBody .rn-fecha { font-weight: 400; color: var(--text-secondary); font-size: 12px; }
#rnBody .rn-list { margin: 0; padding-left: 18px; }
#rnBody .rn-list li { font-size: 13px; color: #374151; line-height: 1.6; margin-bottom: 2px; }

/* Estilos básicos para las vistas inyectadas */
.view-header {
  margin-bottom: 24px;
}

.view-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--mots-navy);
}

.view-subtitle {
  color: var(--text-secondary);
  font-size: 15px;
  margin-top: 4px;
}

.card {
  background: var(--surface-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

/* ==========================================================================
   TABS INTERNOS (Módulo Ventas)
   ========================================================================== */
.tabs-container {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 24px;
}

.tab-btn {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 10px 4px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
}

.tab-btn:hover { color: var(--mots-navy); }

.tab-btn.active {
  color: var(--mots-navy);
  font-weight: 600;
  border-bottom-color: var(--mots-navy);
}

/* ==========================================================================
   CATÁLOGOS
   ========================================================================== */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.catalog-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
}

.catalog-card h3 {
  font-size: 14px;
  color: var(--mots-navy);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.catalog-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.catalog-item {
  padding: 10px 14px;
  background: var(--bg-color);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-primary);
}

/* ==========================================================================
   MODALES (Fase 3)
   ========================================================================== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.15s ease;
}

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

.modal-box {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 32px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0,0,0,0.3);
  animation: modalSlideIn 0.2s ease;
}

.modal-box-lg {
  max-width: 680px;
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--mots-navy);
}

.modal-close-btn {
  background: var(--bg-color);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.modal-close-btn:hover {
  background: #e5e7eb;
  color: var(--text-primary);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

/* Formularios en modales */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group.full {
  grid-column: 1 / -1;
}

.form-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.form-input,
.form-select,
.form-textarea {
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: #fff;
  width: 100%;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--mots-navy);
  box-shadow: 0 0 0 3px rgba(8,4,86,0.08);
}

/* Editor de texto simple (Notas/Comentarios de hitos) — negrita/cursiva/
   subrayado/viñetas sobre un div contentEditable. Ver RichTextEditor en ui.jsx. */
.richtext-wrap { display: flex; flex-direction: column; }
.richtext-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 4px; }

/* Cuerpo del aviso ya renderizado en el muro / Inicio (HTML sanitizado) */
.aviso-cuerpo ul, .aviso-cuerpo ol { margin: 6px 0 6px 22px; }
.aviso-cuerpo li { list-style: revert; }
.aviso-cuerpo p { margin: 6px 0; }
.aviso-cuerpo a { color: var(--mots-navy); text-decoration: underline; }
.richtext-btn {
  min-width: 26px; height: 26px; padding: 0 6px;
  border: 1px solid var(--border-color); border-radius: 6px;
  background: #fff; color: var(--text-primary); font-size: 13px;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.richtext-btn:hover { background: var(--bg-color); border-color: var(--mots-navy); }
.richtext-editor {
  overflow-y: auto;
  cursor: text;
}
.richtext-editor ul, .richtext-editor ol { margin: 4px 0 4px 20px; }
.richtext-editor li { list-style: revert; }
.richtext-editor:empty:before {
  content: attr(data-placeholder);
  color: var(--text-secondary);
}

.form-input[readonly] {
  background: var(--bg-color);
  color: var(--text-secondary);
  cursor: not-allowed;
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

/* ==========================================================================
   DROPZONE — selector de archivos reutilizable (arrastrar o elegir).
   Uso: contenedor .dropzone con un <input type="file" hidden> dentro, un
   bloque .dropzone-empty (estado sin archivo) y .dropzone-file (con archivo).
   Wiring genérico: wireDropzone(zoneId, inputId, onFile) en ventas.js.
   ========================================================================== */
.dropzone {
  position: relative;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-color);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.dropzone:hover,
.dropzone.dragover {
  border-color: var(--mots-navy);
  background: #eef1fb;
}

.dropzone.dragover {
  border-style: solid;
}

.dropzone.uploading { cursor: default; }

.dropzone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(8, 4, 86, 0.08);
  color: var(--mots-navy);
  font-size: 18px;
  margin-bottom: 10px;
  transition: background 160ms ease, color 160ms ease;
}

.dropzone.dragover .dropzone-icon {
  background: var(--mots-green);
  color: var(--mots-navy);
}

.dropzone-text {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

.dropzone-link {
  color: var(--mots-navy);
  font-weight: 700;
  text-decoration: underline;
}

.dropzone-hint {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Estado "archivo elegido": oculta el estado vacío, muestra la ficha */
.dropzone-file {
  display: none;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.dropzone.has-file .dropzone-empty { display: none; }
.dropzone.has-file .dropzone-file { display: flex; }
.dropzone.has-file { cursor: default; padding: 14px 16px; }

.dropzone-file-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.dropzone-file-info {
  flex: 1;
  min-width: 0;
}

.dropzone-file-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropzone-file-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.dropzone-progress {
  display: none;
  height: 5px;
  border-radius: 99px;
  background: var(--border-color);
  overflow: hidden;
  margin-top: 8px;
}

.dropzone.uploading .dropzone-progress { display: block; }

.dropzone-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--mots-green);
  border-radius: 99px;
  transition: width 200ms ease-out;
}

.dropzone-file-remove {
  background: #fff;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 150ms ease, color 150ms ease, transform 120ms var(--ease-out);
}

.dropzone-file-remove:hover { background: var(--mots-red); border-color: var(--mots-red); color: #fff; }
.dropzone-file-remove:active { transform: scale(0.9); }
.dropzone.uploading .dropzone-file-remove { display: none; }

/* Botones generales */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s, transform 120ms var(--ease-out);
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--mots-navy);
  color: #fff;
}
.btn-primary:hover { background: #120A8F; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-outline {
  background: #fff;
  color: var(--mots-navy);
  border: 1px solid var(--border-color);
}
.btn-outline:hover { border-color: var(--mots-navy); background: var(--bg-color); }

.btn-danger {
  background: var(--mots-red);
  color: #fff;
}
.btn-danger:hover { background: #e53e3e; }

.btn-green {
  background: var(--mots-green);
  color: var(--mots-navy);
}
.btn-green:hover { background: #00b090; }

/* Variante compacta — usada en cabeceras de tarjeta, filas de tabla y el
   paginador. Sin esto, .btn-sm no tenía efecto y esos botones salían a
   tamaño completo (14px/10px 20px), desproporcionados en columnas angostas. */
.btn-sm {
  padding: 5px 12px;
  font-size: 12px;
  gap: 4px;
}

/* ==========================================================================
   TOAST NOTIFICATIONS (Fase 3)
   ========================================================================== */
#toast-container {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  animation: toastIn 0.25s ease;
  min-width: 280px;
  max-width: 400px;
}

.toast.toast-success { background: #065f46; }
.toast.toast-error   { background: #b91c1c; }
.toast.toast-info    { background: var(--mots-navy); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* ==========================================================================
   TABS INTERNOS (Módulo Ventas)
   ========================================================================== */
.tabs-container {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 24px;
}

.tab-btn {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 10px 4px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
}

.tab-btn:hover {
  color: var(--mots-navy);
}

.tab-btn.active {
  color: var(--mots-navy);
  font-weight: 600;
  border-bottom-color: var(--mots-navy);
}

/* Chip de color detrás del ícono de cada pestaña (2026-08-12, pedido del
   usuario: "que no se vea tan plano" — antes el ícono solo heredaba el
   color de texto activo/inactivo de .tab-btn, todo en un mismo navy/gris).
   Color FIJO por pestaña (no cambia con active/hover) — el estado
   seleccionado lo sigue marcando .tab-btn.active (negrita + subrayado
   navy), esto es identidad visual de la pestaña, no estado. 6 variantes
   rotando por módulo para que se vea variado sin salirse de la paleta MOTS
   (ver MOTS_UI_Design_System.md) — el tono de fondo es la versión pastel
   del color de marca (uso previsto del doc para light-blue/gold: fondos),
   el ícono usa una versión con más saturación/contraste de ese mismo tono
   para que se lea bien sobre blanco (los hex pastel de marca tal cual,
   ej. --mots-gold #FFD272, no pasan contraste como trazo de ícono a 16px). */
.tab-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  margin-right: 6px;
  vertical-align: -6px;
  flex-shrink: 0;
}
.tab-ico-navy   { background: rgba(8, 4, 86, .10);     color: var(--mots-navy); }
.tab-ico-coral  { background: rgba(251, 108, 101, .16); color: #E2483F; }
.tab-ico-teal   { background: rgba(0, 203, 164, .16);   color: #049075; }
.tab-ico-indigo { background: rgba(18, 10, 143, .12);   color: var(--mots-navy-light); }
.tab-ico-gold   { background: rgba(255, 210, 114, .30); color: #B4790A; }
.tab-ico-sky    { background: rgba(164, 216, 252, .35); color: #0B5C94; }

/* ==========================================================================
   CATÁLOGOS
   ========================================================================== */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.catalog-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
}

.catalog-card h3 {
  font-size: 14px;
  color: var(--mots-navy);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.catalog-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.catalog-item {
  padding: 10px 14px;
  background: var(--bg-color);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-primary);
}

/* ==========================================================================
   RESPONSIVE — TABLET / MÓVIL / PLEGABLES
   Breakpoints:
     ≤1024px  tablet y plegable desplegado (p.ej. Galaxy Fold ~717–884px):
              el sidebar arranca colapsado (JS) para aprovechar el ancho,
              pero sigue siendo un panel fijo, no un drawer.
     ≤768px   móvil / plegable en pantalla de cubierta: el sidebar se
              convierte en un drawer off-canvas controlado por el topbar.
     ≤380px   móviles muy angostos y pantalla de cubierta de plegables
              (p.ej. ~344px): se reduce padding y se apilan grillas a 1 columna.
   ========================================================================== */

/* --- Huecos de breakpoints que faltaban en componentes existentes --- */
@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
  .detail-grid-3 { grid-template-columns: 1fr; }
  .modal-box { padding: 22px; }
}

@media (max-width: 768px) {
  .app-layout { position: relative; }

  /* El sidebar pasa a ser un drawer fijo que se desliza desde la izquierda.
     z-index por encima del topbar (80) y del backdrop (150): el drawer debe
     quedar siempre visible por encima de ambos cuando está abierto. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px !important;
    max-width: 84vw;
    transform: translateX(-100%);
    transition: transform 240ms var(--ease-drawer);
    box-shadow: var(--shadow-lg);
    z-index: 200;
  }

  .sidebar.mobile-open { transform: translateX(0); }

  /* El botón de colapso de escritorio no aplica en el drawer móvil */
  .sb-collapse-btn { display: none; }

  /* El colapso de escritorio (ícono "M") no debe afectar el drawer móvil:
     en el drawer siempre se ve el menú completo, con el wordmark. */
  .sidebar.collapsed .sb-subtitle,
  .sidebar.collapsed .sb-section,
  .sidebar.collapsed .sb-item span:last-child,
  .sidebar.collapsed .sb-user-info {
    opacity: 1;
    width: auto;
    height: auto;
    overflow: visible;
    pointer-events: auto;
  }
  .sidebar.collapsed .sb-brand { align-items: stretch; padding: 24px 20px; }
  .sidebar.collapsed .sb-logo-img { display: block; }
  .sidebar.collapsed .sb-logo-mini { display: none; }
  .sidebar.collapsed .sb-item { justify-content: flex-start; gap: 12px; }
  .sidebar.collapsed .sb-user { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 16px 20px; }

  .mobile-topbar { display: flex; }

  .main-content { padding: 20px; }

  .view-title { font-size: 22px; }
}

/* Nota: en el rango de tablet / plegable desplegado (769–1024px) el sidebar
   arranca colapsado por defecto vía JS (ver aplicarEstadoSidebar en app.js),
   reutilizando las mismas reglas .sidebar.collapsed definidas arriba. */

/* --- Móviles angostos y pantalla de cubierta de plegables (~320–380px) --- */
@media (max-width: 380px) {
  .main-content { padding: 14px; }
  .view-title { font-size: 20px; }
  .login-card { padding: 28px 20px; margin: 12px; }
  .modal-box { padding: 18px; }
  .kpi-grid, .vac-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dash-filters { gap: 10px; }
  .mobile-topbar { padding: 10px 12px; }
  .footer { padding: 10px 12px; }
}

/* --- Accesibilidad: respeta la preferencia de movimiento reducido --- */
@media (prefers-reduced-motion: reduce) {
  .login-card,
  .app-layout.fade-in,
  .fade-in,
  .modal-box,
  .toast {
    animation-duration: 0.01ms !important;
  }
  .sidebar,
  .sb-item,
  .btn,
  .notif-panel,
  .sb-collapse-icon {
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   PLANNING — Gantt de recursos (línea de tiempo de barras, no tabla de celdas)
   ========================================================================== */
.gantt-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.gantt-tb-sm { width: auto; padding: 6px 10px; font-size: 12px; }
.gantt-tb-toggle { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); cursor: pointer; user-select: none; white-space: nowrap; }
.gantt-legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; flex-wrap: wrap; }
.gantt-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }

.gantt-wrap { overflow: auto; max-height: 70vh; border: 1px solid var(--border-color); border-radius: 12px; background: #fff; position: relative; }

.gantt-header { display: flex; position: sticky; top: 0; z-index: 20; background: var(--mots-navy); color: #fff; }
.gantt-sticky-cell { position: sticky; left: 0; z-index: 15; background: var(--mots-navy); flex-shrink: 0; width: 168px; }
.gantt-header-name { display: flex; align-items: center; padding: 0 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; height: 36px; }

.gantt-week-hdr { height: 36px; box-sizing: border-box; padding: 4px 6px; font-size: 11px; font-weight: 700; border-left: 1px solid rgba(255,255,255,.15); text-align: left; }
.gantt-week-hdr-sub { font-weight: 400; opacity: .7; }
.gantt-day-hdr { height: 36px; box-sizing: border-box; text-align: center; border-left: 1px solid rgba(255,255,255,.1); font-size: 10px; padding-top: 3px; color: #fff; }
.gantt-day-hdr.weekend { background: rgba(255,255,255,.08); }
.gantt-day-hdr-n { font-weight: 700; }
.gantt-day-hdr-l { opacity: .7; }

.gantt-overlays { position: absolute; top: 36px; bottom: 0; pointer-events: none; z-index: 1; }
/* Centrada sobre la casilla del día (no sobre el borde entre ayer y hoy) —
   translateX(-50%) porque `left` ahora es el centro del día, no su borde
   izquierdo (ver Gantt.jsx). */
.gantt-today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--mots-red); transform: translateX(-50%); }
/* Flechita en el eje de días que señala la columna de hoy — mismo criterio
   de centrado que .gantt-today-line, apuntando hacia abajo desde el
   encabezado hacia el inicio de la línea (2026-08-05). */
.gantt-today-arrow {
  position: absolute;
  bottom: 0; /* la punta queda exactamente donde arranca .gantt-today-line */
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--mots-red); /* border-top (no bottom) = triángulo apuntando hacia abajo */
  transform: translateX(-50%);
  z-index: 21; /* por encima de .gantt-header */
}
.gantt-fest-col { position: absolute; top: 0; bottom: 0; background: rgba(239,68,68,.08); }
/* Fines de semana en vista por día — solo se dibuja si el checkbox "Mostrar
   fin de semana" está activo (por default está apagado). Antes usaba un
   negro casi puro (#12141c) que se veía como un bloque roto sobre el fondo
   blanco del Gantt; ahora usa el mismo neutro de fondo que el resto de la
   app (var(--bg-color)) para que se lea como "zona apagada", no como error. */
.gantt-weekend-col { position: absolute; top: 0; bottom: 0; background: var(--bg-color); }

.gantt-row { display: flex; border-top: 1px solid var(--border-color); }
.gantt-name-cell { display: flex; flex-direction: column; justify-content: center; padding: 6px 12px; border-right: 1px solid var(--border-color); background: #fff; overflow: hidden; transition: background .15s; }
.gantt-name-cell:hover { background: #f0f4ff; }
.gantt-name { font-size: 12.5px; line-height: 1.25; font-weight: 600; color: var(--mots-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-puesto { font-size: 10px; line-height: 1.25; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-baja-badge { font-size: 9px; background: #e2e8f0; color: #64748b; border-radius: 3px; padding: 1px 4px; margin-left: 5px; vertical-align: middle; }

.gantt-bar {
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: box-shadow 150ms ease;
  touch-action: none;
  z-index: 2; /* siempre por encima de .gantt-overlays (fondo de fin de semana/festivo/hoy) */
}
.gantt-bar:hover { box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.gantt-bar.dragging { opacity: .88; box-shadow: 0 4px 12px rgba(0,0,0,.3); z-index: 10; transition: none; }
.gantt-bar-label { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-bar-vac { cursor: default; }
.gantt-handle { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; }
.gantt-handle-l { left: 0; }
.gantt-handle-r { right: 0; }

/* Home Office: no bloquea el periodo (el ingeniero sigue en su proyecto asignado,
   solo que desde casa) — se marca con un ícono superpuesto sobre la barra ya
   dibujada, no con una franja propia. pointer-events:none para no interferir
   con el arrastre/click de la barra debajo. Se asoma un poco arriba del borde
   superior de la barra (top negativo) para no montarse sobre la etiqueta de
   texto, que va centrada verticalmente dentro de la barra. */
.gantt-ho-badge {
  position: absolute; top: -3px; height: 16px;
  display: flex; align-items: flex-start; justify-content: center;
  pointer-events: none; z-index: 3;
}
.gantt-ho-badge-dot {
  width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* El punto sí recibe clicks (para editar/eliminar el bloqueo) aunque el
   contenedor .gantt-ho-badge tenga pointer-events:none — su huella es de
   solo 15px así que no interfiere con el drag/click de la barra debajo. */
.gantt-ho-badge-dot-editable { pointer-events: auto; cursor: pointer; }

@media (hover: hover) and (pointer: fine) {
  .gantt-handle:hover { background: rgba(255,255,255,.3); }
}

@media (max-width: 768px) {
  .gantt-toolbar { gap: 8px; }
  .gantt-legend { display: none; }
  .gantt-sticky-cell { width: 128px; }
}

/* Gantt de Hitos y Tareas (dentro de un proyecto) */
.hito-gantt-bar { border-radius: 6px; cursor: grab; transition: box-shadow 150ms ease-out; }
.hito-gantt-bar:active { cursor: grabbing; }
.hito-gantt-bar.done { opacity: .55; }
.hito-gantt-bar.bloqueado { box-shadow: inset 0 0 0 2px rgba(220,38,38,.6); }
.gantt-milestone { position: absolute; border-radius: 3px; transform: rotate(45deg); cursor: grab; transition: box-shadow 150ms ease-out, opacity 150ms ease-out; }
.gantt-milestone:hover, .hito-gantt-bar:hover { box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.gantt-milestone.dragging, .hito-gantt-bar.dragging { opacity: .88; box-shadow: 0 4px 12px rgba(0,0,0,.3); z-index: 10; transition: none; }
.gantt-milestone.done { opacity: .55; }
/* Fila de nombre del Gantt de hitos — clase propia (NO reusar .gantt-name-cell:
   esa es del Gantt de Planning y trae flex-direction:column + justify-content:
   center para apilar nombre+puesto, que aquí descentraba y apilaba el chevron
   sobre el título en vez de alinearlos en una sola fila). */
.hito-name-cell { display: flex; flex-direction: row; align-items: center; gap: 6px; border-right: 1px solid var(--border-color); background: #fff; overflow: hidden; box-sizing: border-box; }
.hito-gantt-title { flex: 1; min-width: 0; font-size: 12.5px; color: var(--mots-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.gantt-sin-fecha { position: absolute; font-size: 11.5px; color: var(--text-secondary); font-style: italic; cursor: pointer; white-space: nowrap; }
.gantt-sin-fecha:hover { color: var(--mots-navy); text-decoration: underline; }

/* Columna "Días asignados" (segunda columna fija del Gantt de hitos) */
.gantt-header-days { display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; line-height: 1.2; height: 36px; box-sizing: border-box; }
.hito-days-cell { display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--border-color); background: #fff; font-size: 12px; color: var(--text-secondary); box-sizing: border-box; }

/* Tarjeta flotante al pasar el cursor sobre una barra/rombo: foto (o
   iniciales) + nombre corto del recurso asignado. */
.gantt-hover-card {
  position: absolute; z-index: 25; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #fff; border-radius: 10px; padding: 8px 10px;
  box-shadow: 0 6px 18px rgba(8,4,86,.18);
  pointer-events: none; white-space: nowrap;
  animation: gantt-hover-in 120ms ease-out;
}
@keyframes gantt-hover-in { from { opacity: 0; transform: translateX(-50%) translateY(-4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.gantt-hover-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.gantt-hover-initials { display: flex; align-items: center; justify-content: center; background: var(--mots-navy); color: #fff; font-size: 12px; font-weight: 700; }
.gantt-hover-name { font-size: 11px; font-weight: 600; color: var(--mots-navy); }

/* MODO PANTALLA COMPLETA (2026-08-20) — toggle desde Producción › Estatus
   Proyectos, para dejar ese tablero solo en una pantalla externa de oficina
   sin nada de la interfaz de CORE alrededor. La clase la pone/quita JS en
   <body> (ver EstatusProyectos.jsx); junto con esto normalmente también se
   pide el Fullscreen API real del navegador, pero esta clase por sí sola ya
   basta para ocultar el chrome aunque el usuario no acepte el fullscreen
   nativo (ej. algunos navegadores en TV/kiosco lo bloquean). */
body.core-modo-pantalla .sidebar,
body.core-modo-pantalla .mobile-topbar,
body.core-modo-pantalla .footer,
body.core-modo-pantalla .view-header,
body.core-modo-pantalla .tabs-container {
  display: none !important;
}
body.core-modo-pantalla .main-content {
  padding: 20px !important;
}