/* ============================================================
   CONTAPISOS · style.css  ·  v2
   Dirección visual: superficie clara tipo "hormigón pulido",
   tinta azul profunda y un verde-agua de resina epóxica como
   único acento. Esquinas suaves, sombras bajas, mucho aire.
   ============================================================ */

:root{
  /* --- Color --- */
  --tinta:      #0E1726;   /* azul casi negro: rail y titulares */
  --tinta-2:    #16223A;
  --tinta-3:    #24334F;
  --papel:      #F6F7FA;   /* fondo de la aplicación */
  --blanco:     #FFFFFF;
  --suave:      #F1F3F8;
  --linea:      #E5E9F0;
  --linea-2:    #EEF1F6;
  --texto:      #0F1729;
  --texto-2:    #59657A;
  --texto-3:    #8E99AC;

  --resina:     #0FA69E;   /* acento: resina epóxica */
  --resina-2:   #0C8A83;
  --resina-luz: #E4F6F4;

  --entra:      #0F9D58;
  --entra-luz:  #E6F6EE;
  --sale:       #DC4A3D;
  --sale-luz:   #FDECEA;
  --ambar:      #E9A700;
  --ambar-luz:  #FDF3DC;

  /* --- Tipografía --- */
  --display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cuerpo:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --dato:    'JetBrains Mono', ui-monospace, 'SF Mono', 'IBM Plex Mono', monospace;

  /* --- Formas --- */
  --rail: 264px;
  --rail-min: 78px;
  --r-xl: 20px;
  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 8px;
  --sombra-1: 0 1px 2px rgba(14,23,38,.05);
  --sombra-2: 0 1px 2px rgba(14,23,38,.04), 0 10px 28px -18px rgba(14,23,38,.35);
  --sombra-3: 0 24px 60px -24px rgba(14,23,38,.45);
  --paso: 200ms cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

/* El atributo hidden manda por encima de cualquier display de aquí abajo.
   Sin esto, la ventana modal y el velo aparecen al cargar la página. */
[hidden]{ display:none !important; }

body{
  font-family:var(--cuerpo);
  font-size:15px; line-height:1.55;
  color:var(--texto); background:var(--papel);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:700; letter-spacing:-.015em; }
p{ margin:0 0 .75rem; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

:focus-visible{ outline:2px solid var(--resina); outline-offset:2px; border-radius:6px; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#D3D9E4; border-radius:99px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:#B9C2D2; background-clip:content-box; }

/* ------------------------------------------------------------
   Texto compartido
   ------------------------------------------------------------ */
.eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--texto-3); margin:0 0 .2rem;
}
.titulo-seccion{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; margin:0 0 .35rem; }
.texto-apoyo{ color:var(--texto-2); font-size:.92rem; }
.dato{ font-family:var(--dato); font-size:.9em; font-variant-numeric:tabular-nums; }
.plata{ font-family:var(--dato); font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:-.02em; }
.entra{ color:var(--entra); }
.sale{ color:var(--sale); }
.tenue{ color:var(--texto-2); }

.aviso{
  padding:.8rem 1rem; border-radius:var(--r-md); font-size:.9rem;
  display:flex; gap:.6rem; align-items:flex-start;
}
.aviso--bien{ background:var(--entra-luz); color:#0a6b3d; }
.aviso--mal{ background:var(--sale-luz); color:#9c2d23; }
.aviso--aviso{ background:var(--ambar-luz); color:#7a5900; }

/* ============================================================
   1. ACCESO
   ============================================================ */
.pantalla-acceso{ background:var(--tinta); }

.acceso{ display:grid; grid-template-columns:1.1fr 1fr; min-height:100vh; min-height:100dvh; }

.acceso__marca{
  position:relative; overflow:hidden; color:#EAEEF5;
  background:
    radial-gradient(120% 90% at 8% 12%, rgba(15,166,158,.30) 0%, transparent 55%),
    radial-gradient(100% 80% at 100% 100%, rgba(36,51,79,.85) 0%, transparent 60%),
    var(--tinta);
  padding:3rem 3.25rem 2.25rem;
  display:flex; flex-direction:column; justify-content:space-between;
}
/* Firma: retícula de losas, como el replanteo de un piso */
.acceso__marca::before{
  content:''; position:absolute; inset:-20%;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:74px 74px;
  transform:perspective(760px) rotateX(58deg) translateY(24%);
  transform-origin:center bottom; pointer-events:none;
}
.acceso__marca > *{ position:relative; }
.acceso__insignia{
  display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  padding:.35rem .7rem .35rem .45rem; border-radius:999px;
  font-size:.78rem; font-weight:600; color:#D6DEEA;
}
.acceso__insignia i{ width:22px; height:22px; border-radius:7px; background:linear-gradient(140deg,var(--resina),#0B6F76); display:block; }
.acceso__titulo{
  font-size:clamp(2.4rem,4.4vw,3.5rem); font-weight:800;
  line-height:1.02; letter-spacing:-.035em; margin:.6rem 0 .5rem;
}
.acceso__sub{ color:#98A6BC; font-size:1.02rem; max-width:34ch; margin-bottom:2rem; }
.acceso__lista{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.acceso__lista li{ display:flex; gap:.6rem; align-items:flex-start; color:#BFC9D9; font-size:.92rem; }
.acceso__lista li::before{
  content:''; flex:0 0 18px; height:18px; margin-top:.15rem; border-radius:6px;
  background:rgba(15,166,158,.22);
  box-shadow:inset 0 0 0 1px rgba(15,166,158,.5);
}
.acceso__pie{ margin:2.5rem 0 0; font-family:var(--dato); font-size:.74rem; color:#6A7688; }

.acceso__caja{ background:var(--blanco); display:flex; align-items:center; justify-content:center; padding:2rem 1.5rem; }
.acceso__forma{ width:100%; max-width:370px; }
.acceso__nota{ margin-top:1.5rem; font-size:.82rem; color:var(--texto-2); }

/* ============================================================
   2. CONTROLES
   ============================================================ */
.campo{ display:block; margin:0 0 1rem; }
.campo__etiqueta{ display:block; font-size:.82rem; font-weight:600; color:var(--texto-2); margin-bottom:.35rem; }
.campo__control{
  width:100%; font-family:inherit; font-size:.94rem; color:var(--texto);
  padding:.66rem .8rem; background:var(--blanco);
  border:1px solid var(--linea); border-radius:var(--r-md);
  transition:border-color var(--paso), box-shadow var(--paso), background var(--paso);
}
.campo__control::placeholder{ color:var(--texto-3); }
.campo__control:hover{ border-color:#D2D9E4; }
.campo__control:focus{ outline:none; border-color:var(--resina); box-shadow:0 0 0 4px rgba(15,166,158,.14); }
.campo__control:disabled{ background:var(--suave); color:var(--texto-2); }
select.campo__control{
  appearance:none; padding-right:2.2rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2359657A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center;
}
.campo__grupo{ position:relative; display:block; }
.campo__ojo{
  position:absolute; right:.4rem; top:50%; transform:translateY(-50%);
  border:0; background:var(--suave); cursor:pointer; font-size:.76rem; font-weight:600;
  color:var(--texto-2); padding:.3rem .55rem; border-radius:var(--r-sm);
}
.campo__ojo:hover{ background:#E6EAF2; color:var(--texto); }
.campo__pista{ display:block; margin-top:.35rem; font-size:.79rem; color:var(--texto-3); }
.campo--fila{ display:flex; align-items:center; gap:.6rem; }
.campo--fila input[type=checkbox]{ width:18px; height:18px; accent-color:var(--resina); }

.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  font-size:.88rem; font-weight:600; letter-spacing:-.01em;
  padding:.62rem 1.05rem; border-radius:var(--r-md);
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background var(--paso), border-color var(--paso), color var(--paso), box-shadow var(--paso), transform 80ms;
}
.boton:active{ transform:scale(.985); }
.boton--principal{ background:var(--tinta); color:#fff; box-shadow:var(--sombra-1); }
.boton--principal:hover{ background:var(--tinta-3); }
.boton--acento{ background:var(--resina); color:#fff; box-shadow:0 6px 16px -8px rgba(15,166,158,.9); }
.boton--acento:hover{ background:var(--resina-2); }
.boton--linea{ background:var(--blanco); color:var(--texto); border-color:var(--linea); }
.boton--linea:hover{ border-color:#CFD7E3; background:#FCFDFE; }
.boton--fantasma{ background:transparent; color:var(--texto-2); }
.boton--fantasma:hover{ background:var(--suave); color:var(--texto); }
.boton--tenue{ background:rgba(255,255,255,.08); color:#C9D3E2; border-color:rgba(255,255,255,.12); }
.boton--tenue:hover{ background:rgba(255,255,255,.15); color:#fff; }
.boton--peligro{ background:var(--sale); color:#fff; }
.boton--peligro:hover{ background:#BE3A2F; }
.boton--chico{ padding:.36rem .65rem; font-size:.79rem; border-radius:var(--r-sm); }
.boton--ancho{ width:100%; }
.boton[disabled]{ opacity:.45; pointer-events:none; }
.boton svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ============================================================
   3. RAIL LATERAL (contraíble)
   ============================================================ */
.rail{
  position:fixed; inset:0 auto 0 0; z-index:40;
  width:var(--rail); background:var(--tinta); color:#A9B5C8;
  display:flex; flex-direction:column;
  transition:width var(--paso), transform var(--paso);
}
body.rail-min .rail{ width:var(--rail-min); }

.rail__marca{
  display:flex; align-items:center; gap:.7rem;
  height:68px; padding:0 1rem; flex:0 0 68px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.rail__logo{
  flex:0 0 38px; width:38px; height:38px; border-radius:12px;
  background:linear-gradient(140deg,var(--resina) 0%, #0B6F76 100%);
  display:grid; place-items:center; color:#fff;
  font-family:var(--display); font-weight:800; font-size:1rem;
  box-shadow:0 6px 16px -8px rgba(15,166,158,.9);
}
.rail__nombre{ display:flex; flex-direction:column; min-width:0; transition:opacity var(--paso); }
.rail__nombre strong{ font-family:var(--display); font-size:.96rem; font-weight:700; color:#fff; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail__nombre small{ font-size:.72rem; color:#6E7C93; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.rail__nav{ flex:1; overflow-y:auto; overflow-x:hidden; padding:.9rem .7rem 1rem; }
.rail__nav::-webkit-scrollbar{ width:6px; }
.rail__nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border:0; }

.rail__grupo{
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#5A6779; margin:1.15rem 0 .4rem; padding-left:.85rem;
  transition:opacity var(--paso);
}
.rail__grupo:first-child{ margin-top:0; }

.rail__item{
  position:relative; display:flex; align-items:center; gap:.7rem;
  height:42px; padding:0 .8rem; margin-bottom:2px; border-radius:var(--r-md);
  color:#A9B5C8; font-size:.9rem; font-weight:500;
  transition:background var(--paso), color var(--paso);
}
.rail__item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.rail__item.es-activo{ background:rgba(15,166,158,.14); color:#fff; font-weight:600; }
.rail__item.es-activo::before{
  content:''; position:absolute; left:-.7rem; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:0 3px 3px 0; background:var(--resina);
}
.rail__icono{ flex:0 0 20px; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.rail__item.es-activo .rail__icono{ stroke:var(--resina); }
.rail__rotulo{ white-space:nowrap; overflow:hidden; }
.rail__insignia{
  margin-left:auto; font-family:var(--dato); font-size:.7rem;
  background:rgba(255,255,255,.1); padding:.05rem .38rem; border-radius:999px; color:#C7D1E0;
}

.rail__pie{ padding:.85rem .7rem 1rem; border-top:1px solid rgba(255,255,255,.07); }
.rail__quien{ display:flex; align-items:center; gap:.65rem; padding:.4rem .5rem .7rem; min-width:0; }
.rail__quien strong{ display:block; font-size:.85rem; color:#EAEEF5; font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail__quien small{ font-size:.72rem; color:#6E7C93; }
.avatar{
  flex:0 0 34px; width:34px; height:34px; border-radius:11px;
  background:linear-gradient(140deg,#2B3B58,#1A2740); color:#fff;
  display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:.95rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Estado contraído: solo iconos, con rótulo flotante al pasar el ratón */
body.rail-min .rail__nombre,
body.rail-min .rail__grupo,
body.rail-min .rail__insignia,
body.rail-min .rail__quien span:not(.avatar),
body.rail-min .rail__pie .boton span{ opacity:0; width:0; overflow:hidden; pointer-events:none; }
body.rail-min .rail__marca{ justify-content:center; padding:0; }
body.rail-min .rail__item{ justify-content:center; padding:0; }
body.rail-min .rail__quien{ justify-content:center; padding:.4rem 0 .7rem; }
body.rail-min .rail__grupo{ height:12px; margin:.8rem 0 .2rem; }
body.rail-min .rail__rotulo{
  position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(-6px);
  background:var(--tinta-3); color:#fff; padding:.4rem .65rem; border-radius:var(--r-sm);
  font-size:.82rem; box-shadow:var(--sombra-3);
  opacity:0; pointer-events:none; transition:opacity var(--paso), transform var(--paso); z-index:60;
}
body.rail-min .rail__item:hover .rail__rotulo{ opacity:1; transform:translateY(-50%) translateX(0); }

/* ============================================================
   4. ARMAZÓN
   ============================================================ */
.velo{ position:fixed; inset:0; background:rgba(14,23,38,.5); backdrop-filter:blur(2px); z-index:35; }

.marco{ margin-left:var(--rail); min-height:100vh; display:flex; flex-direction:column; transition:margin-left var(--paso); }
body.rail-min .marco{ margin-left:var(--rail-min); }

.barra{
  position:sticky; top:0; z-index:25;
  display:flex; align-items:center; gap:1rem;
  height:68px; padding:0 1.6rem;
  background:rgba(246,247,250,.85); backdrop-filter:blur(12px) saturate(1.4);
  border-bottom:1px solid var(--linea);
}
.barra__titulo{ flex:1; min-width:0; }
.barra__titulo h1{ font-size:1.28rem; font-weight:700; letter-spacing:-.02em; line-height:1.15; }
.barra__acciones{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; }
.icono-boton{
  flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--linea); background:var(--blanco); border-radius:var(--r-md);
  cursor:pointer; color:var(--texto-2); transition:all var(--paso);
}
.icono-boton:hover{ color:var(--texto); border-color:#CFD7E3; }
.icono-boton svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.solo-movil{ display:none; }

.lienzo{ flex:1; padding:1.6rem; max-width:1560px; width:100%; }
.creditos{ padding:0 1.6rem 1.6rem; font-size:.78rem; color:var(--texto-3); }

.cargando{ display:flex; align-items:center; gap:.6rem; color:var(--texto-2); font-size:.9rem; padding:2.5rem 0; }
.cargando span{
  width:16px; height:16px; border:2px solid var(--linea);
  border-top-color:var(--resina); border-radius:50%; animation:gira .65s linear infinite;
}
@keyframes gira{ to{ transform:rotate(360deg); } }
@keyframes surge{ from{ opacity:0; transform:translateY(8px); } }

/* ============================================================
   5. TARJETAS
   ============================================================ */
.rejilla{ display:grid; gap:1rem; margin-bottom:1rem; }
.rejilla--4{ grid-template-columns:repeat(4,1fr); }
.rejilla--3{ grid-template-columns:repeat(3,1fr); }
.rejilla--2{ grid-template-columns:repeat(2,1fr); }
.rejilla--ancha{ grid-template-columns:1.65fr 1fr; }

.tarjeta{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--r-lg); box-shadow:var(--sombra-2); overflow:hidden;
  animation:surge .32s cubic-bezier(.22,.61,.36,1) both;
}
.tarjeta__cabeza{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:1rem 1.2rem; border-bottom:1px solid var(--linea-2);
}
.tarjeta__cabeza h3{ font-size:1rem; font-weight:700; letter-spacing:-.015em; }
.tarjeta__cuerpo{ padding:1.2rem; }
.tarjeta__cuerpo--liso{ padding:0; }

/* Indicadores */
.kpi{ position:relative; padding:1.2rem 1.25rem; }
.kpi__chip{
  width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  margin-bottom:.85rem; background:var(--suave); color:var(--texto-2);
}
.kpi__chip svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.kpi__rotulo{ font-size:.84rem; font-weight:500; color:var(--texto-2); margin-bottom:.3rem; }
.kpi__valor{
  font-family:var(--display); font-size:1.95rem; font-weight:800;
  line-height:1.05; letter-spacing:-.035em; font-variant-numeric:tabular-nums;
}
.kpi__nota{ margin:.45rem 0 0; font-size:.79rem; color:var(--texto-3); }
.kpi--entra .kpi__chip{ background:var(--entra-luz); color:var(--entra); }
.kpi--entra .kpi__valor{ color:var(--entra); }
.kpi--sale .kpi__chip{ background:var(--sale-luz); color:var(--sale); }
.kpi--sale .kpi__valor{ color:var(--sale); }
.kpi--saldo{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(15,166,158,.30) 0%, transparent 60%),
    var(--tinta);
  color:#fff;
}
.kpi--saldo .kpi__chip{ background:rgba(255,255,255,.12); color:#fff; }
.kpi--saldo .kpi__rotulo{ color:#A9B5C8; }
.kpi--saldo .kpi__nota{ color:#7E8CA3; }

/* ============================================================
   6. TABLA
   ============================================================ */
.tabla-barra{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:.85rem 1.2rem; border-bottom:1px solid var(--linea-2);
}
.tabla-barra__buscar{ position:relative; flex:1; min-width:190px; max-width:340px; }
.tabla-barra__buscar input{
  width:100%; padding:.5rem .75rem .5rem 2.2rem; font-family:inherit; font-size:.88rem;
  border:1px solid var(--linea); border-radius:999px; background:var(--suave);
  transition:all var(--paso);
}
.tabla-barra__buscar input:focus{ outline:none; background:var(--blanco); border-color:var(--resina); box-shadow:0 0 0 4px rgba(15,166,158,.13); }
.tabla-barra__buscar::before{
  content:''; position:absolute; left:.8rem; top:50%; transform:translateY(-50%);
  width:15px; height:15px; opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2359657A' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.tabla-barra__conteo{ font-size:.8rem; color:var(--texto-3); font-family:var(--dato); }

.tabla-caja{ overflow-x:auto; }
.tabla{ width:100%; border-collapse:collapse; font-size:.885rem; }
.tabla thead th{
  position:sticky; top:0; z-index:1;
  background:var(--blanco); color:var(--texto-3);
  font-size:.74rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  text-align:left; padding:.7rem .9rem; white-space:nowrap;
  border-bottom:1px solid var(--linea);
}
.tabla thead th.ordenable{ cursor:pointer; user-select:none; transition:color var(--paso); }
.tabla thead th.ordenable:hover{ color:var(--texto); }
.tabla thead th .flecha{ opacity:.3; margin-left:.3rem; font-size:.65rem; }
.tabla thead th.orden-asc .flecha,
.tabla thead th.orden-desc .flecha{ opacity:1; color:var(--resina); }
.tabla tbody td{ padding:.72rem .9rem; border-bottom:1px solid var(--linea-2); vertical-align:middle; }
.tabla tbody tr{ transition:background 120ms; }
.tabla tbody tr:hover{ background:#FAFBFD; }
.tabla tbody tr:last-child td{ border-bottom:0; }
.tabla .der{ text-align:right; }
.tabla .cen{ text-align:center; }
.tabla__acciones{ display:flex; gap:.3rem; justify-content:flex-end; }
.tabla__vacio{ padding:3rem 1.2rem; text-align:center; color:var(--texto-2); }
.tabla__vacio strong{ display:block; font-family:var(--display); font-size:1.05rem; font-weight:700; color:var(--texto); margin-bottom:.35rem; }
.tabla tfoot td{ padding:.8rem .9rem; border-top:1px solid var(--linea); font-weight:600; background:#FBFCFE; }

.marca{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.2rem .55rem; border-radius:999px;
  font-size:.73rem; font-weight:600; letter-spacing:0;
}
.marca::before{ content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.marca--ingreso{ background:var(--entra-luz); color:var(--entra); }
.marca--egreso{ background:var(--sale-luz); color:var(--sale); }
.marca--gris{ background:var(--suave); color:var(--texto-2); }
.marca--senal{ background:var(--ambar-luz); color:#8a6800; }
.marca--acento{ background:var(--resina-luz); color:var(--resina-2); }

.paginador{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.75rem 1.2rem; border-top:1px solid var(--linea-2);
  font-size:.82rem; color:var(--texto-3);
}
.paginador__botones{ display:flex; gap:.35rem; }

/* ============================================================
   7. FILTROS
   ============================================================ */
.filtros{
  display:flex; gap:.75rem; flex-wrap:wrap; align-items:flex-end;
  padding:1rem 1.2rem; background:var(--blanco);
  border:1px solid var(--linea); border-radius:var(--r-lg);
  box-shadow:var(--sombra-2); margin-bottom:1rem;
}
.filtros .campo{ margin:0; min-width:150px; flex:1 1 150px; }
.filtros__acciones{ display:flex; gap:.4rem; }
.filtros__acciones .boton{ border-radius:999px; }

/* ============================================================
   8. GRÁFICO DE BARRAS
   ============================================================ */
.barras{ display:flex; align-items:flex-end; gap:1rem; height:200px; padding:.5rem .25rem 0; }
.barras__mes{ flex:1; display:flex; flex-direction:column; align-items:center; gap:.55rem; height:100%; }
.barras__par{ flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; gap:5px; }
.barras__barra{ width:44%; max-width:24px; border-radius:6px 6px 3px 3px; min-height:3px; transition:height .5s cubic-bezier(.22,.61,.36,1); }
.barras__barra--entra{ background:linear-gradient(180deg,#16B96A,var(--entra)); }
.barras__barra--sale{ background:linear-gradient(180deg,#EC6558,var(--sale)); }
.barras__pie{ font-size:.78rem; font-weight:600; color:var(--texto-3); }
.leyenda{ display:flex; gap:1.1rem; font-size:.79rem; color:var(--texto-2); margin-top:.75rem; }
.leyenda span{ display:inline-flex; align-items:center; gap:.4rem; }
.leyenda i{ width:9px; height:9px; border-radius:3px; display:inline-block; }

.rubros{ list-style:none; margin:0; padding:0; }
.rubros li{ padding:.65rem 0; border-bottom:1px solid var(--linea-2); }
.rubros li:last-child{ border-bottom:0; }
.rubros__fila{ display:flex; justify-content:space-between; gap:1rem; font-size:.88rem; margin-bottom:.4rem; }
.medidor{ height:6px; background:var(--suave); border-radius:999px; overflow:hidden; }
.medidor__lleno{ height:100%; background:var(--tinta-3); border-radius:999px; transition:width .5s cubic-bezier(.22,.61,.36,1); }
.medidor__lleno--entra{ background:linear-gradient(90deg,#16B96A,var(--entra)); }
.medidor__lleno--sale{ background:linear-gradient(90deg,#EC6558,var(--sale)); }
.medidor__lleno--alerta{ background:var(--ambar); }

.lista-simple{ list-style:none; margin:0; padding:0; }
.lista-simple li{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.7rem 1.2rem; border-bottom:1px solid var(--linea-2); font-size:.88rem;
}
.lista-simple li:last-child{ border-bottom:0; }
.lista-simple__quien{ min-width:0; }
.lista-simple__quien strong{ display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lista-simple__quien small{ color:var(--texto-3); font-size:.77rem; }

/* ============================================================
   9. MODAL
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:1.2rem; }
.modal__fondo{ position:absolute; inset:0; background:rgba(14,23,38,.5); backdrop-filter:blur(3px); animation:surge .2s both; }
.modal__caja{
  position:relative; width:100%; max-width:640px; max-height:90vh;
  display:flex; flex-direction:column;
  background:var(--blanco); border-radius:var(--r-xl); box-shadow:var(--sombra-3);
  animation:surge .24s cubic-bezier(.22,.61,.36,1) both;
}
.modal__cabeza{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 1.35rem .9rem; }
.modal__cabeza h2{ font-size:1.15rem; font-weight:700; letter-spacing:-.02em; }
.modal__x{
  width:32px; height:32px; display:grid; place-items:center;
  background:var(--suave); border:0; border-radius:var(--r-sm);
  font-size:1.25rem; line-height:1; color:var(--texto-2); cursor:pointer;
}
.modal__x:hover{ background:#E6EAF2; color:var(--texto); }
.modal__cuerpo{ padding:0 1.35rem 1.1rem; overflow-y:auto; }
.modal__pie{ display:flex; justify-content:flex-end; gap:.55rem; padding:1rem 1.35rem; border-top:1px solid var(--linea-2); background:#FBFCFE; border-radius:0 0 var(--r-xl) var(--r-xl); }
.forma-rejilla{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.1rem; }
.forma-rejilla .ancho-total{ grid-column:1 / -1; }

/* ============================================================
   10. AVISOS FLOTANTES
   ============================================================ */
.avisos{ position:fixed; right:1.2rem; bottom:1.2rem; z-index:90; display:flex; flex-direction:column; gap:.55rem; max-width:340px; }
.avisos__globo{
  background:var(--tinta); color:#fff; padding:.8rem 1rem;
  border-radius:var(--r-md); font-size:.87rem; box-shadow:var(--sombra-3);
  display:flex; gap:.6rem; align-items:flex-start;
  animation:surge .24s cubic-bezier(.22,.61,.36,1) both;
}
.avisos__globo::before{ content:''; flex:0 0 4px; align-self:stretch; border-radius:99px; background:var(--resina); }
.avisos__globo--bien::before{ background:#22C77E; }
.avisos__globo--mal::before{ background:#F0685A; }

/* ============================================================
   11. TARJETA DE REPORTE
   ============================================================ */
.reporte{ position:relative; overflow:hidden; }
.reporte__icono{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--resina-luz); color:var(--resina-2); margin-bottom:.9rem;
}
.reporte__icono svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* ============================================================
   12. HOJA IMPRIMIBLE
   ============================================================ */
.hoja{ max-width:980px; margin:1.5rem auto; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg); box-shadow:var(--sombra-2); }
.hoja__cabeza{ display:flex; justify-content:space-between; gap:1.5rem; padding:1.7rem 1.9rem; border-bottom:2px solid var(--tinta); }
.hoja__cabeza h1{ font-size:1.7rem; font-weight:800; letter-spacing:-.03em; }
.hoja__meta{ text-align:right; font-size:.79rem; color:var(--texto-2); font-family:var(--dato); line-height:1.7; }
.hoja__cuerpo{ padding:1.5rem 1.9rem 2rem; }
.hoja__seccion{ margin-bottom:1.9rem; }
.hoja__seccion h2{ font-size:1rem; font-weight:700; letter-spacing:-.01em; border-bottom:1px solid var(--linea); padding-bottom:.45rem; margin-bottom:.75rem; }
.hoja__firma{ display:flex; gap:3rem; margin-top:3rem; }
.hoja__firma div{ flex:1; border-top:1px solid var(--texto); padding-top:.45rem; font-size:.78rem; text-align:center; color:var(--texto-2); }
.barra-reporte{ max-width:980px; margin:1.3rem auto 0; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; padding:0 1rem; }

@media print{
  body{ background:#fff; font-size:11pt; }
  .barra-reporte,.no-imprime,.rail,.barra,.creditos{ display:none !important; }
  .marco{ margin-left:0 !important; }
  .lienzo{ padding:0; }
  .hoja{ max-width:none; margin:0; border:0; box-shadow:none; border-radius:0; }
  .hoja__cabeza{ padding:0 0 .8rem; }
  .hoja__cuerpo{ padding:1rem 0 0; }
  .tabla thead th{ background:#F1F3F8 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .hoja__seccion{ break-inside:avoid; }
}


/* ============================================================
   14. LOGO Y CONFIGURACIÓN
   ============================================================ */
.rail__marca{ text-decoration:none; }
.rail__logo--imagen{ background:#fff; padding:4px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.rail__logo--imagen img{ width:100%; height:100%; object-fit:contain; display:block; border-radius:8px; }

.logo-caja{
  height:150px; border:1px dashed var(--linea); border-radius:var(--r-lg);
  background:
    linear-gradient(45deg, var(--suave) 25%, transparent 25%) 0 0/16px 16px,
    linear-gradient(-45deg, var(--suave) 25%, transparent 25%) 0 8px/16px 16px,
    linear-gradient(45deg, transparent 75%, var(--suave) 75%) 8px -8px/16px 16px,
    linear-gradient(-45deg, transparent 75%, var(--suave) 75%) -8px 0/16px 16px,
    var(--blanco);
  display:grid; place-items:center; padding:1rem; overflow:hidden;
}
.logo-caja img{ max-width:100%; max-height:118px; object-fit:contain; }
.logo-caja__vacio{ display:grid; place-items:center; gap:.4rem; color:var(--texto-3); font-size:.85rem; }
.logo-caja__vacio svg{ width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

input[type=file].campo__control{ padding:.45rem .55rem; cursor:pointer; }
input[type=file].campo__control::file-selector-button{
  font-family:inherit; font-size:.82rem; font-weight:600; cursor:pointer;
  margin-right:.7rem; padding:.35rem .7rem; border:0; border-radius:var(--r-sm);
  background:var(--suave); color:var(--texto);
}

/* El botón de registro rápido acompaña siempre a la barra */
.barra #registroRapido{ flex:0 0 auto; }
@media (max-width:760px){
  .barra #registroRapido{ padding:.6rem .7rem; }
}

/* Logo dentro de la hoja imprimible */
.hoja__logo{ height:52px; margin-bottom:.6rem; }
.hoja__logo img{ height:100%; object-fit:contain; }

/* ============================================================
   13. RESPONSIVE
   ============================================================ */
@media (max-width:1240px){
  .rejilla--4{ grid-template-columns:repeat(2,1fr); }
  .rejilla--ancha{ grid-template-columns:1fr; }
}

@media (max-width:1024px){
  .rail{ transform:translateX(-100%); width:var(--rail) !important; box-shadow:var(--sombra-3); }
  .rail.esta-abierto{ transform:translateX(0); }
  body.rail-min .rail__nombre, body.rail-min .rail__grupo,
  body.rail-min .rail__quien span:not(.avatar), body.rail-min .rail__pie .boton span{ opacity:1; width:auto; }
  body.rail-min .rail__item, body.rail-min .rail__marca, body.rail-min .rail__quien{ justify-content:flex-start; padding:0 .8rem; }
  body.rail-min .rail__rotulo{ position:static; transform:none; opacity:1; background:none; box-shadow:none; padding:0; }
  .marco, body.rail-min .marco{ margin-left:0; }
  .barra{ padding:0 1rem; height:62px; }
  .solo-movil{ display:grid; }
  .no-movil{ display:none; }
  .lienzo{ padding:1rem; }
  .creditos{ padding:0 1rem 1rem; }
  .rejilla--3,.rejilla--2{ grid-template-columns:1fr; }
  .acceso{ grid-template-columns:1fr; }
  .acceso__marca{ padding:2rem 1.5rem 1.5rem; }
  .acceso__lista{ display:none; }
}

@media (max-width:760px){
  .rejilla--4{ grid-template-columns:1fr; }
  .forma-rejilla{ grid-template-columns:1fr; }
  .barra__titulo h1{ font-size:1.1rem; }
  .barra__acciones .boton .rotulo-boton{ display:none; }
  .filtros{ padding:.9rem; }
  .filtros .campo{ flex:1 1 100%; min-width:0; }
  .filtros__acciones{ width:100%; }
  .filtros__acciones .boton{ flex:1; }

  /* La tabla se convierte en fichas */
  .tabla-caja{ overflow-x:visible; }
  .tabla thead{ display:none; }
  .tabla,.tabla tbody,.tabla tr,.tabla td{ display:block; width:100%; }
  .tabla tbody tr{
    border:1px solid var(--linea); border-radius:var(--r-md);
    margin:.7rem .8rem; padding:.45rem .2rem; background:var(--blanco);
    box-shadow:var(--sombra-1);
  }
  .tabla tbody td{
    display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
    padding:.38rem .85rem; border-bottom:0; text-align:right;
  }
  .tabla tbody td::before{
    content:attr(data-rotulo);
    font-size:.73rem; font-weight:600; color:var(--texto-3); text-align:left; flex:0 0 auto;
  }
  .tabla tbody td:empty{ display:none; }
  .tabla .der,.tabla .cen{ text-align:right; }
  .tabla__acciones{ justify-content:flex-end; }
  .tabla tfoot{ display:block; }
  .tabla tfoot tr{ display:flex; flex-wrap:wrap; gap:.5rem; padding:.8rem .95rem; }
  .tabla tfoot td{ display:flex; gap:.4rem; border:0; padding:0; }
  .barras{ height:160px; gap:.45rem; }
  .avisos{ left:1rem; right:1rem; max-width:none; }
  .modal{ padding:0; align-items:flex-end; }
  .modal__caja{ max-width:none; max-height:94vh; border-radius:var(--r-xl) var(--r-xl) 0 0; }
  .hoja__cabeza{ flex-direction:column; gap:.75rem; }
  .hoja__meta{ text-align:left; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}