/* Armazón de la interfaz. Depende de tokens.css. */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--tipo);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento); }
a:hover { color: var(--acento-vivo); }

/* Cifras --------------------------------------------------------------- */
/* Cantidades en Manrope con cifras tabulares; la monoespaciada queda solo
   para identificadores (EMB-2026-014, IT-0871). CLAUDE.md § 8. */

.cifra {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -.015em;
}

.ident {
  font-family: var(--tipo-id);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}

.unidad {
  font-size: 12px;
  font-weight: 500;
  color: var(--texto-tenue);
  letter-spacing: 0;
}

/* Estructura ----------------------------------------------------------- */

.armazon { display: flex; min-height: 100vh; }

.lateral {
  width: var(--barra-lateral);
  flex-shrink: 0;
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; }

.marca__sello {
  width: 30px; height: 30px;
  border-radius: var(--radio-chico);
  background: var(--acento);
  color: var(--sobre-acento);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.marca__nombre { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }

.menu { display: flex; flex-direction: column; gap: 2px; }

.menu__opcion {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px;
  border-radius: var(--radio-chico);
  font-size: 13.5px; font-weight: 500;
  color: var(--texto-medio);
  text-decoration: none;
}
.menu__opcion:hover { background: var(--superficie-alta); color: var(--texto); }
.menu__opcion--activa {
  font-weight: 700;
  color: var(--acento-vivo);
  background: var(--acento-fondo);
}
.menu__opcion--activa:hover { color: var(--acento-vivo); background: var(--acento-fondo); }
.menu__opcion--pendiente { opacity: .55; cursor: default; }
.menu__opcion--pendiente:hover { background: none; color: var(--texto-medio); }

.usuario {
  margin-top: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 10px 0;
  border-top: 1px solid var(--borde);
}
.usuario__iniciales {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--acento-fondo); color: var(--acento-vivo);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.usuario__nombre { font-size: 13px; font-weight: 600; }
.usuario__rol { font-size: 11.5px; color: var(--texto-tenue); }

.principal { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }

.superior {
  height: var(--barra-superior);
  flex-shrink: 0;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px; gap: 20px;
  position: sticky; top: 0; z-index: 10;
}

.buscador {
  display: flex; align-items: center; gap: 9px;
  padding: 0 12px; height: 36px; width: 300px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  color: var(--texto-tenue);
  font-size: 13px;
}

.superior__derecha { display: flex; align-items: center; gap: 10px; }

.contenido { flex-grow: 1; padding: 22px 26px; display: flex; flex-direction: column; }

/* Píldoras ------------------------------------------------------------- */

.pildora {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
}
.pildora--acento { background: var(--acento-fondo); color: var(--acento-vivo); }
.pildora--aviso { background: var(--aviso-fondo); color: var(--aviso-texto); }
.pildora--neutra { background: var(--superficie-alta); color: var(--texto-medio); }

.punto { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.punto--vivo { background: var(--acento); }
.punto--apagado { background: var(--texto-tenue); }

/* Paso del flujo ------------------------------------------------------- */

.flujo { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; }
.flujo__paso { display: flex; align-items: center; gap: 8px; }
.flujo__etiqueta { font-size: 12.5px; font-weight: 600; color: var(--texto-medio); }
.flujo__marca {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--acento); flex-shrink: 0;
}
.flujo__union { width: 26px; height: 1px; background: var(--borde-fuerte); margin: 0 12px; }

.flujo__paso--actual .flujo__marca {
  width: 10px; height: 10px;
  box-shadow: 0 0 0 4px var(--acento-fondo);
}
.flujo__paso--actual .flujo__etiqueta { font-weight: 800; color: var(--texto); }

.flujo__paso--pendiente .flujo__marca {
  background: transparent;
  border: 1.5px solid var(--borde-fuerte);
}
.flujo__paso--pendiente .flujo__etiqueta { font-weight: 500; color: var(--texto-tenue); }
.flujo__union--pendiente { background: var(--borde); }

/* Cabecera de página --------------------------------------------------- */

.cabecera {
  margin-top: 16px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
}
.cabecera__titulo {
  margin: 0;
  font-size: 25px; font-weight: 800; letter-spacing: -.025em;
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
}
.cabecera__resumen { margin-top: 8px; font-size: 12.5px; color: var(--texto-medio); }
.cabecera__acciones { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }

/* Botones -------------------------------------------------------------- */

.boton {
  height: 38px; padding: 0 16px;
  font: inherit; font-size: 13.5px; font-weight: 600;
  border-radius: var(--radio-chico);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie-alta);
  color: var(--texto);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
.boton:hover { border-color: var(--texto-tenue); color: var(--texto); }

.boton--principal {
  font-weight: 700;
  background: var(--acento);
  border-color: var(--acento);
  color: var(--sobre-acento);
}
.boton--principal:hover { background: var(--acento-vivo); border-color: var(--acento-vivo); color: var(--sobre-acento); }

.boton--icono { width: 38px; padding: 0; }

/* Tarjetas ------------------------------------------------------------- */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.tarjeta--aviso { background: var(--aviso-fondo); border-color: var(--aviso-borde); }
.tarjeta--acento {
  background: var(--acento-profundo);
  border-color: var(--acento-profundo-borde);
}

.rejilla-cifras {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.dato { padding: 15px 16px; }
.dato__etiqueta { font-size: 11.5px; font-weight: 600; color: var(--texto-tenue); }
.dato--aviso .dato__etiqueta { color: var(--aviso-medio); }
.dato__valor { margin-top: 7px; font-size: 25px; font-weight: 700; }
.dato--aviso .dato__valor { color: var(--aviso-texto); }
.dato--aviso .unidad { color: var(--aviso-medio); }

/* Tablas --------------------------------------------------------------- */

.tabla-marco { margin-top: 16px; overflow: hidden; }

.tabla-marco__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--borde);
}
.tabla-marco__titulo { font-size: 14px; font-weight: 700; }
.tabla-marco__nota { font-size: 12px; color: var(--texto-medio); }

.tabla { width: 100%; border-collapse: collapse; }
.tabla thead tr { background: var(--superficie-baja); }
.tabla th {
  font-size: 11px; font-weight: 700; color: var(--texto-tenue);
  padding: 10px 16px 12px;
  text-align: right;
}
.tabla th:first-child { text-align: left; }
.tabla td {
  padding: 12px 16px;
  font-size: 13.5px;
  border-top: 1px solid var(--borde-sutil);
  text-align: right;
}
.tabla td:first-child { text-align: left; font-weight: 600; }
.tabla__secundario { color: var(--texto-medio); }
.tabla__tenue { color: var(--texto-tenue); }
.tabla tr.fuera-de-tolerancia { background: var(--aviso-fila); }
.tabla .destacado { color: var(--aviso); font-weight: 700; }
.tabla tr.totales { background: var(--superficie-baja); }
.tabla tr.totales td { border-top: 1px solid var(--borde-fuerte); font-weight: 800; }

.marca-porcentaje {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 8px;
  border-radius: 999px;
  background: var(--aviso-borde); color: var(--aviso-texto);
  font-weight: 700; font-size: 12px;
}

/* Pie de la pantalla --------------------------------------------------- */

.pie-pantalla {
  margin-top: auto;
  padding-top: 16px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 14px;
  align-items: stretch;
}

.nota-aviso { padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.nota-aviso__icono {
  width: 30px; height: 30px; border-radius: var(--radio-chico);
  background: var(--aviso-borde); color: var(--aviso-texto);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nota-aviso__texto { font-size: 13px; color: var(--aviso-medio); line-height: 1.45; }
.nota-aviso__texto b { color: var(--aviso-texto-fuerte); }

.costo {
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.costo__etiqueta { font-size: 11.5px; font-weight: 700; color: var(--acento-profundo-texto); }
.costo__nota { font-size: 11.5px; color: var(--acento-profundo-texto); margin-top: 4px; }
.costo__valor { font-size: 27px; font-weight: 800; color: #FFFFFF; }
/* Con dos canales aduanales caben dos cifras y un guion: algo mas pequeno
   para que no se parta en dos lineas. */
.costo__valor--rango { font-size: 21px; white-space: nowrap; }
.costo .unidad { color: var(--acento-profundo-texto); }

/* Entrar --------------------------------------------------------------- */

.entrar {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.entrar__caja { width: 100%; max-width: 380px; padding: 28px; }
.entrar__titulo { margin: 18px 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.entrar__nota { font-size: 13px; color: var(--texto-medio); margin-bottom: 20px; }

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label { font-size: 12px; font-weight: 600; color: var(--texto-tenue); }
.campo input {
  height: 40px; padding: 0 12px;
  font: inherit; font-size: 14px;
  background: var(--fondo);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  color: var(--texto);
}
.campo input:focus { outline: 2px solid var(--acento); outline-offset: -1px; border-color: var(--acento); }

.error { font-size: 12.5px; color: var(--aviso-texto); margin-bottom: 14px; }

/* Utilidades ----------------------------------------------------------- */

.vacio {
  padding: 48px 24px;
  text-align: center;
  color: var(--texto-medio);
  font-size: 13.5px;
}

.ancho-completo { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .rejilla-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie-pantalla { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .lateral { display: none; }
  .buscador { width: auto; flex-grow: 1; }
  .contenido { padding: 18px 16px; }
  .superior { padding: 0 16px; }
  .cabecera { flex-direction: column; align-items: stretch; }
  .tabla-marco { overflow-x: auto; }
}

/* Pie ------------------------------------------------------------------ */

.pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 26px;
  border-top: 1px solid var(--borde);
  font-size: 12px;
  color: var(--texto-tenue);
}
.pie__enlace { color: var(--texto-tenue); text-decoration: none; }
.pie__enlace:hover { color: var(--acento); }
.pie__enlaces { display: flex; align-items: center; gap: 18px; }
.pie__enlaces a { color: var(--texto-tenue); text-decoration: none; }
.pie__enlaces a:hover { color: var(--acento); text-decoration: underline; }

/* Paginas de apoyo ----------------------------------------------------- */

.documento { min-height: 100vh; display: flex; flex-direction: column; background: var(--fondo); }

.documento__superior {
  height: var(--barra-superior);
  flex-shrink: 0;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px; gap: 20px;
}
.documento__marca {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--texto);
}
.documento__navegacion { display: flex; align-items: center; gap: 20px; font-size: 13.5px; }
.documento__navegacion a { color: var(--texto-medio); text-decoration: none; }
.documento__navegacion a:hover { color: var(--acento); }

.documento__cuerpo {
  flex-grow: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 26px 56px;
}

.documento__cuerpo h1 {
  margin: 0 0 8px;
  font-size: 30px; font-weight: 800; letter-spacing: -.03em;
}
.documento__cuerpo h2 {
  margin: 36px 0 12px;
  font-size: 18px; font-weight: 700; letter-spacing: -.015em;
}
.documento__cuerpo h3 {
  margin: 26px 0 8px;
  font-size: 15px; font-weight: 700;
}
.documento__cuerpo p,
.documento__cuerpo li { font-size: 15px; line-height: 1.65; color: var(--texto-medio); }
.documento__cuerpo strong { color: var(--texto); font-weight: 700; }
.documento__cuerpo ul, .documento__cuerpo ol { padding-left: 20px; }
.documento__cuerpo li { margin-bottom: 7px; }
.documento__cuerpo hr { border: 0; border-top: 1px solid var(--borde); margin: 32px 0; }

.documento__entradilla { font-size: 16px; color: var(--texto-medio); margin-bottom: 4px; }
.documento__fecha { font-size: 12.5px; color: var(--texto-tenue); }

.documento__cuerpo table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.documento__cuerpo th, .documento__cuerpo td {
  text-align: left; padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--borde-sutil);
  font-size: 14px;
}
.documento__cuerpo th { color: var(--texto-tenue); font-size: 11.5px; font-weight: 700; }

.aviso-relleno {
  border: 1px dashed var(--aviso-borde);
  background: var(--aviso-fondo);
  border-radius: var(--radio);
  padding: 14px 16px;
  margin: 20px 0;
}
.aviso-relleno p { color: var(--aviso-medio); font-size: 13.5px; margin: 0; }
.aviso-relleno b { color: var(--aviso-texto-fuerte); }

.relleno {
  background: var(--aviso-borde);
  color: var(--aviso-texto);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  font-size: .95em;
}

/* Indice de la ayuda --------------------------------------------------- */

.temas { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.tema {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  text-decoration: none;
}
.tema:hover { border-color: var(--acento); }
.tema__icono {
  width: 34px; height: 34px; border-radius: var(--radio-chico);
  background: var(--acento-fondo); color: var(--acento-vivo);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tema__titulo { display: block; font-size: 15px; font-weight: 700; color: var(--texto); }
.tema__resumen { display: block; font-size: 13.5px; color: var(--texto-medio); margin-top: 3px; line-height: 1.5; }

.migaja { font-size: 12.5px; color: var(--texto-tenue); margin-bottom: 14px; }
.migaja a { color: var(--texto-tenue); text-decoration: none; }
.migaja a:hover { color: var(--acento); }

@media (max-width: 820px) {
  .documento__superior { padding: 0 16px; }
  .documento__cuerpo { padding: 28px 16px 40px; }
  .pie { padding: 14px 16px; }
}

/* Menu de usuario ------------------------------------------------------ */

.menu-usuario { position: relative; }

.menu-usuario__disparador {
  display: flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 10px 0 4px;
  font: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--texto);
  cursor: pointer;
}
.menu-usuario__disparador:hover { background: var(--superficie-alta); }
.menu-usuario__disparador[aria-expanded="true"] {
  background: var(--superficie-alta);
  border-color: var(--borde-fuerte);
}

.menu-usuario__iniciales {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--acento); color: var(--sobre-acento);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; letter-spacing: -.02em;
  flex-shrink: 0;
}

.menu-usuario__flecha { color: var(--texto-tenue); flex-shrink: 0; transition: transform .15s; }
.menu-usuario__disparador[aria-expanded="true"] .menu-usuario__flecha { transform: rotate(180deg); }

.menu-usuario__lista {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  min-width: 268px;
  padding: 6px;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
[data-tema='claro'] .menu-usuario__lista { box-shadow: 0 12px 32px rgba(16, 24, 40, .14); }

.menu-usuario__opcion {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 9px 10px;
  font: inherit; font-size: 13.5px; font-weight: 500;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radio-chico);
  color: var(--texto);
  text-decoration: none;
  cursor: pointer;
}
.menu-usuario__opcion:hover { background: var(--superficie-alta); color: var(--texto); }
.menu-usuario__opcion svg { color: var(--texto-tenue); flex-shrink: 0; }
.menu-usuario__opcion:hover svg { color: var(--acento); }

.menu-usuario__opcion--pendiente { opacity: .5; cursor: default; }
.menu-usuario__opcion--pendiente:hover { background: transparent; }
.menu-usuario__opcion--pendiente:hover svg { color: var(--texto-tenue); }

.menu-usuario__opcion--salir { color: var(--aviso-texto); }
.menu-usuario__opcion--salir svg { color: var(--aviso-texto); }
.menu-usuario__opcion--salir:hover { background: var(--aviso-fondo); color: var(--aviso-texto); }
.menu-usuario__opcion--salir:hover svg { color: var(--aviso-texto); }

.menu-usuario__pista {
  margin-left: auto;
  font-size: 11px; font-weight: 600;
  color: var(--texto-tenue);
}

.menu-usuario__separador {
  height: 1px; margin: 6px 4px;
  background: var(--borde);
}

@media (max-width: 820px) {
  /* En pantalla estrecha queda solo el avatar. */
  .menu-usuario__nombre { display: none; }
  .menu-usuario__disparador { padding: 0 6px 0 4px; }
}

/* Perfil --------------------------------------------------------------- */

.rejilla-perfil {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.seccion-perfil { padding: 20px 22px; }
.seccion-perfil__titulo { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.seccion-perfil__nota {
  margin: 0 0 18px;
  font-size: 12.5px; color: var(--texto-medio); line-height: 1.5;
}

.formulario { display: flex; flex-direction: column; gap: 0; }
.formulario .boton { align-self: flex-start; margin-top: 6px; }

.campo__control {
  height: 40px; padding: 0 12px; width: 100%;
  font: inherit; font-size: 14px;
  background: var(--fondo);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  color: var(--texto);
}
.campo__control:focus {
  outline: 2px solid var(--acento);
  outline-offset: -1px;
  border-color: var(--acento);
}
.campo__ayuda { font-size: 11.5px; color: var(--texto-tenue); }
.campo__error { font-size: 12px; color: var(--aviso-texto); font-weight: 600; }

@media (max-width: 1000px) {
  .rejilla-perfil { grid-template-columns: 1fr; }
}

/* Menu de usuario: secciones, interruptor y pie ------------------------- */

.menu-usuario__nombre { font-size: 13.5px; font-weight: 600; white-space: nowrap; }

.menu-usuario__lista { max-height: calc(100vh - 90px); overflow-y: auto; }

.menu-usuario__seccion {
  margin: 4px 0 2px;
  padding: 6px 10px 4px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-tenue);
}

.menu-usuario__pie {
  margin: 8px 0 2px;
  padding: 10px 10px 4px;
  border-top: 1px solid var(--borde);
  font-size: 11.5px;
  color: var(--texto-tenue);
  text-align: center;
}

/* Interruptor ---------------------------------------------------------- */

.interruptor {
  margin-left: auto;
  width: 36px; height: 20px;
  border-radius: 999px;
  background: var(--borde-fuerte);
  flex-shrink: 0;
  position: relative;
  transition: background .15s;
}
.interruptor__bola {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--superficie);
  transition: transform .15s;
}
[aria-checked="true"] .interruptor { background: var(--acento); }
[aria-checked="true"] .interruptor__bola { transform: translateX(16px); }

/* Captura de mediciones ------------------------------------------------ */

.pista-captura {
  margin: 0;
  padding: 10px 16px;
  background: var(--superficie-baja);
  border-bottom: 1px solid var(--borde-sutil);
  font-size: 12.5px;
  color: var(--texto-medio);
}
.pista-captura kbd {
  font-family: var(--tipo-id);
  font-size: 11px;
  padding: 1px 5px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 4px;
  background: var(--superficie-alta);
}

.tabla--captura td { vertical-align: middle; }
.tabla--captura tr.sin-medir .ident { color: var(--texto-tenue); }

.celda-captura { padding: 6px 16px 6px 0; }

.captura { display: flex; gap: 8px; justify-content: flex-start; }

.celda {
  width: 118px;
  height: 34px;
  padding: 0 10px;
  font: inherit;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  color: var(--texto);
}
.celda:hover { border-color: var(--borde-fuerte); }
.celda:focus {
  outline: 2px solid var(--acento);
  outline-offset: -1px;
  border-color: var(--acento);
  background: var(--superficie-alta);
}
.celda-error { font-size: 11.5px; color: var(--aviso-texto); }

/* Qué canal aduanal lleva el contenedor del tanque */
.marca-canal {
  margin-left: 7px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--superficie-alta);
  color: var(--texto-tenue);
  font-family: var(--tipo);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
}

/* Panel de confirmación ------------------------------------------------ */

.panel-confirmar { margin-top: 16px; padding: 18px 20px; }
.panel-confirmar__texto {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--texto-medio);
  line-height: 1.5;
}
.panel-confirmar__texto b { color: var(--texto); }
.panel-confirmar__campos {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.panel-confirmar__campos .campo { margin-bottom: 0; }
.panel-confirmar__campos .campo__control { width: 240px; }

@media (max-width: 900px) {
  .captura { flex-wrap: wrap; }
  .celda { width: 100px; }
}

/* Los totales se alinean con las celdas de captura, no con el texto */
.tabla--captura .celda-total { padding-right: 26px; }

/* ======================================================================
   Gasolineras: el libro del servicentro
   ====================================================================== */

.rejilla-servicentros {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.servicentro { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.servicentro__nombre { font-size: 15px; font-weight: 700; }
.servicentro__lugar { margin-top: 3px; font-size: 12px; color: var(--texto-medio); }

.existencias { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.existencia {
  padding: 10px 12px;
  background: var(--superficie-alta);
  border-radius: var(--radio-chico);
}
.existencia__enlace {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.existencia__enlace:hover .existencia__producto { color: var(--acento-vivo); }
.existencia__producto { font-size: 13px; font-weight: 600; }
.existencia__litros { font-size: 18px; font-weight: 700; }
.existencia__costo { display: block; margin-top: 3px; font-size: 11.5px; color: var(--texto-tenue); }

/* Filtros del libro ---------------------------------------------------- */

.filtros {
  margin-top: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.filtros .campo { margin-bottom: 0; }
.filtros .campo__control { width: 190px; }
.filtros__nota {
  flex: 1 1 220px;
  min-width: 200px;
  font-size: 12px;
  color: var(--texto-tenue);
  line-height: 1.5;
}

.dato__pie { margin-top: 6px; font-size: 11.5px; color: var(--texto-tenue); }
.dato--aviso .dato__pie { color: var(--aviso-medio); }

/* Una cifra sobre la tarjeta de acento necesita sus propios colores: los
   grises de etiqueta no llegan a 4,5:1 sobre el turquesa profundo, y en el
   tema claro se vuelven ilegibles. */
.tarjeta--acento .dato__etiqueta,
.tarjeta--acento .dato__pie,
.tarjeta--acento .unidad { color: var(--acento-profundo-texto); }
.tarjeta--acento .dato__valor { color: #FFFFFF; }

/* La línea en blanco que se teclea ------------------------------------- */

.anotar {
  padding: 12px 16px 14px;
  border-bottom: 1px solid var(--borde);
  background: var(--superficie-alta);
}
.anotar__campos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.anotar__campos .celda { width: 108px; }
.anotar__campos .celda--fecha { width: 138px; text-align: left; }
.anotar__campos .celda--tipo { width: 160px; text-align: left; }
.anotar__campos .celda--cliente { width: 170px; text-align: left; }
/* La nota se queda con lo que sobre del ancho: así la segunda línea del
   formulario se ve intencionada y no como un resto. */
.anotar__campos input[name="nota"] { flex: 1 1 220px; width: auto; text-align: left; }
.anotar__campos input[name="carne"],
.anotar__campos input[name="nombre"] { text-align: left; }
.anotar__errores {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--radio-chico);
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
}
.anotar__errores p { margin: 0; font-size: 12.5px; color: var(--aviso-texto); }

/* Las líneas ya anotadas ------------------------------------------------ */

.tabla--libro td { vertical-align: middle; }
.tabla--libro .celda-total { font-weight: 700; }
.operacion--casa .pildora { font-style: normal; }
.operacion__nota {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--texto-tenue);
}

/* Cupo a precio de la casa --------------------------------------------- */

.cupo { margin-top: 16px; padding: 16px 20px; }
.cupo__cifras {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.cupo__valor { margin-top: 6px; font-size: 20px; font-weight: 700; }
.cupo__alta { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.cupo__alta .campo { margin-bottom: 0; }
.cupo__alta .campo__control { width: 170px; }
.cupo__texto {
  flex: 1 1 260px;
  min-width: 240px;
  font-size: 12.5px;
  color: var(--texto-medio);
  line-height: 1.5;
}

.resumen-tipos { max-width: 620px; }

@media (max-width: 900px) {
  .anotar__campos .celda,
  .anotar__campos .celda--fecha,
  .anotar__campos .celda--tipo,
  .anotar__campos .celda--cliente { width: 100%; }
  .filtros .campo__control { width: 100%; }
}

/* ======================================================================
   Ofertas: el mayorista
   ====================================================================== */

.rejilla-cifras--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.filtro-linea .campo__control { width: 170px; }

.dos-columnas {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.dos-columnas > .tabla-marco { margin-top: 0; }

/* Una tabla de cuentas: dos columnas, concepto e importe */
.tabla--cuentas td:first-child { text-align: left; color: var(--texto-medio); }
.tabla--cuentas tr.totales td:first-child { color: var(--texto); }

@media (max-width: 1100px) {
  .dos-columnas { grid-template-columns: minmax(0, 1fr); }
  .rejilla-cifras--tres { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* ======================================================================
   Tablero de Inicio
   ====================================================================== */

.avisos { margin-top: 16px; padding: 16px 20px; }
.avisos__cabecera { display: flex; align-items: center; gap: 10px; }
.avisos__icono { display: flex; color: var(--aviso-medio); }
.tarjeta:not(.tarjeta--aviso) .avisos__icono { color: var(--texto-tenue); }
.avisos__titulo { font-size: 14px; font-weight: 700; }
.avisos__vacio { margin-top: 8px; font-size: 13px; color: var(--texto-medio); line-height: 1.55; }
.avisos__lista { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.aviso {
  font-size: 13px;
  line-height: 1.55;
  color: var(--aviso-texto);
  padding-left: 14px;
  position: relative;
}
.aviso::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--aviso-medio);
}
.aviso .ident { margin-right: 4px; font-weight: 700; }


/* ======================================================================
   Facturas y derechos de retiro
   ====================================================================== */

/* Una entrada en el libro es distinta de una salida: no tiene precio y suma */
.operacion--entrada td { color: var(--texto-medio); }
.destacado-entrada { color: var(--acento-vivo); font-weight: 700; }
.operacion__referencia { margin-left: 8px; font-size: 11.5px; }

.tabla--facturas .celda-total { font-weight: 700; }

.servicentro__quien { font-size: 12.5px; color: var(--texto-medio); line-height: 1.5; }


/* ======================================================================
   Avisos de lo que acaba de pasar
   ====================================================================== */

.avisos-momento { margin-top: 16px; display: grid; gap: 8px; }
.momento {
  margin: 0;
  padding: 11px 15px;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--superficie);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--texto-medio);
}
.momento--success {
  border-color: var(--acento-profundo-borde);
  background: var(--acento-fondo);
  color: var(--acento-vivo);
}
.momento--warning,
.momento--error {
  border-color: var(--aviso-borde);
  background: var(--aviso-fondo);
  color: var(--aviso-texto);
}


/* ======================================================================
   Captura en lote de un embarque
   ====================================================================== */

.panel-lote { margin-top: 16px; padding: 18px 20px; }
.panel-lote__titulo { font-size: 15px; font-weight: 700; }
.panel-lote__texto {
  margin: 6px 0 16px;
  font-size: 13px;
  color: var(--texto-medio);
  line-height: 1.55;
  max-width: 62ch;
}
.panel-lote__texto b { color: var(--texto); }
.panel-lote__campos {
  /* Rejilla y no una fila que se estira.
     Con flex-wrap, ocho campos entraban en una sola linea y las ayudas de
     distinto largo dejaban huecos que descolocaban la siguiente: la pantalla
     se leia como un renglon interminable. En rejilla cada campo ocupa una
     celda, las etiquetas quedan a la misma altura y la ayuda larga de uno no
     mueve a los demas. */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 14px;
  align-items: start;
}
.panel-lote__campos .campo { margin-bottom: 0; min-width: 0; }
.panel-lote__campos .campo__control { width: 100%; }
.panel-lote__campos .campo__ayuda { max-width: none; }

/* Los que piden mas sitio: las notas, una lista pegada, una descripcion. */
.panel-lote__campos .campo--ancho { grid-column: 1 / -1; }
.panel-lote__campos .campo--ancho-medio { grid-column: span 2; }

/* Dentro de una columna estrecha no caben cuatro. */
.dos-columnas .panel-lote__campos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dos-columnas .panel-lote__campos .campo--ancho-medio { grid-column: 1 / -1; }

@media (max-width: 1320px) {
  .panel-lote__campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .panel-lote__campos,
  .dos-columnas .panel-lote__campos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .panel-lote__campos .campo--ancho-medio { grid-column: 1 / -1; }
}


.campo__ayuda { display: block; margin-top: 5px; font-size: 11.5px; color: var(--texto-tenue); }
.campo__error { display: block; margin-top: 5px; font-size: 11.5px; color: var(--aviso-texto); }
.aviso-formulario {
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: var(--radio-chico);
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  color: var(--aviso-texto);
  font-size: 13px;
}
.aviso-formulario p { margin: 0; }

/* La casilla de marcar tiene que poder pulsarse sin apuntar */
.tabla--contenedores input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--acento);
  cursor: pointer;
}
.tabla--contenedores td:first-child,
.tabla--contenedores th:first-child { text-align: center; }

/* El boton de un panel, en su propia linea.
   Dentro de la fila queda a la altura de la etiqueta o del texto de ayuda
   —nunca a la del control— y siempre parece caido. Aparte no depende de
   cuantos campos haya ni de por donde envuelvan. */
.panel-lote__acciones {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--borde-sutil);
}
.dos-columnas .panel-lote__acciones { padding-top: 12px; }


/* ======================================================================
   Panel lateral plegable
   ======================================================================
   Plegado deja solo los iconos. En un portatil, la tabla del libro mayor
   tiene ocho columnas y 236 px de menu se notan.

   El estado vive en <html data-lateral="plegado"> y se recuerda en el
   navegador, igual que el tema: asi no parpadea al cambiar de pagina. */

.marca { position: relative; }
.marca__plegar {
  margin-left: auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: none;
  border: none;
  border-radius: var(--radio-chico);
  color: var(--texto-tenue);
  cursor: pointer;
  flex-shrink: 0;
}
.marca__plegar:hover { background: var(--superficie-alta); color: var(--texto); }

[data-lateral='plegado'] {
  --barra-lateral: 66px;
}
[data-lateral='plegado'] .lateral { padding: 20px 10px; align-items: center; }

/* Lo que desaparece al plegar */
[data-lateral='plegado'] .marca__nombre,
[data-lateral='plegado'] .menu__texto,
[data-lateral='plegado'] .usuario__quien { display: none; }

[data-lateral='plegado'] .marca {
  flex-direction: column;
  gap: 12px;
  padding: 4px 0 18px;
  width: 100%;
}
[data-lateral='plegado'] .marca__plegar { margin-left: 0; }

[data-lateral='plegado'] .menu { width: 100%; }
[data-lateral='plegado'] .menu__opcion {
  justify-content: center;
  padding: 11px 0;
  gap: 0;
}

[data-lateral='plegado'] .usuario {
  justify-content: center;
  padding: 12px 0 0;
  width: 100%;
}

/* Sin transicion no se entiende que es el mismo menu, no otro */
.lateral { transition: width .16s ease; }
@media (prefers-reduced-motion: reduce) {
  .lateral { transition: none; }
}

/* En movil el menu ya se esconde entero, asi que plegar no aplica */
@media (max-width: 860px) {
  .marca__plegar { display: none; }
}

/* Las dos salidas de una venta sin factura, en la propia fila */
.resolver { display: flex; gap: 6px; margin-bottom: 6px; }
.resolver .celda { width: 150px; text-align: left; }
.resolver .boton { min-height: 34px; padding: 0 12px; font-size: 12.5px; }
.tabla--sinfactura td { vertical-align: top; }

/* Quitar un gasto no es la accion principal de su fila */
.boton--quitar {
  min-height: 32px;
  padding: 0 11px;
  font-size: 12px;
  color: var(--texto-medio);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.tabla--gastos td { vertical-align: middle; }

/* El comprobante de un gasto, con su peso: quien lo abra desde una conexion
   mala merece saber a que se enfrenta antes de pulsar. */
.comprobante {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  text-decoration: none;
}
.comprobante:hover { text-decoration: underline; }
.comprobante__peso { color: var(--texto-tenue); font-size: 11px; }

/* Adjuntar: el input de archivo crudo es feo y ancho. Se esconde y la
   etiqueta hace de boton. */
.adjuntar { position: relative; display: inline-block; }
.adjuntar__archivo {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}
.adjuntar__pista {
  display: inline-block;
  padding: 5px 11px;
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-chico);
  color: var(--texto-tenue);
  font-size: 12px;
}
.adjuntar:hover .adjuntar__pista { border-color: var(--acento); color: var(--acento-vivo); }

/* Lo que falta para poder confirmar una recepcion, en lista y no en un si/no */
.falta { margin: 0; padding-left: 16px; display: grid; gap: 3px; }
.falta li { font-size: 12.5px; color: var(--aviso-texto); line-height: 1.45; }
.tabla--recepciones td { vertical-align: top; }

/* Lo que va a crear el rango, antes de crearlo */
.vista-previa {
  margin: 14px 0 0;
  padding: 9px 13px;
  border-radius: var(--radio-chico);
  background: var(--acento-fondo);
  color: var(--acento-vivo);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.vista-previa--mala { background: var(--aviso-fondo); color: var(--aviso-texto); }

/* Cuantos van marcados, y que se vean marcados. Sin esto, pulsar una accion
   en lote sin haber marcado nada parece un boton roto. */
.cuenta { color: var(--texto-tenue); }
.cuenta--hay { color: var(--acento-vivo); font-weight: 700; }

tr.fila--marcada { background: var(--acento-fondo); }
tr.fila--marcada td { border-color: var(--acento-profundo-borde); }

.boton--principal:disabled {
  opacity: .45;
  cursor: not-allowed;
  background: var(--superficie-alta);
  color: var(--texto-tenue);
  border-color: var(--borde);
}

/* Lo que se usa poco, plegado: pegar una lista es la excepcion, no la norma */
.plegable { margin-top: 18px; border-top: 1px solid var(--borde-sutil); padding-top: 14px; }
.plegable__titulo {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-medio);
  list-style: none;
}
.plegable__titulo::-webkit-details-marker { display: none; }
.plegable__titulo::before { content: "+ "; color: var(--acento); font-weight: 800; }
.plegable[open] .plegable__titulo::before { content: "\2212 "; }
.plegable__titulo:hover { color: var(--texto); }
.plegable textarea.campo__control {
  width: 100%;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px;
  line-height: 1.6;
  padding: 10px 12px;
  resize: vertical;
}
.plegable .campo--ancho { flex: 1 1 100%; }

/* Una casilla dentro de la fila de campos.
   Sin esto el cuadrito se estira al ancho del control y queda enorme. */
.campo--casilla { min-width: 150px; }
.campo--casilla input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 8px;
  accent-color: var(--acento);
}

/* Una fila dada de baja: se lee, pero se ve que ya no cuenta. */
.fila--baja { opacity: 0.55; }

/* Un campo de ancho medio dentro de la fila: la descripcion de un gasto
   necesita mas sitio que un importe, pero no la fila entera. */
.campo--ancho-medio { flex: 1 1 320px; }
.campo--ancho-medio .campo__control { width: 100%; }

/* Las lineas de gasto en origen, una debajo de otra y separadas para que se
   vea donde acaba una y empieza la siguiente. */
/* Una fila de gasto o un tramo de pago: tres campos, y el del medio es una
   descripcion que necesita mas sitio que los otros dos. Con las columnas
   iguales de la rejilla general, «THCO en Mariel» quedaba cortado al lado de
   un importe de seis caracteres. */
.fila-gasto.panel-lote__campos {
  grid-template-columns: minmax(170px, 1fr) minmax(200px, 2fr) minmax(140px, 1fr);
}
.fila-gasto.panel-lote__campos .campo--ancho-medio { grid-column: auto; }
@media (max-width: 980px) {
  .fila-gasto.panel-lote__campos { grid-template-columns: 1fr; }
}

.fila-gasto { padding-bottom: 10px; }
.fila-gasto + .fila-gasto {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--borde-sutil);
}

/* Adjuntar un comprobante.
   El control nativo del navegador sale en SU idioma —«Choose File / No file
   chosen»— y con su ancho, en medio de una tabla en español. Se esconde sin
   quitarlo del foco ni del teclado, y se pulsa la etiqueta. */
.adjuntar { position: relative; display: inline-flex; cursor: pointer; }
.adjuntar__control {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  opacity: 0;
}
.adjuntar__boton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: var(--superficie-alta);
  color: var(--texto-medio);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.adjuntar__icono { flex-shrink: 0; color: var(--acento); }
.adjuntar__texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El aspa solo existe cuando hay algo que quitar. */
.adjuntar__quitar {
  display: none;
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-left: auto;
  align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 15px; font-weight: 700; line-height: 1;
  color: var(--texto-tenue);
}
.adjuntar__quitar:hover { background: var(--fondo); color: var(--aviso); }
.adjuntar__boton--lleno .adjuntar__quitar { display: inline-flex; }

.adjuntar:hover .adjuntar__boton,
.adjuntar__control:focus-visible + .adjuntar__boton {
  border-color: var(--acento);
  border-style: solid;
  color: var(--texto);
}

/* Mientras se arrastra un archivo por encima. */
.adjuntar--soltando .adjuntar__boton {
  border-style: solid;
  border-color: var(--acento);
  background: var(--superficie);
  color: var(--texto);
}

/* El mismo control, cuando va como un campo mas de un formulario. */
.adjuntar--campo { width: 190px; }
.adjuntar--campo .adjuntar__boton {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  justify-content: flex-start;
  overflow: hidden;
}

/* Con un archivo elegido deja de ser una invitacion y pasa a ser un dato:
   borde solido, el nombre a la vista y el aspa para cambiar de idea. Un boton
   que sigue diciendo «Elegir archivo» despues de elegirlo deja con la duda de
   si se subio o no. */
.adjuntar__boton--lleno {
  border-style: solid;
  border-color: var(--acento);
  background: var(--superficie);
  color: var(--texto);
}
.adjuntar__boton--lleno .adjuntar__icono { color: var(--acento-vivo); }
.adjuntar__peso { color: var(--texto-tenue); font-weight: 500; flex-shrink: 0; }

/* Las casillas.
   El cuadro que pinta el navegador por defecto es gris, enorme dentro de una
   fila de campos y no se entiende si esta marcado en tema oscuro. */
.campo input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 8px 0 0;
  border: 1px solid var(--borde);
  border-radius: 5px;
  background: var(--superficie-alta);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background 120ms ease, border-color 120ms ease;
}
.campo input[type="checkbox"]::before {
  content: "";
  width: 11px;
  height: 11px;
  transform: scale(0);
  transition: transform 110ms ease-in-out;
  background: var(--fondo);
  clip-path: polygon(14% 44%, 0 65%, 43% 100%, 100% 16%, 82% 0, 40% 66%);
}
.campo input[type="checkbox"]:checked {
  background: var(--acento);
  border-color: var(--acento);
}
.campo input[type="checkbox"]:checked::before { transform: scale(1); }
.campo input[type="checkbox"]:hover { border-color: var(--acento); }
.campo input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
.campo--casilla { min-width: 170px; }

/* Pestañas de Configuración.
   Son listas que no tienen nada que ver entre si; una debajo de otra obligaba
   a bajar media pantalla para llegar a la que se venia a tocar. */
.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 18px;
  padding: 4px;
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-chico);
  background: var(--superficie);
}
.pestanas__opcion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--texto-medio);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.pestanas__opcion:hover { background: var(--superficie-alta); color: var(--texto); }
.pestanas__opcion--activa {
  background: var(--acento-fondo);
  color: var(--acento-vivo);
}
.pestanas__cuenta {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--superficie-alta);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.pestanas__opcion--activa .pestanas__cuenta {
  background: var(--acento-vivo);
  color: var(--fondo);
}

/* Las dos acciones de una fila, juntas y a la derecha. */
.celda-acciones {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

/* Un campo que no aplica ahora mismo: se ve, pero se ve que no toca. */
.campo--apagado { opacity: 0.45; }
.campo--apagado .campo__control { cursor: not-allowed; }

/* ======================================================================
   El movil
   ======================================================================

   Hasta ahora el lateral se escondia a 820px y no habia nada que lo
   sustituyera: en un telefono no se podia llegar a ninguna seccion. Ahora
   se desliza por encima del contenido.

   Los destinos tactiles suben a 44px, que es el minimo para el pulgar
   (CLAUDE.md § 8), y las tablas anchas se desplazan de lado sin romper la
   pagina.
   ------------------------------------------------------------------- */

.abrir-menu { display: none; }

.marca__cerrar {
  display: none;
  margin-left: auto;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radio-chico);
  color: var(--texto-medio);
  cursor: pointer;
}
.marca__cerrar:hover { background: var(--superficie-alta); color: var(--texto); }

.velo-menu {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(2px);
}

@media (max-width: 820px) {
  .abrir-menu { display: inline-flex; flex-shrink: 0; }
  .marca__cerrar { display: flex; }

  /* Sigue en el arbol: escondido con transform y no con display, para que
     el foco del teclado no salte a enlaces invisibles. */
  .lateral {
    display: flex;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
    width: min(290px, 86vw); height: 100dvh;
    padding: 18px 14px;
    overflow-y: auto;
    border-right: 1px solid var(--borde-fuerte);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 24px 0 48px rgba(0, 0, 0, .34);
    transform: translateX(-102%);
    transition: transform .2s ease;
    visibility: hidden;
  }
  html[data-menu="abierto"] .lateral {
    transform: translateX(0);
    visibility: visible;
  }

  /* Plegar no aplica en el movil: o esta abierto o no esta. */
  html[data-lateral="plegado"] .lateral { width: min(290px, 86vw); }
  html[data-lateral="plegado"] .menu__texto { display: inline; }
  html[data-lateral="plegado"] .menu__grupo { display: block; }
  html[data-lateral="plegado"] .menu__paso { display: inline-block; }

  .superior { padding: 0 14px; gap: 12px; }
  .buscador { min-width: 0; }

  /* El pulgar necesita 44px. */
  .menu__opcion { min-height: 44px; }
  .boton { min-height: 44px; }
  .campo__control { height: 44px; font-size: 16px; }
  /* 16px evita que Safari haga zoom al enfocar un campo. */
  select.campo__control, textarea.campo__control { font-size: 16px; }
  textarea.campo__control { height: auto; }

  /* Una columna: dos campos en 360px no caben sin apretarse. */
  .dos-columnas, .rejilla-perfil, .panel-lote__campos { grid-template-columns: 1fr; }
  .rejilla-cifras, .rejilla-cifras--tres { grid-template-columns: 1fr; }

  .cabecera__acciones { flex-wrap: wrap; }
  .cabecera__acciones .boton { flex: 1 1 auto; justify-content: center; }

  /* La tabla se desplaza de lado en vez de desbordar la pagina. El borde
     marca que hay mas a la derecha. */
  .tabla-marco {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .tabla { min-width: 520px; }
  .tabla th, .tabla td { padding-left: 10px; padding-right: 10px; }

  .tarjeta { border-radius: 14px; }
}

@media (max-width: 480px) {
  .contenido { padding: 14px 12px; }
  .cabecera__titulo { font-size: 20px; line-height: 1.25; }
  .dato__valor { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .lateral { transition: none; }
  .velo-menu { backdrop-filter: none; }
}

/* Cuando el selector de archivo es un campo mas de la rejilla, ocupa lo que
   ocupan los demas: con 190px fijos quedaba encogido al lado de un desplegable
   y no parecia un campo. */
.campo > .adjuntar--campo { width: 100%; }

/* Casillas en linea -----------------------------------------------------
   Las gasolineras que atiende un representante van marcadas una al lado de
   otra: son dos o tres y una lista vertical ocuparia mas que la fila. */

.casillas-linea {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  margin-bottom: 8px;
}

.casilla-suelta {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 32px;
  font-size: 13px;
  cursor: pointer;
}
.casilla-suelta input[type="checkbox"] {
  width: 17px; height: 17px;
  accent-color: var(--acento);
  cursor: pointer;
}
.casilla-suelta span { color: var(--texto); }

/* Una fila de alguien que ya no puede entrar. Se ve, pero apagada. */
.tabla__baja > td { opacity: .55; }

/* ======================================================================
   Acciones en lote: una barra abajo y una ventana por accion
   ======================================================================

   Antes eran cinco paneles siempre visibles, ocupando media pantalla con los
   botones apagados porque no habia nada marcado: parecia una pantalla rota.
   Ahora la barra solo existe cuando hay algo marcado, y cada accion se abre
   en su ventana, con sitio para explicarse sin estorbar el resto del tiempo.
   ------------------------------------------------------------------- */

.barra-lote {
  position: sticky;
  bottom: 16px;
  z-index: 20;
  margin-top: 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 12px 16px;
  background: var(--superficie);
  border: 1px solid var(--acento);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}

.barra-lote__cuenta {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--texto-medio);
}
.barra-lote__numero {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: 999px;
  background: var(--acento); color: var(--sobre-acento);
  font-size: 13px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.barra-lote__acciones {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-right: auto;
}

/* La ventana de cada accion ------------------------------------------- */

.dialogo {
  width: min(560px, calc(100vw - 32px));
  padding: 22px 24px 20px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 16px;
  background: var(--superficie);
  color: var(--texto);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.dialogo--ancho { width: min(820px, calc(100vw - 32px)); }
.dialogo::backdrop { background: rgba(0, 0, 0, .55); }

.dialogo__cerrar-fila { display: flex; justify-content: flex-end; margin: -8px -8px 0 0; }
.dialogo__aspa {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--texto-tenue);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.dialogo__aspa:hover { background: var(--superficie-alta); color: var(--texto); }

.dialogo__titulo { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.dialogo__texto {
  margin: 0 0 18px;
  font-size: 13px; line-height: 1.6;
  color: var(--texto-medio);
}
.dialogo .panel-lote__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dialogo--ancho .panel-lote__campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 720px) {
  .dialogo,
  .dialogo--ancho { width: calc(100vw - 20px); padding: 18px 16px 16px; }
  .dialogo .panel-lote__campos,
  .dialogo--ancho .panel-lote__campos { grid-template-columns: 1fr; }
  .barra-lote { bottom: 10px; padding: 10px 12px; }
  .barra-lote__acciones .boton { flex: 1 1 auto; }
}

/* ======================================================================
   Pestanas de un formulario largo
   ======================================================================

   Nuevo contenedor son treinta campos. De corrido la pantalla se lee como un
   muro y no se sabe por donde vas. En pestanas es un paso cada vez, pero
   **sigue siendo un solo formulario**: se guarda entero desde cualquiera, y
   si algo falla se abre sola la que tiene el error.

   La barra nace escondida y el guion la enseña: sin JavaScript se ven los
   cinco bloques seguidos, que es lo que habia antes.
   ------------------------------------------------------------------- */

.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 16px;
  padding-bottom: 2px;
}

.pestana {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  font: inherit; font-size: 13px; font-weight: 600;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--texto-medio);
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.pestana:hover { border-color: var(--borde-fuerte); color: var(--texto); }

.pestana__numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--superficie-alta);
  color: var(--texto-tenue);
  font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pestana--activa {
  background: var(--superficie-alta);
  border-color: var(--acento);
  color: var(--texto);
}
.pestana--activa .pestana__numero {
  background: var(--acento);
  color: var(--sobre-acento);
}

/* La que tiene un campo mal. Se ve sin tener que entrar a mirar. */
.pestana--fallo { border-color: var(--aviso); color: var(--aviso); }
.pestana--fallo .pestana__numero { background: var(--aviso); color: var(--fondo); }

/* Guardar, fuera de los pasos: se guarda entero desde cualquier pestana. */
.barra-guardar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
}
.barra-guardar__nota {
  margin: 0 auto 0 0;
  font-size: 12.5px; color: var(--texto-medio);
}
.barra-guardar__nota:empty { display: none; }

@media (max-width: 720px) {
  .pestanas { gap: 5px; }
  .pestana { font-size: 12.5px; padding: 0 11px; min-height: 44px; }
  .barra-guardar .boton { flex: 1 1 auto; justify-content: center; }
}

/* Los numeros van sin flechitas ----------------------------------------
   El control de subir y bajar del navegador no sirve aqui: los litros se
   escriben —24 000, no se llega con la flecha— y ese par de botones se come
   el sitio del propio numero y se pulsa sin querer al buscar el cursor. Se
   escribe, se pega, y ya. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* --- Cómo está la gasolinera ------------------------------------------- */
/*
 * El color acompaña a la frase, nunca la sustituye: desde la oficina esto se
 * lee en voz alta por teléfono, y un punto verde no se puede leer.
 */

.estado-estacion {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie-alta);
  font-size: 13px;
}

.estado-estacion__punto {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--texto-tenue);
}

.estado-estacion__texto { flex: 1 1 auto; font-weight: 650; }

.estado-estacion__cuando {
  flex: 0 0 auto;
  color: var(--texto-tenue);
  font-size: 12px;
}

.estado-estacion--bien .estado-estacion__punto { background: var(--acento); }

.estado-estacion--regular {
  border-color: var(--aviso-borde);
  background: var(--aviso-fondo);
  color: var(--aviso-texto);
}
.estado-estacion--regular .estado-estacion__punto { background: var(--aviso-texto); }
.estado-estacion--regular .estado-estacion__cuando { color: var(--aviso-texto); }

.estado-estacion--mal {
  border-color: var(--malo-borde);
  background: var(--malo-fondo);
  color: var(--malo-texto);
}
.estado-estacion--mal .estado-estacion__punto { background: var(--malo); }
.estado-estacion--mal .estado-estacion__cuando { color: var(--malo-texto); }

/* Los datos de contacto: etiqueta y valor, sin ocupar una tabla entera. */
.mini-datos {
  display: grid; grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 12px 0 0;
  font-size: 13px;
}

.mini-datos dt {
  color: var(--texto-tenue);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding-top: 2px;
}

.mini-datos dd { margin: 0; }

.servicentro__acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* --- Los avisos que no caben -------------------------------------------- */
/*
 * Tres a la vista y el resto plegado. Con once, el panel se come la pantalla
 * y empuja hacia abajo los totales, que es a lo que se entra; pero plegarlo
 * entero dejaría una tarjeta que dice «hay once cosas que mirar» y no enseña
 * ninguna, que no es resumir sino esconder.
 */

.avisos__mas { margin-top: 10px; }

.avisos__abrir {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px;
  padding: 4px 10px 4px 6px;
  margin-left: -6px;
  border-radius: var(--radio-chico);
  color: var(--aviso-texto-fuerte);
  font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  list-style: none;          /* Safari y Firefox pintan su propio triángulo */
  user-select: none;
}

.avisos__abrir::-webkit-details-marker { display: none; }
.avisos__abrir:hover { background: var(--aviso-fila); }

.avisos__abrir:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.avisos__flecha { transition: transform .15s ease; }
.avisos__mas[open] .avisos__flecha { transform: rotate(180deg); }

/* Una sola etiqueta a la vez: la que dice lo que va a pasar al pulsar. */
.avisos__abrir-cerrar { display: none; }
.avisos__mas[open] .avisos__abrir-ver { display: none; }
.avisos__mas[open] .avisos__abrir-cerrar { display: inline; }

@media (prefers-reduced-motion: reduce) {
  .avisos__flecha { transition: none; }
}

/* Una casilla que llegó con un valor dudoso —el costo cero de una entrada de
   AxisPOS—: se rellena igual, pero en ámbar para que se mire antes de guardar. */
.campo__control--aviso { border-color: var(--aviso-borde); background: var(--aviso-fondo); }
#entradas-axis .campo__control { width: 9rem; }
#entradas-axis .tabla-marco__cabecera { flex-wrap: wrap; gap: 10px; }

/* El menú por tareas (13-nov-2026): títulos de grupo y el número de paso del
   recorrido. El número va a la derecha y en tenue: ordena sin gritar. */
.menu__grupo {
  margin: 14px 10px 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-tenue);
}
.menu__paso {
  margin-left: auto;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; border: 1px solid var(--borde);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums; color: var(--texto-medio);
}
.menu__opcion--activa .menu__paso { border-color: currentColor; color: inherit; }
[data-lateral='plegado'] .menu__grupo,
[data-lateral='plegado'] .menu__paso { display: none; }

/* «Paso X de 4» (13-nov-2026): el recorrido del combustible arriba de cada
   pantalla, con el paso actual resaltado y una frase de qué se hace aquí. */
.recorrido {
  margin: 4px 0 18px; padding: 12px 16px;
  border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie);
}
.recorrido__pasos {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none;
}
.recorrido__paso a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 6px; border-radius: 999px; border: 1px solid var(--borde);
  font-size: 13px; font-weight: 600; color: var(--texto-medio); text-decoration: none;
}
.recorrido__paso a:hover { color: var(--texto); background: var(--superficie-alta); }
.recorrido__paso + .recorrido__paso::before { content: none; }
.recorrido__numero {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--superficie-alta); font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.recorrido__paso--actual a {
  border-color: var(--acento); color: var(--acento-vivo); background: var(--acento-fondo);
}
.recorrido__paso--actual .recorrido__numero { background: var(--acento); color: var(--fondo); }
.recorrido__texto { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--texto-medio); }
.recorrido__texto b { color: var(--texto); }

/* El recorrido en el Inicio (13-nov-2026): cuatro tarjetas en fila, en orden.
   La que tiene algo pendiente lleva el borde ámbar y la frase de qué hacer:
   el color nunca va solo. */
.recorrido-inicio {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin: 0 0 22px; padding: 0; list-style: none; counter-reset: none;
}
.recorrido-inicio__paso { padding: 0; }
.recorrido-inicio__enlace {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 16px 18px; color: inherit; text-decoration: none; border-radius: inherit;
}
.recorrido-inicio__enlace:hover { background: var(--superficie-alta); }
.recorrido-inicio__cabeza { display: flex; align-items: center; gap: 8px; }
.recorrido-inicio__titulo { font-weight: 700; font-size: 15px; }
.recorrido-inicio__frase { font-size: 13px; color: var(--texto-medio); }
.recorrido-inicio__paso--pendiente { border-color: var(--aviso-borde); }
.recorrido-inicio__pendiente {
  display: flex; gap: 6px; align-items: flex-start; margin-top: auto; padding-top: 6px;
  font-size: 13px; font-weight: 600; color: var(--aviso-texto);
}
.recorrido-inicio__aldia {
  margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--texto-tenue);
}
.seccion-inicio {
  margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-tenue);
}
@media (max-width: 1100px) { .recorrido-inicio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .recorrido-inicio { grid-template-columns: 1fr; } }
.recorrido__ayuda { margin-left: auto; align-self: center; font-size: 13px; }