/* RT Time — panel de gestion
   Barra lateral oscura que enlaza con el terminal, contenido claro.
   Sin dependencias externas: ni fuentes de Google ni frameworks. */

:root {
  --tinta:       #16181d;
  --tinta-media: #4b515e;
  --tenue:       #8b909c;
  --papel:       #f6f6f4;
  --superficie:  #ffffff;
  --linea:       #e4e3df;
  --linea-suave: #f0efec;

  --laton:       #a97722;
  --laton-claro: #fdf6e8;
  --verde:       #2c6e52;
  --verde-claro: #eaf5f0;
  --rojo:        #a84020;
  --rojo-claro:  #fbeee9;

  --barra:       #1b1e24;
  --barra-alta:  #262a32;

  --r: 8px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel);
}

a { color: inherit; }

/* ---------- Marca ---------- */
.marca { display: flex; align-items: center; gap: 11px; }
.marca-barra {
  width: 3px; height: 34px; border-radius: 2px;
  background: var(--laton); flex: none;
}
.marca h1 {
  font-size: 19px; margin: 0; font-weight: 600; letter-spacing: -0.01em;
}
.marca-sub {
  display: block; font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--laton); margin-top: 1px;
}

/* ---------- Acceso ---------- */
body.centrado {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px; background: var(--barra);
}
.tarjeta-acceso {
  width: 100%; max-width: 360px; background: var(--superficie);
  border-radius: 12px; padding: 34px 30px;
}
.tarjeta-acceso .marca { margin-bottom: 26px; }

/* ---------- Estructura ---------- */
.app { display: flex; min-height: 100vh; }

.lateral {
  width: 232px; flex: none; background: var(--barra);
  color: #fff; padding: 22px 0; display: flex; flex-direction: column;
}
.lateral .marca { padding: 0 20px 24px; }
.lateral .marca h1 { color: #fff; }

.lateral nav { display: flex; flex-direction: column; gap: 1px; }
.lateral nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; font-size: 14.5px;
  color: #b8bcc6; text-decoration: none;
  border-left: 3px solid transparent;
}
.lateral nav a:hover { background: var(--barra-alta); color: #fff; }
.lateral nav a.activo {
  background: var(--barra-alta); color: #fff;
  border-left-color: var(--laton); font-weight: 600;
}
.lateral-pie {
  margin-top: auto; padding: 18px 20px 0; border-top: 1px solid #2e323b;
  font-size: 13px; color: var(--tenue);
}
.lateral-pie strong { display: block; color: #e6e7ea; font-weight: 600; }
.lateral-pie a { color: var(--tenue); text-decoration: none; font-size: 13px; }
.lateral-pie a:hover { color: #fff; }

.principal { flex: 1; min-width: 0; }

.cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 18px 30px; background: var(--superficie);
  border-bottom: 1px solid var(--linea);
}
.cabecera h2 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.cabecera .sub { font-size: 13.5px; color: var(--tenue); margin-top: 1px; }

.contenido { padding: 26px 30px 60px; max-width: 1180px; }

/* ---------- Formularios ---------- */
label {
  display: block; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--tenue); margin-bottom: 5px;
}
input, select, textarea {
  width: 100%; padding: 9px 11px; font: inherit; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r); margin-bottom: 15px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--laton); outline-offset: 2px;
}

button, .boton {
  display: inline-block; padding: 9px 17px; font: inherit; font-size: 14.5px;
  font-weight: 600; color: #fff; background: var(--tinta);
  border: 0; border-radius: var(--r); cursor: pointer;
  text-decoration: none; white-space: nowrap; text-align: center;
}
button:hover, .boton:hover { background: #2b2f38; }
button.ancho { width: 100%; }

.boton-claro {
  color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--linea);
}
.boton-claro:hover { background: var(--laton-claro); border-color: var(--laton); }

.boton-verde { background: var(--verde); }
.boton-verde:hover { background: #235a43; }
.boton-mini { padding: 5px 11px; font-size: 13px; }

/* ---------- Avisos ---------- */
.aviso {
  padding: 11px 14px; border-radius: var(--r);
  font-size: 14px; margin: 0 0 18px;
  border-left: 3px solid var(--laton); background: var(--laton-claro);
}
.aviso-error { color: var(--rojo); background: var(--rojo-claro); border-left-color: var(--rojo); }
.aviso-ok    { color: var(--verde); background: var(--verde-claro); border-left-color: var(--verde); }

/* ---------- Tarjetas y filtros ---------- */
.caja {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 10px; margin-bottom: 20px; overflow: hidden;
}
.caja-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--linea);
}
.caja-cab h3 { margin: 0; font-size: 15.5px; font-weight: 600; }
.caja-cuerpo { padding: 18px; }

.filtros {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 16px 18px; background: var(--superficie);
  border: 1px solid var(--linea); border-radius: 10px; margin-bottom: 20px;
}
.filtros input, .filtros select { margin-bottom: 0; }
.filtros > div { flex: 1 1 155px; min-width: 130px; }
.filtros button, .filtros .boton { flex: none; }

/* ---------- Cifras ---------- */
.cifras { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.cifra {
  flex: 1 1 150px; padding: 15px 17px;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 10px;
}
.cifra b {
  display: block; font-family: var(--mono); font-size: 27px;
  font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em; line-height: 1.15;
}
.cifra span {
  font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--tenue);
}
.cifra-alerta { border-color: var(--rojo); background: var(--rojo-claro); }
.cifra-alerta b { color: var(--rojo); }
.cifra-verde b { color: var(--verde); }

/* ---------- Tablas ---------- */
table.datos {
  width: 100%; border-collapse: collapse; background: var(--superficie);
}
table.datos th {
  text-align: left; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--tenue);
  padding: 11px 16px; border-bottom: 1px solid var(--linea);
  background: var(--linea-suave);
}
table.datos td {
  padding: 11px 16px; border-bottom: 1px solid var(--linea-suave);
  vertical-align: middle;
}
table.datos tr:last-child td { border-bottom: 0; }
table.datos tbody tr:hover { background: #fbfaf8; }

/* Los tiempos en monoespaciada: las columnas se alinean solas */
.num {
  text-align: right; font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.centro { text-align: center; }

/* ---------- Etiquetas de estado ---------- */
.pill {
  display: inline-block; padding: 2px 9px; font-size: 11.5px;
  font-weight: 600; letter-spacing: 0.03em;
  border-radius: 20px; white-space: nowrap;
}
.pill-verde { color: var(--verde); background: var(--verde-claro); border: 1px solid #bfe0cf; }
.pill-rojo  { color: var(--rojo);  background: var(--rojo-claro);  border: 1px solid #f0c7b8; }
.pill-tenue { color: var(--tenue); background: var(--linea-suave); border: 1px solid var(--linea); }
.pill-laton { color: var(--laton); background: var(--laton-claro); border: 1px solid #ecd9ae; }

.punto {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: baseline;
}
.punto-dentro { background: var(--verde); box-shadow: 0 0 0 3px var(--verde-claro); }
.punto-fuera  { background: #c9c8c3; }

.fila-aviso { background: var(--rojo-claro) !important; }

/* ---------- Presencia ---------- */
.presencia { display: flex; flex-wrap: wrap; gap: 8px; }
.presencia-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px; border: 1px solid var(--linea);
  border-radius: 30px; font-size: 14px; background: var(--superficie);
}
.presencia-item.dentro { border-color: #bfe0cf; background: var(--verde-claro); }
.presencia-item .hora {
  font-family: var(--mono); font-size: 13px; color: var(--tenue);
}

.vacio {
  padding: 44px 20px; text-align: center; color: var(--tenue);
  background: var(--superficie); border: 1px dashed var(--linea);
  border-radius: 10px;
}
.tenue { color: var(--tenue); }
.pequeno { font-size: 13px; }

/* ---------- Barra de vacaciones ---------- */
.barra-vac {
  height: 9px; border-radius: 5px; background: var(--linea);
  overflow: hidden; margin: 8px 0 4px;
}
.barra-vac span { display: block; height: 100%; background: var(--laton); }

/* ---------- Movil ---------- */
@media (max-width: 860px) {
  .app { flex-direction: column; }
  .lateral { width: 100%; padding: 14px 0; }
  .lateral nav { flex-direction: row; overflow-x: auto; }
  .lateral nav a { border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; }
  .lateral nav a.activo { border-left: 0; border-bottom-color: var(--laton); }
  .lateral-pie { display: none; }
  .cabecera, .contenido { padding-left: 16px; padding-right: 16px; }
  table.datos th, table.datos td { padding: 9px 10px; }
}