body {
  font-family: system-ui, Arial, sans-serif;
  margin: 2rem;
  color: #222;
  background: #fafcff;
}
h1, h2 {
  margin: 0.2rem 0 1.1rem;
  font-size: 1.7rem;
}
button, .btn {
  padding: 0.45rem 1.1rem;
  background: #056faa;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
button:hover, .btn:hover {
  background: #035d8e;
}
a.btn {
  display: inline-block;
  text-decoration: none;
}
.msg {
  color: #118136;
  margin-top: 0.8rem;
}
.err {
  color: #d40000;
  margin-top: 0.8rem;
}

/* buscador */
#searchBox {
  margin-bottom: 1rem;
  padding: 0.4rem;
  width: 30%;
  font-size: 0.9rem;
}

/* dashboard */
.dashboard {
  display: flex;
  justify-content: space-around;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.dashboard div {
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.d-pendiente { background: #ffbf47; }
.d-en_proceso { background: #ff8c00; }
.d-completado { background: #009933; }     /* legacy (por si queda en algún lado) */
.d-con_cupo   { background: #009933; }     /* nuevo box del dashboard */
.d-error { background: #cc0000; }

/* tablas */
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.88rem;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  margin-top: 1rem;
}
th, td {
  border: 1px solid #e0e6ef;
  padding: 0.4rem 0.55rem;
  text-align: center;
}
th {
  background: #f4f7fb;
  font-weight: 600;
  cursor: pointer;
}
tr:nth-child(even) {
  background: #f9fbfe;
}
tr.main:hover {
  background: #eaf3ff;
  cursor: pointer;
}

/* detalle oculto */
tr.details {
  display: none;
  background: #f0f6ff !important;
}
tr.details td {
  padding: 0;
  border: none;
}

/* tabla interna de detalle */
.sub {
  font-size: 0.82rem;
}
.sub th, .sub td {
  border: 1px solid #d1dbe8;
  padding: 0.25rem 0.4rem;
}

/* resumen */
.summary {
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.summary span {
  display: inline-block;
  margin-right: 1.5rem;
  font-weight: bold;
}

/* exportar CSV */
.export-btn {
  margin-bottom: 1rem;
}

# ───────────── CSS_BASE (colores de celda) ─────────────
/* filas de estado en /cola */
td.pendiente   { background: #fffae6; }
td.en_proceso  { background: #ffe9cc; }
td.completado  { background: #e6ffef; }
td.con_cupo    { background: #e6ffef; }  /* nueva nomenclatura */
td.error       { background: #ffe6e6; }
td.en_cola             { background:#ddd6fe; }
td.sin_legajos_activos { background:#e0e7ff; }
td.no_estatal          { background:#fde68a; }
td.no_apto             { background:#fecaca; }


/* colores según ts_procesado */
tr.verde    { background: #ccffcc !important; }  /* dentro de 7 días */
tr.amarillo { background: #fff2cc !important; } /* entre 8 y 15 días */
tr.naranja  { background: #ffe6cc !important; }  /* más de 15 días */

/* filtro de fechas */
.filter-form {
  margin-bottom: 1rem;
}
.filter-form label {
  margin-right: 0.5rem;
}
.filter-form input[type="date"] {
  padding: 0.3rem;
  margin-right: 1rem;
}

/* filtro por estado */
#stateFilter {
  margin-left: 1rem;
  padding: 0.4rem;
  font-size: 0.9rem;
}

/* paginación */
.pagination {
  margin-top: 1rem;
  text-align: center;
}
.pagination a {
  margin: 0 0.2rem;
  padding: 0.4rem 0.8rem;
  text-decoration: none;
  border: 1px solid #e0e6ef;
  border-radius: 4px;
  color: #056faa;
}
.pagination a.current {
  background: #056faa;
  color: #fff;
}
.pagination a:hover {
  background: #035d8e;
  color: #fff;
}
:root{
  --bg:#f4f6fb; --card:#fff; --accent:#3b82f6; --accent2:#1e3a8a;
  --text:#1f2937; --border:#e5e7eb; --row-pad:.55rem;      /* 👈 default */
}

th,td{padding:var(--row-pad) .5rem;}
/* botones predefinidos */
button.btn             {background:var(--accent)}
button.btn.primary     {background:var(--accent)}
button.btn.gray        {background:#9ca3af}
button.btn:hover       {background:var(--accent2)}
/* pestañas */
.btnTab{background:#e5e7eb;color:#374151;cursor:pointer;padding:.3rem .9rem;
        border:none;border-radius:8px;font-weight:600;margin-right:.4rem}
.btnTab.on{background:var(--accent);color:#fff}