/* ============================================================
   SEGUIMIENTO — Estilos completos
   AmbarSoft © 2026
============================================================ */

:root {
  --primary:      #1a3a5c;
  --primary-l:    #e8f0fa;
  --primary-d:    #122840;
  --accent:       #1d9e75;
  --danger:       #a32d2d;
  --danger-bg:    #fcebeb;
  --warning:      #854f0b;
  --warning-bg:   #faeeda;
  --success-bg:   #eaf3de;
  --border:       #dee2e6;
  --border-l:     #f0f2f5;
  --text:         #1a1f2e;
  --text-m:       #6c757d;
  --bg:           #f5f7fa;
  --white:        #ffffff;
  --sidebar-w:    210px;
  --topbar-h:     56px;
  --radius:       8px;
  --shadow:       0 2px 8px rgba(0,0,0,.08);
  --shadow-lg:    0 4px 20px rgba(0,0,0,.13);
  --font:         'Inter', system-ui, sans-serif;
}

/* BASE */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 18px; }
body { font-family: var(--font); color: var(--text); background: var(--bg); }
a    { color: var(--primary); text-decoration: none; }

/* ── LOGIN ─────────────────────────────────────────────────── */
.login-body { background: linear-gradient(135deg,#1a3a5c 0%,#2a5a8c 100%); min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-bg   { width:100%; padding:1rem; }
.login-card { max-width:400px; margin:0 auto; background:var(--white); border-radius:16px; padding:2.4rem 2rem; box-shadow:var(--shadow-lg); }
.login-logo { text-align:center; margin-bottom:1.8rem; }
.login-icon { width:64px; height:64px; background:var(--primary); border-radius:16px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.login-icon i { font-size:32px; color:white; }
.login-logo h1 { font-size:24px; font-weight:600; color:var(--text); margin-bottom:4px; }
.login-logo p  { font-size:14px; color:var(--text-m); }
.login-footer  { text-align:center; margin-top:1.6rem; font-size:13px; color:var(--text-m); }
.btn-login { width:100%; padding:12px; background:var(--primary); color:white; border:none; border-radius:var(--radius); font-size:16px; font-weight:500; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:6px; font-family:var(--font); }
.btn-login:hover { background:var(--primary-d); }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.topbar { position:fixed; top:0; left:0; right:0; height:var(--topbar-h); background:var(--primary); color:white; display:flex; align-items:center; justify-content:space-between; padding:0 20px; z-index:100; box-shadow:var(--shadow); }
.topbar-brand { display:flex; align-items:center; gap:8px; font-size:17px; font-weight:500; }
.topbar-user  { display:flex; align-items:center; gap:10px; font-size:14px; opacity:.92; }
.badge-role   { font-size:11px; padding:3px 8px; border-radius:5px; font-weight:500; }
.badge-admin  { background:rgba(255,255,255,.2); color:white; }
.badge-oper   { background:rgba(29,158,117,.35); color:#9effd8; }
.btn-logout   { background:none; border:none; color:white; cursor:pointer; font-size:13px; opacity:.75; display:flex; align-items:center; gap:4px; font-family:var(--font); }
.btn-logout:hover { opacity:1; }

/* Hamburguesa solo en móvil */
.btn-hamburger { display:none; background:none; border:none; cursor:pointer; color:white; font-size:26px; margin-right:6px; padding:4px; line-height:1; }

/* Overlay menú móvil */
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:85; }
.sidebar-overlay.visible { display:block; }

.sidebar { position:fixed; top:var(--topbar-h); left:0; bottom:0; width:var(--sidebar-w); background:var(--white); border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:90; transition:left .25s ease; }
.sidebar-nav { flex:1; padding:10px 0; overflow-y:auto; }
.sidebar-item { display:flex; align-items:center; gap:9px; padding:13px 18px; font-size:15px; color:var(--text-m); border-left:3px solid transparent; cursor:pointer; text-decoration:none; transition:all .15s; }
.sidebar-item:hover,.sidebar-item.active { background:var(--primary-l); color:var(--primary); border-left-color:var(--primary); }
.sidebar-item i { font-size:18px; }
.sidebar-footer { padding:12px 18px; border-top:1px solid var(--border-l); }
.sidebar-footer .s-brand { font-size:14px; font-weight:600; color:var(--primary); }
.sidebar-footer .s-copy  { font-size:11px; color:var(--text-m); margin-top:2px; }

.main-content { margin-left:var(--sidebar-w); margin-top:var(--topbar-h); padding:24px; min-height:calc(100vh - var(--topbar-h)); }

/* ── PÁGINAS ─────────────────────────────────────────────────── */
.page { display:none; }
.page.active { display:block; }
.page-title { font-size:20px; font-weight:600; margin-bottom:16px; display:flex; align-items:center; gap:8px; color:var(--text); }

/* ── MÉTRICAS ───────────────────────────────────────────────── */
.metrics-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; }
.metric-card  { background:var(--white); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); border-left:4px solid var(--primary); }
.metric-label { font-size:15px; color:var(--text-m); margin-bottom:7px; display:flex; align-items:center; gap:5px; }
.metric-value { font-size:28px; font-weight:600; color:var(--primary); }
.metric-sub   { font-size:14px; color:var(--text-m); margin-top:4px; }

/* ── GRÁFICOS ───────────────────────────────────────────────── */
.charts-row  { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.chart-box   { background:var(--white); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.chart-title { font-size:15px; font-weight:600; color:var(--text-m); margin-bottom:14px; display:flex; align-items:center; gap:6px; }
.bar-row     { display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.bar-label   { width:110px; font-size:13px; color:var(--text-m); text-align:right; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track   { flex:1; background:var(--border-l); border-radius:4px; height:14px; overflow:hidden; }
.bar-fill    { height:100%; background:var(--primary); border-radius:4px; transition:width .4s ease; }
.bar-val     { width:85px; font-size:13px; color:var(--text); flex-shrink:0; }
.donut-wrap  { display:flex; align-items:center; justify-content:center; gap:18px; padding:8px 0; }
.donut-legend { display:flex; flex-direction:column; gap:8px; }
.legend-item  { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text-m); }
.legend-dot   { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* ── FILTROS ────────────────────────────────────────────────── */
.filters { display:flex; gap:9px; margin-bottom:16px; align-items:center; flex-wrap:wrap; }
.filters select,.filters input { font-size:15px; padding:9px 12px; border-radius:var(--radius); border:1px solid var(--border); background:var(--white); color:var(--text); font-family:var(--font); }
.filters input  { flex:1; min-width:180px; }
.filters select { min-width:160px; }

/* ── TABLA ──────────────────────────────────────────────────── */
.table-wrap { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
table { width:100%; border-collapse:collapse; font-size:14px; }
thead th { background:var(--primary); color:white; padding:12px 14px; text-align:left; font-weight:500; font-size:13px; white-space:nowrap; }
tbody td { padding:10px 13px; border-bottom:1px solid var(--border-l); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--primary-l); }
.td-empty { text-align:center!important; color:var(--text-m); padding:28px!important; font-size:15px; }

/* ── BADGES ─────────────────────────────────────────────────── */
.badge         { display:inline-flex; align-items:center; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.badge-ok      { background:var(--success-bg); color:#3b6d11; }
.badge-no      { background:var(--danger-bg);  color:var(--danger); }
.badge-pend    { background:var(--warning-bg); color:var(--warning); }
.badge-primary { background:var(--primary-l);  color:var(--primary); }
.text-danger   { color:var(--danger); font-weight:600; }
.text-success  { color:#3b6d11; }
.obs-tag       { font-size:11px; color:var(--warning); background:var(--warning-bg); padding:2px 7px; border-radius:4px; max-width:140px; display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── BOTONES ────────────────────────────────────────────────── */
.btn    { padding:9px 17px; border-radius:var(--radius); font-size:14px; cursor:pointer; border:1px solid var(--border); background:var(--white); color:var(--text); display:inline-flex; align-items:center; gap:5px; font-family:var(--font); transition:all .15s; }
.btn:hover    { background:var(--border-l); }
.btn-primary  { background:var(--primary); color:white; border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-d); }
.btn-sm       { padding:5px 11px; font-size:13px; }

/* ── FORMULARIOS ────────────────────────────────────────────── */
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:15px; color:var(--text-m); margin-bottom:6px; font-weight:500; }
.form-group input,.form-group select,.form-group textarea { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius); font-size:15px; font-family:var(--font); color:var(--text); background:var(--white); }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(26,58,92,.1); }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.span-2 { grid-column:1/-1; }
.input-icon { position:relative; }
.input-icon i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-m); font-size:15px; pointer-events:none; z-index:1; opacity:0.6; }
.input-icon input { padding-left:42px !important; box-sizing:border-box; }
.input-icon input:focus ~ i, .input-icon input:not(:placeholder-shown) ~ i { display:none; }

/* ── MODAL ──────────────────────────────────────────────────── */
.modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.48); z-index:200; align-items:center; justify-content:center; padding:1rem; }
.modal-bg.open { display:flex; }
.modal    { background:var(--white); border-radius:12px; width:100%; max-width:500px; box-shadow:var(--shadow-lg); overflow:hidden; }
.modal-header { padding:18px 22px; border-bottom:1px solid var(--border-l); display:flex; align-items:center; justify-content:space-between; }
.modal-header h3 { font-size:17px; font-weight:600; display:flex; align-items:center; gap:8px; }
.modal-body   { padding:22px; }
.modal-footer { padding:16px 22px; border-top:1px solid var(--border-l); display:flex; justify-content:flex-end; gap:9px; }
.btn-close-modal { background:none; border:none; cursor:pointer; color:var(--text-m); font-size:22px; line-height:1; }

/* ── ALERTAS ────────────────────────────────────────────────── */
.alert { padding:12px 16px; border-radius:var(--radius); margin-bottom:16px; font-size:15px; display:flex; align-items:center; gap:8px; }
.alert-danger  { background:var(--danger-bg);  color:var(--danger); }
.alert-warning { background:var(--warning-bg); color:var(--warning); }
.alert-success { background:var(--success-bg); color:#3b6d11; }
.alert-info    { background:var(--primary-l);  color:var(--primary); }

/* ── FICHA PERSONA ──────────────────────────────────────────── */
.ficha-box     { background:var(--white); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); margin-top:8px; }
.ficha-header  { display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--border-l); }
.avatar        { width:48px; height:48px; border-radius:50%; background:var(--primary-l); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:15px; color:var(--primary); flex-shrink:0; }
.mes-grid      { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.mes-card      { border:1px solid var(--border); border-radius:var(--radius); padding:12px; text-align:center; cursor:pointer; background:var(--white); transition:all .15s; }
.mes-card:hover,.mes-card.sel { border-color:var(--primary); background:var(--primary-l); }
.mes-card .mn  { font-size:13px; color:var(--text-m); margin-bottom:5px; }
.mes-card .mm  { font-size:15px; font-weight:600; color:var(--primary); }
.comp-grid     { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
.comp-card     { border:1px solid var(--border); border-radius:var(--radius); padding:14px; text-align:center; background:var(--white); }
.comp-card i   { font-size:24px; color:var(--primary); display:block; margin-bottom:6px; }
.comp-card .cn { font-size:12px; color:var(--text-m); margin-bottom:8px; }

/* ── INFO BOX ───────────────────────────────────────────────── */
.info-box { padding:12px 16px; background:var(--primary-l); border-radius:var(--radius); font-size:13px; color:var(--primary); margin-bottom:16px; display:flex; align-items:center; gap:8px; }

/* ── REPORTES ───────────────────────────────────────────────── */
.report-btn { display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid var(--border); border-radius:var(--radius); background:var(--white); cursor:pointer; width:100%; margin-bottom:12px; transition:all .15s; font-family:var(--font); text-align:left; }
.report-btn:hover { background:var(--primary-l); border-color:var(--primary); }
.report-btn .ri   { font-size:24px; color:var(--primary); flex-shrink:0; }
.report-btn .rd   { flex:1; }
.report-btn .rt   { font-size:14px; font-weight:600; color:var(--text); display:block; margin-bottom:3px; }
.report-btn .rs   { font-size:12px; color:var(--text-m); }
.report-btn .ra   { margin-left:auto; color:var(--text-m); font-size:18px; }

/* ── PRINT ──────────────────────────────────────────────────── */
.print-area { display:none; }
@media print {
  .no-print   { display:none!important; }
  .print-area { display:block!important; font-family:Arial,sans-serif; font-size:11px; color:#000; }
  .ph  { text-align:center; margin-bottom:18px; border-bottom:2px solid #1a3a5c; padding-bottom:12px; }
  .ph h1 { font-size:18px; color:#1a3a5c; margin-bottom:4px; }
  .ph p  { font-size:11px; color:#555; }
  .pm-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
  .pm-card { border:1px solid #ddd; border-radius:5px; padding:10px; text-align:center; }
  .pm-val  { font-size:18px; font-weight:bold; color:#1a3a5c; }
  .pm-lab  { font-size:9px; color:#777; margin-top:2px; }
  .pt { width:100%; border-collapse:collapse; margin-top:12px; font-size:10px; }
  .pt th { background:#1a3a5c; color:white; padding:7px 8px; text-align:left; }
  .pt td { padding:6px 8px; border-bottom:1px solid #eee; }
  .pf { margin-top:22px; text-align:center; font-size:9px; color:#aaa; border-top:1px solid #eee; padding-top:10px; }
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — Menú hamburguesa + móvil
══════════════════════════════════════════════════ */

/* Tablet */
@media (max-width:1024px) {
  .metrics-grid { grid-template-columns:repeat(2,1fr); }
  .charts-row   { grid-template-columns:1fr; }
  .mes-grid     { grid-template-columns:repeat(3,1fr); }
}

/* Móvil */
@media (max-width:768px) {
  :root { --sidebar-w:250px; --topbar-h:54px; }

  .btn-hamburger { display:flex; }

  .topbar { padding:0 14px; }
  .topbar-brand { font-size:14px; }
  .topbar-brand .brand-long { display:none; }
  .topbar-user .badge-role  { display:none; }
  .topbar-user .user-name   { max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* Sidebar oculto — desliza desde la izquierda */
  .sidebar {
    left:calc(-1 * var(--sidebar-w) - 20px);
    box-shadow:4px 0 24px rgba(0,0,0,.18);
  }
  .sidebar.open { left:0; }

  .main-content { margin-left:0; padding:14px 12px; }

  /* Métricas 2 col */
  .metrics-grid { grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
  .metric-card  { padding:12px; }
  .metric-value { font-size:22px; }
  .metric-label { font-size:12px; }

  /* Gráficos apilados */
  .charts-row { grid-template-columns:1fr; gap:12px; }
  .chart-box  { padding:14px; }

  /* Filtros en columna */
  .filters { flex-direction:column; align-items:stretch; gap:7px; }
  .filters select,.filters input { width:100%; min-width:unset; }
  .filters .btn { width:100%; justify-content:center; }

  /* Tabla scroll horizontal */
  .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table { min-width:680px; }

  /* Meses en 2 col */
  .mes-grid { grid-template-columns:repeat(2,1fr); gap:8px; }

  /* Comprobantes en 1 col */
  .comp-grid { grid-template-columns:1fr; }

  /* Modal desde abajo */
  .modal-bg { padding:0; align-items:flex-end; }
  .modal    { border-radius:18px 18px 0 0; max-width:100%; max-height:92vh; overflow-y:auto; }

  /* Formularios 1 col */
  .form-grid-2,.form-grid-3 { grid-template-columns:1fr; }
  .span-2 { grid-column:auto; }

  .ficha-box { padding:14px; }
}

/* Móvil pequeño */
@media (max-width:420px) {
  .metrics-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .metric-value { font-size:20px; }
  .main-content { padding:12px 10px; }
  .page-title   { font-size:16px; }
}

/* Touch — áreas más grandes */
@media (hover:none) and (pointer:coarse) {
  .btn          { min-height:42px; }
  .btn-sm       { min-height:34px; }
  .sidebar-item { min-height:48px; }
  .filters select,.filters input { min-height:44px; }
  .form-group input,.form-group select { min-height:46px; }
}

/* ── LETRA GRANDE — AmbarSoft © 2026 ─────────────────────── */
html, body { font-size: 16px !important; }
table, input, select, button, textarea { font-size: 15px !important; }
.topbar-brand  { font-size: 16px !important; }
.topbar-user   { font-size: 14px !important; }
.sidebar-item  { font-size: 15px !important; padding: 13px 18px !important; }
.s-brand       { font-size: 14px !important; }
.page-title    { font-size: 20px !important; }
.metric-label  { font-size: 14px !important; }
.metric-value  { font-size: 28px !important; }
.metric-sub    { font-size: 13px !important; }
.chart-title   { font-size: 14px !important; }
.bar-label, .bar-val { font-size: 13px !important; }
.legend-item   { font-size: 13px !important; }
thead th       { font-size: 13px !important; padding: 11px 13px !important; }
tbody td       { font-size: 14px !important; padding: 11px 13px !important; }
.td-empty      { font-size: 15px !important; }
.filters select,
.filters input { font-size: 15px !important; padding: 9px 11px !important; }
.btn           { font-size: 14px !important; padding: 9px 16px !important; }
.btn-sm        { font-size: 13px !important; padding: 5px 11px !important; }
.btn-login     { font-size: 16px !important; }
.badge         { font-size: 12px !important; padding: 4px 10px !important; }
.info-box      { font-size: 14px !important; }
.alert         { font-size: 14px !important; }
.form-group label { font-size: 14px !important; }
.form-group input,
.form-group select,
.form-group textarea { font-size: 15px !important; padding: 10px 12px !important; }
.modal-header h3   { font-size: 17px !important; }
.report-btn .rt    { font-size: 15px !important; }
.report-btn .rs    { font-size: 13px !important; }
.mes-card .mn      { font-size: 13px !important; }
.mes-card .mm      { font-size: 15px !important; }
.comp-card-tipo    { font-size: 14px !important; }
.comp-upload-label { font-size: 14px !important; }
#ultima-actualizacion { font-size: 14px !important; }
.import-stat-val   { font-size: 22px !important; }
.login-logo h1     { font-size: 24px !important; }
.login-logo p      { font-size: 14px !important; }
.login-footer      { font-size: 13px !important; }

/* Fix adicional input-icon */
.input-icon input { padding-left:42px !important; }

/* ── Métricas: 2 columnas en celular ─────────────────────── */
@media (max-width: 768px) {
  .metrics-grid,
  #metrics-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .metric-card {
    padding: 10px 8px !important;
    min-height: unset !important;
  }
  .metric-value {
    font-size: 17px !important;
    line-height: 1.2 !important;
  }
  .metric-label {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
  }
  .metric-sub {
    font-size: 10px !important;
    margin-top: 2px !important;
  }
}