:root {
  --tinta: #0F1B14;
  --papel: #F6F3E9;
  --papel-suave: #EDE9DB;
  --ambar: #E8A23D;
  --ambar-fuerte: #C97B1E;
  --verde-ok: #4E9A6B;
  --rojo-no: #B5473A;
  --linea: #DCD6C4;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  --sans: 'IBM Plex Sans', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; font-family: var(--sans); background: var(--papel-suave); color: var(--tinta); }

.oculto { display: none !important; }

.eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  color: var(--ambar-fuerte);
  margin: 0 0 4px;
}

h1 { margin: 0 0 20px; font-size: 1.6rem; }
h2 { font-size: 1.1rem; margin: 0 0 12px; }

.vista-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tinta);
}
.tarjeta-login {
  background: var(--papel);
  padding: 40px;
  border-radius: 6px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.tarjeta-login label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; }
.tarjeta-login input {
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: 4px;
  font-size: 0.95rem;
  font-family: var(--sans);
}
.tarjeta-login button {
  margin-top: 8px;
  padding: 11px;
  border: none;
  border-radius: 4px;
  background: var(--ambar-fuerte);
  color: var(--papel);
  font-weight: 600;
  cursor: pointer;
}
.tarjeta-login button:hover { background: var(--ambar); }
.error { color: var(--rojo-no); font-size: 0.85rem; min-height: 1.2em; margin: 0; }

.vista-panel { max-width: 1300px; margin: 0 auto; padding: 32px 24px 60px; }

.barra-superior {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.btn-primario, .btn-secundario {
  border: none;
  border-radius: 4px;
  padding: 9px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--sans);
}
.btn-primario { background: var(--ambar-fuerte); color: var(--papel); }
.btn-primario:hover { background: var(--ambar); }
.btn-primario:disabled { background: #C8C2AE; cursor: not-allowed; }
.btn-secundario { background: transparent; border: 1px solid var(--tinta); color: var(--tinta); }
.btn-secundario:hover { background: var(--tinta); color: var(--papel); }

.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--linea); margin-bottom: 20px; flex-wrap: wrap; }
.pestana {
  background: none; border: none; padding: 10px 16px; cursor: pointer;
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.05em;
  color: rgba(15,27,20,0.5); border-bottom: 2px solid transparent;
}
.pestana.activa { color: var(--tinta); border-bottom-color: var(--ambar-fuerte); }

.filtros { display: flex; gap: 16px; align-items: flex-end; margin-bottom: 18px; flex-wrap: wrap; }
.filtros label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; }
.filtros input, .filtros select {
  padding: 8px 10px; border: 1px solid var(--linea); border-radius: 4px; font-family: var(--sans);
}

.tabla { width: 100%; border-collapse: collapse; background: var(--papel); border-radius: 6px; overflow: hidden; }
.tabla th, .tabla td { padding: 10px 14px; text-align: left; font-size: 0.88rem; border-bottom: 1px solid var(--linea); }
.tabla th { font-family: var(--mono); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.06em; color: rgba(15,27,20,0.55); }
.tabla tbody tr:hover { background: var(--papel-suave); }

.dos-columnas { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .dos-columnas { grid-template-columns: 1fr; } }

.tarjeta-enrolar { background: var(--papel); padding: 20px; border-radius: 6px; display: flex; flex-direction: column; gap: 12px; }
.tarjeta-enrolar label { display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; }
.tarjeta-enrolar input, .tarjeta-enrolar select { padding: 9px 11px; border: 1px solid var(--linea); border-radius: 4px; font-family: var(--sans); }

.visor-enrolar { width: 100%; aspect-ratio: 4/3; background: #000; border-radius: 4px; overflow: hidden; }
.visor-enrolar video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }

.estado-captura { font-family: var(--mono); font-size: 0.78rem; color: rgba(15,27,20,0.6); margin: 0; }
.tag-incidencia {
  background: #ffebee;
  color: #c62828;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: 600;
  display: inline-block;
  margin: 1px;
}

#tablaCalendario th,
#tablaCalendario td {
  text-align: center;
  padding: 5px 3px;
  font-size: 0.78rem;
}
#tablaCalendario thead th:first-child {
  text-align: left;
  min-width: 180px;
  position: sticky;
  left: 0;
  background: var(--papel);
  z-index: 2;
}
#tablaCalendario tbody td:first-child {
  text-align: left;
  font-weight: 500;
  position: sticky;
  left: 0;
  background: var(--papel);
  z-index: 1;
}

#tablaSalarios th,
#tablaSalarios td {
  font-size: 0.82rem;
  padding: 10px 12px;
}
#tablaSalarios td:nth-child(5),
#tablaSalarios td:nth-child(6),
#tablaSalarios td:nth-child(7) {
  font-family: var(--mono);
  text-align: right;
}

#tablaAusencias td:nth-child(5) {
  max-width: 200px;
  font-size: 0.78rem;
}
#tablaAusencias td:nth-child(8) {
  white-space: nowrap;
}

.badge {
  background: var(--papel-suave);
  border: 1px solid var(--linea);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: var(--mono);
}

.badge-opex {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffe0b2;
}

.badge-capex {
  background: #f3e5f5;
  color: #4a148c;
  border: 1px solid #e1bee7;
}

code {
  font-family: var(--mono);
  background: rgba(0,0,0,0.05);
  padding: 2px 5px;
  border-radius: 3px;
}