/* ============================================================
   CADIPSA ERP — Estilos
   ------------------------------------------------------------
   Criterios de diseno, para que nadie los deshaga sin querer:

   1. Sin sombras. En obra, con sol de mediodia, una sombra suave
      no se ve. Todo se separa con lineas de 1px, como un plano.
   2. El dorado significa UNA sola cosa: "esto necesita que alguien
      lo revise". No se usa de adorno en ningun lado.
   3. Numeros en Barlow Condensed con cifras tabulares: entran mas
      cordobas en el ancho de un telefono y las columnas alinean.
   4. Nada de accionar por debajo de 44px de alto. Se usa con
      guantes y con el telefono en una mano.
   ============================================================ */

:root {
  /* ---- Colores de marca: NO cambian entre temas -------------------- */
  --tinta:    #09203F;   /* azul marino profundo de CADIPSA */
  --marino:   #0D2E5B;   /* acciones principales */
  --oro:      #C8A84C;   /* SOLO "requiere atención" */
  --verde:    #12705A;   /* confirmado */
  --rojo:     #B42318;   /* anulado / error */

  /* ---- Superficies y texto: SÍ cambian con el tema ----------------- */
  --fondo:        #F1F5F9;
  --superficie:   #FFFFFF;
  --superficie-2: #F8FAFC;
  --texto:        #09203F;
  --texto-suave:  #64748B;
  --linea:        #CBD5E1;
  --linea-suave:  #E2E8F0;
  --oro-piso:     #FDF6E3;
  --verde-piso:   #E7F4F0;
  --rojo-piso:    #FEF0EF;
  --barra-fondo:  #09203F;
  --barra-texto:  #FFFFFF;
  --barra-suave:  #93A7C4;
  --sobre-marino: #FFFFFF;
  --enlace:       #0D2E5B;
  --sobre-oro:    #1A1405;
  --barra-borde:  #163158;
  --barra-hover:  #16365E;
  --oro-texto:    #6B5312;
  --verde-texto:  #0B4D3D;
  --rojo-texto:   #7A1710;
  --oro-borde:    #EBD9A4;
  --verde-borde:  #A9D6C9;
  --rojo-borde:   #F0B9B4;
  --neutro-piso:  #E8EEF7;
  --neutro-borde: #C3D2E6;
  --fila-hover:   #F8FAFC;
  --boton-hover:  #EEF3FA;

  /* ---- Alias para no reescribir las vistas ------------------------- */
  --papel:  var(--fondo);
  --blanco: var(--superficie);
  --gris:   var(--texto-suave);

  --display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --cuerpo:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r: 4px;
  --alto-barra: 52px;

  /* ---- Movimiento -------------------------------------------------- */
  --t-rapido: 120ms;
  --t-medio:  220ms;
  --curva:    cubic-bezier(.2, .8, .3, 1);
}

/* ====================================================================
   MODO OSCURO
   Los colores de marca se aclaran un poco: el mismo dorado que
   funciona sobre blanco queda apagado sobre fondo oscuro.
   ==================================================================== */
:root[data-tema="oscuro"] {
  --fondo:        #0B1524;
  --superficie:   #132340;
  --superficie-2: #0F1B2E;
  --texto:        #E8EEF7;
  --texto-suave:  #93A7C4;
  --linea:        #26395E;
  --linea-suave:  #1C2C4A;
  --oro:          #DCC069;
  --oro-piso:     #2B2413;
  --verde:        #4FC2A1;
  --verde-piso:   #10332C;
  --rojo:         #F2796F;
  --rojo-piso:    #341816;
  --marino:       #2C4A73;
  --barra-fondo:  #07101D;
  --barra-suave:  #8098BC;
  --enlace:       #7FB0F0;
  --sobre-oro:    #1A1405;
  --barra-borde:  #16233C;
  --barra-hover:  #16365E;
  --oro-texto:    #E8CE83;
  --verde-texto:  #7FD8BD;
  --rojo-texto:   #F5A29B;
  --oro-borde:    #4A3D1B;
  --verde-borde:  #1E5347;
  --rojo-borde:   #552723;
  --neutro-piso:  #1A2B49;
  --neutro-borde: #2B4066;
  --fila-hover:   #18294697;
  --boton-hover:  #1B2C4B;
}

/* "Automático": sigue lo que tenga configurado el aparato */
@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"] {
    --fondo:        #0B1524;
    --superficie:   #132340;
    --superficie-2: #0F1B2E;
    --texto:        #E8EEF7;
    --texto-suave:  #93A7C4;
    --linea:        #26395E;
    --linea-suave:  #1C2C4A;
    --oro:          #DCC069;
    --oro-piso:     #2B2413;
    --verde:        #4FC2A1;
    --verde-piso:   #10332C;
    --rojo:         #F2796F;
    --rojo-piso:    #341816;
    --marino:       #2C4A73;
    --barra-fondo:  #07101D;
    --barra-suave:  #8098BC;
    --enlace:       #7FB0F0;
    --sobre-oro:    #1A1405;
    --barra-borde:  #16233C;
    --barra-hover:  #16365E;
    --oro-texto:    #E8CE83;
    --verde-texto:  #7FD8BD;
    --rojo-texto:   #F5A29B;
    --oro-borde:    #4A3D1B;
    --verde-borde:  #1E5347;
    --rojo-borde:   #552723;
    --neutro-piso:  #1A2B49;
    --neutro-borde: #2B4066;
    --fila-hover:   #18294697;
    --boton-hover:  #1B2C4B;
  }
}

/* Quien pidió menos movimiento, recibe menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 15px;
  line-height: 1.5;
  padding-bottom: 76px;                      /* espacio para la barra de abajo */
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

a { color: var(--enlace); }

/* ---------- Accesibilidad ---------- */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--oro); color: var(--sobre-oro);
  padding: 10px 16px; font-weight: 600;
}
.saltar:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--oro);
  outline-offset: 2px;
}

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

/* ============================================================
   BARRA SUPERIOR
   ============================================================ */
.barra {
  position: sticky; top: 0; z-index: 50;
  height: var(--alto-barra);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  background: var(--barra-fondo);
  color: var(--barra-texto);
  border-bottom: 1px solid var(--barra-borde);
}

.barra__marca { display: flex; align-items: center; min-width: 0; }
.marca { display: flex; align-items: baseline; gap: 6px; text-decoration: none; }
.marca__sigla {
  font-family: var(--display); font-weight: 700; font-size: 22px;
  letter-spacing: .06em; color: var(--barra-texto);
}
.marca__erp {
  font-family: var(--display); font-weight: 500; font-size: 13px;
  letter-spacing: .18em; color: var(--oro);
}

.barra__usuario { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.usuario__nombre { font-weight: 500; color: var(--barra-texto); }
.usuario__rol {
  font-family: var(--display); letter-spacing: .08em; text-transform: uppercase;
  font-size: 11px; color: var(--barra-suave);
}
.usuario__salir {
  color: var(--barra-texto); text-decoration: none; border: 1px solid var(--barra-borde);
  padding: 5px 10px; border-radius: var(--r); font-size: 12px;
}
.usuario__salir:hover { background: var(--barra-hover); }

@media (max-width: 560px) {
  .usuario__nombre { display: none; }
}

/* ============================================================
   TIRA DE SINCRONIZACION  — el elemento que sostiene el sistema
   Dice siempre la verdad sobre que hay guardado y que falta subir.
   ============================================================ */
.tira {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px;
  font-size: 13px; font-weight: 500;
  border-bottom: 1px solid var(--linea);
  position: sticky; top: var(--alto-barra); z-index: 40;
}
.tira--oculta { display: none; }
.tira--espera { background: var(--oro-piso); color: var(--oro-texto); border-bottom-color: var(--oro); }
.tira--sin    { background: var(--rojo-piso); color: var(--rojo); border-bottom-color: var(--rojo-borde); }
.tira--ok     { background: var(--verde-piso); color: var(--verde); border-bottom-color: var(--verde-borde); }
.tira--subiendo { background: var(--neutro-piso); color: var(--enlace); }

.tira__boton {
  font-family: var(--display); font-size: 14px; letter-spacing: .04em;
  background: var(--marino); color: var(--sobre-marino); border: 0;
  padding: 7px 14px; border-radius: var(--r); cursor: pointer; min-height: 34px;
}
.tira__boton[hidden] { display: none; }

/* ============================================================
   ESTRUCTURA
   ============================================================ */
.marco { display: flex; align-items: flex-start; }

.rail { display: none; }

.lienzo {
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px 14px 24px;
  max-width: 1180px;
}

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .rail {
    display: block;
    width: 208px; flex: 0 0 208px;
    position: sticky; top: var(--alto-barra);
    max-height: calc(100vh - var(--alto-barra));
    overflow-y: auto;
    background: var(--blanco);
    border-right: 1px solid var(--linea);
    padding: 10px 0 24px;
  }
  .rail__item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    font-family: var(--display); font-size: 16px; letter-spacing: .03em;
    color: var(--texto); text-decoration: none;
    border-left: 3px solid transparent;
  }
  .rail__item:hover { background: var(--papel); }
  .rail__item--activo {
    border-left-color: var(--marino);
    background: var(--papel); font-weight: 600;
  }
  .lienzo { padding: 20px 24px 40px; }
}

/* ============================================================
   NAVEGACION INFERIOR (telefono)
   ============================================================ */
.pie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex;
  background: var(--blanco);
  border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
}
.pie__item {
  flex: 1 1 0; min-height: 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: 0; cursor: pointer;
  color: var(--gris); text-decoration: none;
  font-family: var(--display); font-size: 14px; letter-spacing: .04em;
  position: relative;
}
.pie__item--activo { color: var(--texto); font-weight: 600; }
.pie__item--activo::before {
  content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 3px;
  background: var(--marino);
}
.pie__item--principal { color: var(--sobre-marino); background: var(--marino); }
.pie__mas { font-size: 22px; line-height: 1; font-weight: 600; }
.pie__item--principal .pie__texto { color: var(--sobre-marino); }

@media (min-width: 900px) { .pie { display: none; } }

/* ============================================================
   AVISOS
   ============================================================ */
.aviso {
  padding: 11px 14px; margin-bottom: 14px;
  border: 1px solid var(--linea); border-left-width: 4px;
  border-radius: var(--r); background: var(--blanco); font-size: 14px;
}
.aviso--ok       { border-left-color: var(--verde); background: var(--verde-piso); color: var(--verde-texto); }
.aviso--error    { border-left-color: var(--rojo);  background: var(--rojo-piso);  color: var(--rojo-texto); }
.aviso--atencion { border-left-color: var(--oro);   background: var(--oro-piso);   color: var(--oro-texto); }
.aviso--dato     { border-left-color: var(--marino); }

.nota-fiscal {
  font-size: 12.5px; color: var(--oro-texto);
  background: var(--oro-piso); border: 1px solid var(--oro-borde);
  border-radius: var(--r); padding: 8px 11px; margin: 10px 0;
}

/* ============================================================
   TITULOS
   ============================================================ */
.titulo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 0 0 16px;
  border-bottom: 2px solid var(--texto); padding-bottom: 8px;
}
.titulo h1 {
  font-family: var(--display); font-weight: 700; font-size: 27px;
  letter-spacing: .02em; margin: 0; line-height: 1.1;
}
.titulo p { margin: 3px 0 0; font-size: 13px; color: var(--gris); }
.titulo__acciones { display: flex; gap: 8px; flex-wrap: wrap; }

h2.sub {
  font-family: var(--display); font-size: 19px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  margin: 26px 0 10px; padding-bottom: 5px;
  border-bottom: 1px solid var(--linea);
}

/* ============================================================
   TARJETAS
   ============================================================ */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 14px;
}
.tarjeta--atencion { border-color: var(--oro); border-left: 4px solid var(--oro); }
.tarjeta__titulo {
  font-family: var(--display); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gris); margin: 0 0 8px;
}

.rejilla { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.rejilla--2 { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .rejilla--2 { grid-template-columns: 1fr 1fr; } }

/* Cifra grande */
.cifra {
  font-family: var(--display); font-weight: 600; font-size: 30px;
  font-variant-numeric: tabular-nums; line-height: 1.05; letter-spacing: .01em;
  display: block;
}
.cifra--chica { font-size: 22px; }
.cifra--atencion { color: var(--oro-texto); }
.cifra--mal { color: var(--rojo); }
.cifra--bien { color: var(--verde); }
.cifra__pie { font-size: 12px; color: var(--gris); display: block; margin-top: 2px; }

/* ============================================================
   TABLAS
   ============================================================ */
.tabla-marco {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--r); overflow-x: auto; margin-bottom: 16px;
}
table.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tabla th {
  font-family: var(--display); font-weight: 600; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase;
  text-align: left; color: var(--sobre-marino); background: var(--marino);
  padding: 9px 10px; white-space: nowrap;
}
table.tabla td {
  padding: 9px 10px; border-top: 1px solid var(--linea-suave); vertical-align: top;
}
table.tabla tbody tr:hover td { background: var(--fila-hover); }
table.tabla .num {
  text-align: right; font-family: var(--display); font-size: 15px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.tabla th.num { text-align: right; }
table.tabla .total td { border-top: 2px solid var(--texto); font-weight: 600; background: var(--superficie-2); }
.tabla__vacia { padding: 26px 16px; text-align: center; color: var(--gris); }

/* ============================================================
   ETIQUETAS DE ESTADO Y PROYECTO
   ============================================================ */
.pastilla {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: .05em; white-space: nowrap;
  border: 1px solid var(--linea); background: var(--fondo); color: var(--texto);
}
.pastilla--atencion { background: var(--oro); border-color: var(--oro); color: var(--sobre-oro); }
.pastilla--ok       { background: var(--verde-piso); border-color: var(--verde-borde); color: var(--verde); }
.pastilla--mal      { background: var(--rojo-piso); border-color: var(--rojo-borde); color: var(--rojo); }
.pastilla--neutro   { background: var(--neutro-piso); border-color: var(--neutro-borde); color: var(--enlace); }

/* Chip de proyecto: siempre visible, porque toda plata pertenece a una obra */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--linea); border-radius: var(--r);
  background: var(--papel); padding: 3px 9px; font-size: 13px;
  text-decoration: none; color: var(--texto);
}
.chip__codigo {
  font-family: var(--display); font-weight: 700; letter-spacing: .06em;
  font-size: 13px; color: var(--enlace);
}
.chip--admin { background: var(--superficie-2); }

/* ============================================================
   FORMULARIOS
   ============================================================ */
.campo { margin-bottom: 14px; }
.campo > label, .etiqueta {
  display: block; margin-bottom: 5px;
  font-family: var(--display); font-size: 14px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--texto);
}
.campo__ayuda { display: block; font-size: 12.5px; color: var(--gris); margin-top: 4px; font-family: var(--cuerpo); text-transform: none; letter-spacing: 0; font-weight: 400; }

.entrada, select.entrada, textarea.entrada {
  width: 100%; min-height: 46px;
  padding: 10px 12px;
  font-family: var(--cuerpo); font-size: 16px;    /* 16px evita el zoom en iPhone */
  color: var(--texto); background: var(--superficie);
  border: 1px solid var(--linea); border-radius: var(--r);
}
textarea.entrada { min-height: 84px; resize: vertical; }
.entrada:focus { border-color: var(--marino); }
.entrada[readonly] { background: var(--fondo); color: var(--texto); opacity: .75; }
.entrada--num {
  font-family: var(--display); font-size: 19px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.entrada--dudosa { border-color: var(--oro); background: var(--oro-piso); }

.fila-campos { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .fila-campos--2 { grid-template-columns: 1fr 1fr; }
  .fila-campos--3 { grid-template-columns: 1fr 1fr 1fr; }
}

fieldset.grupo { border: 1px solid var(--linea); border-radius: var(--r); padding: 14px; margin: 0 0 16px; }
fieldset.grupo > legend {
  font-family: var(--display); font-size: 14px; letter-spacing: .1em;
  text-transform: uppercase; padding: 0 7px; color: var(--gris);
}

/* ============================================================
   BOTONES
   ============================================================ */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 11px 18px;
  font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: .04em;
  border-radius: var(--r); border: 1px solid var(--marino);
  background: var(--superficie); color: var(--enlace);
  text-decoration: none; cursor: pointer;
}
.boton:hover { background: var(--boton-hover); }
.boton--principal { background: var(--marino); color: var(--sobre-marino); }
.boton--principal:hover { background: var(--texto); }
.boton--peligro { border-color: var(--rojo); color: var(--rojo); }
.boton--peligro:hover { background: var(--rojo-piso); }
.boton--fantasma { border-color: var(--linea); color: var(--gris); }
.boton--fantasma:hover { background: var(--papel); }
.boton--ancho { width: 100%; }
.boton--grande { min-height: 58px; font-size: 20px; }
.boton[disabled] { opacity: .5; cursor: not-allowed; }

.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.acciones--fin { justify-content: flex-end; }

/* ============================================================
   PASOS (registro de factura)
   ============================================================ */
.pasos { display: flex; gap: 0; margin-bottom: 18px; border: 1px solid var(--linea); border-radius: var(--r); overflow: hidden; background: var(--blanco); }
.paso {
  flex: 1 1 0; padding: 9px 6px; text-align: center;
  font-family: var(--display); font-size: 13px; letter-spacing: .05em;
  color: var(--gris); border-right: 1px solid var(--linea);
}
.paso:last-child { border-right: 0; }
.paso--hecho { background: var(--verde-piso); color: var(--verde); }
.paso--actual { background: var(--marino); color: var(--sobre-marino); font-weight: 600; }
.paso__n { display: block; font-size: 17px; font-weight: 700; }

/* Selector de proyecto: botones grandes, es la primera decision */
.lista-elegir { display: grid; gap: 10px; }
.elegir {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; min-height: 62px;
  background: var(--blanco); border: 1px solid var(--linea); border-left: 4px solid var(--marino);
  border-radius: var(--r); text-decoration: none; color: var(--texto);
}
.elegir:hover { background: var(--fila-hover); border-left-color: var(--marino); }
.elegir--admin { border-left-color: var(--gris); }
.elegir__nombre { font-weight: 600; font-size: 15px; }
.elegir__meta { font-size: 12.5px; color: var(--gris); }

/* Foto de factura */
.foto-caja {
  border: 2px dashed var(--linea); border-radius: var(--r);
  padding: 22px 16px; text-align: center; background: var(--blanco);
}
.foto-previa { max-width: 100%; max-height: 340px; border: 1px solid var(--linea); border-radius: var(--r); }
.foto-peso { font-size: 12.5px; color: var(--gris); margin-top: 6px; }

/* Resumen de montos */
.montos { border: 1px solid var(--linea); border-radius: var(--r); background: var(--blanco); overflow: hidden; }
.montos__fila {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 9px 14px; border-top: 1px solid var(--linea-suave); font-size: 14px;
}
.montos__fila:first-child { border-top: 0; }
.montos__fila--fuerte { background: var(--marino); color: var(--sobre-marino); border-top: 0; }
.montos__fila--fuerte .montos__valor { color: var(--sobre-marino); }
.montos__valor { font-family: var(--display); font-size: 19px; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ============================================================
   VARIOS
   ============================================================ */
.vacio {
  background: var(--blanco); border: 1px dashed var(--linea); border-radius: var(--r);
  padding: 32px 20px; text-align: center; color: var(--gris);
}
.vacio h3 { font-family: var(--display); font-size: 20px; color: var(--texto); margin: 0 0 6px; }
.vacio p { margin: 0 0 14px; font-size: 14px; }

.filtros {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r);
  padding: 12px; margin-bottom: 14px;
}
.filtros .campo { margin-bottom: 0; min-width: 140px; flex: 1 1 140px; }
.filtros .boton { flex: 0 0 auto; }

.paginacion { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 16px 0; font-size: 14px; }

.lista-datos { list-style: none; margin: 0; padding: 0; }
.lista-datos li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--linea-suave); font-size: 14px;
}
.lista-datos li:first-child { border-top: 0; }
.lista-datos dt, .lista-datos .clave { color: var(--gris); }
.lista-datos .valor { font-weight: 500; text-align: right; }

.barra-progreso { height: 8px; background: var(--linea-suave); border-radius: 999px; overflow: hidden; }
.barra-progreso__lleno { height: 100%; background: var(--marino); }
.barra-progreso__lleno--pasado { background: var(--rojo); }

hr.linea { border: 0; border-top: 1px solid var(--linea); margin: 22px 0; }

.mini { font-size: 12.5px; color: var(--gris); }
.derecha { text-align: right; }
.nowrap { white-space: nowrap; }

/* Impresion */
@media print {
  .barra, .rail, .pie, .tira, .titulo__acciones, .acciones { display: none !important; }
  body { padding: 0; background: #fff; }
  .tarjeta, .tabla-marco { border-color: #999; }
}

/* Contador de novedades en la barra */
.campana {
  display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
  background: rgba(200,168,76,.18); border: 1px solid var(--oro);
  padding: 3px 9px; border-radius: 999px; margin-right: 4px;
}
.campana__icono { color: var(--oro); font-size: 9px; line-height: 1; }
.campana__n { font-family: var(--display); font-size: 13px; color: var(--oro); letter-spacing: .04em; }

/* ====================================================================
   CURSOR — si se puede hacer clic, tiene que verse que se puede
   ==================================================================== */
summary,
label:has(input[type="checkbox"]),
label:has(input[type="radio"]),
[onclick],
[role="button"],
.tarjeta a,
.chip__codigo,
select,
input[type="checkbox"],
input[type="radio"],
input[type="date"],
input[type="month"],
input[type="file"],
.tabla a,
.tema__opcion { cursor: pointer; }

input[readonly],
input[disabled],
select[disabled],
textarea[readonly] { cursor: default; }

input[readonly].entrada { cursor: text; }

/* ====================================================================
   MOVIMIENTO — sobrio, funcional, nunca decorativo
   Nada tarda mas de 220ms: mas alla de eso se siente lento, no fluido.
   ==================================================================== */
a, .boton, .entrada, .tarjeta, .pastilla,
.rail__item, .pie__item, .sesion__cab, .elegir,
table.tabla tbody tr td, summary {
  transition: background-color var(--t-rapido) var(--curva),
              border-color     var(--t-rapido) var(--curva),
              color            var(--t-rapido) var(--curva),
              transform        var(--t-rapido) var(--curva);
}

/* Los botones se hunden al presionarlos: confirma el toque en el telefono,
   donde no hay hover que avise. */
.boton:active { transform: translateY(1px); }

/* Las tarjetas responden apenas al pasar por encima */
.tarjeta:hover { border-color: var(--linea); }

/* El campo activo se resalta sin gritar */
.entrada:focus {
  outline: none;
  border-color: var(--marino);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marino) 18%, transparent);
}

/* La fila del menu lateral se desliza un pelo */
.rail__item:hover { transform: translateX(2px); }

/* El contenido entra suave al cargar la pagina */
.lienzo > * { animation: entrar var(--t-medio) var(--curva) both; }
@keyframes entrar {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* El detalle de una sesion se despliega, no aparece de golpe */
.sesion[open] .sesion__detalle { animation: desplegar var(--t-medio) var(--curva) both; }
@keyframes desplegar {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* El punto de novedades late despacio, para que el ojo lo encuentre */
.sesion--nueva .sesion__punto { animation: latir 2.4s ease-in-out infinite; }
@keyframes latir {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--oro) 55%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--oro) 0%, transparent); }
}

/* Barras de los graficos: crecen al entrar */
.g-barra { animation: crecer 520ms var(--curva) both; transform-origin: left center; }
@keyframes crecer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ====================================================================
   SELECTOR DE TEMA
   ==================================================================== */
.tema { display: inline-flex; gap: 0; border: 1px solid var(--barra-borde); border-radius: 999px; overflow: hidden; }
.tema__opcion {
  border: 0; background: none; padding: 4px 9px; font-size: 12px;
  font-family: var(--display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--barra-suave); line-height: 1.6;
}
.tema__opcion:hover { background: var(--barra-hover); color: var(--barra-texto); }
.tema__opcion--activa { background: var(--marino); color: var(--barra-texto); }

/* ====================================================================
   GRAFICOS
   ==================================================================== */
.grafico { width: 100%; height: auto; display: block; }
.g-fila { font-size: 12.5px; }
.g-eti  { fill: var(--texto-suave); font-family: var(--cuerpo); }
.g-val  { fill: var(--texto); font-family: var(--cuerpo); font-weight: 500; }
.g-pista{ fill: var(--linea-suave); }
.g-linea{ fill: none; stroke: var(--marino); stroke-width: 2; stroke-linejoin: round; }
.g-area { fill: color-mix(in srgb, var(--marino) 12%, transparent); }
.g-punto{ fill: var(--marino); }
.g-guia { stroke: var(--linea-suave); stroke-width: 1; }


/* ====================================================================
   AUTOCOMPLETADO DEL NAVEGADOR
   Chrome y Edge pintan su propio fondo encima e ignoran el CSS normal.
   En modo oscuro eso deja un campo claro con texto claro: ilegible.
   ==================================================================== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--texto) !important;
  -webkit-box-shadow: 0 0 0 60px var(--superficie) inset !important;
  box-shadow: 0 0 0 60px var(--superficie) inset !important;
  caret-color: var(--texto);
  transition: background-color 9999s ease-in-out 0s;
}

/* ====================================================================
   NOVEDADES
   Una fila por sesión. El encabezado tiene que leerse de un vistazo,
   así que la fecha va pegada al nombre y no en su propia columna:
   con 5 columnas el texto se apretaba y "Ver detalles" caía abajo.
   ==================================================================== */
.pestanas {
  display: flex; align-items: center; gap: 4px;
  border-bottom: 1px solid var(--linea); margin-bottom: 16px; flex-wrap: wrap;
}
.pestana {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; text-decoration: none; color: var(--texto-suave);
  font-family: var(--display); font-size: 15px; letter-spacing: .04em;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pestana:hover { color: var(--texto); }
.pestana--activa { color: var(--texto); border-bottom-color: var(--marino); }
.pestana__n {
  background: var(--oro); color: var(--sobre-oro); border-radius: 999px;
  padding: 1px 8px; font-size: 12px; font-family: var(--cuerpo); font-weight: 600;
}
.pestana__n--suave { background: var(--neutro-piso); color: var(--enlace); }
.pestanas__filtro { margin-left: auto; }
.pestanas__filtro .entrada { min-height: 34px; font-size: 14px; width: auto; }

.sesion { border-top: 1px solid var(--linea-suave); }
.sesion:first-child { border-top: 0; }
.sesion__cab {
  display: grid; align-items: center; gap: 4px 12px; padding: 13px 16px;
  grid-template-columns: 10px 1fr auto 14px; cursor: pointer; list-style: none;
}
.sesion__cab::-webkit-details-marker { display: none; }
.sesion__cab::marker { content: ''; }
.sesion__cab:hover { background: var(--superficie-2); }

.sesion__punto { width: 9px; height: 9px; border-radius: 50%; background: transparent; }
.sesion--nueva .sesion__punto { background: var(--oro); }
.punto-fijo {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: var(--oro);
}

.sesion__quien { font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.sesion__cuando { font-size: 13px; color: var(--texto-suave); font-family: var(--cuerpo); }
.sesion__conteo { font-size: 13.5px; color: var(--texto-suave); text-align: right; line-height: 1.5; }
.sesion__conteo .mini { display: block; }

/* Flechita que gira al abrir: dice que hay algo mas abajo */
.sesion__ver {
  width: 8px; height: 8px; justify-self: end;
  border-right: 2px solid var(--enlace); border-bottom: 2px solid var(--enlace);
  transform: rotate(45deg); transition: transform var(--t-medio) var(--curva);
}
.sesion[open] .sesion__ver { transform: rotate(-135deg); }
.sesion[open] .sesion__cab { background: var(--superficie-2); }
.sesion__detalle { background: var(--superficie-2); border-top: 1px solid var(--linea-suave); }

/* La fila que motivó la marca, resaltada. Sin esto hay que buscarla
   entre 17 renglones iguales. */
.fila__marca { width: 22px; text-align: center; }
tr.fila--atencion td { background: var(--oro-piso); }
tr.fila--atencion td:nth-child(3) { font-weight: 600; color: var(--oro-texto); }

@media (max-width: 620px) {
  .sesion__cab { grid-template-columns: 10px 1fr 14px; }
  .sesion__conteo { grid-column: 2; text-align: left; }
}

/* Aviso con instrucción concreta: qué pasó, por qué importa, a dónde ir.
   Decir "requiere atención" sin decir qué hacer solo alarma. */
.aviso-hacer {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 16px; border-bottom: 1px solid var(--linea-suave);
  background: var(--oro-piso); border-left: 3px solid var(--oro);
}
.aviso-hacer__txt { flex: 1; min-width: 240px; font-size: 14px; line-height: 1.55; }
.aviso-hacer__txt b { display: block; color: var(--oro-texto); font-size: 15px; margin-bottom: 2px; }
.aviso-hacer__txt span { color: var(--texto); }
.aviso-hacer .boton { white-space: nowrap; }