:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--bg:#0b0f13;--panel:#151b22;--panel2:#1c2530;--panel3:#263342;--text:#f4f0e8;--muted:#9fa5aa;--accent:#e9c98f;--accent2:#b88955;--steel:#34475a;--danger:#a94347;--success:#6dbb91;--border:rgba(233,201,143,.14)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -20%,#1b2733 0,#0f151b 35%,var(--bg) 68%);color:var(--text)}body{min-height:100dvh}a{color:var(--accent);text-decoration:none}button,input,textarea,select{font:inherit}input,textarea,select{width:100%;border:1px solid rgba(233,201,143,.18);background:#111820;color:var(--text);border-radius:12px;padding:12px 13px;outline:none}input:focus,textarea:focus,select:focus{border-color:rgba(233,201,143,.65);box-shadow:0 0 0 3px rgba(233,201,143,.08)}textarea{resize:vertical}.muted{color:var(--muted)}.app-topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:20px;padding:12px max(18px,env(safe-area-inset-right)) 12px max(18px,env(safe-area-inset-left));background:rgba(10,14,18,.95);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:800}.brand-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(145deg,#f0d49e,#c99b62);color:#171719;font-weight:900}.brand-mark.large{width:50px;height:50px;border-radius:14px}.top-nav{display:flex;align-items:center;gap:5px;flex:1}.top-nav>a{padding:9px 11px;border-radius:10px;color:#c4c6c8;font-size:14px}.top-nav>a.active{background:#1c2530;color:var(--accent)}.top-nav .control-pill{margin-left:auto;background:linear-gradient(145deg,#efd59f,#c89b62);color:#151719;font-weight:800}.user-menu{display:flex;gap:10px;align-items:center;font-size:13px}.user-menu span{color:var(--muted)}.app-main{width:min(1120px,100%);margin:0 auto;padding:30px 18px 60px}.app-main.narrow{width:min(880px,100%)}.hero-row,.page-title-row,.panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}.hero-row{margin-bottom:22px}.page-title-row{margin-bottom:20px}.eyebrow{display:block;color:var(--accent);font-size:11px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;margin-bottom:8px}h1,h2,p{margin-top:0}h1{font-size:clamp(31px,5vw,48px);letter-spacing:-.035em;margin-bottom:8px}h2{font-size:22px;letter-spacing:-.02em}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}.stat-card,.panel,.pricing-card{border:1px solid var(--border);background:linear-gradient(145deg,#1c2530,#12181e);border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.15)}.stat-card{padding:20px}.stat-card span,.stat-card small{display:block;color:var(--muted)}.stat-card strong{display:block;font-size:34px;margin:7px 0;color:var(--text)}.room-code{font-size:20px!important;letter-spacing:.08em;color:var(--accent)!important}.dashboard-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}.panel{padding:22px}.control-panel-card{background:linear-gradient(145deg,#263746,#151d25)}.plan-badge{padding:8px 12px;border-radius:999px;font-size:12px;font-weight:900;text-transform:uppercase}.plan-badge.premium{background:rgba(233,201,143,.14);color:var(--accent)}.plan-badge.free{background:rgba(255,255,255,.07);color:#c8c8c8}.live-dot{width:9px;height:9px;border-radius:50%;background:var(--success);box-shadow:0 0 0 5px rgba(109,187,145,.1)}.action-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.btn{appearance:none;border:1px solid var(--border);border-radius:12px;padding:11px 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;color:var(--text);background:#202a35;font-weight:800}.btn.primary{background:linear-gradient(145deg,#f0d49e,#c99b62);color:#151719;border-color:transparent}.btn.secondary{background:#202a35}.btn.gold{background:#34475a;color:#f5dfb3}.btn.danger{background:#5b272a;color:#ffd7d9;border-color:rgba(255,120,130,.2)}.btn.tiny{padding:8px 10px;font-size:12px}.btn.big{font-size:17px;padding:14px 20px}.btn:disabled{opacity:.55;cursor:not-allowed}.full-width{width:100%;margin-top:14px}.mini-list>div{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;gap:16px}.mini-list small{color:var(--accent2)}.song-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.song-admin-card{padding:20px;border-radius:18px;background:linear-gradient(145deg,#202a35,#12181e);border:1px solid var(--border)}.song-admin-card h2{margin:24px 0 5px}.song-admin-card p{color:var(--accent2)}.song-card-top{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.song-type{font-weight:900;text-transform:uppercase;letter-spacing:.08em}.song-type.system{color:var(--accent)}.song-type.mine{color:#8eb3d5}.card-actions{display:flex;align-items:center;gap:8px;margin-top:16px;flex-wrap:wrap}.card-actions form{margin:0}.locked-note{font-size:12px;color:var(--muted)}.stack-form{display:flex;flex-direction:column;gap:16px}.stack-form label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700;color:#d8d9d7}.stack-form small{color:var(--muted);font-weight:400}.form-grid,.two-col{display:grid!important;grid-template-columns:1fr 1fr;gap:14px}.two-col .full{grid-column:1/-1}.lyrics-input{min-height:360px;line-height:1.5}.callout{padding:14px;border-radius:14px;border:1px solid var(--border);display:flex;flex-direction:column;gap:4px}.ai-callout{background:rgba(52,71,90,.35)}.auth-shell{min-height:100dvh;display:grid;place-items:center;padding:24px}.auth-card{width:min(470px,100%);padding:28px;border-radius:24px;background:linear-gradient(145deg,#1d2731,#11171d);border:1px solid var(--border);box-shadow:0 25px 60px rgba(0,0,0,.28)}.auth-card.wide{width:min(760px,100%)}.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}.auth-brand strong,.auth-brand span{display:block}.auth-brand span{color:var(--muted);font-size:12px;margin-top:2px}.auth-links{margin-top:18px;display:flex;flex-direction:column;gap:9px;font-size:13px}.inline-error,.inline-success,.flash{border-radius:12px;padding:11px 14px;margin:12px auto}.inline-error,.flash-error{background:#3b2023;border:1px solid rgba(255,110,120,.2);color:#ffd4d7}.inline-success,.flash-success{background:#173226;border:1px solid rgba(109,187,145,.2);color:#c9f2d9}.flash-warning{background:#3a301b;color:#f7dda6}.flash{width:min(1120px,calc(100% - 28px));position:relative;z-index:60}.pricing-card{width:min(620px,100%);margin:30px auto;padding:34px}.pricing-card h1{font-size:54px;color:var(--accent)}.pricing-card h1 small{font-size:18px;color:var(--muted)}.pricing-card li{margin:9px 0}.culto-list,.setlist{display:flex;flex-direction:column}.culto-row,.setlist-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07)}.culto-row>div:first-child,.grow{flex:1}.culto-row small,.setlist-row small{display:block;color:var(--muted);margin-top:3px}.count-chip{background:#263342;color:var(--accent);border-radius:999px;padding:5px 9px}.inline-form{display:flex;gap:10px}.inline-form select{flex:1}.order-number{width:30px;height:30px;border-radius:9px;background:#263342;color:var(--accent);display:grid;place-items:center;font-weight:900}.icon-btn{border:1px solid var(--border);background:#1f2a34;color:var(--text);border-radius:9px;padding:7px 9px;cursor:pointer}.icon-btn.danger{color:#ffb1b5}.settings-media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.media-setting{padding:14px;border-radius:15px;background:#111820;border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:10px}.media-setting img{width:100%;height:130px;object-fit:contain;background:#080b0e;border-radius:10px}.media-setting img.cover-preview{object-fit:cover}.check{flex-direction:row!important;align-items:center!important}.check input{width:auto}.mini-link{font-size:13px}.heading-author{color:var(--accent2);font-weight:700;margin-top:-3px}
@media(max-width:820px){.top-nav>a:not(.control-pill){display:none}.user-menu span{display:none}.stats-grid,.dashboard-grid,.settings-media-grid{grid-template-columns:1fr}.form-grid,.two-col{grid-template-columns:1fr}.two-col .full{grid-column:auto}.app-main{padding:22px 12px 50px}.hero-row,.page-title-row{align-items:flex-start;flex-direction:column}.inline-form{flex-direction:column}}

/* =========================================================
   SELECTOR VISUAL DE VIDEOS
========================================================= */
.video-fieldset{display:flex;flex-direction:column;gap:10px}.video-fieldset-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-end}.video-fieldset-head strong{display:block;font-size:14px}.video-fieldset-head small{display:block;margin-top:4px;color:var(--muted)}.video-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.video-card{position:relative;display:block;overflow:hidden;border:1px solid rgba(233,201,143,.12);border-radius:16px;background:linear-gradient(145deg,#1c2530,#10161c);cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.video-card:hover{transform:translateY(-2px);border-color:rgba(233,201,143,.48);box-shadow:0 12px 28px rgba(0,0,0,.25)}.video-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px rgba(233,201,143,.14),0 12px 28px rgba(0,0,0,.22)}.video-card>input[type="radio"]{position:absolute;opacity:0;pointer-events:none}.video-card-preview{position:relative;aspect-ratio:16/9;background:#050608;overflow:hidden}.video-thumb{display:block;width:100%;height:100%;object-fit:cover;background:#050608}.video-selected-badge{position:absolute;top:8px;right:8px;display:none;border-radius:999px;padding:5px 8px;background:rgba(233,201,143,.94);color:#151719;font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 4px 15px rgba(0,0,0,.26)}.video-card.selected .video-selected-badge{display:block}.video-card-meta{padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px}.video-card-meta strong{font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.video-card-meta span{flex:0 0 auto;color:var(--accent2);font-size:10px;text-transform:uppercase;letter-spacing:.06em}.video-card:focus-within{outline:2px solid rgba(233,201,143,.4);outline-offset:2px}@media(max-width:620px){.video-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.video-card-meta{align-items:flex-start;flex-direction:column;gap:3px}}

/* =========================================================
   CONFIGURACIÓN / PERFIL
========================================================= */
.settings-form{display:flex;flex-direction:column;gap:14px}.settings-section{display:flex;flex-direction:column;gap:18px}.settings-section-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.settings-section-head h2{margin-bottom:5px}.profile-settings-grid{display:grid;grid-template-columns:190px 1fr;gap:20px;align-items:start}.profile-photo-setting{display:flex;flex-direction:column;gap:10px}.profile-photo-setting>strong{font-size:13px}.profile-photo-preview{width:150px;height:150px;border-radius:50%;overflow:hidden;background:linear-gradient(145deg,#263746,#111820);border:1px solid rgba(233,201,143,.22);display:grid;place-items:center}.profile-photo-preview img{width:100%;height:100%;object-fit:cover}.profile-photo-preview span{font-size:54px;font-weight:900;color:var(--accent)}.profile-fields{min-width:0}.empty-media-preview{width:100%;height:130px;display:grid;place-items:center;border-radius:10px;background:#080b0e;border:1px dashed rgba(233,201,143,.16);color:var(--muted);font-size:12px}.settings-savebar{position:sticky;bottom:12px;z-index:20;display:flex;justify-content:flex-end;padding:10px;border:1px solid rgba(233,201,143,.14);border-radius:16px;background:rgba(10,14,18,.88);backdrop-filter:blur(14px)}.topbar-avatar{width:32px;height:32px;flex:0 0 32px;border-radius:50%;object-fit:cover;border:1px solid rgba(233,201,143,.24)}.topbar-avatar-fallback{display:grid;place-items:center;background:#263342;color:var(--accent);font-weight:900}.user-menu{min-width:0}.user-menu>span:not(.topbar-avatar){max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:820px){.profile-settings-grid{grid-template-columns:1fr}.profile-photo-preview{width:118px;height:118px}.settings-savebar{bottom:8px}.topbar-avatar{width:30px;height:30px;flex-basis:30px}}

.brand-icon{width:38px;height:38px;flex:0 0 38px;border-radius:11px;object-fit:contain;display:block}.brand-icon.large{width:54px;height:54px;flex-basis:54px;border-radius:14px}.security-section{margin-top:14px;scroll-margin-top:86px}.password-form{max-width:680px}.password-form .action-row{justify-content:flex-end}@media(max-width:620px){.brand-icon{width:34px;height:34px;flex-basis:34px}.brand-icon.large{width:50px;height:50px;flex-basis:50px}.password-form .action-row .btn{width:100%}}


/* =========================================================
   LINK PÚBLICO DEL DISPLAY
========================================================= */
.display-share-box{margin:18px 0 14px;padding:14px;border:1px solid rgba(233,201,143,.14);border-radius:15px;background:rgba(8,12,16,.28)}
.display-share-box>label{display:block;margin-bottom:7px;color:var(--accent);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.display-url-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}
.display-url-input{min-width:0;font-size:13px;color:#d8dbdd;background:#0d141a}
.display-action-row{margin-top:14px}
.premium-hint{display:block;margin-top:8px;color:var(--muted);text-align:center;line-height:1.4}
.premium-message{margin:14px 0;padding:13px 14px;border:1px solid rgba(233,201,143,.18);border-radius:13px;background:rgba(233,201,143,.08);color:#f4dfb6;font-weight:800}
@media(max-width:680px){.display-url-row{grid-template-columns:1fr 1fr}.display-url-input{grid-column:1/-1}.display-url-row .btn{width:100%}}

/* =========================================================
   CUPONES / SUPER ADMIN
========================================================= */
.coupon-disclosure{border:1px solid rgba(233,201,143,.12);border-radius:13px;background:rgba(255,255,255,.018);padding:0 13px}.coupon-disclosure summary{cursor:pointer;list-style:none;padding:11px 0;color:var(--muted);font-size:12px;font-weight:700}.coupon-disclosure summary::-webkit-details-marker{display:none}.coupon-disclosure summary::before{content:'＋';display:inline-block;margin-right:7px;color:var(--accent)}.coupon-disclosure[open] summary::before{content:'−'}.coupon-field{padding:0 0 13px}.coupon-benefit-card{display:flex;flex-direction:column;gap:4px;margin:14px 0;padding:13px 14px;border:1px solid rgba(233,201,143,.18);border-radius:13px;background:rgba(233,201,143,.08)}.coupon-benefit-card strong{color:var(--accent)}.coupon-benefit-card span{color:#e9e2d6;font-size:13px;line-height:1.45}.superadmin-card{margin:18px 0}.superadmin-summary{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}.superadmin-summary span{padding:9px 11px;border-radius:11px;background:#111820;border:1px solid rgba(255,255,255,.06);color:var(--muted);font-size:12px}.superadmin-summary strong{color:var(--text);font-size:16px;margin-right:4px}.status-chip{display:inline-flex;align-items:center;white-space:nowrap;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:900;letter-spacing:.04em}.status-chip.ok{background:rgba(109,187,145,.14);color:#bfe8cf;border:1px solid rgba(109,187,145,.2)}.status-chip.off{background:rgba(255,110,120,.1);color:#ffc7cb;border:1px solid rgba(255,110,120,.18)}.status-chip.neutral{background:#263342;color:#c8d2db;border:1px solid rgba(255,255,255,.06)}.admin-split{display:grid;grid-template-columns:minmax(320px,.85fr) minmax(420px,1.15fr);gap:16px;align-items:start}.coupon-admin-list{display:flex;flex-direction:column}.coupon-admin-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07)}.coupon-admin-row:last-child{border-bottom:0}.coupon-admin-row small{display:block;color:var(--muted);margin-top:4px;line-height:1.4}.coupon-code-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.coupon-code-line strong{color:var(--accent)}.admin-filterbar{display:grid;grid-template-columns:minmax(220px,1fr) 180px 180px auto;gap:9px;margin-bottom:14px}.admin-table-wrap{width:100%;overflow-x:auto}.admin-table{width:100%;min-width:1050px;border-collapse:collapse}.admin-table th,.admin-table td{text-align:left;vertical-align:top;padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.065);font-size:12px}.admin-table th{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.07em}.admin-table td>strong{display:block;color:var(--text);font-size:12px}.admin-table td>small{display:block;margin-top:4px;color:var(--muted);line-height:1.35}.admin-stats{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1040px){.admin-split{grid-template-columns:1fr}.admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-filterbar{grid-template-columns:1fr 1fr}.admin-filterbar input{grid-column:1/-1}}
@media(max-width:620px){.admin-filterbar{grid-template-columns:1fr}.admin-filterbar input{grid-column:auto}.admin-stats{grid-template-columns:1fr 1fr}.coupon-admin-row{align-items:flex-start;flex-direction:column}.coupon-admin-row .card-actions{width:100%}}

/* Premium / cupones */
.price-original {
  margin-top: 14px;
  color: var(--muted, #9ca3af);
  font-size: 0.95rem;
}
.coupon-benefit-card small {
  display: block;
  margin-top: 6px;
  opacity: .82;
}


/* =========================================================
   MENÚ MÓVIL
========================================================= */
.mobile-nav {
  display: none;
  margin-left: auto;
  position: relative;
}

.mobile-nav > summary {
  list-style: none;
  min-width: 46px;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid rgba(233,201,143,.16);
  border-radius: 12px;
  background: #18212a;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  user-select: none;
}

.mobile-nav > summary::-webkit-details-marker {
  display: none;
}

.mobile-menu-icon {
  width: 22px;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu-icon i {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.mobile-menu-label {
  font-size: 13px;
  font-weight: 800;
}

.mobile-nav-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(340px, calc(100vw - 24px));
  padding: 14px;
  border: 1px solid rgba(233,201,143,.18);
  border-radius: 18px;
  background: #111820;
  box-shadow: 0 22px 55px rgba(0,0,0,.45);
}

.mobile-user-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 6px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.mobile-user-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(233,201,143,.24);
}

.mobile-user-card strong,
.mobile-user-card small {
  display: block;
}

.mobile-user-card strong {
  color: var(--text);
  font-size: 14px;
}

.mobile-user-card small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

.mobile-nav-links a {
  min-height: 46px;
  padding: 10px 11px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #d7d9da;
  font-size: 14px;
  font-weight: 750;
}

.mobile-nav-links a.active {
  background: rgba(233,201,143,.10);
  color: var(--accent);
}

.mobile-nav-links a b {
  color: var(--accent2);
  font-size: 21px;
  line-height: 1;
}

.mobile-nav-actions {
  display: grid;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.mobile-nav-actions .btn {
  width: 100%;
}

.mobile-logout {
  min-height: 44px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #d9a7aa;
  font-size: 13px;
  font-weight: 800;
}

@media(max-width:820px) {
  .app-topbar {
    gap: 10px;
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .brand {
    min-width: 0;
    flex: 1;
  }

  .brand span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
  }

  .brand-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .top-nav,
  .desktop-user-menu {
    display: none !important;
  }

  .mobile-nav {
    display: block;
    flex: 0 0 auto;
  }
}

@media(max-width:390px) {
  .mobile-menu-label {
    display: none;
  }

  .brand span {
    font-size: 16px;
  }

  .mobile-nav > summary {
    padding-inline: 11px;
  }
}