/* ============================================================
   MrOOH Space · Inventario

   Paleta tomada de xl/styles.xml de la planilla original:
     #444F62  azul de encabezados
     #FF6600  naranjo de columnas por completar
     #FFF2CC  amarillo de dato faltante en el origen
     #C00000  rojo de alerta
     #D9D9D9  gris de bordes
     #595959  gris de texto secundario
   Se conserva tambien su significado: naranjo = pendiente,
   amarillo = falta el dato, rojo = rechazado.
   ============================================================ */

:root {
  --azul:       #444F62;
  --azul-osc:   #363F4E;
  --azul-cla:   #5C6980;
  --naranjo:    #FF6600;
  --naranjo-osc:#D85400;
  --naranjo-q:  #FCE4D6;

  /* El verde del sombrero y el monoculo del logo. Es el tercer color de
     MrOOH, y el unico que el sistema no tenia.
     NO se usa para estados ni avisos: para eso ya estan --bien y --rojo, y
     dos verdes distintos compitiendo confunden mas de lo que ayudan. */
  --verde:      #263D3A;
  --verde-osc:  #1B2B29;
  --verde-cla:  #3C5B56;

  /* Quien manda en las superficies que estructuran la pantalla: la barra
     lateral y TODOS los encabezados -de tabla, de bloque, de panel-.
     Se declara aparte del color a proposito: el dia que la marca cambie de
     tono, esto es una linea y no una caceria por la hoja entera. */
  --cabecera:   var(--verde);
  --amarillo:   #FFF2CC;
  --amarillo-b: #E8C86A;
  --rojo:       #C00000;
  --rojo-q:     #F7DEDE;
  --bien:       #1E7A4D;
  --bien-q:     #DCEFE4;

  --papel:      #F3F4F6;
  --tarjeta:    #FFFFFF;
  --tarjeta-2:  #F7F8FA;
  --tinta:      #2B313B;
  --tinta-s:    #595959;
  --tinta-f:    #8A9099;
  --linea:      #D9D9D9;
  --linea-s:    #E8EAED;

  --lateral-fondo:  #263D3A;
  --lateral-texto:  #DCE3E1;
  /* El verde es mas oscuro que el azul que habia antes, asi que el gris de
     los menus se aclara para compensar. Medido sobre el fondo real: 5,75
     contra 1, holgado para texto chico (el minimo exigible es 4,5). */
  --lateral-suave:  #A6BBB7;
  --lateral-activo: #FF6600;
  --lateral-hover:  #31504C;

  --sombra: 0 1px 2px rgba(43,49,59,.06), 0 10px 26px -18px rgba(43,49,59,.28);
  --r: 3px;
  --ancho-lateral: 236px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --azul:       #7C8CA8;
    --azul-osc:   #5C6980;
    --azul-cla:   #96A4BC;
    --naranjo:    #FF8534;
    --naranjo-osc:#FF6600;
    --naranjo-q:  #40261A;

    /* Aclarado para que el verde se despegue del fondo oscuro. */
    --verde:      #3C5B56;
    --verde-osc:  #263D3A;
    --verde-cla:  #557E77;
    --amarillo:   #3B3521;
    --amarillo-b: #7A6A33;
    --rojo:       #FF7B6B;
    --rojo-q:     #3A1E1A;
    --bien:       #52C48A;
    --bien-q:     #17301F;

    --papel:      #14171C;
    --tarjeta:    #1C2027;
    --tarjeta-2:  #232830;
    --tinta:      #E8EAEE;
    --tinta-s:    #A2A9B4;
    --tinta-f:    #6F7885;
    --linea:      #333A45;
    --linea-s:    #272D36;

    --lateral-fondo:  #16211F;
    --lateral-texto:  #DCE3E1;
    --lateral-suave:  #7A908B;
    --lateral-activo: #FF8534;
    --lateral-hover:  #223431;

    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 10px 26px -18px rgba(0,0,0,.7);
  }
}

* { box-sizing: border-box; }

/* El atributo hidden lo pisa cualquier regla display del autor
   (.panel usa display:flex). Sin esto el panel queda siempre visible. */
[hidden] { display: none !important; }

/* Tipografia secundaria de marca: Lucida Sans, en todas sus versiones.
   Es la que el manual define para documentos corporativos. Los respaldos
   cubren macOS (Lucida Grande) y Linux. */
:root {
  --fuente: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande",
            "Segoe UI", Tahoma, sans-serif;
  --fuente-datos: "Azeret Mono", "Consolas", ui-monospace, monospace;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; letter-spacing: -.018em; text-wrap: balance; }
h1 { font-size: 25px; font-weight: 700; }
h2 { font-size: 23px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 700; }
p  { margin: 0; }

.mono, code { font-family: var(--fuente-datos); letter-spacing: -.03em; }

.ojo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--naranjo);
}

/* ---------------- imagotipo ----------------
   El manual fija un margen de seguridad equivalente a la altura de la "H"
   del logotipo, y un tamano minimo de 3,5 cm de ancho con claim y 2,5 cm
   sin el. En pantalla eso son ~132 px y ~95 px: por eso los anchos de
   abajo no bajan de ahi.                                                   */

/* El imagotipo de MrOOH es vertical -el sombrero va sobre las letras-, al
   reves del de ExpertooH, que era una tira horizontal. Al mismo ancho crece
   mucho mas alto, asi que los tamanos se fijan por ALTURA: es lo que manda
   cuando el espacio que se reparte es vertical. */

.logo-login {
  display: block; height: 132px; width: auto; max-width: 100%;
  /* margen de seguridad: la altura aproximada de la H del logotipo */
  margin: 4px 0 16px;
}

.logo-lateral {
  display: block; height: 96px; width: auto; max-width: 100%;
}
.lateral-claim {
  font-size: 11px; color: var(--lateral-suave);
  margin-top: 8px; letter-spacing: .01em;
}
.lateral-claim b { color: var(--naranjo); font-weight: 600; }

/* ---------------- iconos de marca por tipo ---------------- */

.ico-tipo {
  display: inline-block; vertical-align: middle;
  object-fit: contain; flex: 0 0 auto;
}
.celda-tipo { display: inline-flex; align-items: center; gap: 8px; }

/* ---------------- miniatura en el listado ---------------- */

.mini-foto {
  width: 52px; height: 38px; object-fit: cover; display: block;
  border: 1px solid var(--linea); border-radius: var(--r);
  background: var(--tarjeta-2);
}
.mini-vacia {
  display: block; width: 52px; height: 38px;
  border: 1px dashed var(--linea); border-radius: var(--r);
  background: var(--tarjeta-2);
}

/* En modo oscuro los iconos grises se pierden: se aclaran */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ico-tipo { filter: brightness(1.9); }
}

/* Marcador del mapa: la gota es CSS, el icono de marca va encima */
.marcador-marca { background: none; border: 0; }
.marcador-gota {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: var(--naranjo);
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.marcador-gota img { transform: rotate(45deg); display: block; }

/* ---------------- login ---------------- */

.login-fondo { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-caja {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-top: 4px solid var(--naranjo);
  box-shadow: var(--sombra); padding: 32px;
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column; gap: 14px;
}
.login-caja h1 { font-size: 21px; margin-top: 4px; }
.login-sub { color: var(--tinta-s); font-size: 14px; margin-bottom: 6px; }
.login-caja label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-f);
}

input, select, textarea {
  font-family: inherit; font-size: 14.5px; color: var(--tinta);
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-radius: var(--r); padding: 8px 10px; width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--naranjo); outline-offset: 1px; border-color: var(--naranjo);
}
input[type="checkbox"] { width: auto; accent-color: var(--naranjo); }

.btn-principal, .btn-secundario, .btn-plano {
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 8px 15px; border-radius: var(--r); cursor: pointer;
  border: 1px solid transparent; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-principal { background: var(--naranjo); color: #fff; }
.btn-principal:hover { background: var(--naranjo-osc); }
.btn-secundario { background: var(--tarjeta); color: var(--azul); border-color: var(--linea); }
.btn-secundario:hover { border-color: var(--naranjo); color: var(--naranjo); }
.btn-plano { background: transparent; color: var(--tinta-s); }
.btn-plano:hover { color: var(--naranjo); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--naranjo); outline-offset: 2px; }

.error-linea {
  background: var(--rojo-q); color: var(--rojo); font-size: 13.5px;
  padding: 8px 11px; border-radius: var(--r); border: 1px solid var(--rojo);
}

/* ---------------- barra lateral ---------------- */

#app { display: flex; min-height: 100vh; }

.lateral {
  width: var(--ancho-lateral); flex: 0 0 var(--ancho-lateral);
  background: var(--lateral-fondo); color: var(--lateral-texto);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.lateral-logo { padding: 22px 18px 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.lateral-producto {
  font-size: 11px; font-weight: 600; color: var(--lateral-texto);
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
  letter-spacing: .06em; text-transform: uppercase;
}

.menu { display: flex; flex-direction: column; padding: 12px 10px; gap: 2px; flex: 1; }

.menu-item {
  display: flex; align-items: center; gap: 11px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--lateral-suave); background: transparent;
  border: 0; border-left: 3px solid transparent;
  padding: 10px 12px; cursor: pointer; text-align: left; width: 100%;
  border-radius: 0 var(--r) var(--r) 0;
}
.menu-item:hover { background: var(--lateral-hover); color: var(--lateral-texto); }
.menu-item.activa {
  background: var(--lateral-hover); color: #fff;
  border-left-color: var(--lateral-activo);
}
.menu-item.activa .ico { color: var(--lateral-activo); }

.ico {
  width: 21px; height: 21px; flex: 0 0 21px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.lateral-pie { padding: 14px 16px 18px; border-top: 1px solid rgba(255,255,255,.1); }
.usuario-caja { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
#usuario-nombre { font-size: 13.5px; font-weight: 600; color: var(--lateral-texto); }
.pastilla {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--naranjo); color: #fff;
  padding: 2px 7px; border-radius: var(--r); align-self: flex-start;
}
.btn-salir {
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  background: transparent; color: var(--lateral-suave);
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--r);
  padding: 6px 12px; cursor: pointer; width: 100%;
}
.btn-salir:hover { border-color: var(--naranjo); color: var(--naranjo); }

/* ---------------- contenido ---------------- */

.contenido { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.contenido .vista.activa { flex: 1; }

/* ---------------- banda de marca ----------------
   El manual la repite en las 23 laminas y en la papeleria: claim a la
   izquierda, tira de iconos al centro, imagotipo a la derecha. */

.banda-marca {
  display: flex; align-items: center; gap: 20px;
  background: var(--naranjo); padding: 9px clamp(14px, 2.6vw, 30px);
  margin-top: auto;
}
.banda-claim {
  font-size: 13px; color: #fff; white-space: nowrap; letter-spacing: .01em;
}
.banda-claim b { color: var(--azul); font-weight: 600; }

.banda-iconos {
  display: flex; align-items: center; gap: 16px;
  flex: 1; overflow: hidden; justify-content: center;
}
.banda-iconos img { opacity: .9; flex: 0 0 auto; }

/* Solo el sombrero: el imagotipo completo a esta altura dejaria el
   "by ExpertooH" en cuatro pixeles, que no se lee. */
.banda-logo { height: 22px; width: auto; flex: 0 0 auto; }

@media (max-width: 900px) {
  .banda-iconos { display: none; }
  .banda-marca { justify-content: space-between; }
}
.vista { display: none; padding: clamp(18px, 2.6vw, 30px); max-width: 1440px; }
.vista.activa { display: block; }

.seccion-cab { margin: 26px 0 13px; }
.seccion-cab:first-child { margin-top: 0; }
.fila-entre { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 22px; }

/* ---------------- cifras ---------------- */

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; }
.cifra {
  background: var(--tarjeta); border: 1px solid var(--linea-s);
  border-top: 3px solid var(--azul);
  box-shadow: var(--sombra); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px;
}
.cifra-valor {
  font-family: var(--fuente-datos); font-size: 26px; font-weight: 600;
  letter-spacing: -.045em; font-variant-numeric: tabular-nums; line-height: 1.1;
  color: var(--azul);
}
.cifra-rotulo {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-f);
}
.cifra-nota { font-size: 12.5px; color: var(--tinta-s); }
.cifra.acento { border-top-color: var(--naranjo); }
.cifra.acento .cifra-valor { color: var(--naranjo); }
.cifra.bien { border-top-color: var(--bien); }
.cifra.bien .cifra-valor { color: var(--bien); }
.cifra.mal  { border-top-color: var(--rojo); }
.cifra.mal  .cifra-valor { color: var(--rojo); }

/* ---------------- análisis económico por zona ---------------- */

.margen-control {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-f);
}
.margen-campo {
  display: flex; align-items: center; gap: 6px;
  background: var(--tarjeta); border: 1px solid var(--naranjo);
  border-radius: var(--r); padding: 3px 10px 3px 3px;
}
.margen-campo input {
  width: 68px; border: 0; background: transparent; padding: 5px 6px;
  font-family: var(--fuente-datos); font-size: 16px; font-weight: 600;
  color: var(--naranjo-osc); text-align: right;
}
.margen-campo input:focus { outline: none; }
.margen-campo > span {
  font-family: var(--fuente-datos); font-size: 15px; font-weight: 600;
  color: var(--naranjo-osc); text-transform: none; letter-spacing: 0;
}

.zona-bloque { margin-bottom: 20px; }

/* Estas barras van en GRIS, no en naranjo como las de la ficha.
   El manual usa barras naranjas para las secciones de sus documentos, y asi
   estan en la ficha del elemento. Aca no: la tabla de abajo ya trae cifras
   en naranjo (precio sugerido, margen), y dos naranjos compitiendo hacen
   perder el enfasis justo donde mas importa. */
.zona-cab {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 11px 15px; background: var(--cabecera); color: #fff;
}
.zona-cab h4 {
  margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em;
}
.zona-cab > span { font-size: 12.5px; color: rgba(255,255,255,.72); }
.zona-resumen {
  margin-left: auto; font-family: var(--fuente-datos); font-size: 12px;
  letter-spacing: -.02em; color: rgba(255,255,255,.85) !important;
}
.zona-resumen b { color: var(--naranjo); }
.zona-bloque .tabla-envoltura { border-top: 0; }
.zona-bloque .vacio { background: var(--tarjeta); border: 1px solid var(--linea); border-top: 0; }
.zona-nota {
  font-size: 12.5px; color: var(--tinta-s); line-height: 1.5;
  padding: 10px 15px; background: var(--amarillo);
  border: 1px solid var(--amarillo-b); border-top: 0;
}
.zona-nota b { color: var(--naranjo-osc); font-family: var(--fuente-datos); font-size: 12px; }

/* ---------------- brechas ---------------- */

.brechas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 11px; }
.brecha {
  background: var(--tarjeta); border: 1px solid var(--linea-s);
  border-left: 3px solid var(--linea); padding: 12px 14px;
  display: flex; align-items: baseline; gap: 11px;
}
/* Naranjo y amarillo: el mismo codigo de la planilla para "falta el dato" */
.brecha.pendiente { border-left-color: var(--naranjo); background: var(--amarillo); }
.brecha-n {
  font-family: var(--fuente-datos); font-size: 21px; font-weight: 600;
  letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: var(--azul);
}
.brecha.pendiente .brecha-n { color: var(--naranjo-osc); }
.brecha-txt { font-size: 13px; color: var(--tinta-s); line-height: 1.35; }
.brecha.pendiente .brecha-txt { color: var(--tinta); }

/* ---------------- tablas ---------------- */

.tabla-envoltura {
  background: var(--tarjeta); border: 1px solid var(--linea);
  box-shadow: var(--sombra); overflow-x: auto;
}
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
thead th {
  font-size: 9.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: #fff; text-align: left; padding: 10px 12px; white-space: nowrap;
  background: var(--cabecera); position: sticky; top: 0;
}
thead th.num { text-align: right; }
tbody td { padding: 8px 12px; border-bottom: 1px solid var(--linea-s); color: var(--tinta-s); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) td { background: var(--tarjeta-2); }
tbody tr.clicable { cursor: pointer; }
tbody tr.clicable:hover td { background: var(--naranjo-q); color: var(--tinta); }
td.num, th.num {
  text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--fuente-datos); letter-spacing: -.03em;
  white-space: nowrap;   /* un monto partido en dos lineas es ilegible */
}
td.cod { font-family: var(--fuente-datos); font-size: 12.5px; letter-spacing: -.03em; color: var(--azul); font-weight: 500; white-space: nowrap; }
.vacio { padding: 30px 20px; text-align: center; color: var(--tinta-f); font-size: 14px; }

.marca-estado {
  display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding: 2px 7px; border-radius: var(--r); white-space: nowrap;
}
.m-ok    { background: var(--bien-q); color: var(--bien); }
.m-falta { background: var(--amarillo); color: var(--naranjo-osc); border: 1px solid var(--amarillo-b); }
.m-error { background: var(--rojo-q); color: var(--rojo); }
.m-suave { background: var(--tarjeta-2); color: var(--tinta-s); border: 1px solid var(--linea); }

/* ---------------- filtros ---------------- */

.filtros {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  background: var(--tarjeta); border: 1px solid var(--linea-s);
  border-left: 3px solid var(--azul);
  padding: 12px 14px; margin-bottom: 12px;
}
.filtros input[type="search"] { flex: 1 1 230px; }
.filtros select { flex: 0 1 160px; }
.casilla { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tinta-s); white-space: nowrap; }
.conteo { font-size: 13px; color: var(--tinta-s); margin-bottom: 9px; }

/* ---------------- mapa ---------------- */

#mapa { height: 66vh; min-height: 400px; border: 1px solid var(--linea); box-shadow: var(--sombra); }


.nota-mapa { font-size: 13px; color: var(--tinta-s); margin-top: 10px; max-width: 80ch; }
.leaflet-popup-content { font-family: var(--fuente); font-size: 13px; }
.leaflet-popup-content b { font-family: var(--fuente-datos); font-size: 12px; letter-spacing: -.03em; color: var(--azul); }

/* ---------------- pasos de carga ---------------- */

.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-bottom: 24px; }
.pasos article {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-top: 3px solid var(--naranjo);
  box-shadow: var(--sombra); padding: 17px 19px;
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
}
.paso-n { font-family: var(--fuente-datos); font-size: 13px; font-weight: 600; color: var(--naranjo); letter-spacing: -.03em; }
.pasos article p { font-size: 13.5px; color: var(--tinta-s); margin: 5px 0 11px; line-height: 1.45; }
.pasos article input[type="file"] { margin-bottom: 9px; font-size: 13px; }

.aviso-caja {
  background: var(--amarillo); border: 1px solid var(--amarillo-b);
  border-left: 3px solid var(--naranjo); padding: 12px 15px;
  font-size: 13px; color: var(--tinta); margin: 12px 0; line-height: 1.5;
}
.aviso-caja b { color: var(--tinta); }

/* ---------------- ayuda desplegable (símbolo de pregunta) ----------------
   Las explicaciones no ocupan espacio permanente: viven detrás de un "?"
   y aparecen solo cuando alguien las pide. */

.ayuda-caja { position: relative; display: inline-flex; vertical-align: middle; }

.ayuda-btn {
  width: 19px; height: 19px; flex: 0 0 19px; padding: 0;
  border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--naranjo);
  border: 1.5px solid var(--naranjo);
  font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.ayuda-btn:hover { background: var(--naranjo); color: #fff; }
.ayuda-btn[aria-expanded="true"] { background: var(--naranjo); color: #fff; }

/* position:fixed a proposito: dentro de una tabla con overflow, un popover
   absoluto queda recortado y genera barras de scroll. Fijo escapa de
   cualquier contenedor; la posicion se calcula al abrirlo. */
.ayuda-pop {
  position: fixed; z-index: 1500;
  width: 380px; max-width: min(380px, calc(100vw - 40px));
  background: var(--tarjeta); color: var(--tinta-s);
  border: 1px solid var(--linea); border-top: 3px solid var(--naranjo);
  box-shadow: 0 12px 34px -14px rgba(0,0,0,.4);
  padding: 13px 15px; font-size: 13px; line-height: 1.55;
  font-weight: 400; letter-spacing: 0; text-transform: none;
  text-align: left; white-space: normal;
}
.ayuda-pop.izquierda { left: auto; right: -8px; }
.ayuda-pop b { color: var(--tinta); font-weight: 600; }
.ayuda-pop code {
  font-family: var(--fuente-datos); font-size: 11.5px;
  background: var(--tarjeta-2); padding: 1px 5px; border-radius: var(--r);
  color: var(--tinta);
}
.ayuda-pop .ap { display: block; }
.ayuda-pop .ap + .ap { margin-top: 9px; }
.ayuda-pop ol, .ayuda-pop ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }

/* Línea corta con su "?" al lado, en vez de una caja de texto */
.linea-ayuda {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--tinta-s); margin-bottom: 14px;
}
.ficha-nota {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 15px; font-size: 13px; color: var(--tinta-s);
  border-top: 1px solid var(--linea-s);
}
h2 .ayuda-caja, h3 .ayuda-caja { margin-left: 7px; }
h2 .ayuda-pop, h3 .ayuda-pop { font-size: 13px; }

/* ---------------- panel de ficha ---------------- */

.panel-fondo { position: fixed; inset: 0; background: rgba(43,49,59,.5); z-index: 900; }
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100%);
  background: var(--papel); z-index: 1000; display: flex; flex-direction: column;
  box-shadow: -18px 0 40px -24px rgba(0,0,0,.5);
}
.panel-cab {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  padding: 16px 20px; background: var(--cabecera); color: #fff;
}
.panel-cab h2 {
  color: #fff; font-size: 20px;
  display: flex; align-items: center; gap: 10px;
}
.panel-cab .btn-plano { color: rgba(255,255,255,.75); }
.panel-cab .btn-plano:hover { color: var(--naranjo); }
.codigo-grande {
  font-family: var(--fuente-datos); font-size: 13px; font-weight: 600;
  letter-spacing: -.02em; background: var(--naranjo); color: #fff;
  padding: 3px 8px; border-radius: var(--r); display: inline-block; margin-bottom: 6px;
}
.panel-cuerpo { overflow-y: auto; padding: 18px 20px 60px; display: flex; flex-direction: column; gap: 18px; }

.ficha-bloque { background: var(--tarjeta); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.ficha-bloque > h3 {
  padding: 10px 15px; background: var(--naranjo); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.campos { display: flex; flex-direction: column; }
.campo { display: grid; grid-template-columns: 138px 1fr; gap: 12px; padding: 8px 15px; align-items: baseline; }
.campo + .campo { border-top: 1px solid var(--linea-s); }
.campo dt { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-f); }
.campo dd { margin: 0; font-size: 14px; color: var(--tinta); }
.campo dd.m { font-family: var(--fuente-datos); font-size: 13px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
/* Amarillo = dato faltante, igual que en la planilla */
.campo dd.falta { color: var(--naranjo-osc); font-style: italic; background: var(--amarillo); padding: 1px 6px; border-radius: var(--r); }

.ficha-foto { padding: 14px 15px; display: flex; flex-direction: column; gap: 10px; }
.ficha-foto img { width: 100%; border: 1px solid var(--linea); display: block; }
.sin-foto {
  border: 1px dashed var(--naranjo); padding: 26px; text-align: center;
  color: var(--naranjo-osc); font-size: 13.5px; background: var(--amarillo);
}
#ficha-mapa { height: 220px; border-top: 1px solid var(--linea); }

/* ---------------- modal ---------------- */

.modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(760px, calc(100% - 32px)); max-height: 88vh;
  background: var(--papel); box-shadow: 0 24px 60px -30px rgba(0,0,0,.6);
  z-index: 1000; display: flex; flex-direction: column;
}
.formulario { overflow-y: auto; padding: 18px 20px 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 13px; }
.formulario label { display: flex; flex-direction: column; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-f); }
.formulario .ancho-total { grid-column: 1 / -1; }
.formulario .pie { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--linea); }
.formulario .ayuda { font-size: 12px; color: var(--tinta-f); font-weight: 400; letter-spacing: 0; text-transform: none; }

/* ---------------- aviso flotante ---------------- */

/* El aviso neutro se queda AZUL, no pasa a verde con el resto. Dos
   razones: el verde de marca queda casi igual que el verde de "listo",
   y un mensaje neutro que parece de exito engaña; y ahora que ninguna
   superficie fija es azul, el azul pasa a significar una sola cosa,
   "informacion de paso". */
.aviso {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--azul); color: #fff;
  padding: 11px 20px; border-radius: var(--r); font-size: 14px;
  z-index: 2000; box-shadow: 0 10px 28px -12px rgba(0,0,0,.5); max-width: 92vw;
}
.aviso.malo  { background: var(--rojo); }
.aviso.bueno { background: var(--bien); }

/* ---------------- elegir modo de carga ---------------- */

.modos { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; margin-bottom: 22px; }
.modo {
  display: flex; align-items: flex-start; gap: 13px; text-align: left;
  font-family: inherit; background: var(--tarjeta); color: var(--tinta);
  border: 1px solid var(--linea); border-top: 3px solid var(--linea);
  padding: 15px 17px; cursor: pointer;
}
.modo:hover { border-color: var(--naranjo); }
.modo.activa { border-top-color: var(--naranjo); background: var(--tarjeta); box-shadow: var(--sombra); }
.modo.activa .ico-modo { color: var(--naranjo); }
.modo span { display: flex; flex-direction: column; gap: 3px; }
.modo b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.modo span span, .modo b + * { font-size: 13px; }
.modo span { font-size: 13px; color: var(--tinta-s); line-height: 1.4; }
.modo.activa b { color: var(--naranjo); }
.ico-modo {
  width: 24px; height: 24px; flex: 0 0 24px; color: var(--tinta-f);
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------- ficha de carga manual ---------------- */

.ficha-carga { display: flex; flex-direction: column; gap: 14px; }
.bloque-carga {
  background: var(--tarjeta); border: 1px solid var(--linea);
  box-shadow: var(--sombra);
}
.bloque-carga > h3 {
  /* Azul, como todas las cabeceras del sistema. El naranjo esta reservado
     para lo que pide atencion: pendientes, avisos, el boton principal. */
  padding: 11px 16px; background: var(--cabecera); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.campos-carga {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 13px; padding: 16px;
}
.campos-carga label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-f);
}
.campos-carga .ancho-total { grid-column: 1 / -1; }
.campos-carga .ayuda {
  font-size: 12px; color: var(--tinta-f); font-weight: 400;
  letter-spacing: 0; text-transform: none; line-height: 1.35;
}

.buscador-dir { display: flex; gap: 8px; flex-wrap: wrap; }
.buscador-dir input { flex: 1 1 260px; }
.buscador-dir button { white-space: nowrap; }

.pie-carga {
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 4px;
}

/* ---------------- resultado de la búsqueda ---------------- */

.buscando { padding: 12px 16px; font-size: 13.5px; color: var(--tinta-s); }
.geo-titulo { padding: 0 16px 8px; font-size: 13px; font-weight: 600; color: var(--tinta); }
.geo-lista { display: flex; flex-direction: column; gap: 1px; background: var(--linea-s); border-top: 1px solid var(--linea-s); }
.geo-op {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  font-family: inherit; background: var(--tarjeta); border: 0;
  border-left: 3px solid transparent; padding: 10px 16px; cursor: pointer; width: 100%;
}
.geo-op:hover { background: var(--amarillo); border-left-color: var(--naranjo); }
.geo-op-nombre { font-size: 13.5px; color: var(--tinta); line-height: 1.35; }
.geo-op-datos { font-size: 12px; color: var(--tinta-s); }
.geo-op-datos code { font-family: var(--fuente-datos); font-size: 11px; }
.geo-fuera { color: var(--rojo); }
.geo-error {
  margin: 0 16px 10px; padding: 10px 13px; font-size: 13px;
  background: var(--rojo-q); color: var(--rojo); border: 1px solid var(--rojo); border-radius: var(--r);
}
.geo-manual { margin: 4px 16px 12px; font-size: 12.5px; }

.geo-amano { padding: 4px 16px 14px; }
.geo-amano .ayuda { font-size: 12.5px; color: var(--tinta-s); line-height: 1.4; margin-bottom: 9px; display: block; }
.geo-amano-campos { display: flex; gap: 8px; flex-wrap: wrap; }
.geo-amano-campos input { flex: 1 1 210px; font-family: var(--fuente-datos); font-size: 13px; }
.geo-amano-campos select { flex: 1 1 190px; }

#geo-mapa { height: 300px; border-top: 1px solid var(--linea); }
.geo-elegido {
  padding: 11px 16px; font-size: 13.5px; color: var(--tinta-s);
  background: var(--bien-q); border-top: 1px solid var(--linea-s);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.geo-elegido code { font-family: var(--fuente-datos); font-size: 12.5px; color: var(--tinta); }
.geo-ayuda-pin { color: var(--tinta-f); font-size: 12.5px; margin-left: auto; }
.geo-comuna-editable {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-f);
}
.geo-comuna-editable select {
  width: auto; min-width: 210px; font-size: 13px; padding: 5px 8px;
  background: var(--tarjeta); border-color: var(--naranjo);
}

/* ---------------- tarifario por duración ---------------- */

.tarifario-editor { border-top: 1px solid var(--linea-s); padding: 15px 16px 16px; }
.tarifario-cab h4 {
  margin: 0 0 5px; font-size: 13.5px; font-weight: 700;
  color: var(--tinta); letter-spacing: -.01em;
}
.tarifario-cab p { font-size: 12.5px; color: var(--tinta-s); line-height: 1.45; margin-bottom: 12px; max-width: 78ch; }
.tarifario-cab b { color: var(--tinta); }

.tramos-lista { display: flex; flex-direction: column; gap: 8px; }
.tramo {
  display: grid; grid-template-columns: 130px 160px 1fr auto;
  gap: 11px; align-items: end;
  background: var(--tarjeta-2); border: 1px solid var(--linea-s);
  border-left: 3px solid var(--naranjo); padding: 10px 12px;
}
.tramo.tramo-malo { border-left-color: var(--rojo); background: var(--rojo-q); }
.tramo label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-f);
}
.tramo-meses { display: flex; align-items: center; gap: 6px; }
.tramo-meses input { width: 68px; }
.tramo-meses span { font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--tinta-s); }
.tramo-calc {
  font-family: var(--fuente-datos); font-size: 12px;
  color: var(--tinta-s); letter-spacing: -.02em; padding-bottom: 8px;
}
.tramo.tramo-malo .tramo-calc { color: var(--rojo); font-weight: 600; }
.btn-quitar-tramo {
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  background: transparent; color: var(--tinta-f);
  border: 1px solid var(--linea); border-radius: var(--r);
  padding: 5px 10px; cursor: pointer; margin-bottom: 6px; white-space: nowrap;
}
.btn-quitar-tramo:hover { border-color: var(--rojo); color: var(--rojo); }

.tramos-pie { display: flex; align-items: center; gap: 13px; margin-top: 11px; flex-wrap: wrap; }
.tramos-resumen { font-size: 12.5px; color: var(--tinta-s); }
.tramos-resumen.malo { color: var(--rojo); font-weight: 600; }

.ficha-tarifario table { min-width: 0; }
.ficha-tarifario td, .ficha-tarifario th { padding: 7px 14px; }

@media (max-width: 620px) {
  .tramo { grid-template-columns: 1fr 1fr; }
  .tramo-calc { grid-column: 1 / -1; padding-bottom: 0; }
}

/* ---------------- respaldo ---------------- */

.bloque-respaldo {
  background: var(--tarjeta); border: 1px solid var(--linea);
  border-left: 3px solid var(--azul); border-radius: var(--r);
  padding: 15px 18px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.bloque-respaldo p { margin: 0; font-size: 13.5px; color: var(--tinta-s); max-width: 60ch; }

/* ---------------- campos de plata ---------------- */

/* El "$" va pintado sobre el campo y no adentro del valor: si fuera parte del
   texto habria que estar sacandolo antes de leer el numero. */
.campo-dinero { position: relative; display: block; }
.campo-dinero .signo {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: var(--tinta-f); pointer-events: none;
}
.campo-dinero input {
  padding-left: 24px; font-family: var(--fuente-datos); letter-spacing: -.02em;
}
.tramo .campo-dinero .signo { font-size: 13px; }

/* ---------------- vista previa de lo que se creará ---------------- */

.previa-id {
  background: var(--cabecera); color: #fff; padding: 15px 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border-left: 4px solid var(--naranjo);
}
.previa-id-rotulo {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.65);
}
.previa-id-valor {
  font-family: var(--fuente-datos); font-size: 20px; font-weight: 600;
  letter-spacing: -.02em; color: var(--naranjo);
}
.previa-id-nota { font-size: 12px; color: rgba(255,255,255,.7); margin-left: auto; }
.previa-id-nota code { font-family: var(--fuente-datos); font-size: 12px; color: rgba(255,255,255,.9); }

.previa-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 13px; margin-top: 13px;
}
.campo dd.destacado { color: var(--naranjo-osc); font-weight: 600; }
.previa-nota {
  padding: 11px 15px; font-size: 12.5px; color: var(--tinta-s);
  line-height: 1.45; border-top: 1px solid var(--linea-s); background: var(--amarillo);
}
.lista-avisos { margin: 7px 0 0; padding-left: 19px; display: flex; flex-direction: column; gap: 4px; }
.lista-avisos li { line-height: 1.4; }

/* ---------------- usuarios ---------------- */

.sel-rol {
  font-size: 12.5px; padding: 4px 7px; width: auto; min-width: 132px;
  background: var(--tarjeta);
}
.sel-rol:disabled { opacity: .55; cursor: not-allowed; }

/* Los botones no se apilan: la tabla ya tiene scroll horizontal, y apilarlos
   hacia abajo hacia crecer cada fila al triple de alto. */
.acciones-fila { display: flex; gap: 5px; flex-wrap: nowrap; white-space: nowrap; }
.btn-mini {
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  background: var(--tarjeta); color: var(--azul);
  border: 1px solid var(--linea); border-radius: var(--r);
  padding: 4px 9px; cursor: pointer; white-space: nowrap;
}
.btn-mini:hover:not(:disabled) { border-color: var(--naranjo); color: var(--naranjo); }
.btn-mini:disabled { opacity: .4; cursor: not-allowed; }

.ayuda-rol {
  font-size: 12.5px; color: var(--tinta-s); background: var(--amarillo);
  border: 1px solid var(--amarillo-b); border-radius: var(--r);
  padding: 8px 11px; line-height: 1.4; margin-top: -4px;
}

/* ---------------- medios ---------------- */

/* Muestra en vivo cómo queda el ID con el código que se está escribiendo */
.vista-id {
  display: flex; flex-direction: column; gap: 5px; justify-content: flex-end;
  padding-bottom: 2px;
}
.vista-id code {
  font-family: var(--fuente-datos); font-size: 15px; letter-spacing: -.02em;
  background: var(--amarillo); border: 1px solid var(--amarillo-b);
  padding: 8px 11px; border-radius: var(--r); color: var(--tinta-s);
}
.vista-id code b { color: var(--naranjo-osc); font-weight: 700; }

.codigo-fijo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--tarjeta-2); border: 1px solid var(--linea);
  padding: 10px 13px; border-radius: var(--r);
}
.codigo-fijo > span:first-child {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-f);
}
.codigo-fijo code {
  font-family: var(--fuente-datos); font-size: 15px; font-weight: 600;
  color: var(--naranjo-osc); letter-spacing: .02em;
}
.codigo-fijo .ayuda { flex: 1 1 240px; }

#tabla-medios a { color: var(--azul); }
#tabla-medios code {
  font-family: var(--fuente-datos); font-size: 11.5px;
  background: var(--tarjeta-2); padding: 2px 6px; border-radius: var(--r);
}

/* ---------------- clave recien generada ---------------- */

.modal-angosto { width: min(460px, calc(100% - 32px)); }
.clave-cuerpo { padding: 20px; display: flex; flex-direction: column; gap: 13px; }
.clave-para { font-size: 13.5px; color: var(--tinta-s); }
.clave-valor {
  display: flex; align-items: center; gap: 10px;
  background: var(--amarillo); border: 1px solid var(--amarillo-b);
  border-left: 3px solid var(--naranjo); padding: 13px 15px;
}
.clave-valor code {
  font-family: var(--fuente-datos); font-size: 20px; font-weight: 600;
  letter-spacing: .02em; color: var(--tinta); flex: 1;
  user-select: all; word-break: break-all;
}
.clave-nota { font-size: 13px; color: var(--tinta-s); line-height: 1.5; }
.clave-nota b { color: var(--tinta); }
.clave-pie { display: flex; justify-content: flex-end; padding-top: 6px; border-top: 1px solid var(--linea); }

/* ---------------- tutorial de bienvenida ---------------- */

.tut-capa { position: fixed; inset: 0; z-index: 3000; }

/* El "hueco" que destaca un elemento: en vez de recortar la capa oscura,
   se usa una sombra enorme hacia afuera. Asi el elemento queda iluminado
   y todo lo demas atenuado, con un solo nodo. */
.tut-foco {
  position: fixed;
  border: 2px solid var(--naranjo);
  border-radius: var(--r);
  box-shadow: 0 0 0 9999px rgba(20, 23, 28, .72);
  pointer-events: none;
  transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}
.tut-foco[hidden] { display: none !important; }

/* Cuando no hay elemento destacado, la capa se oscurece completa */
.tut-capa:has(.tut-foco[hidden]) { background: rgba(20, 23, 28, .72); }

.tut-caja {
  position: fixed; width: 340px; max-width: calc(100vw - 24px);
  background: var(--tarjeta); color: var(--tinta);
  border: 1px solid var(--linea); border-top: 4px solid var(--naranjo);
  box-shadow: 0 20px 50px -22px rgba(0, 0, 0, .65);
  padding: 18px 20px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.tut-conteo {
  font-family: var(--fuente-datos); font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em; color: var(--naranjo);
}
.tut-caja h3 { font-size: 18px; letter-spacing: -.02em; }
.tut-texto { font-size: 14px; line-height: 1.5; color: var(--tinta-s); }
.tut-texto b { color: var(--tinta); font-weight: 600; }

.tut-botones { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.tut-espacio { flex: 1; }
.tut-siguiente, .tut-atras, .tut-saltar {
  font-family: inherit; font-size: 13px; font-weight: 600;
  border-radius: var(--r); padding: 7px 14px; cursor: pointer; border: 1px solid transparent;
}
.tut-siguiente { background: var(--naranjo); color: #fff; }
.tut-siguiente:hover { background: var(--naranjo-osc); }
.tut-atras { background: var(--tarjeta); color: var(--tinta-s); border-color: var(--linea); }
.tut-atras:hover { border-color: var(--naranjo); color: var(--naranjo); }
.tut-saltar { background: transparent; color: var(--tinta-f); padding-left: 0; }
.tut-saltar:hover { color: var(--naranjo); }

/* Boton para volver a ver el tutorial */
.btn-tutorial { display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 7px; }
.ico-mini {
  width: 15px; height: 15px; flex: 0 0 15px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------- foto en carga uno a uno ---------------- */

/* El campo vive dentro de .campos-carga como los demas, asi hereda el
   relleno, la rejilla y la tipografia de etiqueta. Solo hace falta
   acomodar el selector de archivo, que el navegador dibuja a su manera. */
.campos-carga input[type="file"] {
  font-size: 13.5px; color: var(--tinta-s);
  padding: 7px 10px; cursor: pointer;
}
.campos-carga input[type="file"]::file-selector-button {
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--tinta); background: var(--tarjeta-2);
  border: 1px solid var(--linea); border-radius: var(--r);
  padding: 5px 12px; margin-right: 11px; cursor: pointer;
}
.campos-carga input[type="file"]::file-selector-button:hover {
  background: var(--amarillo); border-color: var(--amarillo-b);
}

/* La miniatura se ve antes de subir nada: confirma de un vistazo que es
   la foto que se queria, sin tener que crear el elemento para saberlo. */
.foto-previa {
  display: flex; gap: 13px; align-items: center;
  padding: 11px; background: var(--tarjeta-2); border: 1px solid var(--linea-s);
}
.foto-previa img {
  width: 124px; height: 82px; flex: 0 0 124px; object-fit: cover;
  border: 1px solid var(--linea); background: var(--tarjeta);
}
.foto-datos { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
/* Mismo tamano que el resto del texto del formulario, no monoespaciado:
   es el nombre de un archivo, no un codigo del sistema. */
.foto-nombre {
  font-size: 13.5px; color: var(--tinta); line-height: 1.35;
  overflow-wrap: anywhere;
}
.foto-peso { font-size: 12px; color: var(--tinta-f); }
.foto-datos .btn-plano { padding: 4px 0; margin-top: 2px; }

/* ---------------- bitacora ---------------- */

/* La fecha y la hora en dos lineas: al comparar movimientos lo que se
   busca es la hora, y asi queda alineada en su propia columna. */
.bit-fecha, .bit-hora { display: block; font-family: var(--fuente-datos); white-space: nowrap; }
.bit-fecha { font-size: 12.5px; }
.bit-hora  { font-size: 11px; color: var(--tinta-f); }

/* El rol va junto al nombre porque la bitacora guarda el que tenia
   ENTONCES: puede no ser el que tiene hoy. */
.bit-rol {
  display: inline-block; margin-left: 6px; padding: 1px 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-s); background: var(--tarjeta-2); border: 1px solid var(--linea-s);
}

span.cod { font-family: var(--fuente-datos); font-size: 12.5px; letter-spacing: -.03em;
  color: var(--azul); font-weight: 500; white-space: nowrap; }

.apagado { color: var(--tinta-f); }

/* Un cambio por linea; dentro de cada uno, etiqueta y valores en fila. */
.bit-cambios { display: flex; flex-direction: column; gap: 4px; }
.bit-cambio  { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 2px; }
.bit-campo {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tinta-f); margin-right: 7px; flex: 0 0 auto;
}

/* El antes tachado y el despues destacado: la comparacion se lee sin
   tener que interpretar cual es cual. */
.bit-antes   { font-family: var(--fuente-datos); font-size: 12px; color: var(--tinta-f); text-decoration: line-through; }
.bit-flecha  { margin: 0 6px; color: var(--tinta-f); }
.bit-despues { font-family: var(--fuente-datos); font-size: 12.5px; color: var(--tinta); font-weight: 600; }
.bit-nuevo   { font-family: var(--fuente-datos); font-size: 12.5px; color: var(--bien); font-weight: 600; }
.bit-falla   { color: var(--rojo); font-size: 12.5px; }

.fila-mas { text-align: center; margin: 14px 0 4px; }
.aviso-error { padding: 20px; text-align: center; color: var(--rojo); font-size: 13.5px; }

/* ---------------- responsivo ---------------- */

/* Pantallas medianas: la lateral se reduce a solo iconos.
   El imagotipo completo no cabe, asi que se muestra el isotipo suelto:
   el manual lo permite y mantiene la marca presente. */
@media (max-width: 1080px) and (min-width: 761px) {
  :root { --ancho-lateral: 64px; }
  .lateral-producto, .lateral-claim, .menu-item span,
  .usuario-caja, .btn-salir { display: none; }
  .lateral-logo { padding: 14px 6px; }
  .logo-lateral {
    width: 40px; margin: 0 auto;
    /* del imagotipo completo se muestra solo el arco */
    content: url("marca/isotipo-blanco.png");
  }
  .menu-item { justify-content: center; padding: 12px 0; }
  .lateral-pie { padding: 10px 6px; }
}

/* Pantallas chicas: la lateral pasa a ser una fila arriba */
@media (max-width: 760px) {
  #app { flex-direction: column; }
  .lateral {
    width: 100%; flex: none; height: auto; position: sticky; top: 0; z-index: 600;
    flex-direction: row; align-items: center; gap: 10px; padding: 0 12px;
  }
  .lateral-logo { border-bottom: 0; padding: 10px 0; }
  .lateral-producto { display: none; }
  .menu { flex-direction: row; padding: 0; flex: 1; overflow-x: auto; gap: 0; }
  .menu-item {
    flex-direction: column; gap: 3px; font-size: 10.5px; padding: 8px 12px;
    border-left: 0; border-bottom: 3px solid transparent; border-radius: 0; width: auto;
  }
  .menu-item.activa { border-left: 0; border-bottom-color: var(--lateral-activo); }
  .lateral-pie { border-top: 0; padding: 0; display: flex; gap: 6px; }
  .usuario-caja { display: none; }
  .btn-salir { width: auto; white-space: nowrap; }
  .btn-tutorial { margin-bottom: 0; }
  .btn-tutorial span, .btn-tutorial { font-size: 0; padding: 6px 9px; }
  .ico-mini { width: 17px; height: 17px; flex: 0 0 17px; }
  .campo { grid-template-columns: 1fr; gap: 2px; }
  .tut-caja { width: calc(100vw - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}