@charset "UTF-8";
/* ===== SIGRAD · CSS Maestro (Tema claro · estilo “Senado”) ===== */
/* Paleta */
:root{
  --blue-950:#062a40;
  --blue-900:#0F2433;   /* NAV / títulos — azul exacto del header */
  --blue-800:#114868;
  --blue-700:#1F6EA5;   /* primario (botón sólido / acentos) */
  --blue-600:#247fbe;
  --blue-500:#2E8BC0;   /* hover / énfasis */
  --blue-300:#6EAEE2;   /* botón salir / contornos suaves */
  --blue-100:#E6F1F8;   /* fondos sutiles / thead */
  --white:#FFFFFF;
  --red-600:#dc2626;
  --red-700:#b91c1c;

  --bg:#eeeeee;         /* fondo suave general */
  --ink:#0B1B2B;        /* texto principal */
  --muted:#5B728A;      /* texto secundario */
  --line:#E6ECF2;       /* bordes claros */

  --radius:14px;
  --shadow:0 8px 28px rgba(0,0,0,.08);
}

/* ===== Reset mínimo ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;height:100%}
html, body { overflow-x:hidden !important; }
body{
  min-height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  line-height:1.5;

  /* Centrado global del layout:
     - el header queda full-width arriba
     - todo lo demás se centra en columna */
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ===== Enlaces e imágenes ===== */
a{color:var(--blue-700);text-decoration:none}
a:hover{filter:brightness(1.06)}
img{max-width:100%;height:auto;display:block}

/* ===== Contenedor y tarjetas ===== */
.container{
  width:100%;
  max-width:1200px;
  margin:24px auto;
  padding:0 16px;

  display:flex;
  flex-direction:column;
  align-items:center;
}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  width:100%;
}

/* ===== NAV estilo “Senado” ===== */
.header{
  align-self:stretch;          /* el header ocupa todo el ancho */
  position:sticky;top:0;z-index:10;
  background:var(--blue-900);  /* azul del nav */
  border-bottom:3px solid rgba(0,0,0,.08);
}
/* Si el nav embebido usa .nav-shell (como en nav.php), fuerza el mismo azul */
.nav-shell{ background:var(--blue-900) !important; }

.nav-wide{width:100%;margin:0;padding:12px 16px}
.nav-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.nav-left{justify-self:start;display:flex;align-items:center;gap:16px}
.nav-center{justify-self:center}
.nav-right{justify-self:end}
.brand{
  color:#fff;font-weight:800;font-size:18px;
  letter-spacing:.06em;text-transform:uppercase;
}

/* Menús (versión clásica basada en .menu ...) */
.menu a{
  margin:0 12px;padding:10px 12px;border-radius:6px;
  color:#fff;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.menu a:hover{background:rgba(255,255,255,.12)}
.menu a.btn{background:var(--blue-500);color:#fff}
.menu a.btn:hover{filter:brightness(1.06)}
.menu a.btn-outline{
  border:1px solid rgba(255,255,255,.55);
  color:#fff;background:transparent;
}
.menu a.btn-outline:hover{ background:rgba(255,255,255,.10); border-color:#fff; }

/* Menú usado por nav.php (.menu-track): TODOS con borde blanco */
.menu-track{ display:flex;align-items:center;gap:16px;flex-wrap:nowrap;white-space:nowrap; }
.menu-track a{
  margin:0 8px;
  padding:10px 12px;
  border-radius:8px;

  color:#fff; font-weight:800; text-transform:uppercase;
  font-size:clamp(11px,1.05vw,14px);

  border:1px solid rgba(255,255,255,.55);
  background:transparent;
}
.menu-track a:hover{ background:rgba(255,255,255,.10); border-color:#fff; }

/* Botón Salir (derecha) */
.btn-exit{
  background:var(--red-600);
  color:#fff;
  border-radius:8px;
  padding:10px 14px;
  border:0;
  cursor:pointer;
}
.btn-exit:hover{
  background:var(--red-700);
}

/* ===== Formularios ===== */
form{max-width:520px;margin-inline:auto}
label{display:block;font-weight:700;margin:12px 0 6px;color:var(--blue-900)}
input,select,textarea{
  width:100%;padding:12px 14px;font-size:15px;
  color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;
}
input::placeholder,textarea::placeholder{color:#8aa2b5}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--blue-700);
  box-shadow:0 0 0 3px rgba(31,110,165,.18);
}

/* ===== Botones base ===== */
.btn{
  display:inline-block;padding:10px 14px;border-radius:10px;
  font-weight:700;cursor:pointer;border:0;
}
.btn-primary{background:var(--blue-800);color:#fff}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;color:var(--blue-700);border:1px solid var(--line)}
.btn-outline{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn-danger{background:#dc2626;color:#fff}
.btn-danger:hover{filter:brightness(1.06)}
.actions{display:flex;gap:12px;margin-top:16px;justify-content:center;flex-wrap:wrap}

/* ===== Alertas ===== */
.alert{padding:12px 14px;border-radius:10px;margin:12px 0;border:1px solid var(--line);color:var(--ink);background:#fff;}
.alert.success{background:#e8f5e9;border-color:#c8e6c9;color:#1b5e20}
.alert.error{background:#fdecea;border-color:#f6c7c3;color:#7f1d1d}

/* ===== Tablas ===== */
.table{
  width:100%;
  border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.table th,.table td{
  padding:10px 12px;border-bottom:1px solid var(--line);
  text-align:left;color:var(--ink);vertical-align:top;
}
.table thead th{color:var(--blue-900);background:var(--blue-100);position:sticky;top:0;z-index:1}
.table tr:last-child td{border-bottom:none}

/* Listrado y hover suave en body de tablas */
.table tbody tr:nth-child(even){background:#fafcff;}
.table tbody tr:hover{background:#f0f5ff;}

/* ===== Utilidades ===== */
.center{margin-inline:auto}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.hidden{display:none!important}
.vh-center{min-height:100vh;display:flex;align-items:center;justify-content:center}

/* ===== Responsive (mobile-first fino) ===== */
@media (max-width:960px){
  .container{padding:0 12px}
}
@media (max-width:760px){
  .nav-grid{grid-template-columns:auto 1fr auto}
  .menu a{margin:0 8px;padding:8px 10px;font-size:.9rem}
  .brand{font-size:16px}
  .actions{gap:8px}
  form{max-width:100%}
}
@media (max-width:840px){
  .grid-2{grid-template-columns:1fr;}
}

/* ===== Grilla usada en formularios ===== */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* ===== Contenedores scrolleables de secciones (tabs) ===== */
#tab-pendientes div[style*="overflow:auto"],
#tab-distribucion div[style*="overflow:auto"],
#tab-alta div[style*="overflow:auto"],
#sub-rep div[style*="overflow:auto"],
#sub-limp div[style*="overflow:auto"],
#sub-altas div[style*="overflow:auto"]{
  border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow);padding-bottom:6px;
}

/* ===== Centrado de pestañas y contenido ===== */
#tab-pendientes, #tab-distribucion, #tab-alta,
#tab-historial, #sub-rep, #sub-limp, #sub-altas{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  width:100%;
}

/* Cards dentro de tabs centradas y limitadas */
#tab-pendientes > .card,
#tab-distribucion > .card,
#tab-alta > .card,
#tab-historial > .card,
#sub-rep > .card,
#sub-limp > .card,
#sub-altas > .card{
  width:100%;
  max-width:1200px;
  margin-inline:auto;
  min-width:0;
}

/* Scroller interno igual ancho que la card */
#tab-pendientes .card > div[style*="overflow:auto"],
#tab-distribucion .card > div[style*="overflow:auto"],
#tab-alta .card > div[style*="overflow:auto"],
#sub-rep .card > div[style*="overflow:auto"],
#sub-limp .card > div[style*="overflow:auto"],
#sub-altas .card > div[style*="overflow:auto"]{
  width:100%;
  max-width:1200px;
  margin-inline:auto;
  overflow-x:auto;
  min-width:0;
  box-sizing:border-box;
}

/* La tabla se centra dentro del scroller y usa ancho real */
#tab-pendientes .card > div[style*="overflow:auto"] > .table,
#tab-distribucion .card > div[style*="overflow:auto"] > .table,
#tab-alta .card > div[style*="overflow:auto"] > .table,
#sub-rep .card > div[style*="overflow:auto"] > .table,
#sub-limp .card > div[style*="overflow:auto"] > .table,
#sub-altas .card > div[style*="overflow:auto"] > .table{
  width:max-content;
  margin-inline:auto;
}

/* ===== Chips ALTAS ===== */
#sub-altas .table tbody td:first-child {font-weight:700;text-align:center;}
#sub-altas .table tbody td:first-child::before {
  content: attr(data-estado);
  display:inline-block;padding:4px 10px;border-radius:20px;font-size:13px;line-height:1.2;color:#fff;
}
#sub-altas .table tbody td.estado-pendiente::before {background:#facc15;color:#000;content:"PENDIENTE";}
#sub-altas .table tbody td.estado-aprobada::before {background:#16a34a;content:"APROBADA";}
#sub-altas .table tbody td.estado-denegada::before {background:#dc2626;content:"DENEGADA";}

/* ===== Estados (global) — usa CLASES válidas ===== */
.estado-pendiente{ font-weight:700; color:#d97706; }
.estado-aprobada { font-weight:700; color:#16a34a; }
.estado-denegada { font-weight:700; color:#dc2626; }

.status--pendiente{ font-weight:700; color:#d97706; }
.status--aprobada { font-weight:700; color:#16a34a; }
.status--denegada { font-weight:700; color:#dc2626; }

/* ===== Usuario (global) ===== */
.username{ font-weight:700; }
.table td{ unicode-bidi:plaintext; text-decoration:none; }
.table td.usuario,
.table td[class*="user"],
.table td:has(> span.usuario){ font-weight:700 !important; }  /* :has soportado en navegadores modernos */

/* ===== PENDIENTES — columna de acciones ===== */
#tab-pendientes .table{ table-layout:auto !important; } /* anula fixed solo aquí */
#tabla-pendientes th.actions,
#tabla-pendientes td.actions{
  white-space:nowrap !important;
  min-width:260px !important;   /* Confirmar + Imprimir */
  width:0.1% !important;
  overflow:visible !important;
}
#tabla-pendientes td.actions form{
  display:inline-flex !important;align-items:center;gap:8px;margin-right:8px;
}
#tabla-pendientes td.actions form:last-child{ margin-right:0; }
#tab-pendientes > div[style*="overflow:auto"]{ overflow-x:auto !important; }