/* Muro de reventa OCLOCK 8.8 — identidad del panel de asistentes. */

:root{
  --navy:#13183a; --navy2:#171b36; --navy3:#262c5c; --azul:#1a467b;
  --crema:#F5F2E8; --naranja:#FF5E31; --lima:#d4ff00;
  --texto:#eef0fb; --tenue:#a6adcf; --borde:rgba(255,255,255,.12);
  --display:"The Seasons",Georgia,serif;
  --ui:"Switzer","Be Vietnam Pro",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--navy); color:var(--texto);
  font-family:var(--ui); font-size:16px; line-height:1.55;
  background-image:radial-gradient(1100px 520px at 50% -180px,#262c5c 0%,transparent 70%);
  background-repeat:no-repeat;
}
a{color:inherit}
img{max-width:100%; display:block}

/* ── topbar ── */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 18px; border-bottom:1px solid var(--borde);
  background:rgba(19,24,58,.92); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:20;
}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none}
.marca img{height:26px; width:auto}
.marca span{font-family:var(--display); font-size:13px; color:var(--tenue); letter-spacing:.04em; white-space:nowrap}
/* En pantallas angostas el tagline se parte en tres líneas y aplasta el logo. */
@media(max-width:560px){ .marca span{display:none} }
.topnav{display:flex; gap:6px; flex-wrap:wrap}
.topnav a{
  text-decoration:none; font-size:14px; font-weight:500; color:var(--tenue);
  padding:7px 12px; border-radius:999px; border:1px solid transparent; white-space:nowrap;
}
.topnav a:hover{color:#fff; border-color:var(--borde)}
.topnav a.on{color:var(--navy); background:var(--lima); font-weight:600}

/* ── layout ── */
.envoltorio{max-width:940px; margin:0 auto; padding:26px 18px 60px}
.angosto{max-width:600px}
h1{font-family:var(--display); font-size:clamp(28px,6vw,42px); line-height:1.1; margin:0 0 10px; font-weight:700}
h2{font-family:var(--display); font-size:clamp(21px,4vw,27px); margin:34px 0 12px; font-weight:700}
.bajada{color:var(--tenue); margin:0 0 22px; font-size:16px; max-width:62ch}
.eyebrow{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lima); font-weight:600; margin:0 0 8px;
}
.lima{color:var(--lima)}
.chico{font-size:13px; color:var(--tenue)}

/* ── aviso del traspaso ── */
.aviso-traspaso{
  display:flex; gap:13px; align-items:flex-start;
  background:linear-gradient(180deg,rgba(212,255,0,.12),rgba(212,255,0,.05));
  border:1px solid rgba(212,255,0,.42); border-radius:16px;
  padding:16px 18px; margin:0 0 26px; font-size:15px; line-height:1.5;
}
.aviso-traspaso.cerrado{
  background:linear-gradient(180deg,rgba(255,94,49,.14),rgba(255,94,49,.05));
  border-color:rgba(255,94,49,.5);
}
/* Aviso de "esto es solo informativo". Naranja, para que no compita con el lima
   del traspaso y no se pierda dentro del párrafo de arriba. */
.aviso-info{
  display:flex; gap:14px; align-items:center;
  background:linear-gradient(180deg,rgba(255,94,49,.16),rgba(255,94,49,.06));
  border:1px solid rgba(255,94,49,.55); border-radius:16px;
  padding:16px 18px; margin:0 0 16px;
}
.aviso-info .ic{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--naranja); color:#fff; display:grid; place-items:center;
}
.aviso-info .ic svg{width:20px; height:20px; display:block}
.aviso-info p{margin:0; font-size:15.5px; line-height:1.45}
.aviso-info b{
  display:block; color:#fff; font-size:17px; font-family:var(--display);
  font-weight:700; letter-spacing:.01em; margin-bottom:2px;
}

.aviso-traspaso .ic{
  flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--lima); color:var(--navy); font-weight:800;
  display:grid; place-items:center; font-size:16px; margin-top:1px;
}
.aviso-traspaso.cerrado .ic{background:var(--naranja); color:#fff}
.aviso-traspaso strong{color:#fff}

/* ── solapas del muro ── */
.solapas{display:flex; gap:8px; margin:0 0 20px; flex-wrap:wrap}
.solapas a{
  text-decoration:none; padding:9px 16px; border-radius:999px;
  border:1px solid var(--borde); color:var(--tenue); font-size:14px; font-weight:500;
}
.solapas a.on{background:#fff; color:var(--navy); border-color:#fff; font-weight:600}
.solapas .cuenta{opacity:.6; font-weight:400}

/* ── tarjetas ── */
.grilla{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:700px){ .grilla{grid-template-columns:1fr 1fr} }

.tarjeta{
  background:linear-gradient(180deg,#1b2148,#171b36);
  border:1px solid var(--borde); border-radius:18px; padding:18px;
  display:flex; flex-direction:column; gap:12px;
}
.t-alto{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.pill{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  padding:5px 11px; border-radius:999px; white-space:nowrap;
}
.pill.general{background:rgba(143,158,242,.2); color:#b9c3ff; border:1px solid rgba(143,158,242,.45)}
.pill.vip{background:var(--lima); color:var(--navy)}
.precio{font-family:var(--display); font-size:26px; font-weight:700; line-height:1; white-space:nowrap}
.t-quien{display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:14px; color:var(--tenue)}
.t-quien b{color:#fff; font-weight:600}
.sello{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600;
  color:var(--lima); background:rgba(212,255,0,.12);
  border:1px solid rgba(212,255,0,.4); border-radius:999px; padding:3px 9px;
}
.t-nota{
  font-size:14.5px; color:#dfe3f7; background:rgba(255,255,255,.045);
  border-left:2px solid var(--naranja); border-radius:0 8px 8px 0; padding:9px 12px; margin:0;
}
.boton-wa{
  margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px;
  background:#25D366; color:#0b2016; text-decoration:none; font-weight:700; font-size:15px;
  padding:12px 16px; border-radius:12px; border:none; cursor:pointer; width:100%;
}
.boton-wa:hover{filter:brightness(1.07)}
/* Versión chica, para el aviso del traspaso. Va en su propia línea:
   suelto dentro del párrafo quedaba partido a la mitad del texto en escritorio. */
.boton-wa.chico-wa{display:flex; width:fit-content; margin:16px 0 2px; padding:10px 16px; font-size:14px}

/* ── cartel de muro cerrado ── */
.cartel-cerrado{
  text-align:center; padding:34px 22px 30px; margin-top:14px;
  background:linear-gradient(180deg,#1b2148,#171b36);
  border:1px solid var(--borde); border-radius:22px;
}
.cartel-cerrado .ic{
  width:58px; height:58px; border-radius:50%; margin:0 auto 20px;
  background:rgba(255,94,49,.16); border:1px solid rgba(255,94,49,.5);
  color:var(--naranja); display:grid; place-items:center;
}
.cartel-cerrado .ic svg{width:28px; height:28px; display:block}
.cartel-cerrado .bajada{margin-left:auto; margin-right:auto}
.cartel-cerrado .aviso-traspaso{margin:24px 0; text-align:left}

/* ── vacío ── */
.vacio{
  text-align:center; padding:46px 20px; border:1px dashed var(--borde);
  border-radius:18px; color:var(--tenue);
}
.vacio p{margin:0 0 16px}

/* ── botones ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--lima); color:var(--navy); text-decoration:none; font-weight:700;
  padding:13px 22px; border-radius:12px; border:none; cursor:pointer;
  font-family:var(--ui); font-size:16px;
}
.btn:hover{filter:brightness(1.06)}
.btn.fantasma{background:transparent; color:var(--texto); border:1px solid var(--borde); font-weight:600}
.btn.naranja{background:var(--naranja); color:#fff}
.btn.ancho{width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.botonera{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}

/* ── formularios ── */
.campo{margin:0 0 18px}
.campo label{display:block; font-weight:600; font-size:14.5px; margin:0 0 6px}
.campo .ayuda{font-size:13px; color:var(--tenue); margin:0 0 8px}
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=password], select, textarea{
  width:100%; padding:12px 14px; border-radius:11px;
  border:1px solid var(--borde); background:rgba(255,255,255,.06); color:#fff;
  font-family:var(--ui); font-size:16px;
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--lima); outline-offset:1px}
textarea{min-height:84px; resize:vertical}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--tenue) 50%),linear-gradient(135deg,var(--tenue) 50%,transparent 50%); background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.fila{display:flex; gap:12px}
.fila > *{flex:1}
.fila .angostito{flex:0 0 110px}

.opciones{display:flex; gap:10px; flex-wrap:wrap}
.opciones label{
  flex:1; min-width:130px; display:flex; align-items:center; gap:9px; cursor:pointer;
  border:1px solid var(--borde); border-radius:12px; padding:13px 15px;
  background:rgba(255,255,255,.04); font-weight:500; margin:0;
}
.opciones input{accent-color:var(--lima); width:18px; height:18px; flex:none}
.opciones label:has(input:checked){border-color:var(--lima); background:rgba(212,255,0,.1)}

.miel{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ── mensajes ── */
.error, .ok, .nota-caja{
  border-radius:13px; padding:14px 16px; margin:0 0 20px; font-size:15px; line-height:1.5;
}
.error{background:rgba(255,94,49,.14); border:1px solid rgba(255,94,49,.5)}
.ok{background:rgba(212,255,0,.12); border:1px solid rgba(212,255,0,.45)}
.nota-caja{background:rgba(255,255,255,.05); border:1px solid var(--borde); color:var(--tenue)}
.error strong, .ok strong{color:#fff}
.error ul{margin:8px 0 0; padding-left:20px}

.codigo{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:30px; font-weight:700;
  letter-spacing:.1em; color:var(--lima); background:var(--navy2);
  border:1px dashed rgba(212,255,0,.5); border-radius:14px;
  padding:18px; text-align:center; margin:14px 0; user-select:all;
}

.pasos{counter-reset:p; list-style:none; padding:0; margin:0 0 26px}
.pasos li{
  counter-increment:p; position:relative; padding:0 0 14px 40px;
  color:var(--tenue); font-size:15px;
}
.pasos li::before{
  content:counter(p); position:absolute; left:0; top:0;
  width:26px; height:26px; border-radius:50%; background:var(--lima); color:var(--navy);
  display:grid; place-items:center; font-weight:800; font-size:14px;
}
.pasos li b{color:#fff}

/* ── pie ── */
.pie{
  border-top:1px solid var(--borde); padding:32px 18px 44px; text-align:center;
  color:var(--tenue); font-size:14px;
}
.pie img{height:24px; width:auto; margin:0 auto 14px; opacity:.85}
.pie p{margin:5px 0}
.pie a{color:var(--lima)}

/* ── panel admin ── */
.tabla-envoltorio{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--borde); border-radius:14px}
table.datos{width:100%; border-collapse:collapse; font-size:13.5px; min-width:860px}
table.datos th, table.datos td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--borde); vertical-align:top}
table.datos th{background:rgba(255,255,255,.05); font-weight:600; white-space:nowrap; position:sticky; top:0}
table.datos tr:last-child td{border-bottom:none}
table.datos .mini{font-size:12px; color:var(--tenue)}
.estado{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:3px 8px; border-radius:999px; white-space:nowrap}
.estado.publicado{background:rgba(212,255,0,.18); color:var(--lima)}
.estado.pendiente{background:rgba(255,94,49,.2); color:#ffb49c}
.estado.vendido{background:rgba(255,255,255,.1); color:var(--tenue)}
.estado.oculto{background:rgba(255,255,255,.07); color:var(--tenue)}
.acciones{display:flex; gap:6px; flex-wrap:wrap}
.acciones button{
  background:rgba(255,255,255,.08); color:var(--texto); border:1px solid var(--borde);
  border-radius:8px; padding:6px 10px; font-size:12.5px; cursor:pointer; font-family:var(--ui);
}
.acciones button:hover{background:rgba(255,255,255,.16)}
.acciones button.pri{background:var(--lima); color:var(--navy); border-color:var(--lima); font-weight:700}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin:0 0 24px}
.tile{background:var(--navy2); border:1px solid var(--borde); border-radius:14px; padding:15px}
.tile .n{font-family:var(--display); font-size:30px; font-weight:700; line-height:1}
.tile .r{font-size:12px; color:var(--tenue); text-transform:uppercase; letter-spacing:.09em; margin-top:5px}

/* Título de la lista de avisos del muro. */
.titulo-lista{font-size:clamp(18px,3.4vw,22px); margin:4px 0 14px}