/* VERSION-ESTILO: azul-oro-2 · si ves esta linea en el codigo fuente
   de tu sitio (Ctrl+U y busca "VERSION-ESTILO"), el archivo correcto
   ya esta subido al servidor. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Figtree:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* =========================================================
   PALETA — extraída del logo de Rifas y Sorteos A Lo Seguro.
   Azul marino #062545, azul medio #0F577F, oro #D0AA64.
   Cambiando estas variables cambia el sitio entero.
   ========================================================= */
:root{
  /* Azules de la marca */
  --marino:#062545;
  --marino-2:#0E3A63;
  --azul:#0F577F;
  --azul-2:#1A6F9E;
  --azul-cl:#E9F1F8;
  --azul-linea:#C9DCEA;

  /* Oro de la marca */
  --oro:#D0AA64;        /* el del logo: úsalo sobre azul oscuro */
  --oro-med:#B08D3F;    /* bordes y detalles sobre claro */
  --oro-osc:#8A6C2C;    /* texto dorado legible sobre blanco */
  --oro-brillo:#F0DCA8;
  --oro-tenue:rgba(176,141,63,.11);
  --oro-linea:rgba(176,141,63,.32);

  /* Claros */
  --fondo:#F4F7FA;
  --blanco:#FFFFFF;
  --texto:#0E2136;
  --gris:#57677A;
  --gris-cl:#8794A4;
  --linea:#DEE6EE;

  /* Estados */
  --verde:#1F6B4C;
  --verde-cl:#E4F2EB;
  --rojo:#9E2B2B;
  --rojo-cl:#FAE9E9;
  --ambar:#8A6C2C;
  --ambar-cl:#FBF3E2;

  --r:5px;
  --display:'Fraunces',Georgia,serif;
  --cuerpo:'Figtree',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fondo);color:var(--texto);
  font-family:var(--cuerpo);font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--azul)}

h1,h2{font-family:var(--display);font-weight:600;line-height:1.16;letter-spacing:-.015em;margin:0 0 .45em;color:var(--marino)}
h1{font-size:clamp(31px,6vw,54px)}
h2{font-size:clamp(23px,3.6vw,32px)}
h3{font-family:var(--cuerpo);font-weight:600;font-size:19px;letter-spacing:.01em;margin:0 0 .5em;color:var(--marino)}
.display{font-family:var(--display);font-weight:600}
.sub{color:var(--gris);margin-top:-.3em;font-weight:400}
.mono{font-family:var(--mono)}
.env{max-width:1120px;margin:0 auto;padding:0 20px}
.centro{text-align:center}
.apilar>*+*{margin-top:14px}

/* ---------- Encabezado ---------- */
/* Todo el conjunto (franja + barra + franja) se pega junto al hacer
   scroll, como una sola pieza. El logo se desborda de la barra negra
   hacia las franjas azules, PERO el desbordamiento se queda siempre
   adentro de esas franjas — nunca más allá del borde exterior de
   .enc-pegado. Así, aunque el logo "sobresalga" visualmente de la
   barra, nunca hay riesgo de que el navegador lo corte al hacer
   scroll (que es lo que pasaba si se salía de la pieza pegajosa
   misma, no nada más de la barra negra).
*/
.enc-pegado{position:sticky;top:0;z-index:40}

.franja-sup,.franja-inf{height:14px;background:linear-gradient(90deg,var(--marino-2),var(--azul) 50%,var(--marino-2))}
.franja-sup{border-bottom:1px solid var(--oro-linea)}
.franja-inf{border-top:1px solid var(--oro-linea)}

.enc{background:#12151B}   /* casi negro, distinto del marino, para que el logo resalte encima */
/* row-gap en 0: las dos mitades del menú se pegan una a otra al
   abrirse en móvil, así se ven como una sola lista y no como dos
   bloques separados por un hueco. */
.enc-in{display:flex;align-items:center;column-gap:14px;row-gap:0;padding:8px 16px;flex-wrap:wrap;position:relative}

.marca{
  text-decoration:none;display:flex;align-items:center;gap:14px;
  position:relative;z-index:2;order:1;
}
.marca img{
  height:76px;width:auto;margin:-15px 0;   /* la barra queda en ~62px, así el logo sobresale 7px por lado hacia las franjas de 14px */
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
}
.marca-txt{
  font-family:var(--display);font-weight:600;font-size:23px;
  color:var(--oro);white-space:nowrap;
}

.nav-mitad{display:flex;flex-wrap:wrap;gap:0}
.nav-izq{order:3;width:100%}
.nav-der{order:4;width:100%}
.enc nav a{
  color:#D7DEE6;text-decoration:none;font-size:14.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:15px 4px;border-radius:var(--r);
  transition:color .18s,background .18s;position:relative;width:100%;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.enc nav a:hover{color:var(--oro);background:rgba(255,255,255,.06)}
.enc nav a::after{
  content:'';position:absolute;left:8px;right:8px;bottom:6px;height:2px;
  background:var(--oro);transform:scaleX(0);transition:transform .18s;transform-origin:left;
}
.enc nav a:hover::after{transform:scaleX(1)}
/* La última opción de la lista no lleva línea abajo */
.nav-der a:last-child{border-bottom:0}

/* En móvil, el menú entero (las dos mitades) se oculta detrás del
   botón de hamburguesa y se abre como una sola lista continua. */
.nav-mitad{max-height:0;overflow:hidden;transition:max-height .24s ease}
.nav-izq.abierto{max-height:140px;margin-top:8px}
.nav-der.abierto{max-height:140px}

.menu-btn{
  order:2;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;
}
.menu-btn span{width:24px;height:2px;background:#D7DEE6;display:block}

/* ---------- A partir de aquí, pantallas de escritorio ----------
   El logo se centra de verdad (no aproximado): dos columnas iguales
   a los lados lo mantienen exacto sin importar si un lado tiene
   texto más largo que el otro. Las franjas azules crecen para poder
   contener un desbordamiento mucho más grande y dramático. */
@media(min-width:861px){
  .franja-sup,.franja-inf{height:36px}

  .enc-in{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    column-gap:18px;height:110px;padding:0;flex-wrap:nowrap;
  }
  .nav-izq{order:1}
  .marca{order:2}
  .nav-der{order:3}
  .marca img{height:162px;margin:-26px 0}   /* se sale de la barra, pero cabe en las franjas de 36px */
  .marca{justify-self:center}
  .nav-izq{justify-self:end}
  .nav-der{justify-self:start}
  .nav-mitad{max-height:none;overflow:visible;width:auto;gap:6px;margin-top:0}
  .enc nav a{width:auto;padding:13px 18px;font-size:15px;border-bottom:0}
  .menu-btn{display:none}
}

/* ---------- Portada ---------- */
.portada{
  padding:66px 0 74px;border-bottom:1px solid var(--oro-linea);
  background:
    radial-gradient(110% 85% at 50% 0%, var(--marino-2), var(--marino) 62%);
  position:relative;overflow:hidden;
}
.portada::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--oro) 25%,var(--oro) 75%,transparent);
  z-index:2;
}
/* Un resplandor dorado que gira muy despacio de fondo, como el haz
   de un reflector — apenas perceptible, solo le da vida al azul. */
.portada::before{
  content:'';position:absolute;top:-60%;left:50%;width:140%;aspect-ratio:1;
  transform:translateX(-50%);
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(208,170,100,.16) 15deg, transparent 45deg,
    transparent 180deg, rgba(208,170,100,.1) 195deg, transparent 230deg,
    transparent 360deg);
  animation:girar-resplandor 26s linear infinite;
  pointer-events:none;z-index:0;
}
@keyframes girar-resplandor{to{transform:translateX(-50%) rotate(360deg)}}

.portada h1{
  max-width:15ch;position:relative;z-index:1;
  background:
    linear-gradient(175deg,var(--oro-brillo) 4%,var(--oro) 48%,#9C7B33 98%),
    linear-gradient(115deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%);
  background-size:100% 100%, 220% 100%;
  background-position:0 0, -220% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:brillo-titulo 5.5s ease-in-out infinite;
  animation-delay:1s;
}
@keyframes brillo-titulo{
  0%{background-position:0 0, -220% 0}
  35%{background-position:0 0, 220% 0}
  100%{background-position:0 0, 220% 0}
}
.portada .sub{color:#AFC2D4;font-size:17.5px;max-width:50ch;margin-top:4px;position:relative;z-index:1}
.portada .eyebrow{color:var(--oro);position:relative;z-index:1}

/* Chispas doradas que suben lentamente, como polvo de estrellas —
   puramente decorativas, se ocultan a lectores de pantalla. */
.destellos{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.destellos span{
  position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;
  background:var(--oro-brillo);
  box-shadow:0 0 6px 1px rgba(240,220,168,.9);
  opacity:0;animation:subir-destello linear infinite;
}
@keyframes subir-destello{
  0%{opacity:0;transform:translateY(0) scale(.6)}
  12%{opacity:.9}
  85%{opacity:.5}
  100%{opacity:0;transform:translateY(-260px) scale(1)}
}
.destellos span:nth-child(1){left:6%;animation-duration:9s;animation-delay:.2s}
.destellos span:nth-child(2){left:16%;animation-duration:12s;animation-delay:3.5s;width:3px;height:3px}
.destellos span:nth-child(3){left:27%;animation-duration:8s;animation-delay:1.8s}
.destellos span:nth-child(4){left:39%;animation-duration:14s;animation-delay:5s;width:5px;height:5px}
.destellos span:nth-child(5){left:52%;animation-duration:10s;animation-delay:.6s;width:3px;height:3px}
.destellos span:nth-child(6){left:64%;animation-duration:11s;animation-delay:4.2s}
.destellos span:nth-child(7){left:74%;animation-duration:9.5s;animation-delay:2.6s;width:5px;height:5px}
.destellos span:nth-child(8){left:83%;animation-duration:13s;animation-delay:6s;width:3px;height:3px}
.destellos span:nth-child(9){left:92%;animation-duration:10.5s;animation-delay:1.2s}
.destellos span:nth-child(10){left:47%;animation-duration:15s;animation-delay:7.5s;width:3px;height:3px}

@media(max-width:640px){
  /* En celular, un poco menos denso y menos giro: se siente vivo sin
     distraer en una pantalla chica. */
  .portada::before{animation-duration:34s}
  .destellos span:nth-child(9),.destellos span:nth-child(10){display:none}
}

/* ---------- Etiqueta de sección ---------- */
.eyebrow{
  font-family:var(--cuerpo);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oro-osc);margin:0 0 10px;font-weight:700;
}

/* ---------- Tarjetas de rifa ---------- */
.rejilla{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
/* Cuando hay pocas rifas reales, centramos en vez de dejarlas
   perdidas en una cuadrícula ancha y vacía. */
.rejilla-pocas{display:flex;flex-wrap:wrap;justify-content:center}
.rejilla-pocas .tarjeta{flex:1 1 320px;max-width:360px}

.tarjeta{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 1px 3px rgba(6,37,69,.05);transition:box-shadow .22s,border-color .22s;
}
.tarjeta:hover{border-color:var(--oro-linea);box-shadow:0 6px 22px rgba(6,37,69,.10)}
.tarjeta .foto{
  aspect-ratio:16/10;background:var(--azul-cl) center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;position:relative;
  color:var(--gris-cl);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid var(--linea);
}
.tarjeta .cuerpo{padding:22px;display:flex;flex-direction:column;gap:13px;flex:1}
.tarjeta h3{margin:0;font-size:19px}
.precio{font-family:var(--mono);font-weight:600;font-size:23px;color:var(--oro-osc);letter-spacing:-.01em}
.precio small{font-family:var(--cuerpo);font-weight:600;font-size:13px;color:var(--gris);
  letter-spacing:.03em;text-transform:uppercase;margin-left:6px}

/* Insignia "en vivo" sobre la foto, con un punto que pulsa */
.insignia-vivo{
  position:absolute;top:10px;left:10px;z-index:1;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(6,37,69,.86);backdrop-filter:blur(2px);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.02em;
  padding:6px 10px 6px 8px;border-radius:99px;
}
.insignia-vivo i{
  width:7px;height:7px;border-radius:50%;background:#4FD87A;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(79,216,122,.6);animation:pulso-vivo 1.8s ease-out infinite;
}
@keyframes pulso-vivo{
  0%{box-shadow:0 0 0 0 rgba(79,216,122,.55)}
  70%{box-shadow:0 0 0 7px rgba(79,216,122,0)}
  100%{box-shadow:0 0 0 0 rgba(79,216,122,0)}
}

/* Tarjeta "próximamente": llena el espacio sin fingir una rifa real */
.tarjeta-proximamente{
  background:transparent;border:1.5px dashed var(--linea);box-shadow:none;
}
.tarjeta-proximamente:hover{border-color:var(--oro-linea);box-shadow:none}
.proximamente-cuerpo{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:8px;padding:40px 26px;color:var(--gris);
}
.proximamente-icono{
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--azul-cl);color:var(--azul);margin-bottom:6px;
}
.tarjeta-proximamente h3{color:var(--gris);font-size:17px}

/* ---------- Barra de avance ---------- */
.avance{background:var(--azul-linea);border-radius:99px;height:6px;overflow:hidden}
.avance i{display:block;height:100%;background:linear-gradient(90deg,var(--azul),var(--azul-2));border-radius:99px}
.avance-txt{display:flex;justify-content:space-between;font-size:13px;font-weight:500;color:var(--gris);
  font-family:var(--mono);letter-spacing:.06em;margin-top:7px}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(175deg,var(--azul-2),var(--azul) 55%,#0B4260);
  color:#fff;border:0;border-radius:var(--r);
  padding:14px 28px;font-family:var(--cuerpo);font-weight:700;font-size:14.5px;
  letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;transition:filter .18s;
}
.btn:hover{filter:brightness(1.12)}
.btn:disabled,.btn[aria-disabled=true]{background:#B9C4D0;color:#fff;cursor:not-allowed;filter:none}
.btn-grande{width:100%;padding:18px;font-size:16px}
.btn-oro{background:linear-gradient(175deg,var(--oro-brillo),var(--oro) 52%,#A9843A);color:#231B08}
.btn-linea{background:none;color:var(--azul);border:1.5px solid var(--azul-linea)}
.btn-linea:hover{background:var(--azul-cl);filter:none}
.btn-tinta{background:var(--marino)}
.btn-verde{background:var(--verde)}
.btn-rojo{background:var(--rojo)}
.btn-chico{padding:9px 16px;font-size:13px;letter-spacing:.03em}
.btn:focus-visible,a:focus-visible,input:focus-visible,button:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--oro-med);outline-offset:3px}

/* ---------- Boleto (elemento firma) ---------- */
.boleto{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:600;font-size:16px;letter-spacing:.06em;
  background:var(--blanco);border:1.5px solid var(--azul-linea);color:var(--marino);
  border-radius:3px;padding:11px 15px;min-width:80px;cursor:pointer;user-select:none;
  transition:.15s;
}
.boleto::before,.boleto::after{
  content:'';position:absolute;top:50%;width:7px;height:7px;border-radius:50%;
  background:var(--fondo);border:1.5px solid var(--azul-linea);transform:translateY(-50%);
}
.boleto::before{left:-4.5px}
.boleto::after{right:-4.5px}
.boleto:hover:not(.ocupado):not(.fijo){border-color:var(--oro-med);color:var(--azul)}
.boleto.sel{background:linear-gradient(175deg,var(--oro-brillo),var(--oro));border-color:var(--oro-med);color:#231B08;font-weight:600}
.boleto.sel::before,.boleto.sel::after{border-color:var(--oro-med);background:var(--fondo)}
.boleto.ocupado{background:#EEF2F6;border-color:var(--linea);color:var(--gris-cl);
  cursor:not-allowed;text-decoration:line-through}
.boleto.ocupado::before,.boleto.ocupado::after{border-color:var(--linea)}
.boleto.fijo{cursor:default}
.boletos-caja{display:flex;flex-wrap:wrap;gap:12px 16px}

/* ---------- Sello de estado ---------- */
.sello{
  display:inline-block;font-family:var(--cuerpo);font-weight:700;text-transform:uppercase;
  font-size:13px;letter-spacing:.07em;padding:9px 17px;border:2px solid currentColor;
  border-radius:2px;
}
.sello-espera{color:var(--oro-osc);background:var(--ambar-cl)}
.sello-revision{color:var(--azul);background:var(--azul-cl)}
.sello-pagada{color:var(--verde);background:var(--verde-cl)}
.sello-mala{color:var(--rojo);background:var(--rojo-cl)}

/* ---------- Paneles ---------- */
.panel{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:28px;
  box-shadow:0 1px 3px rgba(6,37,69,.04)}
.panel+.panel{margin-top:22px}
.panel h2,.panel h3{margin-top:0}
.seccion{padding:56px 0}

/* ---------- Recibo: el único elemento oscuro del sitio ---------- */
.recibo{
  background:radial-gradient(120% 100% at 50% 0%, var(--marino-2), var(--marino) 68%);
  color:#DCE7F2;border:1px solid var(--oro-med);border-radius:var(--r);padding:32px;
  box-shadow:0 8px 34px rgba(6,37,69,.18);
}
.recibo .eyebrow{color:var(--oro)}
.recibo .pista{color:#9DB2C6}
.recibo dl{display:grid;grid-template-columns:auto 1fr;gap:14px 22px;margin:0;
  border-top:1px solid rgba(208,170,100,.3);padding-top:22px}
.recibo dt{color:#AFC2D4;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;align-self:center}
.recibo dd{margin:0;font-family:var(--mono);font-weight:600;font-size:16.5px;word-break:break-all;align-self:center;color:#fff}
.monto-grande{
  font-family:var(--mono);font-weight:600;font-size:clamp(38px,9vw,56px);
  color:var(--oro-brillo);line-height:1;letter-spacing:-.03em;margin:8px 0 16px;
}
.monto-grande b{
  background:linear-gradient(175deg,var(--oro-brillo),var(--oro));
  padding:2px 9px;border-radius:3px;color:#231B08;
}

/* ---------- Formularios ---------- */
.form{display:flex;flex-direction:column;gap:18px}
label{display:block;font-weight:700;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--gris)}
input,select,textarea{
  width:100%;margin-top:8px;padding:13px 15px;
  border:1.5px solid var(--linea);border-radius:var(--r);
  font-family:var(--cuerpo);font-size:16.5px;font-weight:500;
  background:var(--blanco);color:var(--texto);
  letter-spacing:0;text-transform:none;transition:border-color .18s;
}
input:focus,select:focus,textarea:focus{border-color:var(--azul)}
input[type=file]{padding:11px;font-size:14px}
textarea{min-height:100px;resize:vertical;line-height:1.6}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.fila-2{grid-template-columns:1fr}}
.pista{font-size:14px;color:var(--gris);font-weight:400;letter-spacing:0;text-transform:none;display:block;margin-top:6px}

/* ---------- Avisos ---------- */
.aviso{border-radius:var(--r);padding:18px 22px;border-left:3px solid;margin:0 0 20px;font-size:15.5px}
.aviso p:first-child{margin-top:0}.aviso p:last-child{margin-bottom:0}
.aviso-ok{background:var(--verde-cl);border-color:var(--verde);color:#164A34}
.aviso-mal{background:var(--rojo-cl);border-color:var(--rojo);color:#6E1F1F}
.aviso-ojo{background:var(--ambar-cl);border-color:var(--oro-med);color:#5C4718}
.aviso-info{background:var(--azul-cl);border-color:var(--azul);color:#0B3A55}
.aviso strong{font-weight:600}

/* ---------- Modal de confirmación (reemplaza confirm() del navegador) ---------- */
.modal-fondo{
  position:fixed;inset:0;background:rgba(6,37,69,.55);z-index:80;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal-caja{
  background:var(--blanco);border-radius:var(--r);border-top:4px solid var(--oro);
  padding:26px 24px;max-width:400px;width:100%;box-shadow:0 14px 44px rgba(0,0,0,.28);
}
.modal-caja p{margin:0 0 20px;font-size:16px;line-height:1.55;color:#2A2721}
.modal-botones{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.modal-botones .btn{margin:0}
@media(max-width:480px){
  .modal-botones{flex-direction:column-reverse}
  .modal-botones .btn{width:100%;text-align:center}
}

/* Campo trampa anti-bot: fuera de pantalla mediante posición, no con
   display:none ni visibility:hidden — algunos bots detectan y saltan esos
   dos trucos específicamente. Con esto, una persona nunca lo ve ni con
   teclado (tabindex -1) ni con lector de pantalla (aria-hidden). */
.trampa{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Selector de boletos ---------- */
.tabs{display:flex;gap:2px;border-bottom:2px solid var(--linea);margin-bottom:24px;flex-wrap:wrap}
.tabs button{
  background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-2px;
  padding:13px 18px;font-family:var(--cuerpo);font-weight:700;font-size:14px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--gris);cursor:pointer;transition:.18s;
}
.tabs button:hover{color:var(--marino)}
.tabs button[aria-selected=true]{color:var(--azul);border-bottom-color:var(--oro)}
.oculto{display:none}
.paginas{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.paginas button{
  font-family:var(--mono);font-size:13px;font-weight:500;padding:7px 12px;border:1px solid var(--linea);
  background:var(--blanco);border-radius:3px;cursor:pointer;color:var(--gris);transition:.15s;
}
.paginas button:hover{border-color:var(--oro-linea);color:var(--azul)}
.paginas button[aria-current=true]{background:var(--marino);color:#fff;border-color:var(--marino)}

/* ---------- Carrito flotante ---------- */
.carrito{
  position:sticky;bottom:0;background:var(--marino);
  border-top:3px solid var(--oro);
  padding:18px 24px;border-radius:var(--r) var(--r) 0 0;margin-top:26px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;z-index:30;
  box-shadow:0 -6px 24px rgba(6,37,69,.16);
}
.carrito .info{flex:1;min-width:160px}
.carrito .info b{font-family:var(--mono);font-size:25px;font-weight:600;display:block;color:var(--oro-brillo)}
.carrito .info span{font-size:13.5px;font-weight:600;color:#B6C8DA;letter-spacing:.03em;text-transform:uppercase}

/* ---------- Tablas ---------- */
.tabla-env{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:15.5px}
th,td{text-align:left;padding:14px;border-bottom:1px solid var(--linea);vertical-align:middle}
th{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--gris);font-weight:700;white-space:nowrap}
tbody tr:hover{background:#F7FAFC}
td .mono{font-size:13.5px}

/* ---------- Etiquetas de estado ---------- */
.tag{display:inline-block;font-family:var(--cuerpo);font-size:12px;font-weight:700;
  padding:5px 11px;border-radius:3px;white-space:nowrap;letter-spacing:.03em;text-transform:uppercase;
  border:1px solid}
.tag-apartada,.tag-pausada{background:var(--ambar-cl);color:var(--ambar);border-color:#DFC98F}
.tag-reportada,.tag-sorteada{background:var(--azul-cl);color:var(--azul);border-color:var(--azul-linea)}
.tag-pagada,.tag-activa{background:var(--verde-cl);color:var(--verde);border-color:#A6CFBB}
.tag-rechazada,.tag-cancelada{background:var(--rojo-cl);color:var(--rojo);border-color:#DDAEAE}
.tag-vencida,.tag-borrador{background:#EEF2F6;color:var(--gris);border-color:var(--linea)}

/* =========================================================
   PANEL DE ADMIN
   ========================================================= */
.adm{display:grid;grid-template-columns:236px 1fr;min-height:100vh;background:var(--fondo)}
.adm-lat{background:var(--marino);color:#DCE7F2;padding:24px 16px;border-right:3px solid var(--oro)}
.adm-lat .marca{font-size:17px;display:flex;margin-bottom:26px}
.adm-lat .marca img{height:48px}
.adm-lat a{display:block;color:#B4C6D8;text-decoration:none;padding:11px 14px;
  border-radius:var(--r);font-size:13.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;transition:.16s}
.adm-lat a:hover{color:var(--oro);background:rgba(255,255,255,.07)}
.adm-lat a.on{background:var(--oro);color:#231B08;font-weight:600}
.adm-lat hr{border:0;border-top:1px solid rgba(255,255,255,.14);margin:20px 0}
.adm-main{padding:34px 30px;min-width:0}

.kpis{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-bottom:26px}
.kpi{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:20px}
.kpi b{display:block;font-family:var(--mono);font-size:29px;font-weight:600;line-height:1.15;color:var(--marino)}
.kpi span{font-size:12.5px;font-weight:600;color:var(--gris);text-transform:uppercase;letter-spacing:.03em}
.kpi.alerta{border-color:var(--oro-med);border-width:2px}
.kpi.alerta b{color:var(--oro-osc)}
.barra-acc{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.barra-acc .der{margin-left:auto}

/* En pantallas angostas, .tabs (pestañas de estado en admin/órdenes y el
   selector de boletos en la rifa) no cabía en una fila y se apilaba en
   varias filas pegadas sin espacio. Aquí pasa a una sola fila con scroll
   horizontal, como en la mayoría de apps. Los campos de la barra de
   filtros también pasan a ancho completo en vez de sus max-width fijos
   (pensados para escritorio, se veían chicos y descuadrados en celular). */
@media(max-width:640px){
  .tabs{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;gap:4px;
    scrollbar-width:none;-ms-overflow-style:none;
    touch-action:pan-x;overscroll-behavior-x:contain;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{
    flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;
    padding:12px 14px;font-size:13px;
  }
  .barra-acc input,.barra-acc select{max-width:none!important;width:100%}
  .barra-acc button{width:100%}
}

/* Barra superior y pestañas de abajo: solo existen visualmente en
   móvil. En escritorio no ocupan espacio ni se ven. */
.adm-top-movil,.adm-tabs-movil{display:none}

@media(max-width:860px){
  /* En móvil, el sidebar de escritorio desaparece por completo:
     lo reemplazan la barra de arriba y las pestañas de abajo. */
  .adm{grid-template-columns:1fr;display:block}
  .adm-lat{display:none}

  .adm-top-movil{
    display:flex;align-items:center;gap:10px;
    position:sticky;top:0;z-index:45;
    background:var(--marino);border-bottom:3px solid var(--oro);
    padding:10px 16px;
  }
  .adm-top-logo{display:flex;align-items:center;gap:9px;text-decoration:none;min-width:0}
  .adm-top-logo img{height:34px;width:auto;flex:0 0 auto}
  .adm-top-logo span{
    color:var(--oro);font-family:var(--display);font-weight:600;font-size:14.5px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .adm-top-mas{
    margin-left:auto;background:none;border:0;color:#DCE7F2;padding:8px;
    cursor:pointer;flex:0 0 auto;border-radius:8px;
  }
  .adm-top-mas:active{background:rgba(255,255,255,.1)}
  .adm-top-menu{
    display:none;position:absolute;top:54px;right:16px;z-index:46;
    background:#fff;border:1px solid var(--linea);border-radius:var(--r);
    box-shadow:0 10px 30px rgba(0,0,0,.18);padding:8px;min-width:200px;
  }
  .adm-top-menu.abierto{display:block}
  .adm-top-usuario{
    display:block;padding:8px 12px;font-size:12px;color:var(--gris);
    text-transform:uppercase;letter-spacing:.04em;font-weight:600;
    border-bottom:1px solid var(--linea);margin-bottom:6px;
  }
  .adm-top-menu a{
    display:block;padding:10px 12px;border-radius:6px;color:#2A2721;
    text-decoration:none;font-size:14.5px;font-weight:500;
  }
  .adm-top-menu a:hover{background:var(--fondo)}

  .adm-tabs-movil{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;
    background:#fff;border-top:1px solid var(--linea);
    box-shadow:0 -4px 18px rgba(0,0,0,.08);
    padding-bottom:env(safe-area-inset-bottom, 0);
  }
  .adm-tabs-movil a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:9px 4px 8px;color:var(--gris);text-decoration:none;
    font-size:10.5px;font-weight:600;letter-spacing:.01em;
  }
  .adm-tabs-movil a.on{color:var(--oro-osc)}
  .adm-tab-icono{position:relative;display:inline-flex}
  .adm-tab-badge{
    position:absolute;top:-6px;right:-9px;background:var(--rojo);color:#fff;
    font-size:9.5px;font-weight:700;font-style:normal;line-height:1;
    padding:3px 4.5px;border-radius:99px;min-width:15px;text-align:center;
    border:2px solid #fff;
  }

  .adm-main{padding:18px 16px calc(84px + env(safe-area-inset-bottom, 0))}
}

/* ---------- Páginas simples (login, instalador) ---------- */
.pg-simple{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;
  background:radial-gradient(100% 80% at 50% 0%, var(--marino-2), var(--marino) 70%)}
.caja-centro{background:var(--blanco);border-top:4px solid var(--oro);border-radius:var(--r);
  padding:40px;max-width:440px;width:100%;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.caja-centro h1{font-size:30px}

/* ---------- Preguntas frecuentes ---------- */
.faq-item{border-bottom:1px solid var(--linea);padding:6px 0}
.faq-item:last-child{border-bottom:0}
.faq-item summary{
  padding:16px 4px;font-weight:600;font-size:16.5px;color:var(--marino);
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{
  content:'+';flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--azul-cl);color:var(--azul);font-size:17px;font-weight:700;
  display:flex;align-items:center;justify-content:center;transition:transform .18s;
}
.faq-item[open] summary::before{content:'–';background:var(--oro);color:#231B08}
.faq-item p{margin:0 0 18px 38px;color:var(--gris);font-size:15.5px}

/* ---------- Pie ---------- */
.pie{background:var(--marino);color:#93A8BD;padding:44px 0 40px;margin-top:70px;
  font-size:13.5px;border-top:3px solid var(--oro)}
.pie a{color:#B4C6D8;text-decoration:none}
.pie a:hover{color:var(--oro)}
.pie strong{color:var(--oro);font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:.02em}
.pie .env>*+*{margin-top:10px}
.pie-social{display:flex;gap:14px}
.pie-social a{
  color:#B4C6D8;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  transition:color .18s,border-color .18s,background .18s;
}
.pie-social a:hover{color:#fff;border-color:var(--oro);background:rgba(255,255,255,.06)}

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-flotante{
  position:fixed;right:22px;bottom:22px;z-index:50;
  width:60px;height:60px;border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,.55);
  text-decoration:none;transition:transform .18s,bottom .22s;
  animation:wa-pulso 2.4s ease-out infinite;
}
.wa-flotante:hover{transform:scale(1.07)}

@keyframes wa-pulso{
  0%   {box-shadow:0 6px 20px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,.5)}
  70%  {box-shadow:0 6px 20px rgba(0,0,0,.28), 0 0 0 14px rgba(37,211,102,0)}
  100% {box-shadow:0 6px 20px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,0)}
}

.wa-flotante-globo{
  position:absolute;right:72px;top:50%;transform:translateY(-50%);
  background:#fff;color:#1A1814;font-family:var(--cuerpo);font-weight:600;font-size:14px;
  padding:9px 14px;border-radius:8px;white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
}
.wa-flotante-globo::after{
  content:'';position:absolute;left:100%;top:50%;transform:translateY(-50%);
  border:7px solid transparent;border-left-color:#fff;
}
.wa-flotante:hover .wa-flotante-globo{opacity:1;transform:translateY(-50%) translateX(-4px)}

@media(max-width:640px){
  .wa-flotante{width:54px;height:54px;right:16px;bottom:16px}
  .wa-flotante.wa-arriba{bottom:88px}
  .wa-flotante-globo{display:none}  /* en celular no hay hover; el botón solo ya es claro */
}

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