/* Dos Reyes RGV Snacks — Panel · Ikrealo */
:root{
  --negro:#0a0808; --carbon:#171210; --carbon2:#211815;
  --rojo:#d61f26; --naranja:#ff7a18; --mango:#ffc820; --azul:#29a9e0; --limon:#9bd44e;
  --crema:#fff4e4; --tenue:#a8988a; --borde:rgba(255,200,32,.18);
  --lateral:248px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--negro);color:var(--crema);font:400 15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--mango);outline-offset:2px}

/* ---- Tope ---- */
.tope{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  height:58px;padding:0 14px;background:#000;border-bottom:1px solid var(--borde)}
.menu-btn{background:none;border:0;color:var(--crema);font-size:22px;cursor:pointer;line-height:1}
.corona{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:16px;flex:none;
  background:conic-gradient(from 200deg,var(--rojo),var(--naranja),var(--mango),var(--rojo))}
.tope-txt{margin-right:auto;min-width:0;line-height:1.15}
.tope-txt b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tope-txt span{font-size:12px;color:var(--mango)}
.salir{font-size:13px;border:1px solid var(--borde);padding:7px 13px;border-radius:999px;color:var(--tenue)}

/* ---- Lateral ---- */
.lateral{position:fixed;top:58px;bottom:0;left:0;width:var(--lateral);z-index:25;
  background:var(--carbon);border-right:1px solid var(--borde);padding:16px 12px;
  transform:translateX(-100%);transition:transform .2s ease;overflow-y:auto}
.lateral.on{transform:none}
.quien{font-size:14px;font-weight:700;padding:0 10px 14px;border-bottom:1px dashed rgba(255,255,255,.12);margin-bottom:12px}
.quien small{display:block;font-weight:400;color:var(--mango);text-transform:capitalize;font-size:12px}
.lateral a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:9px;font-size:15px;margin-bottom:2px}
.lateral a span{width:20px;text-align:center}
.lateral a.on{background:linear-gradient(90deg,rgba(214,31,38,.35),transparent);color:#fff;font-weight:700;
  box-shadow:inset 3px 0 0 var(--mango)}
.globo{margin-left:auto;background:var(--rojo);color:#fff;font-style:normal;font-size:11px;font-weight:700;
  border-radius:999px;padding:2px 7px}
.version{margin-top:22px;padding:0 12px;font-size:11px;color:#55483f}
.velo{position:fixed;inset:58px 0 0;background:rgba(0,0,0,.6);z-index:20;display:none}
.velo.on{display:block}
@media(min-width:900px){
  .lateral{transform:none}
  .menu-btn{display:none}
  .lienzo{margin-left:var(--lateral)}
  .velo{display:none!important}
}

/* ---- Lienzo ---- */
.lienzo{padding:18px 14px 90px;max-width:1180px}
h1{font-size:23px;margin-bottom:4px}
h2{font-size:18px;margin:26px 0 12px}
.sub{color:var(--tenue);font-size:14px;margin-bottom:18px}

.aviso{border-radius:10px;padding:12px 14px;margin-bottom:16px;font-size:14px}
.aviso.bien{background:rgba(155,212,78,.14);border:1px solid rgba(155,212,78,.4)}
.aviso.alerta{background:rgba(255,200,32,.12);border:1px solid rgba(255,200,32,.4)}

/* ---- Tarjetas de cifras ---- */
.cifras{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:8px}
.cifra{background:var(--carbon2);border:1px solid rgba(255,255,255,.07);border-radius:13px;padding:15px 16px}
.cifra p{font-size:12px;color:var(--tenue);text-transform:uppercase;letter-spacing:.6px}
.cifra b{font-size:29px;display:block;margin-top:4px;line-height:1.1}
.cifra.oro b{color:var(--mango)} .cifra.verde b{color:var(--limon)} .cifra.rojo b{color:var(--rojo)}

/* ---- Tablas / listas ---- */
.caja{background:var(--carbon2);border:1px solid rgba(255,255,255,.07);border-radius:13px;overflow:hidden}
.caja-tit{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.caja-tit h3{font-size:16px;margin-right:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--tenue);
  padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.025)}
.tabla-scroll{overflow-x:auto}
.nada{text-align:center;color:var(--tenue);padding:34px 16px;font-size:14px}

.pill{display:inline-block;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;
  color:var(--c);border:1px solid var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.folio{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--mango)}

/* ---- Botones y formularios ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;cursor:pointer;
  font:600 14px/1 system-ui;padding:11px 16px;border-radius:9px;transition:filter .12s}
.btn:hover{filter:brightness(1.1)}
.btn-rojo{background:linear-gradient(160deg,var(--naranja),var(--rojo));color:#fff}
.btn-oro{background:var(--mango);color:#1a1000}
.btn-linea{background:transparent;border:1px solid var(--borde);color:var(--crema)}
.btn-chico{padding:8px 12px;font-size:13px}
.acciones{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}

label{display:block;font-size:12px;color:var(--tenue);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}
input,select,textarea{width:100%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.14);
  color:var(--crema);border-radius:9px;padding:11px 12px;font:400 15px system-ui}
textarea{resize:vertical;min-height:80px}
.rejilla{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.campo{margin-bottom:14px}
.linea{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}

/* ---- Modal ---- */
.modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.75);display:none;padding:20px;overflow-y:auto}
.modal.on{display:block}
.modal-caja{max-width:560px;margin:40px auto;background:var(--carbon);border:1px solid var(--borde);
  border-radius:15px;padding:22px}
.modal-caja h3{font-size:19px;margin-bottom:16px}
.cerrar-modal{float:right;background:none;border:0;color:var(--tenue);font-size:24px;cursor:pointer;line-height:1}