/* =====================================================================
   KimaLoto88 — Panel de administración
   Azul, blanco, negro tinta y morado.
   ===================================================================== */

:root{
  --tinta:#0E1330;      /* negro azulado, el fondo de la barra lateral */
  --tinta-2:#1A2149;
  --azul:#1B41C4;
  --azul-cl:#3A63E8;
  --azul-bruma:#EEF2FE;
  --morado:#6B3FD4;
  --morado-cl:#8B5CF6;
  --papel:#F3F5FC;
  --blanco:#FFFFFF;
  --linea:#E2E6F4;
  --gris:#5B6484;
  --gris-cl:#8A93B0;
  --verde:#0C8F63;
  --ambar:#C9800A;
  --rojo:#C8323F;
  --lateral:250px;
  --r:14px;
  --sombra:0 1px 2px rgba(14,19,48,.05), 0 8px 24px rgba(14,19,48,.06);
  --sombra-alta:0 18px 50px rgba(14,19,48,.22);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--papel); color:var(--tinta);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.oculto{display:none !important}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--azul-cl);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* =============================== LOGIN ============================== */
.login{
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:radial-gradient(115% 90% at 12% 0%, #2B4FE0 0%, #1B41C4 34%, #2C1F63 72%, #0E1330 100%);
}
.login-caja{
  width:100%; max-width:400px; background:var(--blanco);
  border-radius:20px; padding:36px 32px 30px; box-shadow:var(--sombra-alta);
}
.login-logo{display:flex;justify-content:center;margin-bottom:22px}
.login-logo img{height:62px;width:auto}
.login-caja h1{font:800 1.45rem/1.2 Archivo,sans-serif;letter-spacing:-.02em;text-align:center}
.login-caja .sub{color:var(--gris);font-size:.92rem;text-align:center;margin:6px 0 22px}
.campo{position:relative;margin-bottom:13px}
.campo input{
  width:100%; padding:13px 15px 13px 44px; border:1.5px solid var(--linea);
  border-radius:11px; background:#FBFCFF; color:#0E1330;
  -webkit-text-fill-color:#0E1330; caret-color:#1B41C4;
}
.campo input::placeholder{color:#68718F;opacity:1;-webkit-text-fill-color:#68718F}
.campo input:-webkit-autofill{
  -webkit-text-fill-color:#0E1330 !important;
  box-shadow:0 0 0 1000px #FBFCFF inset;
}
.campo input:focus{outline:0;border-color:var(--azul);background:#fff;box-shadow:0 0 0 3px rgba(27,65,196,.13)}
.campo svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:19px;height:19px;fill:var(--gris-cl)}
.login-caja .entrar{
  width:100%; margin-top:8px; padding:14px; border:0; border-radius:11px; cursor:pointer;
  background:linear-gradient(100deg,var(--azul),var(--morado)); color:#fff; font-weight:800; font-size:1rem;
}
.login-caja .entrar:hover{filter:brightness(1.08)}
.login-caja .entrar:disabled{opacity:.6;cursor:wait}
.login-pie{text-align:center;font-size:.83rem;color:var(--gris-cl);margin-top:18px}
.login-pie a{color:var(--azul);text-decoration:none;font-weight:600}
.idiomas-login{display:flex;gap:6px;justify-content:center;margin-bottom:18px}
.idiomas-login button{
  border:1.5px solid var(--linea);background:#fff;border-radius:20px;padding:5px 13px;
  font-size:.8rem;font-weight:700;color:var(--gris);cursor:pointer
}
.idiomas-login button.on{background:var(--tinta);border-color:var(--tinta);color:#fff}

/* ============================= ESTRUCTURA =========================== */
.app{display:flex;min-height:100vh}

/* ---- Barra lateral ---- */
.lateral{
  width:var(--lateral); flex:0 0 var(--lateral); background:var(--tinta);
  color:#fff; display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0;
  z-index:60; overflow-y:auto;
}
.lat-marca{display:flex;align-items:center;gap:11px;padding:20px 20px 18px}
.lat-marca img{height:38px;width:auto}
.lat-marca .n{font:800 1.05rem/1 Archivo,sans-serif;letter-spacing:-.01em}
.lat-marca .n small{display:block;font:500 .68rem/1.4 Manrope,sans-serif;color:#8E9AC8;margin-top:3px;letter-spacing:.02em}

.lat-yo{
  display:flex;align-items:center;gap:11px;margin:0 14px 16px;padding:11px 12px;
  background:rgba(255,255,255,.07);border-radius:12px;
}
.lat-yo .av{
  width:38px;height:38px;border-radius:11px;flex:0 0 38px;object-fit:cover;
  background:linear-gradient(140deg,var(--azul-cl),var(--morado));
  display:grid;place-items:center;font:800 .95rem Archivo,sans-serif;color:#fff
}
.lat-yo .txt{min-width:0}
.lat-yo b{display:block;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lat-yo span{font-size:.73rem;color:#8E9AC8}

.lat-nav{flex:1;padding:0 12px}
.lat-nav button{
  width:100%;display:flex;align-items:center;gap:12px;padding:11px 13px;margin-bottom:3px;
  background:none;border:0;border-radius:11px;color:#B9C2E4;cursor:pointer;
  font-size:.93rem;font-weight:600;text-align:left;transition:background .14s,color .14s;
}
.lat-nav button svg{width:19px;height:19px;flex:0 0 19px;fill:currentColor;opacity:.85}
.lat-nav button:hover{background:rgba(255,255,255,.07);color:#fff}
.lat-nav button.on{background:linear-gradient(96deg,var(--azul),var(--morado));color:#fff;box-shadow:0 4px 14px rgba(27,65,196,.4)}
.lat-nav button.on svg{opacity:1}
.lat-nav .pip{
  margin-left:auto;background:#fff;color:var(--tinta);border-radius:20px;
  font:800 .7rem Manrope,sans-serif;padding:1px 7px;min-width:20px;text-align:center
}
.lat-nav button.on .pip{background:rgba(255,255,255,.24);color:#fff}

.lat-pie{padding:14px 18px 18px;border-top:1px solid rgba(255,255,255,.09)}
.lat-idiomas{display:flex;gap:5px;margin-bottom:12px}
.lat-idiomas button{
  flex:1;border:1px solid rgba(255,255,255,.16);background:none;border-radius:8px;
  padding:6px 0;font-size:.73rem;font-weight:800;color:#B9C2E4;cursor:pointer
}
.lat-idiomas button.on{background:#fff;color:var(--tinta);border-color:#fff}
.lat-salir{
  width:100%;padding:10px;border:1px solid rgba(255,255,255,.2);background:none;
  border-radius:10px;color:#D6DCF4;font-weight:700;font-size:.87rem;cursor:pointer
}
.lat-salir:hover{background:rgba(255,255,255,.09);color:#fff}

/* ---- Contenido ---- */
.contenido{flex:1;margin-left:var(--lateral);min-width:0;padding:26px 30px 60px}
.cabecera{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.cabecera h1{font:800 1.6rem/1.15 Archivo,sans-serif;letter-spacing:-.025em}
.cabecera p{color:var(--gris);font-size:.92rem;margin-top:3px}
.hamburguesa{display:none;background:var(--tinta);border:0;border-radius:10px;padding:9px 11px;cursor:pointer}
.hamburguesa span{display:block;width:19px;height:2px;background:#fff;border-radius:2px}
.hamburguesa span+span{margin-top:4px}
.velo{display:none;position:fixed;inset:0;background:rgba(14,19,48,.55);z-index:55}

/* ========================= TARJETAS DE COLOR ======================== */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:14px;margin-bottom:22px}
.tj{
  border-radius:var(--r); padding:18px 18px 16px; color:#fff; position:relative; overflow:hidden;
  box-shadow:0 6px 20px rgba(14,19,48,.13);
}
.tj::after{
  content:''; position:absolute; right:-28px; top:-28px; width:110px; height:110px;
  border-radius:50%; background:rgba(255,255,255,.11);
}
.tj .et{font-size:.78rem;font-weight:700;opacity:.88;letter-spacing:.015em}
.tj .val{font:800 2.05rem/1.05 Archivo,sans-serif;margin:7px 0 3px;letter-spacing:-.03em;position:relative}
.tj .pie{font-size:.76rem;opacity:.82}
.tj-azul{background:linear-gradient(140deg,#2A54DC,#1B41C4)}
.tj-morado{background:linear-gradient(140deg,#8154E4,#6B3FD4)}
.tj-tinta{background:linear-gradient(140deg,#232C5E,#0E1330)}
.tj-verde{background:linear-gradient(140deg,#12A874,#0C8F63)}
.tj-ambar{background:linear-gradient(140deg,#E09A18,#C9800A)}
.tj-rojo{background:linear-gradient(140deg,#DC4552,#C8323F)}
.tj-cielo{background:linear-gradient(140deg,#3E86E8,#2463C9)}
.tj.mini .val{font-size:1.55rem}

/* ============================== PANELES ============================= */
.panel{background:var(--blanco);border-radius:var(--r);padding:22px 22px 20px;margin-bottom:18px;box-shadow:var(--sombra)}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.panel h2{font:700 1.08rem/1.25 Archivo,sans-serif;letter-spacing:-.015em}
.panel .desc{color:var(--gris);font-size:.87rem;margin-top:3px}
.sub-titulo{font:700 .82rem Manrope,sans-serif;color:var(--azul);margin:22px 0 10px;
  padding-bottom:6px;border-bottom:1px solid var(--linea)}

/* ============================= BOTONES ============================== */
.b{
  border:0;border-radius:10px;padding:11px 18px;font-weight:700;font-size:.9rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:filter .14s,background .14s;
}
.b:hover{filter:brightness(.95)}
.b-azul{background:var(--azul);color:#fff}
.b-azul:hover{background:#1636A6;filter:none}
.b-morado{background:var(--morado);color:#fff}
.b-tinta{background:var(--tinta);color:#fff}
.b-verde{background:var(--verde);color:#fff}
.b-rojo{background:var(--rojo);color:#fff}
.b-linea{background:#fff;color:var(--tinta);border:1.5px solid var(--linea)}
.b-linea:hover{border-color:var(--azul);color:var(--azul);filter:none}
.b-gris{background:#EDF0F8;color:var(--gris)}
.b-chico{padding:8px 13px;font-size:.83rem;border-radius:9px}
.b:disabled{opacity:.55;cursor:not-allowed}
.acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* ============================ FORMULARIOS =========================== */
label{display:block;font-weight:600;font-size:.83rem;margin-bottom:5px;color:var(--tinta)}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=date],
input[type=time],input[type=password],input[type=url],select,textarea{
  width:100%;padding:11px 13px;border:1.5px solid var(--linea);border-radius:10px;background:#FBFCFF;
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--azul);background:#fff;box-shadow:0 0 0 3px rgba(27,65,196,.12)}
textarea{min-height:82px;resize:vertical}
select{cursor:pointer}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.fila-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.fila-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.filtros input{flex:1;min-width:190px}
.filtros select{width:auto;min-width:158px}
.pista{font-size:.8rem;color:var(--gris);margin-top:5px}

.interruptor{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600;font-size:.9rem}
.interruptor input{display:none}
.interruptor i{width:44px;height:25px;background:#CDD4E8;border-radius:20px;position:relative;transition:background .18s;flex:0 0 44px}
.interruptor i::after{content:'';position:absolute;top:3px;left:3px;width:19px;height:19px;background:#fff;border-radius:50%;transition:left .18s}
.interruptor input:checked + i{background:var(--azul)}
.interruptor input:checked + i::after{left:22px}

.campo-arch{
  display:block;border:2px dashed var(--linea);border-radius:12px;padding:20px;text-align:center;
  cursor:pointer;background:#FBFCFF;color:var(--gris);font-size:.88rem
}
.campo-arch:hover{border-color:var(--azul);color:var(--azul)}
.campo-arch input{display:none}
.campo-arch small{display:block;margin-top:4px;font-size:.76rem;color:var(--gris-cl)}
.previa{max-height:190px;border-radius:10px;margin-top:12px}

/* ============================== AVISOS ============================== */
.aviso{padding:11px 14px;border-radius:10px;font-size:.88rem;margin-bottom:14px;font-weight:600}
.aviso.ok{background:#E6F6EF;color:#0A6F4E}
.aviso.error{background:#FDECEE;color:#A9202C}
.aviso.info{background:var(--azul-bruma);color:#183AA8}
.aviso.alerta{background:#FFF5E3;color:#94600A}

#brindis{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;
  background:var(--tinta);color:#fff;padding:13px 22px;border-radius:12px;font-weight:700;
  font-size:.9rem;box-shadow:var(--sombra-alta);max-width:90vw;text-align:center}
#brindis.error{background:var(--rojo)}

/* ============================== TABLAS ============================== */
.tabla{width:100%;border-collapse:collapse;font-size:.89rem}
.tabla th{
  text-align:left;font-weight:700;font-size:.76rem;color:var(--gris);
  padding:9px 11px;border-bottom:1.5px solid var(--linea);white-space:nowrap
}
.tabla td{padding:12px 11px;border-bottom:1px solid #EEF1F8;vertical-align:middle}
.tabla tbody tr{cursor:pointer;transition:background .12s}
.tabla tbody tr:hover{background:var(--azul-bruma)}
.tabla .d{text-align:right}
.tabla .fuerte{font-weight:700}
.tabla .chico{font-size:.79rem;color:var(--gris);display:block;margin-top:1px}
.envoltura{overflow-x:auto;margin:0 -6px;padding:0 6px}

.eti{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.74rem;font-weight:800;white-space:nowrap}
.eti.activo{background:#E4F6EF;color:#0A6F4E}
.eti.porvencer{background:#FFF3DC;color:#94600A}
.eti.vencido{background:#FDE7E9;color:#A9202C}
.eti.suspendido{background:#ECEEF6;color:#5B6484}
.eti.cancelado{background:#ECEEF6;color:#5B6484}
.eti.pendiente{background:var(--azul-bruma);color:#183AA8}
.eti.cumplida{background:#E4F6EF;color:#0A6F4E}
.eti.incumplida{background:#FDE7E9;color:#A9202C}

.vacio{text-align:center;padding:34px 16px;color:var(--gris-cl);font-size:.92rem}

/* ============================== LISTAS ============================== */
.lista-item{
  display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid #EEF1F8;cursor:pointer
}
.lista-item:last-child{border-bottom:0}
.lista-item:hover{background:var(--azul-bruma)}
.lista-item .ini{
  width:40px;height:40px;flex:0 0 40px;border-radius:11px;display:grid;place-items:center;
  font:800 .92rem Archivo,sans-serif;color:#fff;background:linear-gradient(140deg,var(--azul-cl),var(--morado))
}
.lista-item .cuerpo{flex:1;min-width:0}
.lista-item b{display:block;font-size:.93rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista-item small{color:var(--gris);font-size:.79rem}
.lista-item .der{text-align:right;white-space:nowrap}

/* ============================== GRÁFICO ============================= */
.grafico{display:flex;align-items:flex-end;gap:7px;height:190px;padding:12px 0 0;margin-bottom:6px}
.grafico .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:5px}
.grafico .barra{
  width:100%;border-radius:7px 7px 3px 3px;min-height:4px;
  background:linear-gradient(180deg,var(--morado),var(--azul));transition:height .3s
}
.grafico .mes{font-size:.7rem;color:var(--gris);font-weight:700}
.grafico .num{font-size:.68rem;color:var(--gris-cl);font-weight:700}

/* ============================== FICHA =============================== */
.capa{position:fixed;inset:0;background:rgba(14,19,48,.6);z-index:100;display:flex;
  align-items:flex-end;justify-content:center;padding:0}
.hoja{
  background:var(--papel);width:100%;max-width:940px;max-height:94vh;overflow-y:auto;
  border-radius:18px 18px 0 0;box-shadow:var(--sombra-alta);animation:sube .2s ease-out
}
@keyframes sube{from{transform:translateY(26px);opacity:.4}to{transform:none;opacity:1}}
.hoja-top{
  position:sticky;top:0;z-index:5;background:var(--tinta);color:#fff;
  padding:18px 24px;display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  border-radius:18px 18px 0 0
}
.hoja-top h2{font:800 1.22rem Archivo,sans-serif;letter-spacing:-.02em}
.hoja-top .cod{font-size:.8rem;color:#9AA6D2;margin-top:2px}
.hoja-top .x{background:rgba(255,255,255,.14);border:0;color:#fff;width:34px;height:34px;
  border-radius:9px;font-size:1.25rem;cursor:pointer;line-height:1;flex:0 0 34px}
.hoja-cuerpo{padding:20px 24px 40px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}

@media (min-width:760px){
  .capa{align-items:center;padding:24px}
  .hoja{border-radius:18px}
  .hoja-top{border-radius:18px 18px 0 0}
}

/* =========================== MINI TARJETAS ========================== */
.mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:11px;margin-bottom:16px}
.mini{background:#fff;border-radius:12px;padding:13px 14px;border:1px solid var(--linea)}
.mini .et{font-size:.73rem;color:var(--gris);font-weight:700}
.mini .val{font:800 1.28rem Archivo,sans-serif;margin-top:3px;letter-spacing:-.02em}
.mini.azul .val{color:var(--azul)}
.mini.verde .val{color:var(--verde)}
.mini.rojo .val{color:var(--rojo)}
.mini.morado .val{color:var(--morado)}

.progreso{height:7px;background:#E7EBF7;border-radius:6px;overflow:hidden;margin-top:9px}
.progreso i{display:block;height:100%;background:linear-gradient(90deg,var(--azul),var(--morado));border-radius:6px}

/* ========================= CAJA DE CÁLCULO ========================== */
.calculo{
  background:linear-gradient(140deg,#1B41C4,#6B3FD4);color:#fff;border-radius:14px;
  padding:18px 20px;margin:14px 0
}
.calculo h4{font:700 .84rem Manrope,sans-serif;opacity:.9;margin-bottom:11px}
.calculo .renglon{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:.9rem;
  border-bottom:1px solid rgba(255,255,255,.16)}
.calculo .renglon:last-of-type{border-bottom:0}
.calculo .renglon b{font-weight:800}
.calculo .gran{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:12px;padding-top:12px;border-top:2px solid rgba(255,255,255,.28)
}
.calculo .gran span{font-size:.86rem;opacity:.9}
.calculo .gran b{font:800 1.75rem Archivo,sans-serif;letter-spacing:-.02em}
.calculo .formula{
  margin-top:11px;padding:9px 12px;background:rgba(0,0,0,.19);border-radius:9px;
  font-size:.81rem;font-weight:600;line-height:1.5
}

/* ============================== PLANES ============================== */
.tabla-planes{width:100%;border-collapse:collapse;font-size:.88rem}
.tabla-planes th{
  text-align:left;font-size:.72rem;font-weight:800;color:var(--gris);padding:8px 7px;
  border-bottom:1.5px solid var(--linea);white-space:nowrap
}
.tabla-planes td{padding:7px;border-bottom:1px solid #EEF1F8}
.tabla-planes .nom{font:800 .88rem Archivo,sans-serif;white-space:nowrap}
.tabla-planes input{padding:8px 9px;font-size:.87rem;text-align:right;border-radius:8px}
.tabla-planes input.calc{background:#EEF2FE;border-color:#D3DCFA;color:var(--azul);font-weight:700}

/* ============================== AVATAR ============================== */
.avatar-fila{display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.avatar-grande{
  width:78px;height:78px;border-radius:20px;object-fit:cover;flex:0 0 78px;
  background:linear-gradient(140deg,var(--azul-cl),var(--morado));
  display:grid;place-items:center;font:800 1.8rem Archivo,sans-serif;color:#fff
}

/* ============================= RESPONSIVE =========================== */
@media (max-width:1000px){
  .lateral{transform:translateX(-100%);transition:transform .22s ease}
  body.menu-abierto .lateral{transform:none}
  body.menu-abierto .velo{display:block}
  .contenido{margin-left:0;padding:18px 16px 60px}
  .hamburguesa{display:block}
  .cabecera h1{font-size:1.32rem}
}
@media (max-width:620px){
  body{font-size:14.5px}
  .fila,.fila-3,.fila-4{grid-template-columns:1fr;gap:12px}
  .tarjetas{grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:11px}
  .tj{padding:15px}
  .tj .val{font-size:1.65rem}
  .panel{padding:17px 15px}
  .hoja-cuerpo{padding:16px 15px 36px}
  .hoja-top{padding:15px 16px}
  .acciones .b{flex:1;justify-content:center}
}

@media print{
  .lateral,.hamburguesa,.acciones,.filtros,#brindis{display:none !important}
  .contenido{margin:0;padding:0}
  body{background:#fff}
  .panel{box-shadow:none;border:1px solid var(--linea)}
}