/* ══════════ TRONO DE ORO v4 — tema global ══════════ */
:root{
  --bg:#0d0c0a;--bg-soft:#16120e;--surface:#1d1712;
  --ivory:#f7f2ea;--ivory-soft:rgba(247,242,234,.78);
  --gold:#c9a24b;--gold-light:#e7cf9a;--burgundy:#6e1f2a;--muted:#b3a894;
  --font-heading:"Cormorant Garamond",Georgia,serif;
  --font-body:"Jost","Segoe UI",sans-serif;
  --radius:16px;--line:rgba(201,162,75,.22);--shadow:0 24px 70px rgba(0,0,0,.35)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0!important;color:var(--ivory)!important;font-family:var(--font-body)!important;
font-weight:300!important;line-height:1.7!important;min-height:100vh;
background:radial-gradient(1100px 520px at 50% -10%,rgba(201,162,75,.12),transparent 60%),
linear-gradient(180deg,var(--bg-soft),var(--bg))!important}
::selection{background:var(--gold);color:#0d0c0a}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(201,162,75,.35);border-radius:99px}
h1,h2,h3,h4{font-family:var(--font-heading)!important;color:var(--ivory)!important;
font-weight:600!important;line-height:1.1!important}
p{color:var(--ivory-soft)}
a{color:var(--gold-light)!important;text-decoration:none!important;transition:.25s}
a:hover{color:var(--gold)!important}
hr{border:none;height:1px;max-width:240px;margin:34px auto;
background:linear-gradient(90deg,transparent,var(--gold),transparent)}
header,nav,.navbar,.header{background:rgba(13,12,10,.9)!important;
border-bottom:1px solid var(--line)!important;padding:14px 22px!important;
display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
header a:first-of-type,nav a:first-of-type{font-family:var(--font-heading)!important;
font-size:1.4rem!important;color:var(--gold-light)!important;letter-spacing:.06em}
nav a[href$=".html"],main a[href$=".html"],.menu a[href$=".html"]{
display:inline-block;margin:5px;padding:11px 22px;border:1px solid var(--line);
border-radius:999px;letter-spacing:.08em;font-size:.85rem;text-transform:uppercase;
background:rgba(255,255,255,.03)}
nav a[href$=".html"]:hover,main a[href$=".html"]:hover{border-color:var(--gold);
background:rgba(201,162,75,.12)}
button,.btn,.button,input[type="submit"]{font-family:var(--font-body)!important;
text-transform:uppercase!important;letter-spacing:.14em!important;font-size:.78rem!important;
color:var(--gold-light)!important;
background:linear-gradient(180deg,rgba(201,162,75,.18),rgba(201,162,75,.05))!important;
border:1px solid rgba(201,162,75,.55)!important;border-radius:999px!important;
padding:12px 26px!important;cursor:pointer!important;transition:.25s}
button:hover,.btn:hover{transform:translateY(-2px);
background:linear-gradient(180deg,rgba(201,162,75,.3),rgba(201,162,75,.1))!important}
form{display:grid;gap:14px}
form:has(input[type="password"]){background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02))!important;
border:1px solid var(--line)!important;border-radius:var(--radius)!important;
padding:36px 30px!important;box-shadow:var(--shadow)!important;max-width:560px;margin:44px auto}
input:not([type="checkbox"]):not([type="radio"]),textarea,select{
background:var(--surface)!important;color:var(--ivory)!important;
border:1px solid var(--line)!important;border-radius:12px!important;
padding:12px 16px!important;font-family:var(--font-body)!important;width:100%}
input[type="checkbox"],input[type="radio"]{accent-color:var(--gold);width:16px;height:16px}
label{color:var(--ivory-soft)!important;font-size:.92rem}
label:has(input[type="checkbox"]){display:flex;align-items:center;gap:10px;margin:14px 0}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold)!important;
box-shadow:0 0 0 3px rgba(201,162,75,.15)}
table{width:100%;border-collapse:collapse;background:var(--surface)!important;
border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
th{background:rgba(201,162,75,.14)!important;color:var(--gold-light)!important;
text-transform:uppercase;letter-spacing:.12em;font-size:.72rem}
th,td{padding:14px 18px;border-bottom:1px solid var(--line)!important;text-align:left;
color:var(--ivory-soft)}
.card,.panel,.box{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02))!important;
border:1px solid var(--line)!important;border-radius:var(--radius)!important;
padding:30px 26px!important;box-shadow:var(--shadow)!important;color:var(--ivory-soft)}
blockquote{font-family:var(--font-heading);font-size:1.25rem;color:var(--ivory-soft);
border-left:2px solid var(--gold);padding-left:20px;margin:26px 0}
main{padding:24px;max-width:1160px;margin:0 auto;animation:fadeIn .8s ease}
main p{max-width:860px}
footer{border-top:1px solid var(--line)!important;color:var(--muted)!important;
text-align:center;padding:40px 20px!important;background:transparent!important}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* ── v5: ajuste fino sobre captura real ── */
/* Encabezado fijo al hacer scroll */
header,nav,.navbar,.header{position:sticky;top:0;z-index:50}

/* Píldoras del menú todas del mismo tamaño
   (en la captura “Registro público” salía más grande) */
nav a[href$=".html"],main a[href$=".html"],.menu a[href$=".html"]{
font-size:.85rem!important;padding:11px 22px!important;letter-spacing:.08em!important}

/* Tarjetas con brillo sutil al pasar el mouse */
.card,.panel,.box{transition:.3s}
.card:hover,.panel:hover,.box:hover{border-color:rgba(201,162,75,.45);transform:translateY(-2px)}

/* Insignias de rol (♛ Dominante / ⛓ Sumiso) uniformes */
.chip,.badge,.tag,span[class*="role"],span[class*="badge"]{
display:inline-block;padding:4px 14px;border:1px solid rgba(201,162,75,.5);
border-radius:999px;color:var(--gold-light)!important;font-size:.72rem;
letter-spacing:.12em;text-transform:uppercase;background:rgba(201,162,75,.08)}

/* Títulos de sección sin salto extra */
h2{margin-top:0}
/* ── v6: remate final ── */

/* 1) Botones de eliminación en burdeos elegante (disuasorios pero finos) */
button[class*="danger"],button[class*="delete"],button[class*="eliminar"],
button[id*="danger"],button[id*="delete"],button[id*="eliminar"],.btn-danger{
color:#eec3c9!important;border-color:rgba(158,58,72,.75)!important;
background:linear-gradient(180deg,rgba(110,31,42,.4),rgba(110,31,42,.18))!important;
box-shadow:0 0 30px rgba(110,31,42,.28)!important}
button[class*="danger"]:hover,button[class*="delete"]:hover,button[class*="eliminar"]:hover{
background:linear-gradient(180deg,rgba(158,58,72,.55),rgba(110,31,42,.3))!important}

/* 2) Enlaces sueltos siempre dorados (vi uno azulado en el chat) */
a:any-link,a:visited,p a,main a,.card a{color:var(--gold-light)!important}

/* 3) Checkboxes a juego con el trono (marcados en oro, sin cuadros blancos) */
input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:18px;height:18px;
border:1px solid rgba(201,162,75,.55);border-radius:4px;background:var(--surface);
cursor:pointer;position:relative;flex:none}
input[type="checkbox"]:checked{background:var(--gold);border-color:var(--gold)}
input[type="checkbox"]:checked::after{content:"✓";position:absolute;inset:0;
display:grid;place-items:center;color:#0d0c0a;font-size:12px;font-weight:700}
/* ── v7: panel de apodos compacto ── */
div:has(> div > input[placeholder="Nuevo apodo"]):not(:has(div:has(> div > input[placeholder="Nuevo apodo"]))){
  max-height:360px; overflow-y:auto;
  background:rgba(255,255,255,.02);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:16px;
}
div:has(> div > input[placeholder="Nuevo apodo"]):not(:has(div:has(> div > input[placeholder="Nuevo apodo"])))::before{
  content:"Apodos de miembros · desplázate para ver todos";
  display:block; color:var(--muted); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px;
}
div:has(> div > input[placeholder="Nuevo apodo"]):not(:has(div:has(> div > input[placeholder="Nuevo apodo"])))::-webkit-scrollbar{width:8px}
div:has(> div > input[placeholder="Nuevo apodo"]):not(:has(div:has(> div > input[placeholder="Nuevo apodo"])))::-webkit-scrollbar-thumb{background:rgba(201,162,75,.35);border-radius:99px}
/* Nombre propio en oro (los colores del chat se conservan) */
.card p.small b{color:var(--gold-light)!important}
/* ══════ TOASTS DE NOTIFICACIONES EN TIEMPO REAL ══════ */
#toast-container{
  position:fixed;top:24px;right:24px;z-index:9999;
  display:flex;flex-direction:column;gap:12px;pointer-events:none;
  max-width:360px
}
.toast{
  pointer-events:auto;
  background:linear-gradient(180deg,rgba(29,23,18,.98),rgba(13,12,10,.98));
  border:1px solid rgba(201,162,75,.5);border-left:3px solid var(--gold);
  border-radius:14px;padding:14px 18px;
  box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 30px rgba(201,162,75,.15);
  backdrop-filter:blur(10px);
  animation:toastIn .4s cubic-bezier(.2,.8,.2,1) both;
  cursor:pointer;text-decoration:none;color:var(--ivory);display:block;
  transition:.3s
}
.toast:hover{border-color:var(--gold);transform:translateX(-4px)}
.toast-title{
  font-family:var(--font-heading);color:var(--gold-light);
  font-size:14px;font-weight:600;margin-bottom:4px;letter-spacing:.02em
}
.toast-body{color:var(--ivory-soft);font-size:13px;line-height:1.45}
.toast-meta{
  color:var(--muted);font-size:11px;margin-top:6px;
  letter-spacing:.08em;text-transform:uppercase
}
.toast.out{animation:toastOut .35s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(40px)}}
@media (max-width:480px){
  #toast-container{top:12px;right:12px;left:12px;max-width:none}
}
/* ═══════════════════════════════════════════════════════════
   ESCALA DE BOLSILLO — la casa entera en pantallas chicas
   ═══════════════════════════════════════════════════════════ */
@media (max-width:640px){
  html{font-size:14px}
  body{font-size:14px}

  h1{font-size:20px !important;letter-spacing:.02em !important}
  h2{font-size:17px !important}
  h3{font-size:15px !important}

  header{padding:10px 12px !important}
  header nav, header > div{font-size:12px !important;gap:8px !important}
  .navlink{margin-left:8px !important;font-size:13px !important}

  main{padding:12px !important;max-width:100% !important}

  .card{padding:12px !important;margin-bottom:12px !important;border-radius:12px !important}
  .item{padding:10px !important;border-radius:10px !important}
  .small{font-size:12px !important}
  label{font-size:13px !important}

  button{padding:8px 12px !important;font-size:13px !important;border-radius:9px !important;letter-spacing:.04em !important}
  button.mini{padding:2px 7px !important;font-size:11px !important}
  input,select,textarea{padding:8px 10px !important;font-size:14px !important;border-radius:9px !important}

  summary{padding:10px 12px !important;font-size:13px !important}
  details .body{padding:10px 12px !important}
  .count{padding:2px 8px !important;font-size:10px !important}
  .badge{font-size:11px !important;padding:2px 7px !important}

  .ava{width:44px !important;height:44px !important}
  .sub-avatar{width:56px !important;height:56px !important}
  img.avatar{width:96px !important;height:96px !important}

  .row{gap:8px !important}
  .col{min-width:100% !important}

  .pm-line,.line{font-size:12px !important}
  .pm-att img{max-width:160px !important;max-height:160px !important}
  .pm-att video{max-width:190px !important}

  .prow{padding:3px 4px !important;font-size:13px !important}
  .room-tab{font-size:12px !important;padding:5px 9px !important}

  #share-fab{width:44px !important;height:44px !important;bottom:12px !important;left:12px !important}
  #google_translate_element{bottom:10px !important;right:10px !important;transform:scale(.9);transform-origin:bottom right}
}

@media (max-width:380px){
  body{font-size:13px}
  h1{font-size:18px !important}
  button{padding:7px 10px !important;font-size:12px !important}
  input,select,textarea{font-size:13px !important}
}