/* TomaLaCima — sala del trono: terciopelo vino, oro y crema. */
:root{
  --terciopelo:#260b12;
  --terciopelo-2:#3a121c;
  --terciopelo-3:#4d1a26;
  --oro:#e9b44c;
  --oro-claro:#ffd88a;
  --crema:#f7ecd6;
  --rosa-apagado:#c79aa0;
  --linea:rgba(247,236,214,.14);
  --exito:#7fd6a4;
  --alerta:#ff8a7a;
  --f-titulo:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --f-texto:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-dato:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--terciopelo);color:var(--crema);font-family:var(--f-texto);font-size:15px;line-height:1.5;
  background-image:radial-gradient(1200px 600px at 70% -10%,rgba(233,180,76,.16),transparent 60%),radial-gradient(900px 500px at -10% 30%,rgba(120,20,40,.5),transparent 60%);
  background-attachment:fixed;min-height:100vh}
[hidden]{display:none!important}
.envoltura{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 48px}
button{font:inherit;cursor:pointer}
a{color:var(--oro-claro)}
:focus-visible{outline:2px solid var(--oro-claro);outline-offset:2px}

.aviso-prueba{background:var(--oro);color:var(--terciopelo);font-weight:600;font-size:13px;text-align:center;padding-block:6px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

header.barra{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:18px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:10px;font-family:var(--f-titulo);font-weight:900;font-size:30px;letter-spacing:.04em;text-transform:uppercase;color:var(--crema);text-decoration:none}
.marca svg{width:34px;height:34px}
.en-vivo{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--linea);border-radius:999px;padding:6px 12px}
.en-vivo i{width:8px;height:8px;border-radius:50%;background:var(--alerta);animation:latido 1.6s infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(255,138,122,.7)}70%{box-shadow:0 0 0 9px rgba(255,138,122,0)}100%{box-shadow:0 0 0 0 rgba(255,138,122,0)}}

.escenario{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;margin-top:8px}
@media (max-width:820px){.escenario{grid-template-columns:1fr}}
.trono{position:relative;border:1px solid rgba(233,180,76,.45);border-radius:18px;padding:28px;background:linear-gradient(160deg,var(--terciopelo-3),var(--terciopelo-2) 60%);overflow:hidden;min-width:0}
.trono::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,216,138,.025) 22px 23px);pointer-events:none}
@media (max-width:480px){.trono,.puja{padding:20px}}
.etiqueta{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--oro)}
.rey{display:flex;gap:20px;align-items:center;margin-top:38px;flex-wrap:wrap}
.avatar{flex:none;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-titulo);font-weight:900;font-size:44px;color:var(--terciopelo);border:4px solid var(--oro);box-shadow:0 0 0 6px rgba(233,180,76,.18),0 10px 40px rgba(233,180,76,.25);position:relative;background:var(--oro)}
.avatar .corona{position:absolute;top:-30px;left:50%;transform:translateX(-50%) rotate(-8deg);width:52px}
.datos-rey{min-width:0;flex:1}
.nombre-rey{font-family:var(--f-titulo);font-weight:900;font-size:clamp(34px,6vw,56px);line-height:.95;text-transform:uppercase;margin:0;overflow-wrap:anywhere;text-wrap:balance}
.usuario-rey{color:var(--rosa-apagado);font-weight:500;margin-top:6px;overflow-wrap:anywhere}
.mensaje-rey{margin:18px 0 0;font-size:19px;line-height:1.4;max-width:46ch;overflow-wrap:anywhere;position:relative}
.mensaje-rey.cita::before{content:"“";color:var(--oro)}
.mensaje-rey.cita::after{content:"”";color:var(--oro)}
.acciones-rey{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;position:relative;z-index:1}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linea);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--crema);text-decoration:none;background:rgba(0,0,0,.15);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip:hover{border-color:var(--oro)}
.reloj{display:flex;gap:18px 26px;flex-wrap:wrap;margin-top:24px;padding-top:18px;border-top:1px solid var(--linea)}
.reloj b{display:block;font-family:var(--f-dato);font-size:22px;font-variant-numeric:tabular-nums}
.reloj span{font-size:12px;color:var(--rosa-apagado);text-transform:uppercase;letter-spacing:.1em}

.puja{border:1px solid var(--linea);border-radius:18px;padding:26px;background:rgba(0,0,0,.22);display:flex;flex-direction:column;gap:14px;min-width:0}
.precio{font-family:var(--f-titulo);font-weight:900;font-size:clamp(72px,12vw,120px);line-height:.85;color:var(--oro-claro);font-variant-numeric:tabular-nums;text-shadow:0 4px 30px rgba(233,180,76,.35)}
.precio small{font-size:.45em;vertical-align:top;margin-right:4px}
.explica{color:var(--rosa-apagado);margin:0}
.btn-oro{border:0;border-radius:12px;padding:16px 20px;background:linear-gradient(180deg,var(--oro-claro),var(--oro));color:var(--terciopelo);font-family:var(--f-titulo);font-weight:900;font-size:26px;text-transform:uppercase;letter-spacing:.03em;box-shadow:0 8px 30px rgba(233,180,76,.35),inset 0 -3px 0 rgba(0,0,0,.18);transition:transform .15s}
.btn-oro:hover{transform:translateY(-2px)}
.btn-oro.chico{font-size:20px;padding:12px 18px}
.btn-oro:disabled{opacity:.6;cursor:wait;transform:none}
.subidas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.subidas button{border:1px solid var(--linea);background:transparent;color:var(--crema);border-radius:10px;padding:10px 6px;font-size:14px}
.subidas button:hover{border-color:var(--oro);color:var(--oro-claro)}
.subidas small{display:block;color:var(--rosa-apagado);font-size:11px}
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--linea)}
.cifras b{display:block;font-family:var(--f-dato);font-size:17px;font-variant-numeric:tabular-nums}
.cifras span{font-size:11px;color:var(--rosa-apagado);text-transform:uppercase;letter-spacing:.08em}

.cinta{margin-top:20px;border-block:1px solid var(--linea);overflow:hidden;white-space:nowrap;padding-block:10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cinta-pista{display:inline-flex;gap:40px;animation:desliza 40s linear infinite;font-size:14px;color:var(--rosa-apagado)}
.cinta-pista b{color:var(--crema)}
.cinta-pista em{font-style:normal;color:var(--oro-claro);font-family:var(--f-dato)}
@keyframes desliza{to{transform:translateX(-50%)}}

.secciones{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
@media (max-width:820px){.secciones{grid-template-columns:1fr}}
.seccion{min-width:0}
.seccion h2{font-family:var(--f-titulo);font-weight:900;font-size:32px;text-transform:uppercase;margin:0 0 4px;letter-spacing:.02em}
.seccion > p{margin:0 0 14px;color:var(--rosa-apagado)}
.lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lista li{display:grid;grid-template-columns:40px 36px 1fr auto;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--linea)}
.lista li > div{min-width:0}
.lista .vacio{display:block;color:var(--rosa-apagado);padding:14px 4px}
.pos{font-family:var(--f-titulo);font-weight:900;font-size:24px;color:var(--rosa-apagado);text-align:center}
.lista li:first-child .pos{color:var(--oro)}
.mini{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-titulo);font-weight:900;font-size:16px;color:var(--terciopelo)}
.lista .n{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista .s{font-size:12px;color:var(--rosa-apagado);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.monto{font-family:var(--f-dato);font-variant-numeric:tabular-nums;text-align:right}
.tuyo{background:rgba(233,180,76,.08)}
.marca-tu{font-size:10px;font-weight:700;background:var(--oro);color:var(--terciopelo);border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:2px;font-family:var(--f-texto);letter-spacing:0}

.reglas{margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:1px solid var(--linea);padding-top:20px}
@media (max-width:720px){.reglas{grid-template-columns:1fr}}
.reglas h3{font-size:14px;margin:0 0 4px;color:var(--oro)}
.reglas p{margin:0;font-size:14px;color:var(--rosa-apagado)}
.pie{margin-top:28px;font-size:12px;color:var(--rosa-apagado);display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}
.pie a{color:var(--rosa-apagado)}

.fondo-modal{position:fixed;inset:0;background:rgba(10,2,5,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:50;padding:16px}
.modal{width:min(480px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--terciopelo-2);border:1px solid rgba(233,180,76,.4);border-radius:18px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal h3{font-family:var(--f-titulo);font-weight:900;font-size:30px;text-transform:uppercase;margin:0 0 4px}
.modal .sub{color:var(--rosa-apagado);margin:0 0 16px;font-size:14px}
.campo{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.campo label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--rosa-apagado)}
.campo input,.campo select,.campo textarea{background:rgba(0,0,0,.25);border:1px solid var(--linea);border-radius:10px;padding:11px 12px;color:var(--crema);font:inherit;font-size:16px;width:100%}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--oro);outline:none}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:420px){.fila{grid-template-columns:1fr}}
.ayuda{font-size:12px;color:var(--rosa-apagado)}
.error{color:var(--alerta);font-size:14px;min-height:1em;margin:0 0 8px}
.pie-modal{display:flex;gap:10px;justify-content:flex-end;margin-top:6px;flex-wrap:wrap}
.btn-sec{background:transparent;border:1px solid var(--linea);color:var(--crema);border-radius:10px;padding:11px 16px}
.btn-sec:hover{border-color:var(--oro)}
.resumen{display:flex;justify-content:space-between;align-items:center;gap:12px;background:rgba(0,0,0,.25);border-radius:12px;padding:14px;margin-bottom:16px}
.resumen > div{min-width:0;overflow-wrap:anywhere}
.resumen b{font-family:var(--f-titulo);font-size:34px;color:var(--oro-claro)}
.caja-paypal{background:#fff;border-radius:12px;padding:14px;min-height:60px}
.nota-pago{font-size:12px;color:var(--rosa-apagado);text-align:center;margin:10px 0 0}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--rosa-apagado);margin:4px 0 12px}
.check input{margin-top:3px;accent-color:var(--oro);width:18px;height:18px;flex:none}
.girando{width:46px;height:46px;border:4px solid var(--linea);border-top-color:var(--oro);border-radius:50%;animation:gira .8s linear infinite;margin:24px auto}
@keyframes gira{to{transform:rotate(360deg)}}
.exito-centro{text-align:center}
.exito-centro > svg{width:90px;margin:6px auto 0;display:block;animation:cae .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes cae{from{transform:translateY(-60px) rotate(-25deg);opacity:0}}

.avisos{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;z-index:60;width:min(360px,calc(100% - 32px))}
.aviso{background:var(--crema);color:var(--terciopelo);border-radius:12px;padding:12px 14px;box-shadow:0 12px 40px rgba(0,0,0,.5);font-size:14px;animation:entra .35s ease-out}
.aviso b{display:block}
.aviso button{margin-top:8px;border:0;background:var(--terciopelo);color:var(--oro-claro);border-radius:8px;padding:7px 12px;font-weight:700}
.aviso.malo{border-left:5px solid #c4382a}
@keyframes entra{from{transform:translateY(16px);opacity:0}}
.destello{animation:destello 1.2s ease-out}
@keyframes destello{0%{box-shadow:0 0 0 0 rgba(255,216,138,.9)}100%{box-shadow:0 0 0 30px rgba(255,216,138,0)}}

/* Fotos y video */
.avatar .foto{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.avatar .corona{z-index:2}
.mini{overflow:hidden}
.mini img{width:100%;height:100%;object-fit:cover;display:block}
.video-rey{margin-top:18px;position:relative;z-index:1;border-radius:14px;overflow:hidden;border:1px solid rgba(233,180,76,.35);background:#000;max-width:100%}
.video-rey iframe{display:block;width:100%;height:100%;border:0}
.video-rey.horizontal{aspect-ratio:16/9}
.video-rey.vertical{aspect-ratio:9/16;max-width:340px}
.video-rey.tiktok{aspect-ratio:auto;height:740px;max-width:340px;background:#fff}
.subir-foto{display:flex;align-items:center;gap:14px}
.subir-foto .vista{width:64px;height:64px;border-radius:50%;flex:none;display:grid;place-items:center;background:rgba(0,0,0,.3);border:2px dashed var(--linea);overflow:hidden;font-size:22px}
.subir-foto .vista img{width:100%;height:100%;object-fit:cover}
.subir-foto .botones-foto{display:flex;gap:8px;flex-wrap:wrap}
.subir-foto label.btn-sec{cursor:pointer;font-size:14px;text-transform:none;letter-spacing:0;color:var(--crema);padding:9px 14px}
.subir-foto input[type=file]{position:absolute;width:1px;height:1px;opacity:0}

/* Panel de administrador */
.panel-cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-block:16px}
@media (max-width:720px){.panel-cifras{grid-template-columns:repeat(2,1fr)}}
.panel-cifras div{border:1px solid var(--linea);border-radius:12px;padding:14px;background:rgba(0,0,0,.2)}
.panel-cifras b{display:block;font-family:var(--f-dato);font-size:22px;font-variant-numeric:tabular-nums;color:var(--oro-claro)}
.panel-cifras span{font-size:12px;color:var(--rosa-apagado)}
.tarjeta-revision{border:1px solid rgba(233,180,76,.45);border-radius:14px;padding:16px;margin-bottom:12px;background:rgba(0,0,0,.2);display:grid;gap:6px;overflow-wrap:anywhere}
.tarjeta-revision .cabeza{display:flex;gap:12px;align-items:center}
.tarjeta-revision .cabeza img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.editor{border:1px solid var(--linea);border-radius:12px;padding:14px;margin-top:10px;background:rgba(0,0,0,.25)}
.tarjeta-revision .botones{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.btn-aprobar{border:0;border-radius:10px;padding:10px 16px;background:var(--exito);color:#0c2a19;font-weight:700}
.btn-rechazar{border:1px solid var(--alerta);border-radius:10px;padding:10px 16px;background:transparent;color:var(--alerta);font-weight:700}
.tabla-envoltura{overflow-x:auto;border:1px solid var(--linea);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:640px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linea)}
th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--rosa-apagado)}
td.num{font-family:var(--f-dato);font-variant-numeric:tabular-nums;text-align:right}
.pildora{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px}
.pildora.aprobado{background:rgba(127,214,164,.18);color:var(--exito)}
.pildora.rechazado{background:rgba(255,138,122,.18);color:var(--alerta)}
.pildora.pendiente{background:rgba(233,180,76,.18);color:var(--oro-claro)}

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