:root{

--bg:#0f172a;
--bg-soft:#111827;

--panel:#0f172a;
--panel-2:#111827;

--line:#1f2937;

--text:#f8fafc;
--muted:#9ca3af;

--brand:#22c55e;
--brand-2:#38bdf8;

--success:#22c55e;
--danger:#ef4444;

--shadow:none;

--radius:10px;

/* ADMIN COLOR VARIABLES */

--section-hero-bg:linear-gradient(180deg,#0f172a,#020617);
--section-services-bg:#020617;
--section-contact-bg:#020617;
--section-clips-bg:#020617;

--card-bg:linear-gradient(180deg,#111827,#020617);

/* NUEVAS VARIABLES CONTROLABLES */

--navbar-bg:#020617;
--button-bg:#020617;
--button-border:#1f2937;

--badge-bg:#020617;
--badge-border:#1f2937;

--input-bg:#020617;

--card-border:#1f2937;

--hover-bg:#1f2937;

}

/* Final product density pass */
:root{
--radius:8px;
}

.topbar{
padding:12px 4%;
gap:14px;
}

.brand-mark{
width:40px;
height:40px;
border-radius:8px;
}

.nav{
gap:6px;
}

.nav a{
padding:8px 10px;
border-radius:8px;
}

.container{
width:94%;
margin-bottom:28px;
}

.hero{
gap:18px;
padding:22px 0 14px;
}

.hero-copy{
padding-top:6px;
}

h1{
font-size:clamp(28px,4vw,46px);
margin-bottom:12px;
}

h2{
margin-bottom:10px;
}

p{
line-height:1.5;
}

.actions{
gap:8px;
margin-top:14px;
}

.btn{
min-height:40px;
padding:0 14px;
border-radius:8px;
}

.section{
padding:18px 0;
}

.panel{
padding:4px 0;
}

.card,
.video-card{
border-radius:8px;
}

.card{
padding:12px;
}

.grid-4,
.grid-3,
.grid-2{
gap:12px;
}

.input,
.textarea{
border-radius:8px;
padding:10px 11px;
}

.textarea{
min-height:84px;
}

.list{
gap:8px;
}

.item{
border-radius:8px;
padding:8px 10px;
}

@media (max-width:780px){
.topbar{
position:static;
padding:10px 3%;
}

.brand{
gap:10px;
}

.brand-mark{
width:36px;
height:36px;
}

.nav{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
width:100%;
}

.nav a,
.nav button{
width:100%;
font-size:13px;
padding:8px 6px;
}

.container{
width:96%;
padding-left:8px;
padding-right:8px;
margin-bottom:20px;
}

.section{
padding:14px 0;
}

.card{
padding:10px;
}

.actions .btn{
flex:1 1 150px;
}
}

/* RESET */

*,
*::before,
*::after{
box-sizing:border-box;
margin:0;
padding:0;
}

/* GLOBAL */

html,body{
background:var(--section-hero-bg);
color:var(--text);
font-family:Segoe UI,Arial,sans-serif;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
scroll-behavior:smooth;
}

::selection{
background:var(--brand);
color:#07101d;
}

a{
color:inherit;
text-decoration:none
}

img{
max-width:100%;
display:block;
}

video{
max-width:100%;
width:100%;
height:auto;
display:block;
}

button,input,textarea{
font:inherit;
outline:none;
}

/* LAYOUT CONTAINER */

.container{
max-width:1180px;
width:92%;
margin:0 auto 40px;
padding-left:16px;
padding-right:16px;
}

/* NAVBAR */

.topbar{
position:sticky;
top:0;
z-index:50;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
padding:18px 4%;
background:var(--navbar-bg);
border-bottom:1px solid var(--line)
}

.brand{
display:flex;
align-items:center;
gap:14px
}

.brand-mark{
width:48px;
height:48px;
border-radius:10px;
display:grid;
place-items:center;
font-weight:800;
background:linear-gradient(135deg,var(--brand),var(--brand-2));
color:#08111f
}

.nav{
display:flex;
flex-wrap:wrap;
gap:10px
}

.nav a{
padding:10px 14px;
border-radius:999px;
color:var(--muted);
transition:.2s;
white-space:nowrap;
}

.nav a.active,
.nav a:hover{
background:var(--hover-bg);
color:var(--text)
}

/* HERO */

.hero{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
padding:28px 0 20px;
align-items:start;
max-width:100%;
background:var(--section-hero-bg);
}

.hero-copy{
padding-top:14px;
max-width:620px;
}

h1{
font-size:clamp(32px,4vw,54px);
line-height:1.1;
margin-bottom:16px
}

h2{
margin-bottom:14px
}

p{
line-height:1.6
}

.muted{
color:var(--muted)
}

.small{
font-size:13px
}

/* BADGES */

.pill,
.badge{
display:inline-flex;
align-items:center;
gap:8px;
border:1px solid var(--badge-border);
padding:7px 12px;
border-radius:999px;
background:var(--badge-bg)
}

.badge.live{
background:rgba(34,197,94,.15);
border-color:rgba(34,197,94,.35);
color:#bff7e6
}

.badge.offline{
background:rgba(239,68,68,.12);
border-color:rgba(239,68,68,.35);
color:#ffd2d2
}

/* BUTTONS */

.actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:20px
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:0 18px;
border-radius:10px;
border:1px solid var(--button-border);
background:var(--button-bg);
color:var(--text);
cursor:pointer;
transition:.2s;
white-space:nowrap;
}

.btn:hover{
transform:translateY(-1px);
}

.btn-primary{
background:linear-gradient(135deg,var(--brand),var(--brand-2));
color:#022c22;
border:none;
font-weight:700
}

/* SECTIONS */

.section{
padding:24px 0;
}

.section:nth-of-type(2){
background:var(--section-services-bg);
}

.section:nth-of-type(3){
background:var(--section-contact-bg);
}

.section:nth-of-type(4){
background:var(--section-clips-bg);
}

/* PANEL */

.panel{
background:none;
border:none;
box-shadow:none;
padding:8px 0;
border-radius:0;
max-width:100%;
}

/* PLAYER */

.player-panel{
max-width:100%;
}

/* GRID SYSTEM */

.grid-4{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px
}

.grid-3{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px
}

.grid-2{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px
}

/* CARDS */

.card{
background:var(--card-bg);
border:1px solid var(--card-border);
border-radius:16px;
padding:18px;
transition:.25s;
position:relative;
overflow:hidden;
}

.card:hover{
border-color:var(--brand);
transform:translateY(-4px) scale(1.01);
box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* VIDEO CARD */

.video-card{
background:var(--bg-soft);
border-radius:14px;
border:1px solid var(--line);
overflow:hidden;
}

.video-card video{
display:block;
width:100%;
}

.video-thumb{
display:block;
width:100%;
aspect-ratio:16 / 9;
object-fit:cover;
border-bottom:1px solid var(--line);
}

.video-card .meta{
padding:10px 12px;
font-size:14px;
}

.private-player{
min-height:420px;
border:1px solid var(--line);
border-radius:8px;
padding:16px;
margin-top:14px;
background:var(--bg-soft);
}

.private-player iframe{
width:100%;
min-height:420px;
border:0;
border-radius:8px;
}

/* STACK */

.stack{
display:grid;
gap:14px
}

/* INPUT */

.input,
.textarea{
width:100%;
background:var(--input-bg);
color:var(--text);
border:1px solid var(--line);
border-radius:8px;
padding:12px 14px
}

.textarea{
min-height:120px;
resize:vertical
}

/* LIST */

.list{
display:grid;
gap:6px
}

.item{
padding:0;
border:none;
background:none;
}

/* CHAT */

.chat-panel{
min-height:640px;
display:flex;
flex-direction:column;
}

.chat-shell{
display:flex;
flex-direction:column;
gap:12px;
height:100%;
min-height:560px;
}

.chat-list-whatsapp,
#chat-list{
flex:1;
min-height:320px;
max-height:440px;
overflow-y:auto;
padding:10px;
border:1px solid var(--line);
border-radius:8px;
background:rgba(2,6,23,.55);
display:flex;
flex-direction:column;
gap:7px;
scrollbar-width:thin;
}

.chat-row{
display:flex;
width:100%;
}

.chat-row.is-mine{
justify-content:flex-end;
}

.chat-row.is-other{
justify-content:flex-start;
}

.chat-bubble{
max-width:min(82%, 560px);
padding:8px 10px;
border-radius:8px;
background:#111827;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 4px 12px rgba(0,0,0,.14);
}

.chat-row.is-mine .chat-bubble{
background:rgba(37,99,235,.18);
border-color:rgba(96,165,250,.3);
}

.chat-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:4px;
}

.chat-user{
font-weight:700;
font-size:12px;
letter-spacing:0;
color:var(--brand);
}

.chat-time{
font-size:11px;
color:var(--muted);
white-space:nowrap;
}

.chat-text{
color:var(--text);
font-size:14px;
line-height:1.35;
white-space:pre-wrap;
word-break:break-word;
}

.chat-empty{
padding:10px 0;
color:var(--muted);
}

.chat-composer,
#chat-form{
display:grid;
grid-template-columns:120px minmax(0,1fr) auto;
gap:8px;
align-items:end;
padding:8px;
border:1px solid var(--line);
border-radius:8px;
background:rgba(15,23,42,.72);
position:sticky;
bottom:0;
}

.chat-composer .textarea,
#chat-form .textarea{
min-height:40px;
max-height:88px;
resize:none;
border-radius:8px;
}

.chat-composer .input,
#chat-form .input{
border-radius:8px;
}

.chat-composer .btn,
#chat-form .btn{
height:40px;
border-radius:8px;
white-space:nowrap;
}

.is-hidden{
display:none !important;
}

/* RESPONSIVE */

@media (max-width:1100px){

.hero{
grid-template-columns:1fr
}

.grid-4{
grid-template-columns:1fr 1fr
}

.grid-3{
grid-template-columns:1fr 1fr
}

.grid-2{
grid-template-columns:1fr
}

}

@media (max-width:780px){

.chat-panel{
min-height:auto;
}

.chat-shell{
min-height:auto;
}

.chat-list-whatsapp,
#chat-list{
max-height:420px;
min-height:260px;
}

.chat-composer,
#chat-form{
grid-template-columns:1fr auto;
}

#chat-form .input,
.chat-composer .input{
grid-column:1 / -1;
min-height:36px;
}

#chat-form .textarea,
.chat-composer .textarea{
min-height:42px;
}


.nav{
width:100%
}

.nav a{
flex:1 1 auto;
text-align:center
}

.container{
width:96%;
max-width:720px;
}

}

/* Final responsive override */
.topbar{padding:12px 4%;gap:14px}
.brand-mark{width:40px;height:40px;border-radius:8px}
.nav{gap:6px}
.nav a{padding:8px 10px;border-radius:8px}
.container{width:94%;margin-bottom:28px}
.hero{gap:18px;padding:22px 0 14px}
.hero-copy{padding-top:6px}
h1{font-size:clamp(28px,4vw,46px);margin-bottom:12px}
h2{margin-bottom:10px}
p{line-height:1.5}
.actions{gap:8px;margin-top:14px}
.btn{min-height:40px;padding:0 14px;border-radius:8px}
.section{padding:18px 0}
.panel{padding:4px 0}
.card,.video-card{border-radius:8px}
.card{padding:12px}
.grid-4,.grid-3,.grid-2{gap:12px}
.input,.textarea{border-radius:8px;padding:10px 11px}
.textarea{min-height:84px}
.list{gap:8px}
.item{border-radius:8px;padding:8px 10px}

@media (max-width:780px){
.topbar{position:static;padding:10px 3%}
.brand{gap:10px}
.brand-mark{width:36px;height:36px}
.nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
.nav a,.nav button{width:100%;font-size:13px;padding:8px 6px}
.container{width:96%;max-width:720px;padding-left:8px;padding-right:8px;margin-bottom:20px}
.section{padding:14px 0}
.card{padding:10px}
.actions .btn{flex:1 1 150px}
}

/* AOR public visual refresh */
body{
background:#071017;
}

.topbar{
backdrop-filter:blur(12px);
background:rgba(2,6,23,.86);
}

.container{
max-width:1240px;
}

.hero{
min-height:calc(100vh - 92px);
align-items:center;
padding:36px 0 34px;
}

.hero-copy{
position:relative;
}

.hero-copy h1{
max-width:760px;
letter-spacing:0;
}

.hero-copy p{
max-width:650px;
font-size:17px;
color:#cbd5e1;
}

.player-panel{
padding:0;
}

.section{
border-top:1px solid rgba(148,163,184,.12);
}

.section-head{
margin-bottom:18px;
}

.section-head h2{
font-size:clamp(24px,3vw,36px);
}

.card{
background:transparent;
border-color:rgba(148,163,184,.16);
box-shadow:none;
}

.card:hover{
transform:none;
box-shadow:none;
border-color:rgba(56,189,248,.32);
}

.grid-4 .card{
min-height:170px;
display:flex;
flex-direction:column;
justify-content:flex-end;
background:linear-gradient(180deg,rgba(15,23,42,.18),rgba(15,23,42,.72));
}

.section-split{
align-items:start;
}

.section-split > .panel{
padding:0;
}

.panel h1,.panel h2{
letter-spacing:0;
}

.item{
background:rgba(15,23,42,.35);
border:1px solid rgba(148,163,184,.12);
padding:12px;
}

.video-card{
background:rgba(15,23,42,.55);
border-color:rgba(148,163,184,.16);
}

.private-player{
background:rgba(2,6,23,.68);
}

.event-shell{
display:grid;
gap:18px;
padding:26px 0;
}

.eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:8px;
color:#7dd3fc;
font-size:12px;
font-weight:800;
text-transform:uppercase;
letter-spacing:0;
}

.broadcast-stage,
.live-stage{
position:relative;
display:grid;
gap:16px;
padding:18px;
border:1px solid rgba(148,163,184,.18);
border-radius:8px;
background:
  linear-gradient(135deg,rgba(15,23,42,.78),rgba(2,6,23,.9)),
  url("https://images.unsplash.com/photo-1495954484750-af469f2f9be5?auto=format&fit=crop&w=1600&q=80");
background-size:cover;
background-position:center;
overflow:hidden;
}

.broadcast-stage::before,
.live-stage::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(2,6,23,.82),rgba(2,6,23,.42));
pointer-events:none;
}

.broadcast-stage > *,
.live-stage > *{
position:relative;
z-index:1;
}

.broadcast-stage{
min-height:100%;
}

.live-stage{
grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);
align-items:start;
margin-bottom:18px;
}

.live-side{
align-self:stretch;
}

.panel-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
margin-bottom:8px;
}

.signal-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
margin-top:10px;
}

.signal-tile{
min-height:64px;
border:1px solid rgba(148,163,184,.18);
border-radius:8px;
padding:10px;
background:rgba(2,6,23,.62);
}

.signal-tile span{
display:block;
font-size:12px;
color:#cbd5e1;
}

.signal-tile strong{
display:block;
margin-top:4px;
font-size:18px;
}

.signal-tile.is-good strong{
color:#86efac;
}

.signal-tile.is-warn strong{
color:#fde68a;
}

.video-featured{
margin-bottom:14px;
}

.video-feature-card{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:16px;
border:1px solid rgba(148,163,184,.18);
border-radius:8px;
padding:18px;
background:
  linear-gradient(135deg,rgba(15,23,42,.82),rgba(2,6,23,.92)),
  url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1400&q=80");
background-size:cover;
background-position:center;
}

.video-feature-card h2{
font-size:clamp(24px,3vw,38px);
}

.video-media{
position:relative;
background:#020617;
}

.video-media .video-thumb{
position:absolute;
inset:0;
width:100%;
height:100%;
z-index:0;
opacity:.48;
}

.video-media video{
position:relative;
z-index:1;
background:rgba(0,0,0,.46);
}

.video-thumb-generated{
display:grid;
place-items:end start;
aspect-ratio:16/9;
padding:16px;
background:
  linear-gradient(135deg,rgba(34,197,94,.2),rgba(56,189,248,.18)),
  url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80");
background-size:cover;
background-position:center;
}

.video-thumb-generated span{
max-width:80%;
font-size:24px;
font-weight:800;
line-height:1.08;
}

.event-hero{
min-height:360px;
display:grid;
align-items:end;
border:1px solid rgba(148,163,184,.18);
border-radius:8px;
padding:22px;
background:
  linear-gradient(180deg,rgba(2,6,23,.08),rgba(2,6,23,.88)),
  var(--event-cover, linear-gradient(135deg,#0f172a,#052e2b));
background-size:cover;
background-position:center;
}

.event-meta-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}

.event-meta-grid .item{
min-height:78px;
}

.sponsor-strip{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
border:1px solid rgba(56,189,248,.24);
border-radius:8px;
padding:12px;
background:rgba(56,189,248,.08);
}

@media (max-width:900px){
.hero{min-height:auto}
.live-stage{grid-template-columns:1fr;padding:12px}
.signal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.video-feature-card{align-items:flex-start;flex-direction:column}
.event-meta-grid{grid-template-columns:1fr}
.sponsor-strip{align-items:flex-start;flex-direction:column}
}

@media (max-width:560px){
.signal-grid{grid-template-columns:1fr}
}

.video-detail-layout{
display:grid;
grid-template-columns:minmax(0,1.6fr) minmax(300px,.4fr);
gap:16px;
align-items:start;
}

.video-detail-main h1{
font-size:clamp(30px,4vw,52px);
max-width:860px;
}

.video-detail-media{
position:relative;
overflow:hidden;
border:1px solid rgba(148,163,184,.18);
border-radius:8px;
background:#020617;
}

.video-detail-media video{
width:100%;
background:#020617;
}

.aor-video-signature{
position:absolute;
left:12px;
right:12px;
bottom:12px;
width:min(620px,calc(100% - 24px));
max-height:100px;
object-fit:contain;
opacity:.94;
pointer-events:none;
}

.video-share-panel{
display:grid;
gap:12px;
border:1px solid rgba(148,163,184,.18);
border-radius:8px;
padding:14px;
background:rgba(15,23,42,.72);
position:sticky;
top:92px;
}

.share-url{
border:1px solid rgba(148,163,184,.18);
border-radius:8px;
padding:10px;
background:rgba(2,6,23,.72);
font-size:12px;
word-break:break-word;
}

.signature-preview{
display:grid;
gap:8px;
border:1px dashed rgba(148,163,184,.24);
border-radius:8px;
padding:10px;
background:rgba(2,6,23,.38);
}

.signature-preview img{
border-radius:8px;
background:#020617;
}

.video-detail-reference{
min-height:320px;
display:grid;
place-items:center;
}

@media (max-width:900px){
.video-detail-layout{grid-template-columns:1fr}
.video-share-panel{position:static}
.aor-video-signature{width:min(520px,calc(100% - 18px));left:9px;right:9px;bottom:9px;max-height:78px}
}