/* ============================================================
 * components.css — Componentes UI reutilizables
 * ------------------------------------------------------------
 * RESPONSABILIDAD:
 *   Estilos de los "ladrillos" visuales que se usan a lo largo
 *   de todos los módulos del dashboard:
 *     - KPIs y cards genéricos
 *     - Grids 2/3 columnas
 *     - Barras de progreso
 *     - Tablas (.tbl)
 *     - Badges y labels
 *     - Formularios y botones
 *     - Subtabs (con indicador de dirty state)
 *     - Alerts (banners de aviso)
 *     - Modal genérico
 *     - Search box
 *     - Dona / Funnel / Chart wrappers
 *     - Eventos widget (cumpleaños/aniversarios)
 *     - Spec card
 *     - People icons (iconos de personal)
 *
 * Los estilos específicos de cada módulo (Tesorería, Pagos,
 * CRM, Salud, etc) viven en modulos.css.
 * ============================================================ */

/* =================== KPIs Y CARDS =================== */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.kpi-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.kpi{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;border:1px solid var(--border)}
.kpi-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);margin-bottom:5px}
.kpi-value{font-size:22px;font-weight:700;line-height:1}
.kpi-sub{font-size:11px;margin-top:4px;color:var(--text2)}
.kpi-sub.up{color:var(--green)}.kpi-sub.dn{color:var(--red)}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;border:1px solid var(--border);margin-bottom:14px}
.card-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}

/* =================== GRIDS GENÉRICOS =================== */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}
.grid-13{display:grid;grid-template-columns:1fr 2fr;gap:14px;margin-bottom:14px}

/* =================== BARRAS DE PROGRESO =================== */
.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.bar-label{font-size:12px;color:var(--text);width:80px;flex-shrink:0}
.bar-label.wide{width:140px}
.bar-bg{flex:1;height:14px;border-radius:4px;background:var(--gray100);overflow:hidden}
.bar-fill{height:100%;border-radius:4px;transition:width .4s}
.bar-val{font-size:11px;color:var(--text2);width:110px;text-align:right;flex-shrink:0}

/* =================== TABLAS (.tbl) =================== */
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);padding:7px 10px;border-bottom:1px solid var(--border)}
.tbl td{padding:7px 10px;border-bottom:1px solid var(--gray100);color:var(--text);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--gray50)}
.scroll-table{max-height:280px;overflow-y:auto}

/* =================== BADGES =================== */
.badge{display:inline-block;font-size:10px;font-weight:600;padding:2px 7px;border-radius:20px}
.badge-green{background:#d1fae5;color:#065f46}.badge-red{background:#fee2e2;color:#991b1b}
.badge-amber{background:#fef3c7;color:#92400e}.badge-blue{background:#dbeafe;color:#1e40af}
.badge-gray{background:var(--gray200);color:var(--gray600)}.badge-pink{background:#fce7f3;color:#9d174d}

/* =================== FORMS =================== */
.form-section{background:var(--gray50);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:12px}
.form-title{font-size:12px;font-weight:600;color:var(--text);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.form-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.form-group{display:flex;flex-direction:column;gap:3px}
.form-group label{font-size:11px;font-weight:500;color:var(--text2)}
.form-group input,.form-group select,.form-group textarea{border:1px solid var(--border);border-radius:6px;padding:6px 9px;font-size:12px;color:var(--text);background:var(--card);outline:none}
.form-group input:focus,.form-group select:focus{border-color:var(--accent)}

/* =================== BOTONES =================== */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:7px;font-size:12px;font-weight:500;cursor:pointer;border:none;transition:all .15s}
.btn-primary{background:var(--accent);color:white}.btn-primary:hover{background:#2563eb}
.btn-secondary{background:var(--gray100);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:var(--gray200)}
.btn-red{background:var(--red);color:white}
.btn-green{background:var(--green);color:white}
.btn-sm{padding:4px 9px;font-size:11px}
.btn-excel{background:#217346;color:white;border:none}
.btn-excel:hover{background:#1a5c38}

/* =================== SUBTABS =================== */
.subtabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--border)}
.subtab{padding:7px 13px;font-size:12px;font-weight:500;cursor:pointer;color:var(--text2);border-bottom:2px solid transparent;margin-bottom:-1px;position:relative}
.subtab.active{color:var(--accent);border-bottom-color:var(--accent)}
/* Indicador de cambios sin guardar — puntito rojo a la derecha del label de la subtab */
.subtab[data-dirty="1"]::after{content:"";position:absolute;top:6px;right:3px;width:7px;height:7px;border-radius:50%;background:#dc2626;box-shadow:0 0 0 2px var(--bg);animation:subtabPulse 1.4s ease-in-out infinite}
@keyframes subtabPulse{0%,100%{opacity:1}50%{opacity:.45}}
/* Pagos subtabs: barra independiente entre topbar y content */
#pagos-subtabs{background:var(--card);border-bottom:2px solid var(--border);padding:0 22px;box-shadow:0 2px 4px rgba(0,0,0,.04)}
.subpanel{display:none}.subpanel.active{display:block}

/* =================== ALERTS =================== */
.alert{padding:9px 13px;border-radius:8px;font-size:12px;margin-bottom:10px}
.alert-amber{background:#fef3c7;color:#92400e;border:1px solid #fde68a}
.alert-red{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.alert-green{background:#d1fae5;color:#065f46;border:1px solid #a7f3d0}
.alert-blue{background:#dbeafe;color:#1e40af;border:1px solid #bfdbfe}
.alert-card{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:9px;margin-bottom:8px;border:1px solid transparent}
.alert-card.critical{background:#fff1f2;border-color:#fecdd3}
.alert-card.warn{background:#fffbeb;border-color:#fde68a}
.alert-card.info{background:#eff6ff;border-color:#bfdbfe}
.alert-card.ok{background:#f0fdf4;border-color:#bbf7d0}
.alert-icon{font-size:16px;flex-shrink:0;margin-top:1px}
.alert-title{font-weight:600;color:var(--text);font-size:12px}
.alert-desc{color:var(--text2);font-size:12px}

/* =================== PEOPLE ICONS =================== */
.people-grid{display:flex;flex-wrap:wrap;gap:3px}
.person-icon{width:20px;height:20px;flex-shrink:0}
.person-icon svg{width:100%;height:100%}

/* =================== DONA (gráfico circular) =================== */
.dona-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dona-item{display:flex;flex-direction:column;align-items:center;gap:5px}
.dona-wrap{position:relative;width:76px;height:76px}
.dona-wrap svg{width:100%;height:100%}
.dona-label{font-size:10px;font-weight:600;color:var(--text);text-align:center;line-height:1.2;max-width:80px}
.dona-sub{font-size:10px;color:var(--text2);text-align:center}

/* =================== FUNNEL (embudo de conversión) =================== */
.funnel-step{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.funnel-label{font-size:12px;width:160px;flex-shrink:0}
.funnel-val{font-size:12px;font-weight:600;width:32px;text-align:right;flex-shrink:0}
.funnel-pct{font-size:11px;color:var(--text2);width:36px;text-align:right;flex-shrink:0}

/* =================== CHART WRAPPER =================== */
.chart-wrap{position:relative;height:210px}

/* =================== SEARCH BOX =================== */
.search-box{display:flex;gap:7px;margin-bottom:12px}
.search-box input{flex:1;border:1px solid var(--border);border-radius:7px;padding:7px 11px;font-size:13px;outline:none}
.search-box input:focus{border-color:var(--accent)}

/* =================== MODAL GENÉRICO =================== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;display:flex;align-items:center;justify-content:center}
.modal-box{background:var(--card);border-radius:14px;padding:24px;width:340px}
.modal-title{font-size:14px;font-weight:600;margin-bottom:16px}
.modal-actions{display:flex;gap:8px;margin-top:16px;justify-content:flex-end}

/* =================== EVENTOS WIDGET (cumpleaños / aniversarios) =================== */
.ev-widget{background:linear-gradient(135deg,#fffbeb,#fef9c3);border:1px solid #fde68a;border-radius:var(--radius);padding:14px;margin-bottom:14px}
.ev-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ev-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#92400e}
.ev-count{background:#fef3c7;color:#92400e;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;border:1px solid #fde68a}
.ev-list{display:flex;flex-wrap:wrap;gap:8px}
.ev-item{background:var(--card);border:1px solid #fde68a;border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:10px;min-width:210px;max-width:300px;flex:1}
.ev-icon{font-size:22px;flex-shrink:0}
.ev-info{flex:1;min-width:0}
.ev-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-detail{font-size:11px;color:var(--text2);margin-top:1px}
.ev-days{font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;flex-shrink:0;white-space:nowrap}
.ev-days.today{background:#fef9c3;color:#b45309;border:1px solid #fcd34d}
.ev-days.soon{background:#dbeafe;color:#1e40af;border:1px solid #bfdbfe}
.ev-days.later{background:#f1f5f9;color:var(--gray600);border:1px solid var(--border)}

/* =================== SPEC CARD =================== */
.spec-card{border:1px solid var(--border);border-radius:9px;padding:14px;margin-bottom:10px}
.spec-title{font-size:12px;font-weight:600;margin-bottom:8px}
.spec-cols{font-size:11px;color:var(--text2);font-family:monospace;background:var(--gray50);padding:8px 10px;border-radius:6px;line-height:1.8;white-space:pre-wrap}

/* =================== MODAL DE SESIÓN VENCIDA ===================
 * Lo monta `js/core/sesion.js` cuando la sesión deja de servir. Es un cierre
 * forzado: no tiene ninguna vía de salida y su único botón recarga la página.
 *
 * Los colores van LITERALES, no con las variables del tema, por dos razones:
 * el diseño está pactado al pie de la letra (INSTRUCCIONES/diseño.png) y este
 * modal ya no es "la app": es la pantalla que avisa que se terminó la sesión.
 * El velo es `--navy` al 45 %, que es por qué en el diseño la barra lateral
 * parece no estar tapada: está, pero es de ese mismo navy y no cambia.
 *
 * z-index 20000: tiene que ganarle a TODO. Los máximos de hoy son 12000
 * (_bloquearPantalla), 11500 (avisoModal) y 9999 (#login-screen).
 * ================================================================= */
.ses-velo{position:fixed;inset:0;z-index:20000;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(15,31,61,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ses-card{width:min(384px,calc(100vw - 40px));background:#fff;border-radius:16px;padding:32px 32px 25px;
  text-align:center;box-shadow:0 24px 48px rgba(15,31,61,.28)}
.ses-icono{width:62px;height:62px;margin:0 auto 13px;border-radius:50%;background:#fff4d6;color:#8a5a00;
  display:flex;align-items:center;justify-content:center}
.ses-icono svg{width:28px;height:28px}
.ses-titulo{margin:0 0 6px;font-size:22px;font-weight:700;line-height:1.25;color:#1f2937}
.ses-texto{margin:0 0 22px;font-size:14px;line-height:19px;color:#4b5563}
.ses-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:38px;
  border:none;border-radius:10px;background:#2f7be8;color:#fff;font-family:inherit;font-size:15px;font-weight:700;
  cursor:pointer}
.ses-btn:hover{background:#2568c9}
.ses-btn:disabled{opacity:.7;cursor:default}
.ses-btn svg{width:18px;height:18px}
.ses-pie{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;font-size:12px;color:#6b7280}
.ses-avatar{flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:#2f6fdb;color:#fff;
  font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* Mobile: el mismo modal, solo con menos aire a los lados (ver el mockup). */
@media(max-width:480px){
  .ses-card{padding:32px 20px 25px}
}