/* Identidad NORACID, perfil corporativo.
   Colores: solo los de paleta_noracid.json (oficiales y neutros permitidos). Sin azul:
   también se reemplaza el azul que el navegador pone por defecto en enlaces y foco. */

:root {
  --rojo: #B01C2E;
  --rojo-oscuro: #7D212B;
  --oliva: #827026;
  --oliva-claro: #AD940D;
  --oliva-oscuro: #635412;
  --gris: #A3A19E;
  --blanco: #FFFFFF;
  --texto: #1A1A1A;
  --carbon: #24221F;
  --gris-texto: #4A4846;
  --gris-claro: #ECEAE7;
  --gris-suave: #F2F1EF;
  --hueso: #F7F6F4;
  --rosa: #FBF1F2;

  --radio: 6px;
  --sombra: 0 1px 2px rgba(36, 34, 31, .08), 0 1px 1px rgba(36, 34, 31, .04);
  --ancho-menu: 250px;
  --fuente: Arial, "Helvetica Neue", Helvetica, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--hueso);
}
a { color: var(--rojo-oscuro); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--rojo); }
:focus-visible { outline: 3px solid var(--oliva-claro); outline-offset: 2px; }
h1, h2, h3 { color: var(--carbon); line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
small, .tenue { color: var(--gris-texto); }
code, .mono { font-family: Consolas, "Courier New", monospace; }
hr { border: 0; border-top: 1px solid var(--gris-claro); margin: 1rem 0; }

/* ---------- Estructura ---------- */
.banda { height: 6px; background: var(--rojo-oscuro); }
.cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1.25rem; background: var(--blanco); border-bottom: 1px solid var(--gris-claro);
}
.cabecera .marca { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--carbon); }
.cabecera .marca img { height: 30px; width: auto; display: block; }
.cabecera .marca span { font-size: .95rem; color: var(--oliva-oscuro); border-left: 2px solid var(--gris-claro); padding-left: .9rem; }
.cabecera .sesion { display: flex; align-items: center; gap: .75rem; font-size: .88rem; text-align: right; }
.cabecera .sesion .quien strong { display: block; color: var(--carbon); }
.cabecera .sesion .quien small { display: block; }
.cabecera form { margin: 0; }

.marco { display: grid; grid-template-columns: var(--ancho-menu) 1fr; min-height: calc(100vh - 60px); }
.menu { background: var(--blanco); border-right: 1px solid var(--gris-claro); padding: 1rem 0; }
.menu-alternar { position: absolute; opacity: 0; pointer-events: none; }
.menu-boton { display: none; }
.menu .seccion { margin-bottom: 1rem; }
.menu .seccion > span {
  display: block; padding: 0 1.25rem .3rem; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--oliva); font-weight: bold;
}
.menu a {
  display: block; padding: .45rem 1.25rem; color: var(--carbon); text-decoration: none;
  border-left: 3px solid transparent;
}
.menu a:hover { background: var(--gris-suave); }
.menu a.activo { border-left-color: var(--rojo); background: var(--rosa); color: var(--rojo-oscuro); font-weight: bold; }
.contenido { padding: 1.5rem 1.75rem 3rem; min-width: 0; }
.pie { padding: 1rem 1.75rem; font-size: .78rem; color: var(--gris-texto); border-top: 1px solid var(--gris-claro); background: var(--blanco); }

.titulo-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.titulo-pagina .bajada { color: var(--gris-texto); margin: .2rem 0 0; }
.titulo-pagina h1 { border-left: 4px solid var(--rojo); padding-left: .6rem; }

/* ---------- Componentes ---------- */
.tarjeta {
  background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; min-width: 0;
}
.tarjeta > h2:first-child, .tarjeta > h3:first-child { padding-bottom: .5rem; border-bottom: 1px solid var(--gris-claro); margin-bottom: .85rem; }
.tarjeta.acento { border-top: 3px solid var(--rojo); }
.tarjeta.oliva { border-top: 3px solid var(--oliva); }

.grilla { display: grid; gap: 1.25rem; }
.grilla > * { min-width: 0; }
.grilla.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grilla.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grilla.lateral { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kpi {
  background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: var(--radio);
  padding: .9rem 1rem; border-left: 4px solid var(--oliva);
}
.kpi.rojo { border-left-color: var(--rojo); }
.kpi .valor { font-size: 1.6rem; font-weight: bold; color: var(--carbon); line-height: 1.1; }
.kpi .etiqueta-kpi { font-size: .8rem; color: var(--gris-texto); margin-top: .25rem; }

.tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
/* El encabezado corta línea cuando la tabla no cabe: en una línea fijaba el ancho de las tablas anchas. */
.tabla th {
  text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--carbon); background: var(--gris-suave); border-bottom: 2px solid var(--rojo);
  padding: .55rem .6rem; vertical-align: bottom;
}
.tabla td { padding: .55rem .6rem; border-bottom: 1px solid var(--gris-claro); vertical-align: top; }
.tabla tr:hover td { background: var(--hueso); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla td.num { white-space: nowrap; }
.tabla tfoot td { font-weight: bold; border-top: 2px solid var(--gris); }
.vacio { padding: 1.25rem; text-align: center; color: var(--gris-texto); background: var(--hueso); border-radius: var(--radio); }

.etiqueta {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: bold;
  border: 1px solid var(--gris); color: var(--carbon); background: var(--gris-suave); white-space: nowrap;
}
.etiqueta.neutro { color: var(--carbon); background: var(--gris-suave); border-color: var(--gris); }
.etiqueta.oliva-claro { color: var(--oliva-oscuro); background: var(--blanco); border-color: var(--oliva-claro); }
.etiqueta.oliva { color: var(--blanco); background: var(--oliva); border-color: var(--oliva); }
.etiqueta.rojo { color: var(--rojo); background: var(--rosa); border-color: var(--rojo); }
.etiqueta.alerta { color: var(--blanco); background: var(--rojo); border-color: var(--rojo); }
.etiqueta.oscuro { color: var(--blanco); background: var(--carbon); border-color: var(--carbon); }
.etiqueta.apagado { color: var(--gris-texto); background: var(--gris-claro); border-color: var(--gris-claro); }

.boton, button.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  font: inherit; font-weight: bold; font-size: .9rem; line-height: 1.2;
  padding: .55rem 1rem; border-radius: var(--radio); border: 1px solid var(--rojo);
  background: var(--rojo); color: var(--blanco); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.boton:hover { background: var(--rojo-oscuro); border-color: var(--rojo-oscuro); color: var(--blanco); }
.boton.secundario { background: var(--blanco); color: var(--oliva-oscuro); border-color: var(--oliva); }
.boton.secundario:hover { background: var(--hueso); color: var(--oliva-oscuro); }
.boton.fantasma { background: transparent; color: var(--carbon); border-color: var(--gris); }
.boton.fantasma:hover { background: var(--gris-suave); color: var(--carbon); }
.boton.oscuro { background: var(--carbon); border-color: var(--carbon); }
.boton.chico { padding: .3rem .6rem; font-size: .8rem; }
.boton.grande { padding: .95rem 1.2rem; font-size: 1.05rem; width: 100%; }
.boton[disabled] { opacity: .5; cursor: not-allowed; }
.acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.en-linea { display: inline; margin: 0; }

form .campo { margin-bottom: .85rem; }
.campo label, .etiqueta-campo { display: block; font-weight: bold; font-size: .85rem; margin-bottom: .25rem; color: var(--carbon); }
.campo .ayuda, .helptext { display: block; font-size: .78rem; color: var(--gris-texto); margin-top: .2rem; }
.campo .error, .errorlist { color: var(--rojo); font-size: .82rem; margin: .25rem 0 0; padding: 0; list-style: none; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date],
input[type=time], input[type=datetime-local], input[type=month], input[type=search], input[type=tel], input[type=file], select, textarea {
  width: 100%; font: inherit; padding: .5rem .6rem; border: 1px solid var(--gris); border-radius: var(--radio);
  background: var(--blanco); color: var(--texto);
}
input:focus, select:focus, textarea:focus { outline: 3px solid var(--oliva-claro); outline-offset: 0; border-color: var(--oliva); }
input[type=checkbox], input[type=radio] { accent-color: var(--rojo); width: 1.05rem; height: 1.05rem; }
textarea { min-height: 80px; resize: vertical; }
select[multiple] { min-height: 140px; }
.fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 1rem; }
.filtros { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: 1rem; }
.filtros .campo { margin: 0; min-width: 160px; }

.avisos { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.aviso { padding: .7rem 1rem; border-radius: var(--radio); margin-bottom: .5rem; border-left: 4px solid var(--oliva); background: var(--blanco); box-shadow: var(--sombra); }
.aviso.error { border-left-color: var(--rojo); background: var(--rosa); color: var(--rojo-oscuro); }
.aviso.warning { border-left-color: var(--oliva-claro); }
.recuadro { padding: .8rem 1rem; border-radius: var(--radio); border-left: 4px solid var(--oliva); background: var(--hueso); margin-bottom: 1rem; }
.recuadro.rojo { border-left-color: var(--rojo); background: var(--rosa); }

.datos { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; font-size: .92rem; }
.datos dt { color: var(--gris-texto); }
.datos dd { margin: 0; font-weight: bold; color: var(--carbon); }

.ruta { font-size: 1.05rem; font-weight: bold; color: var(--carbon); }
.ruta .flecha { color: var(--rojo); padding: 0 .35rem; }

.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--gris-claro); }
.linea-tiempo li { position: relative; padding: 0 0 .9rem .9rem; }
.linea-tiempo li::before {
  content: ""; position: absolute; left: -1.43rem; top: .3rem; width: .7rem; height: .7rem;
  border-radius: 50%; background: var(--oliva); border: 2px solid var(--blanco);
}
.linea-tiempo li.importante::before { background: var(--rojo); }
.linea-tiempo .cuando { font-size: .78rem; color: var(--gris-texto); }
.linea-tiempo .que { font-weight: bold; }
.linea-tiempo .hash { font-size: .7rem; color: var(--gris); word-break: break-all; }

.pin {
  font-family: Consolas, "Courier New", monospace; font-size: 1.6rem; letter-spacing: .3rem; font-weight: bold;
  color: var(--rojo-oscuro); background: var(--rosa); border: 1px dashed var(--rojo); border-radius: var(--radio);
  padding: .25rem .6rem; display: inline-block;
}
input.entrada-pin { font-family: Consolas, "Courier New", monospace; font-size: 1.6rem; letter-spacing: .4rem; text-align: center; }

.barra { height: .5rem; background: var(--gris-claro); border-radius: 999px; overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--oliva); }
.barra.rojo > span { background: var(--rojo); }

.pestanas { display: flex; gap: .25rem; border-bottom: 2px solid var(--gris-claro); margin-bottom: 1rem; flex-wrap: wrap; }
.pestanas a { padding: .5rem .9rem; text-decoration: none; color: var(--gris-texto); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.pestanas a.activo { color: var(--rojo-oscuro); border-bottom-color: var(--rojo); font-weight: bold; }

/* ---------- Ingreso ---------- */
.ingreso { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--blanco); }
.ingreso .panel { display: flex; flex-direction: column; justify-content: center; padding: 3rem clamp(1.5rem, 6vw, 5rem); }
.ingreso .panel img { width: 200px; height: auto; margin-bottom: 2rem; }
.ingreso .panel h1 { font-size: 1.6rem; }
.ingreso .panel form { max-width: 380px; margin-top: 1rem; }
.ingreso .lado {
  background: var(--carbon); color: var(--blanco); display: flex; flex-direction: column; justify-content: flex-end;
  padding: 3rem clamp(1.5rem, 5vw, 4rem); border-left: 8px solid var(--rojo-oscuro);
}
.ingreso .lado h2 { color: var(--blanco); font-size: 1.35rem; }
.ingreso .lado ul { padding-left: 1.1rem; margin: .5rem 0 0; color: var(--gris-claro); }
.ingreso .lado li { margin-bottom: .45rem; }
.ingreso .lado .raya { width: 60px; height: 4px; background: var(--oliva-claro); margin-bottom: 1rem; }

/* ---------- Pantallas del chofer (teléfono) ---------- */
.tarjeta-viaje { border-left: 5px solid var(--oliva); }
.tarjeta-viaje.en-curso { border-left-color: var(--rojo); }
.tarjeta-viaje .hora { font-size: 1.5rem; font-weight: bold; color: var(--carbon); }

/* ---------- Adaptación a pantallas chicas ---------- */
@media (max-width: 900px) {
  .marco { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .menu { border-right: 0; border-bottom: 1px solid var(--gris-claro); padding: 0; }
  .menu-boton {
    display: flex; align-items: center; justify-content: space-between; padding: .75rem 16px;
    font-weight: bold; cursor: pointer; color: var(--carbon);
  }
  .menu-boton::after { content: "Abrir"; font-size: .8rem; color: var(--rojo-oscuro); }
  .menu-alternar:checked + .menu-boton::after { content: "Cerrar"; }
  .menu-alternar:focus-visible + .menu-boton { outline: 3px solid var(--oliva-claro); }
  .menu nav { display: none; padding-bottom: .75rem; }
  .menu-alternar:checked ~ nav { display: block; }
  .contenido { padding: 1rem 16px 2.5rem; }
  .grilla.dos, .grilla.tres, .grilla.lateral { grid-template-columns: 1fr; }
  /* En el teléfono las acciones van primero: el chofer no debe bajar para encontrar sus botones. */
  .grilla.lateral > :last-child { order: -1; }
  .cabecera { padding: .6rem 16px; flex-wrap: wrap; gap: .5rem; }
  .cabecera .marca img { height: 26px; }
  .cabecera .marca span { display: none; }
  .cabecera .sesion { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: .4rem; text-align: left; }
  .cabecera .sesion .quien { flex: 1 1 100%; }
  .cabecera .sesion .quien strong { display: inline; }
  .cabecera .sesion .quien small { display: none; }
  html, body { overflow-x: hidden; }
  .ingreso { grid-template-columns: 1fr; }
  .ingreso .lado { display: none; }
  .datos { grid-template-columns: 1fr; gap: 0; }
  .datos dd { margin-bottom: .5rem; }
}
@media print {
  .menu, .cabecera .sesion, .acciones, .pie { display: none; }
  .marco { display: block; }
  body { background: var(--blanco); }
}