:root{
  --bg:#070a11;
  --bg-elev:#0e1320;
  --card:#121829;
  --card-hi:#1a2236;
  --line:#222c44;
  --line-soft:#1a2236;
  --txt:#eaf0fb;
  --muted:#8693ad;
  --muted-2:#5d6b86;
  --acc:#4f8cff;
  --acc-2:#7c5cff;
  --grad:linear-gradient(135deg,#4f8cff 0%,#7c5cff 100%);
  --grad-soft:linear-gradient(135deg,rgba(79,140,255,.18),rgba(124,92,255,.18));
  --gold:#ffd24a;
  --radius:16px;
  --radius-sm:11px;
  --shadow:0 14px 40px -12px rgba(0,0,0,.7);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  /* resplandor sutil superior */
  background-image:
    radial-gradient(1200px 600px at 50% -260px,rgba(79,140,255,.16),transparent 70%),
    radial-gradient(900px 500px at 100% -200px,rgba(124,92,255,.10),transparent 70%);
  background-attachment:fixed;
}

/* Scrollbar */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#222c44;border-radius:20px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#2f3c5c;background-clip:padding-box}

/* ---- Topbar / tabs ---- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:28px;
  padding:16px 26px;
  background:rgba(7,10,17,.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line-soft);
}
.brand{
  font-weight:800; font-size:21px; letter-spacing:-.4px;
  display:flex; align-items:center; gap:2px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand .brand-2{font-weight:300; -webkit-text-fill-color:transparent}
.tabs{display:flex; gap:4px}
.topbar-cuenta{margin-left:auto; display:flex; gap:8px; align-items:center}
.topbar-entrar{color:var(--muted); text-decoration:none; font-size:14px; padding:7px 14px; background:transparent;
  font-family:inherit; cursor:pointer; border:1px solid var(--line); border-radius:var(--radius-sm); white-space:nowrap}
.topbar-entrar[hidden]{display:none}
.topbar-entrar:hover{color:var(--txt); border-color:var(--acc)}
.topbar-entrar:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
@media (max-width:600px){
  /* Marca e «Iniciar sesión» arriba; las pestañas en su propia fila para que no se partan. */
  .topbar{flex-wrap:wrap; row-gap:10px; gap:12px; padding:12px 16px}
  .tabs{order:3; flex-basis:100%; overflow-x:auto; gap:0}
  .tabs .tab{padding:9px 8px; font-size:14px}
  .tabs .tab.is-active::after{left:8px; right:8px}
  .brand,.tab{white-space:nowrap}
}
.tab{
  position:relative; background:transparent; color:var(--muted); border:0;
  padding:10px 16px; border-radius:10px; font-size:15px; font-weight:500;
  cursor:pointer; transition:color .2s var(--ease),background .2s var(--ease);
}
.tab:hover{color:var(--txt)}
.tab.is-active{color:var(--txt); background:rgba(255,255,255,.05)}
.tab.is-active::after{
  content:""; position:absolute; left:16px; right:16px; bottom:-1px; height:2px;
  background:var(--grad); border-radius:2px;
}
.tab:focus-visible{outline:2px solid var(--acc); outline-offset:2px}
/* Pestañas que son enlaces (la administración, #142): se ven igual que los botones. */
a.tab{display:inline-flex; align-items:center; text-decoration:none}
a.tab[hidden]{display:none}
a.brand{text-decoration:none}

/* ---- Views ---- */
main{padding:28px 26px 60px; max-width:1440px; margin:0 auto}
.view{display:none}
.view.is-active{display:block; animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.section-title{font-size:20px; font-weight:700; letter-spacing:-.3px; margin:0 0 18px}
.muted{color:var(--muted)}
.hint{color:var(--muted); margin:4px 0 22px; min-height:18px; font-size:14px}

/* ---- Search ---- */
.search{display:flex; gap:10px; margin:6px auto 8px; max-width:720px}
.search input{
  flex:1; background:var(--bg-elev); border:1px solid var(--line); color:var(--txt);
  padding:15px 18px; border-radius:14px; font-size:16px; transition:border .2s,box-shadow .2s;
}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 4px rgba(79,140,255,.18)}
.search button{
  background:var(--grad); color:#fff; border:0; padding:0 26px;
  border-radius:14px; font-size:15px; font-weight:600; cursor:pointer;
  transition:transform .15s var(--ease),filter .2s; letter-spacing:.2px;
}
.search button:hover{filter:brightness(1.08); transform:translateY(-1px)}
.search button:active{transform:translateY(0)}
.search button:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* ---- Grid de pósters ---- */
.grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
}
.card{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius);
  overflow:hidden; cursor:pointer; position:relative;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s;
}
.card:hover,.card:focus-visible{
  transform:translateY(-6px); border-color:var(--line);
  box-shadow:var(--shadow); outline:none;
}
.card:focus-visible{box-shadow:0 0 0 2px var(--acc),var(--shadow)}
.card-link{display:block; color:inherit; text-decoration:none; outline:none}
.card .poster{aspect-ratio:2/3; width:100%; background:var(--bg-elev); object-fit:cover; display:block}
.card .no-poster{display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; padding:14px; text-align:center; height:100%}
.card .meta{padding:10px 12px 12px}
.card .meta .t{font-size:13.5px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card .meta .s{font-size:12px; color:var(--muted); margin-top:4px; display:flex; gap:10px; align-items:center}
.badge{
  position:absolute; top:9px; left:9px;
  background:rgba(7,10,17,.66); backdrop-filter:blur(6px);
  padding:4px 9px; border-radius:8px; font-size:10.5px; font-weight:600; letter-spacing:.4px; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.08);
}
.fav-btn{
  position:absolute; top:7px; right:7px;
  background:rgba(7,10,17,.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.08);
  color:#fff; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:15px;
  opacity:0; transform:scale(.85); transition:opacity .2s,transform .2s,color .2s;
}
.card:hover .fav-btn,.card:focus-within .fav-btn,.fav-btn.on{opacity:1; transform:scale(1)}
.fav-btn:hover{background:rgba(7,10,17,.8)}
.fav-btn.on{color:var(--gold)}

/* Skeletons de carga */
.skeleton{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden}
.skeleton .sk-poster{aspect-ratio:2/3; width:100%;
  background:linear-gradient(100deg,#121829 30%,#1c2438 50%,#121829 70%);
  background-size:200% 100%; animation:shimmer 1.3s infinite}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---- Modal ---- */
.modal{position:fixed; inset:0; background:rgba(3,5,10,.78); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:50; padding:18px; animation:fade .25s var(--ease)}
.modal-card{background:var(--bg-elev); border:1px solid var(--line); border-radius:20px; max-width:780px; width:100%; max-height:90vh; overflow:auto; padding:26px; position:relative; box-shadow:var(--shadow)}
.modal-close{position:absolute; top:14px; right:14px; background:var(--card); border:1px solid var(--line-soft); color:var(--txt); width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:15px; transition:background .2s}
.modal-close:hover{background:var(--card-hi)}
.modal-head{display:flex; gap:22px; align-items:flex-start}
.modal-head img{width:140px; height:auto; aspect-ratio:2/3; object-fit:cover; border-radius:14px; flex:none; align-self:flex-start; box-shadow:var(--shadow)}
@media (max-width:560px){
  .modal-head{flex-direction:column}
  .modal-head img{width:120px}
}
.modal-head h2{margin:0 0 6px; font-size:25px; font-weight:800; letter-spacing:-.4px; line-height:1.15}
.modal-head .ov{color:var(--muted); font-size:14px; line-height:1.6; margin-top:10px}
.prov-group{margin-top:24px}
.prov-group h3{font-size:12px; margin:0 0 12px; color:var(--muted); text-transform:uppercase; letter-spacing:.8px; font-weight:700}
.prov-list{display:flex; flex-wrap:wrap; gap:12px}
.prov{
  display:flex; align-items:center; gap:11px; background:var(--card);
  border:1px solid var(--line-soft); border-radius:13px; padding:10px 15px 10px 11px;
  cursor:pointer; color:var(--txt); text-decoration:none; font-size:14px; font-weight:600;
  transition:transform .15s var(--ease),border-color .2s,background .2s;
}
.prov:hover,.prov:focus-visible{outline:none; transform:translateY(-2px); border-color:var(--acc); background:var(--card-hi)}
.prov img{width:36px; height:36px; border-radius:9px}
.jw-link{display:inline-block; margin-top:20px; color:var(--acc); font-weight:600; text-decoration:none}
.jw-link:hover{text-decoration:underline}
.empty-prov{color:var(--muted); margin-top:20px}

/* ---- TV en vivo ---- */
.live-layout{display:grid; grid-template-columns:230px 1fr; gap:22px}
.live-groups{display:flex; flex-direction:column; gap:3px; max-height:76vh; overflow:auto; padding-right:4px}
.live-groups button{display:flex; align-items:center; gap:9px; text-align:left; background:transparent; border:0; color:var(--muted); padding:9px 11px; border-radius:10px; cursor:pointer; font-size:14px; font-weight:500; transition:background .15s,color .15s}
.live-groups button:hover{color:var(--txt); background:rgba(255,255,255,.04)}
.live-groups button.on{background:var(--grad-soft); color:var(--txt); font-weight:600}
.live-groups .cat-ico{font-size:15px; width:20px; text-align:center; flex:none}
.live-groups .cat-label{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.live-groups .cat-count{font-size:11px; color:var(--muted); background:rgba(255,255,255,.06); padding:2px 7px; border-radius:20px; flex:none}
.live-groups button.on .cat-count{background:rgba(255,255,255,.12); color:var(--txt)}

/* Botón "Reanudar último canal" */
.resume-btn{display:block; width:100%; text-align:left; background:var(--grad-soft); border:1px solid var(--line); color:var(--txt); padding:12px 16px; border-radius:13px; margin-bottom:14px; cursor:pointer; font-size:14px; transition:border-color .2s,transform .15s var(--ease)}
.resume-btn:hover{border-color:var(--acc); transform:translateY(-1px)}

/* Selector de país en "Dónde ver" */
.toolbar{display:flex; justify-content:flex-end; max-width:720px; margin:0 auto 6px}
.country-pick{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted)}
.country-pick select{
  background:var(--bg-elev); border:1px solid var(--line); color:var(--txt);
  padding:9px 12px; border-radius:11px; font-size:14px; cursor:pointer; font-family:inherit;
}
.country-pick select:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(79,140,255,.18)}

/* Chips de "disponible en otros países" */
.country-chips{display:flex; flex-wrap:wrap; gap:9px; align-items:center}
.country-chip{
  display:inline-flex; align-items:center; gap:7px; background:var(--card);
  border:1px solid var(--line-soft); border-radius:11px; padding:8px 13px; cursor:pointer;
  color:var(--txt); font-size:13.5px; font-weight:500; transition:transform .15s var(--ease),border-color .2s,background .2s;
}
.country-chip:hover,.country-chip:focus-visible{outline:none; transform:translateY(-2px); border-color:var(--acc); background:var(--card-hi)}
.country-chip.sub{border-color:rgba(79,140,255,.4)}
.country-chip .tag{font-size:9.5px; text-transform:uppercase; letter-spacing:.4px; background:var(--grad); color:#fff; padding:2px 6px; border-radius:6px; font-weight:700}
.more-note{font-size:13px}
.live-filter{width:100%; background:var(--bg-elev); border:1px solid var(--line); color:var(--txt); padding:13px 16px; border-radius:14px; margin-bottom:16px; font-size:15px; transition:border .2s,box-shadow .2s}
.live-filter:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 4px rgba(79,140,255,.18)}
.chan-list{display:grid; gap:11px; grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.chan{display:flex; align-items:center; gap:11px; background:var(--card); border:1px solid var(--line-soft); border-radius:13px; padding:11px; cursor:pointer; color:var(--txt); transition:transform .15s var(--ease),border-color .2s,background .2s,opacity .2s}
.chan:hover,.chan:focus-visible{outline:none; transform:translateY(-2px); border-color:var(--acc); background:var(--card-hi)}
/* Partido de la agenda sin canal (#353): visible pero atenuado, aún no reproducible. */
.chan-sin-canal{opacity:.68}
.chan-sin-canal .chan-epg{color:var(--muted)}
/* Eventos agrupados por liga (#353), estilo Flashscore: encabezado plegable a todo lo ancho. */
.chan-grupo{grid-column:1/-1; display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
  margin:14px 0 2px; padding:6px 4px 7px; font-weight:700; font-size:12.5px; letter-spacing:.4px;
  text-transform:uppercase; color:var(--acc); border-bottom:1px solid var(--line-soft)}
.chan-grupo:first-child{margin-top:2px}
.chan-grupo:hover,.chan-grupo:focus-visible{outline:none; color:var(--txt)}
.chan-grupo-flecha{font-size:10px; transition:transform .15s var(--ease)}
.chan-grupo.colapsada .chan-grupo-flecha{transform:rotate(-90deg)}
.chan-grupo-n{margin-left:auto; color:var(--muted); font-weight:600; letter-spacing:0}
/* Selector de deporte de Eventos de hoy (#353). */
.eventos-deportes{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px}
.dep-chip{display:inline-flex; align-items:center; gap:6px; padding:7px 15px; border-radius:999px; border:1px solid var(--line-soft);
  background:var(--card); color:var(--txt); cursor:pointer; font-size:13px; font-weight:600}
.dep-chip span{color:var(--muted); font-size:12px}
.dep-chip:hover{border-color:var(--acc)}
.dep-chip.on{background:var(--grad); border-color:transparent; color:#fff}
.dep-chip.on span{color:rgba(255,255,255,.82)}
.eventos-ocultar{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); cursor:pointer; white-space:nowrap}
.chan img{width:44px; height:44px; object-fit:contain; border-radius:8px; background:#000; flex:none}
.chan .chan-ph{width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:8px; background:var(--grad-soft); font-weight:700; font-size:18px; color:var(--txt)}
.chan .chan-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.chan .chan-name{font-size:13.5px; line-height:1.25; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chan .chan-epg{font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chan .chan-epg:empty{display:none}
.chan .chan-state{flex:none; font-size:13px; width:18px; text-align:center}
.chan.checking{opacity:.8}
.chan.checking .chan-state::before{content:'•'; color:var(--acc); animation:pulse 1s infinite}
.chan.dead{opacity:.5}
.chan.dead .chan-state::before{content:'⚠'; color:#e9a13b}
.chan.dead .chan-name{text-decoration:line-through; text-decoration-color:rgba(233,161,59,.5)}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
.chan-list.hide-dead .chan.dead{display:none}

/* Barra superior de TV en vivo */
.live-bar{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.live-bar .live-filter{margin-bottom:0; flex:1}
.hide-dead-toggle{display:flex; align-items:center; gap:7px; color:var(--muted); font-size:14px; white-space:nowrap; cursor:pointer; user-select:none}
.hide-dead-toggle input{width:16px; height:16px; accent-color:var(--acc); cursor:pointer}

/* ---- Reproductor ---- */
.player{position:fixed; inset:0; background:#000; z-index:60; display:flex; flex-direction:column; animation:fade .25s var(--ease)}
.player video{flex:1; width:100%; height:100%; background:#000}
.player-youtube{flex:1; width:100%; height:100%; border:0; background:#000}
/* Prueba de un resumen en segundo plano (#335): fuera de la vista y sin recibir clics, pero con tamaño para que arranque. */
.yt-prueba{position:fixed; right:0; bottom:0; width:320px; height:180px; border:0; opacity:0; pointer-events:none; z-index:-1}
.chan-resumen img{width:80px; height:45px; object-fit:cover}
/* Resumen que su dueño solo deja ver en YouTube (#447): se abre allá; etiqueta discreta. */
a.chan-resumen-youtube{text-decoration:none}
.chan .chan-yt{flex:none; align-self:flex-start; font-size:10.5px; font-weight:600; color:var(--muted); white-space:nowrap;
  padding:2px 7px; border-radius:999px; border:1px solid var(--line-soft)}
.chan-resumen-youtube:hover .chan-yt,.chan-resumen-youtube:focus-visible .chan-yt{color:var(--txt); border-color:var(--acc)}
.player-close{position:absolute; top:16px; right:16px; z-index:2; background:rgba(7,10,17,.6); backdrop-filter:blur(8px); color:#fff; border:1px solid rgba(255,255,255,.12); padding:10px 18px; border-radius:11px; cursor:pointer; font-size:14px; font-weight:600; transition:background .2s}
.player-close:hover{background:rgba(7,10,17,.9)}
.player-title{position:absolute; top:16px; left:16px; background:rgba(7,10,17,.6); backdrop-filter:blur(8px); padding:10px 18px; border-radius:11px; font-size:14px; font-weight:600; border:1px solid rgba(255,255,255,.1)}
.player-epg{position:absolute; top:58px; left:16px; max-width:70%; background:rgba(7,10,17,.5); backdrop-filter:blur(8px); padding:8px 14px; border-radius:10px; font-size:13px; border:1px solid rgba(255,255,255,.08)}
/* Selector de señal de un partido con varias opciones (#356). */
.player-senales{position:absolute; top:56px; left:16px; max-width:80%; z-index:3; display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  background:rgba(7,10,17,.5); backdrop-filter:blur(8px); padding:7px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.08)}
.player-senales-lbl{font-size:12px; color:var(--muted)}
.senal-chip{padding:4px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); color:#fff; cursor:pointer; font-size:12px}
.senal-chip.on{background:var(--grad); border-color:transparent}
.senal-chip:hover{border-color:var(--acc)}
/* Escoger el canal de un partido que dan varios (#438): opciones grandes, enfocables con el control remoto. */
.senales-titulo{margin:0 40px 4px 0; font-size:21px; font-weight:800}
.senales-elegir{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin-top:16px}
.senal-opcion{display:flex; align-items:center; gap:10px; padding:12px; border-radius:14px; border:1px solid var(--line-soft); background:var(--card);
  color:var(--txt); cursor:pointer; font-size:15px; font-weight:600; text-align:left; transition:transform .15s, border-color .15s, background .15s}
.senal-opcion img,.senal-opcion .chan-ph{width:44px; height:44px; flex:none; object-fit:contain; border-radius:10px}
.senal-opcion small{margin-left:auto; font-size:11px; font-weight:500; color:var(--muted)}
.senal-opcion:hover,.senal-opcion:focus-visible{outline:none; transform:translateY(-2px); border-color:var(--acc); background:var(--card-hi)}
.player-status{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(7,10,17,.86); border:1px solid var(--line); padding:18px 24px; border-radius:14px; font-size:15px; max-width:80%; text-align:center; display:none; box-shadow:var(--shadow)}
.player-pausa{position:absolute; left:50%; bottom:92px; transform:translateX(-50%); z-index:2; background:rgba(7,10,17,.8); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.12); padding:10px 20px; border-radius:999px; font-size:15px; white-space:nowrap; display:flex; align-items:center; gap:10px; box-shadow:var(--shadow); animation:fade .25s var(--ease)}
.player-pausa[hidden]{display:none}
.player-pausa b{font-variant-numeric:tabular-nums}
.pausa-punto{width:9px; height:9px; border-radius:50%; background:#fff; animation:pausaLatido 1.2s infinite}
@keyframes pausaLatido{0%,100%{opacity:.3}50%{opacity:1}}
.player-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:2; background:rgba(7,10,17,.5); backdrop-filter:blur(8px); color:#fff; border:1px solid rgba(255,255,255,.12); width:54px; height:84px; border-radius:14px; cursor:pointer; font-size:34px; line-height:1; display:flex; align-items:center; justify-content:center; opacity:.55; transition:opacity .2s,background .2s}
.player-nav:hover{opacity:1; background:rgba(7,10,17,.85)}
.player-nav:disabled{opacity:.12; cursor:default}
.player-nav.prev{left:18px}
.player-nav.next{right:18px}

/* ---- TV / pantallas grandes ---- */
@media (min-width:1600px){
  body{font-size:17px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(185px,1fr))}
}
@media (max-width:640px){
  .live-layout{grid-template-columns:1fr}
  .live-groups{flex-direction:row; overflow-x:auto; max-height:none; padding-bottom:6px}
  .live-groups button{white-space:nowrap}
  main{padding:20px 16px 50px}
}

/* ---- Lista paginada de TV en vivo ---- */
.cat-sep{height:1px; background:var(--line-soft); margin:8px 4px}
.chan-count{margin:0 0 10px; font-size:13px; min-height:16px}
.chan.chan-skel{pointer-events:none}
.chan-skel .chan-ph,.chan-skel .sk-line{
  background:linear-gradient(90deg,var(--card) 0%,var(--card-hi) 50%,var(--card) 100%);
  background-size:200% 100%; animation:shimmer 1.3s infinite}
.chan-skel .sk-line{display:block; height:12px; width:70%; border-radius:6px}
.chan-more{display:block; margin:16px auto 0; background:var(--card); color:var(--txt); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:10px 22px; cursor:pointer}
.chan-more:hover{border-color:var(--acc)}
.chan-more:focus-visible{outline:2px solid var(--acc); outline-offset:2px}
@media (max-width:640px){ .live-bar{flex-wrap:wrap; gap:10px} }

/* ---- Cómo se ven los canales (#125) ---- */
.vista-canales{display:flex; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; flex:none}
.vista-canales button{background:transparent; border:0; color:var(--muted); font-size:17px; line-height:1; padding:8px 11px; cursor:pointer}
.vista-canales button + button{border-left:1px solid var(--line)}
.vista-canales button:hover{color:var(--txt)}
.vista-canales button[aria-pressed="true"]{background:var(--grad-soft); color:var(--txt)}
.vista-canales button:focus-visible{outline:2px solid var(--acc); outline-offset:-2px}
/* Lista: una por fila, con el nombre entero. */
.chan-list.vista-lista{grid-template-columns:1fr; gap:6px}
.chan-list.vista-lista .chan{padding:8px 11px}
.chan-list.vista-lista .chan img,.chan-list.vista-lista .chan .chan-ph{width:36px; height:36px}
.chan-list.vista-lista .chan .chan-name{white-space:normal}
/* Logos grandes: el logo arriba y el nombre debajo, en dos líneas como mucho. */
.chan-list.vista-logos{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.chan-list.vista-logos .chan{flex-direction:column; text-align:center; padding:16px 10px 12px; gap:9px}
.chan-list.vista-logos .chan img,.chan-list.vista-logos .chan .chan-ph{width:100%; height:84px}
.chan-list.vista-logos .chan .chan-ph{font-size:30px}
.chan-list.vista-logos .chan .chan-info{width:100%}
.chan-list.vista-logos .chan .chan-name{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.chan-list.vista-logos .chan .chan-fav{position:absolute; top:4px; right:4px}
.chan-list.vista-logos .chan .chan-state{position:absolute; top:8px; left:6px}

/* ---- Columna de categorías ---- */
.live-side{display:flex; flex-direction:column; gap:6px; min-width:0}

/* ---- Avisos y confirmaciones propias ---- */
.avisos{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); display:flex; flex-direction:column;
  gap:8px; z-index:1000; width:min(92vw,420px); pointer-events:none}
.aviso{background:var(--card-hi); color:var(--txt); border:1px solid var(--line); border-left:3px solid var(--acc);
  border-radius:var(--radius-sm); padding:11px 14px; font-size:14px; box-shadow:var(--shadow);
  animation:fade .25s var(--ease); transition:opacity .3s, transform .3s}
.aviso-ok{border-left-color:#3ecf8e}
.aviso-error{border-left-color:#ff6b6b}
.aviso.saliendo{opacity:0; transform:translateY(6px)}
.confirmar-capa{position:fixed; inset:0; background:rgba(3,5,10,.66); backdrop-filter:blur(3px); display:flex;
  align-items:center; justify-content:center; z-index:1001; padding:16px; animation:fade .2s var(--ease)}
.confirmar{background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  width:min(100%,400px); padding:22px 22px 18px; max-height:calc(100vh - 32px); overflow:auto}
.confirmar h3{margin:0 0 8px; font-size:17px}
.confirmar p{margin:0 0 18px; color:var(--muted); font-size:14px; line-height:1.45}
.confirmar-botones{display:flex; justify-content:flex-end; gap:10px}
.confirmar-botones button{border-radius:var(--radius-sm); padding:9px 16px; font-size:14px; cursor:pointer;
  border:1px solid var(--line); background:var(--card); color:var(--txt)}
.confirmar-botones .cf-aceptar{background:var(--grad); border-color:transparent; color:#fff; font-weight:600}
.confirmar-botones .cf-aceptar.peligro{background:#d64545}
.confirmar-botones button:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* ---- Pestañas Canales en vivo / A la carta ---- */
.tipo-tabs{display:flex; gap:8px; margin:0 0 12px; flex-wrap:wrap}
.tipo-tabs button{background:var(--card); color:var(--muted); border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; font-size:14px; cursor:pointer}
.tipo-tabs button span{font-size:12px; opacity:.8; margin-left:4px}
.tipo-tabs button.on{background:var(--grad-soft); color:var(--txt); border-color:var(--acc)}
.tipo-tabs button:focus-visible{outline:2px solid var(--acc); outline-offset:2px}

/* ---- Favoritos en TV en vivo ---- */
.chan{position:relative}
.chan-fav{background:none; border:0; color:var(--muted-2); font-size:16px; cursor:pointer; padding:4px 6px; border-radius:8px; flex:none}
.chan-fav:hover{color:var(--muted)}
.chan-fav.on{color:var(--gold)}
.chan-fav:focus-visible{outline:2px solid var(--acc); outline-offset:1px}

/* ---- Series a la carta ---- */
.serie-cab{grid-column:1/-1; display:flex; flex-direction:column; gap:10px; margin-bottom:4px}
.serie-cab h3{margin:0; font-size:18px}
.serie-volver{align-self:flex-start; background:none; border:0; color:var(--acc); cursor:pointer; font-size:14px; padding:4px 0}
.chan.serie img{object-fit:cover}
/* Películas y Series (#468): carátulas verticales, como en las apps de IPTV (en «Lista» siguen en filas). */
.chan-list.carteles:not(.vista-lista){grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.chan-list.carteles:not(.vista-lista) .chan:not(.chan-skel){flex-direction:column; align-items:stretch; text-align:left; padding:0 0 10px; gap:8px; overflow:hidden}
.chan-list.carteles:not(.vista-lista) .chan img,.chan-list.carteles:not(.vista-lista) .chan .chan-ph{width:100%; height:auto; aspect-ratio:2/3; border-radius:12px 12px 0 0; object-fit:cover}
.chan-list.carteles:not(.vista-lista) .chan .chan-ph{font-size:34px}
.chan-list.carteles:not(.vista-lista) .chan .chan-info{padding:0 10px}
.chan-list.carteles:not(.vista-lista) .chan .chan-name{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.chan-list.carteles:not(.vista-lista) .chan .chan-fav{position:absolute; top:6px; right:6px}
.chan-list.carteles:not(.vista-lista) .chan .chan-state{position:absolute; top:8px; left:8px}

/* ---- Administración: usuarios de las apps (#34) ---- */
.admin-tag{color:var(--muted); font-size:14px; font-weight:600; padding:4px 10px; border:1px solid var(--line); border-radius:999px}
.admin-nav{margin-left:auto; display:flex; align-items:center; gap:14px}
.admin-volver{color:var(--muted); text-decoration:none; font-size:14px}
.admin-volver:hover{color:var(--txt)}
.admin-salir{background:var(--card); color:var(--txt); border:1px solid var(--line); border-radius:var(--radius-sm); padding:7px 14px; font-size:14px; cursor:pointer}
.admin{max-width:820px; margin:0 auto; padding:26px 16px 60px; display:flex; flex-direction:column; gap:18px}
.admin #panel{display:flex; flex-direction:column; gap:18px}
.admin #panel[hidden]{display:none}
.admin-card{background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px}
.admin-card h2{margin:0 0 6px; font-size:19px}
.admin-card h3{margin:0 0 12px; font-size:16px}
.admin-entrar{max-width:440px; width:100%; margin:40px auto 0}
.admin-ayuda{margin:0 0 14px; font-size:14px; line-height:1.45}
.admin-total{display:inline-block; min-width:22px; text-align:center; font-size:13px; font-weight:600; color:var(--txt);
  background:var(--grad-soft); border-radius:999px; padding:2px 8px; margin-left:6px; vertical-align:2px}
.admin-total:empty{display:none}
.admin-form{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.admin-form input{flex:1; min-width:0; background:var(--card); border:1px solid var(--line); color:var(--txt);
  padding:11px 13px; border-radius:var(--radius-sm); font-size:15px; width:100%}
.admin-form input:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(79,140,255,.18)}
.admin-form label{flex:1; min-width:180px; display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted)}
.admin-primario{background:var(--grad); color:#fff; border:0; border-radius:var(--radius-sm); padding:11px 20px;
  font-size:15px; font-weight:600; cursor:pointer}
.admin-primario:disabled{opacity:.6; cursor:wait}
.admin-primario:focus-visible,.admin-boton:focus-visible,.admin-salir:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.admin-msg{margin:10px 0 0; font-size:14px; color:#ff8a8a; min-height:1px}
.admin-msg:empty{display:none}
/* Regenerar la lista (#221): estado y lo que entró nuevo */
.admin-regenerar-estado{margin:12px 0 0; font-size:14px; line-height:1.45}
.admin-regenerar-estado:empty{display:none}
.admin-nuevos{margin:8px 0 0; padding:0 0 0 2px; list-style:none; max-height:320px; overflow:auto; font-size:14px; line-height:1.6}
.admin-nuevos li{padding:2px 0; border-bottom:1px solid rgba(255,255,255,.06)}
.admin-lista{display:flex; flex-direction:column; border:1px solid var(--line-soft); border-radius:var(--radius-sm); overflow:hidden}
.admin-fila{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; background:var(--card)}
.admin-fila + .admin-fila{border-top:1px solid var(--line-soft)}
.admin-fila-txt{display:flex; flex-direction:column; gap:3px; min-width:0}
.admin-fila-txt b{font-size:15px; overflow-wrap:anywhere}
.admin-fila-txt span{font-size:13px}
.admin-fila-acciones{display:flex; gap:8px; flex:none}
.admin-boton{background:var(--card-hi); color:var(--txt); border:1px solid var(--line); border-radius:9px; padding:7px 12px; font-size:13px; cursor:pointer}
.admin-boton:hover{border-color:var(--acc)}
.admin-boton.peligro{color:#ff8a8a}
.admin-boton.peligro:hover{border-color:#d64545}
.admin-vacio{margin:0; padding:16px 14px; font-size:14px}
.esqueleto .esq{display:block; height:12px; border-radius:6px; background:linear-gradient(90deg,var(--card-hi),var(--line),var(--card-hi));
  background-size:200% 100%; animation:esq 1.2s linear infinite}
.esq-nombre{width:120px}
.esq-fecha{width:80px; margin-left:auto}
@keyframes esq{from{background-position:200% 0} to{background-position:-200% 0}}
.admin-datos{border-color:var(--acc); box-shadow:0 0 0 3px rgba(79,140,255,.12)}
.admin-datos-cab{display:flex; justify-content:space-between; align-items:center}
.admin-datos-cab h3{margin:0}
.admin-cerrar{background:none; border:0; color:var(--muted); font-size:16px; cursor:pointer; padding:4px 8px; border-radius:8px}
.admin-aviso{margin:8px 0 12px; font-size:14px; color:var(--gold)}
.admin-pre{margin:0 0 14px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px;
  font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; user-select:all}
@media (max-width:600px){
  .pagina-admin .topbar{gap:10px; padding:12px 16px; flex-wrap:wrap}
  .admin-tag{display:none}
  .admin-fila{flex-direction:column; align-items:stretch}
  .admin-fila-acciones{justify-content:stretch}
  .admin-fila-acciones .admin-boton{flex:1}
  .admin-form label{flex-basis:100%}
  .admin-form .admin-primario{width:100%}
}

/* ---- Vigencia de los usuarios (#41) ---- */
.admin-vencidas{font-size:13px; font-weight:600; color:#ff8a8a; vertical-align:2px}
.admin-estado{font-size:13px; font-weight:600}
.admin-estado.activo{color:#3ecf8e}
.admin-estado.vencido{color:#ff8a8a}
.admin-estado.sin{color:var(--muted)}
.admin-fila.vencida b{color:var(--muted)}
.admin-boton.destacado{background:var(--grad); border-color:transparent; color:#fff; font-weight:600}
.admin-vigencia{display:flex; flex-direction:column; gap:6px}
.admin-vigencia > span:last-child,.confirmar .admin-vigencia{display:flex; gap:8px; flex-wrap:wrap}
.admin-select,.admin-fecha{flex:1; min-width:140px; background:var(--card); border:1px solid var(--line); color:var(--txt);
  padding:11px 13px; border-radius:var(--radius-sm); font-size:15px; color-scheme:dark}
.admin-select:focus,.admin-fecha:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(79,140,255,.18)}
.confirmar .admin-vigencia{margin:0 0 6px}
.confirmar .admin-msg{margin:0 0 10px; color:#ff8a8a}

/* ---- Correo de los usuarios (#43) ---- */
.admin-correo{font-size:13px; overflow-wrap:anywhere}
.admin-correo.ok{color:var(--muted)}
.admin-correo.pendiente{color:var(--gold)}
.admin-correo.sin{color:var(--muted-2)}
.verificar-ok h2{color:#3ecf8e}
.confirmar .admin-form{margin:0 0 6px}

/* ---- Datos de acceso en cada usuario (#60): los botones se acomodan si no caben ---- */
.admin-fila-acciones{flex-wrap:wrap; justify-content:flex-end}

/* ---- Adultos por usuario (#74) ---- */
.admin-adultos{font-size:12px; font-weight:600; color:#ff8a8a; margin-left:6px}
.admin-casilla{flex-direction:row !important; align-items:center; gap:8px !important; min-width:0 !important; flex-basis:100%; color:var(--txt) !important; font-size:14px !important; cursor:pointer}
.admin-casilla input{width:18px; height:18px; accent-color:var(--acc); flex:none}
/* Con muchos botones, pasan debajo del nombre en vez de apretarlo. */
.admin-fila{flex-wrap:wrap}
.admin-fila-txt{flex:1 1 260px}

/* ---- Administración: tabla ancha con búsqueda, filtro y páginas (#77) ---- */
.admin{max-width:none}  /* #453: toda la pantalla; con la columna «Categoría» (#448) la tabla de Especiales no cabía en 1240 px */
.admin-entrar{max-width:440px}
.admin-barra{display:flex; justify-content:space-between; align-items:flex-start; gap:16px}
.admin-barra h2{margin:0 0 6px; font-size:20px}
.admin-barra .admin-ayuda{margin:0; max-width:720px}
.admin-barra .admin-primario{flex:none; white-space:nowrap}
.admin-filtros{display:flex; gap:10px; flex-wrap:wrap}
.admin-filtros input{flex:1 1 320px; min-width:0; background:var(--card); border:1px solid var(--line); color:var(--txt);
  border-radius:var(--radius-sm); padding:10px 12px; font-size:14px}
.admin-filtros input:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(79,140,255,.18)}
.admin-filtros .admin-select{flex:0 0 190px}
.admin-tabla-caja{border:1px solid var(--line-soft); border-radius:var(--radius-sm); overflow-x:auto; background:var(--card)}  /* #453: si no cabe, se desplaza en vez de cortarse */
.admin-tabla{width:100%; border-collapse:collapse; font-size:14px}
.admin-tabla th{text-align:left; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
  padding:11px 14px; background:var(--bg-elev); border-bottom:1px solid var(--line-soft); white-space:nowrap}
.admin-tabla td{padding:11px 14px; border-top:1px solid var(--line-soft); vertical-align:middle}
.admin-tabla tbody tr:first-child td{border-top:0}
.admin-tabla tbody tr:hover td{background:rgba(255,255,255,.02)}
.admin-tabla tr.vencida .admin-nombre{color:var(--muted)}
.admin-nombre{font-size:15px; overflow-wrap:anywhere}
.admin-correo-celda{display:flex; flex-direction:column; gap:2px; min-width:0}
.admin-correo-txt{overflow-wrap:anywhere}
.admin-tabla .admin-th-acc,.admin-acciones{text-align:right}
.admin-acciones{white-space:nowrap}
.admin-acciones .admin-boton + .admin-boton{margin-left:6px}
.admin-mas{font-size:16px; line-height:1; padding:6px 11px}
.admin-adultos{margin-left:0}
.admin-tabla .admin-vacio{text-align:center; color:var(--muted); padding:28px 14px}
.admin-esq td .esq{display:block; height:12px; width:70%; border-radius:6px;
  background:linear-gradient(90deg,var(--card-hi),var(--line),var(--card-hi)); background-size:200% 100%; animation:esq 1.2s linear infinite}
.admin-esq td:first-child .esq{width:55%}
.admin-paginas{display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:14px}
.admin-paginas[hidden]{display:none}
.admin-paginas-btn{display:flex; gap:8px}
.admin-boton:disabled{opacity:.45; cursor:default; border-color:var(--line)}
.admin-menu{position:absolute; z-index:60; min-width:210px; display:flex; flex-direction:column; padding:6px;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow)}
.admin-menu button{background:none; border:0; color:var(--txt); text-align:left; font-size:14px; padding:9px 12px; border-radius:8px; cursor:pointer}
.admin-menu button:hover,.admin-menu button:focus-visible{background:var(--card-hi); outline:none}
.admin-menu button.peligro{color:#ff8a8a}
.admin-modal{width:min(560px,100%)}
.admin-modal-ancho{width:min(680px,100%)}
.admin-modal .admin-datos-cab{margin-bottom:10px}
.admin-form-crear{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:4px 0 14px}
.admin-form-crear label{min-width:0}
.admin-form-crear .admin-casilla,.admin-form-crear .admin-casilla-ancha{grid-column:1/-1}
.admin-modal #cpLista{margin:4px 0 14px; max-height:300px; overflow:auto}
.admin-modal #cpLista .admin-fila-txt span{overflow-wrap:anywhere}
/* Importar (#348): la lista de fuentes/canales puede ser larga; que haga scroll dentro del modal
   para que el pie con los botones no se salga de la pantalla. */
.admin-modal #imLista{max-height:min(46vh,430px); overflow:auto}
.admin-modal #imLista .admin-fila-txt span{overflow-wrap:anywhere}
/* Canal especial (#350): icono y aviso de guía (EPG) junto al nombre. */
.admin-paga-canal{display:flex; align-items:center; gap:10px}
.admin-paga-logo{flex:none; width:34px; height:34px; object-fit:contain; border-radius:6px; background:var(--card); border:1px solid var(--line-soft)}
.admin-paga-logo-no{display:flex; align-items:center; justify-content:center; font-size:16px}
/* Películas y series (#468): la carátula vertical; lo oculto para todos, atenuado. */
.admin-vod-portada{width:30px; height:44px; object-fit:cover}
.admin-vod-oculto td:not(.admin-acciones):not(.admin-sel){opacity:.55}
.admin-paga-epg{font-size:12px; color:var(--muted); white-space:nowrap}
.admin-paga-item{cursor:pointer; justify-content:flex-start}
.admin-paga-item input{width:18px; height:18px; accent-color:var(--acc); flex:none}
/* Importar una lista (#468): cada grupo con su destino; los canales de un grupo de TV en vivo se despliegan. */
.admin-imp-grupo{cursor:default; flex-wrap:wrap; gap:10px}
.admin-imp-grupo .admin-fila-txt{flex:1; min-width:180px}
.admin-imp-grupo > select{flex:none; max-width:240px}
.admin-imp-canales{flex-basis:100%; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:4px 12px; max-height:260px; overflow:auto; padding:6px 2px 2px}
.admin-imp-canales[hidden]{display:none}
.admin-imp-canal{display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer}
.admin-imp-canal input{width:16px; height:16px; accent-color:var(--acc); flex:none}
.admin-enlace{background:none; border:0; padding:0; color:var(--acc); font:inherit; cursor:pointer; text-decoration:underline}
.admin-paga-marcar{display:flex; gap:8px; align-items:center; margin:0 0 10px}
.admin-paga-n{font-size:12px; font-weight:600; color:var(--acc); margin-left:6px; white-space:nowrap}
.admin-calidad{font-size:12px; font-weight:600; color:var(--muted); margin-left:6px; white-space:nowrap}
.admin-paga-url{max-width:420px; overflow-wrap:anywhere; font-size:13px}
.admin-paga-cat{min-width:120px; max-width:190px}
.admin-paga-botones{display:flex; gap:8px; align-items:center; flex:none}
.admin-th-sel,.admin-sel{width:34px; padding-right:0}
.admin-sel input,.admin-th-sel input{width:17px; height:17px; accent-color:var(--acc); cursor:pointer}
.admin-bloque{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 12px; padding:10px 14px; background:var(--card); border:1px solid var(--acc); border-radius:var(--radius-sm); font-size:14px}
.admin-bloque .admin-select{min-width:200px}
.admin-paga-siempre{margin:0 0 10px; font-size:14px}
.admin-paga-caido{font-size:12px; font-weight:600; color:#ffb35c}
.admin-paga-apagada{opacity:.45}
.admin-paga-origenes{display:flex; flex-direction:column; gap:6px; margin:0 0 14px}
.admin-paga-filtros{margin:0 0 12px}
.admin-paga-origen{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 14px; background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius-sm); font-size:13px}
.admin-paga-tabs{display:flex; gap:6px; margin:0 0 12px}
.admin-paga-tabs button{background:var(--card); color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:13px; cursor:pointer}
.admin-paga-tabs button.on{color:var(--txt); border-color:var(--acc)}
.admin-form-crear textarea{width:100%; min-height:120px; background:var(--card); border:1px solid var(--line); color:var(--txt); border-radius:9px; padding:10px; font:inherit; font-size:13px; resize:vertical}
#imFiltro{flex:1; min-width:140px}
.admin-form-crear .admin-vigencia .admin-select{min-width:0}
.confirmar .admin-form-crear + .admin-msg{margin:0 0 12px}
@media (max-width:760px){
  .admin-barra{flex-direction:column}
  .admin-barra .admin-primario{width:100%}
  .admin-filtros .admin-select{flex:1 1 100%}
  .admin-form-crear{grid-template-columns:1fr}
  /* La tabla se vuelve tarjetas: cada fila, una tarjeta con sus datos rotulados. */
  .admin-tabla thead{display:none}
  .admin-tabla,.admin-tabla tbody,.admin-tabla tr,.admin-tabla td{display:block; width:100%}
  .admin-tabla tr{padding:12px 14px; border-top:1px solid var(--line-soft)}
  .admin-tabla tbody tr:first-child{border-top:0}
  .admin-tabla td{border:0; padding:3px 0; display:flex; gap:10px}
  .admin-tabla td[data-col]::before{content:attr(data-col); flex:0 0 74px; color:var(--muted-2); font-size:12px; padding-top:2px}
  .admin-tabla td[data-col="Usuario"]::before{content:none}
  .admin-acciones{text-align:left; padding-top:10px !important; white-space:normal}
  .admin-acciones .admin-boton{flex:1}
  .admin-acciones .admin-mas{flex:0 0 auto}
  .admin-esq td{display:block}
  .admin-paginas{flex-direction:column; align-items:stretch; text-align:center}
  .admin-paginas-btn .admin-boton{flex:1}
}

/* ---- TV en vivo en la web: prueba gratis y sesión de suscriptor (#128) ---- */
.topbar-usuario{color:var(--txt); font-size:14px; padding:7px 10px; white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis;
  background:transparent; border:1px solid transparent; border-radius:var(--radius-sm); cursor:pointer; font-family:inherit}
.topbar-usuario:hover{border-color:var(--line)}
.topbar-usuario:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.topbar-usuario[hidden]{display:none}
a.topbar-usuario{text-decoration:none; display:inline-block}
.tv-aviso{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px;
  padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--grad-soft); font-size:14px; line-height:1.45}
.tv-aviso[hidden]{display:none}
.tv-aviso span{flex:1; min-width:220px}
.tv-aviso.tv-aviso-fin{border-color:#e9a13b}
.tv-aviso-boton{background:var(--card); color:var(--txt); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:8px 14px; font-size:14px; cursor:pointer; white-space:nowrap; font-family:inherit}
a.tv-aviso-boton{text-decoration:none}
.tv-aviso-boton.primario{background:var(--grad); color:#fff; border:0; font-weight:600}
.tv-aviso-boton:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.chan-list.sin-acceso .chan-fav{display:none}
.entrar-card{max-width:420px}
.entrar-card h2{margin:0 0 8px; font-size:20px}
.entrar-ayuda{margin:0 0 16px; color:var(--muted); font-size:14px; line-height:1.45}
.entrar-form{display:flex; flex-direction:column; gap:12px}
.entrar-form label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted)}
.entrar-form input{background:var(--card); border:1px solid var(--line); color:var(--txt); padding:11px 13px;
  border-radius:var(--radius-sm); font-size:15px; width:100%; font-family:inherit}
.entrar-form input:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(79,140,255,.18)}
.entrar-msg{margin:0; font-size:14px; color:#ff8a8a}
.entrar-msg:empty{display:none}
.entrar-boton{background:var(--grad); color:#fff; border:0; border-radius:var(--radius-sm); padding:12px 20px;
  font-size:15px; font-weight:600; cursor:pointer; font-family:inherit}
.entrar-boton:disabled{opacity:.6; cursor:wait}
.entrar-boton:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.entrar-pie{margin:16px 0 0; font-size:13px; color:var(--muted)}
.entrar-pie a{color:var(--acc)}

.admin-ajustes .admin-form label{max-width:260px}
/* ---- Administración: quién entró y quién está viendo (#129) ---- */
.admin-visitas{display:flex; flex-direction:column; gap:14px}
.vis-linea,.vis-punto{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:1px}
.vis-linea{background:#3ecf8e; box-shadow:0 0 0 3px rgba(62,207,142,.18)}
.vis-punto{background:#ff5d5d; animation:pulse 1.4s infinite}

/* ---- Administración: una sección a la vez, elegida en el menú (#135). No es .admin-menu: ese es el «⋯» de cada usuario. ---- */
.admin #panel:not([hidden]){display:grid; grid-template-columns:210px minmax(0,1fr); gap:26px; align-items:start}
.admin-secciones{position:sticky; top:84px; display:flex; flex-direction:column; gap:4px}
.admin-secciones a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--radius-sm);
  color:var(--muted); text-decoration:none; font-size:15px; border:1px solid transparent}
.admin-secciones a:hover{color:var(--txt); background:var(--card)}
.admin-secciones a[aria-current="page"]{color:var(--txt); background:var(--grad-soft); border-color:var(--line)}
.admin-secciones a:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.admin-secciones-n{margin-left:auto; min-width:20px; text-align:center; font-size:12px; font-weight:700; color:#0b0e14;
  background:#3ecf8e; border-radius:999px; padding:1px 7px}
.admin-secciones-n:empty{display:none}
.admin-seccion{display:flex; flex-direction:column; gap:18px; min-width:0}
.admin-seccion[hidden]{display:none}
@media (max-width:760px){
  .admin #panel:not([hidden]){grid-template-columns:1fr; gap:16px}
  .admin-secciones{position:static; flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:4px}
  .admin-secciones a{white-space:nowrap; padding:8px 12px; font-size:14px}
}

.admin-pantallas{font-size:12px}

/* ---- Mi cuenta del suscriptor (#139) ---- */
.cuenta{display:flex; flex-direction:column; gap:16px; max-width:980px}
.cuenta-tarjetas{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px}
.cuenta-card{background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; min-width:0}
.cuenta-card h3{margin:0 0 10px; font-size:16px}
.cuenta-card p{margin:0 0 8px; line-height:1.5}
.cuenta-card .sk-line{display:block; height:14px; width:60%; border-radius:6px; background:var(--card-hi)}
.cuenta-grande{font-size:20px}
.cuenta-aviso{color:var(--gold)}
.cuenta-sub{margin-top:12px; font-size:14px; font-weight:600}
.cuenta-lista{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:14px}
.cuenta-datos{display:grid; grid-template-columns:max-content minmax(0,1fr); gap:6px 16px; margin:12px 0 16px; font-size:15px}
.cuenta-datos dt{color:var(--muted)}
.cuenta-datos dd{margin:0; overflow-wrap:anywhere; font-weight:600}
.cuenta-pre{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius-sm); padding:14px; margin:0 0 12px;
  font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; max-height:420px; overflow:auto}

.cuenta-card .tv-aviso-boton{white-space:normal; text-align:center; max-width:100%}

/* ---- Un solo «Iniciar sesión»: el administrador es un usuario con el rol (#155) ---- */
.admin-iniciar{display:inline-block; text-decoration:none}
.admin-rol{display:inline-block; font-size:11px; font-weight:700; color:var(--gold); border:1px solid var(--gold); border-radius:999px; padding:1px 7px; margin-left:6px; vertical-align:2px}

/* Logs (#268) */
.admin-estado.aviso{color:#f5c542}
.admin-secciones-n.admin-secciones-rojo{background:#ff8a8a}
.admin-tabla-logs td[data-col="Qué pasó"]{word-break:break-word}
.log-detalle{display:block; margin-top:2px; color:var(--muted); font-size:12px; white-space:pre-wrap; word-break:break-word}
.log-linea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; white-space:pre-wrap; word-break:break-word}
.log-veces{display:inline-block; margin-left:6px; padding:0 6px; border-radius:9px; background:var(--card-hi); color:var(--muted); font-size:12px; font-weight:600}
.log-estado{margin:0 0 10px; line-height:1.5}
#logFuente{max-width:230px}


/* ---- Planes y compra (#130) ---- */
.planes{max-width:1080px; margin:0 auto; padding:34px 22px 60px}
.planes-cabeza{text-align:center; margin-bottom:28px}
.planes-cabeza h1{margin:0 0 10px; font-size:32px; font-weight:800; letter-spacing:-.6px; line-height:1.15}
.planes-sub{margin:0 auto 16px; max-width:620px; color:var(--muted); font-size:16px; line-height:1.5}
.planes-promo{display:inline-block; margin:0 0 16px; padding:9px 16px; border-radius:999px; background:rgba(255,210,74,.12);
  border:1px solid rgba(255,210,74,.4); color:var(--gold); font-size:14px}
.planes-moneda{display:flex; justify-content:center; align-items:center; gap:10px; font-size:14px; color:var(--muted)}
.planes-moneda select{background:var(--card); color:var(--txt); border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 12px; font:inherit}
.planes-estado{text-align:center}
.planes-tarjetas{display:flex; flex-wrap:wrap; gap:16px; justify-content:center}
.plan{flex:1 1 210px; max-width:250px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px 18px 20px; position:relative}
.plan-destacado{border-color:transparent; background:linear-gradient(var(--card),var(--card)) padding-box, var(--grad) border-box; border-width:2px; box-shadow:var(--shadow)}
.plan-meses{margin:0; font-size:18px; font-weight:700}
.plan-sello{display:inline-block; padding:5px 11px; border-radius:999px; background:var(--grad-soft); color:var(--txt); font-size:13px; font-weight:600}
.plan-precio{display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; justify-content:center}
.plan-antes{color:var(--muted); font-size:14px}
.plan-total{font-size:30px; font-weight:800; letter-spacing:-.6px}
.plan-local{color:var(--muted); font-size:14px}
.plan-mes{color:var(--muted); font-size:13px}
.planes-elegir{background:var(--grad); color:#fff; border:0; border-radius:var(--radius-sm); padding:11px 26px; font:inherit; font-weight:600; cursor:pointer; width:100%}
.planes-elegir:hover{filter:brightness(1.08)}
.planes-elegir:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.planes-otro{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin:22px auto 0; max-width:1032px;
  background:var(--bg-elev); border:1px solid var(--line-soft); border-radius:var(--radius); padding:18px 22px}
.planes-otro-elegir{display:flex; align-items:center; gap:16px}
.planes-otro-titulo{font-weight:700}
.planes-pasos{display:flex; align-items:center; gap:10px}
.planes-pasos button{width:38px; height:38px; border-radius:50%; background:var(--card); border:1px solid var(--line); color:var(--txt); font-size:18px; cursor:pointer}
.planes-pasos button:disabled{opacity:.4; cursor:default}
.planes-pasos button:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.planes-pasos output{min-width:84px; text-align:center; font-weight:600}
.planes-otro-total{flex:1; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.planes-otro-total .plan-precio{flex-direction:row; align-items:baseline; gap:10px; flex:none; flex-wrap:wrap}
.planes-otro-total .plan-total{font-size:24px}
.planes-otro .planes-elegir{width:auto}
.planes-info{display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:44px}
.planes-info h2{font-size:18px; margin:0 0 12px}
.planes-lista{margin:0; padding-left:20px; color:var(--muted); line-height:1.6; font-size:15px}
.planes-lista li{margin-bottom:6px}
.planes-lista b{color:var(--txt)}
.planes-nota{margin-top:32px; font-size:13px; text-align:center; line-height:1.5}
.planes-nota a{color:var(--muted)}
.planes-pronto{max-width:440px}
.planes-pronto h2{margin:0 0 10px; font-size:20px}
.planes-pronto p{line-height:1.5}
.planes-pronto-botones{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:18px}
.planes-pronto-botones a{text-decoration:none}
/* Compra con Wompi (#44) y página de regreso del pago */
.planes-tipo{display:flex; gap:8px; flex-wrap:wrap}
.planes-tipo label{flex:1; display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--card); color:var(--txt); font-size:14px; cursor:pointer}
.planes-tipo label:has(input:checked){border-color:var(--acc); box-shadow:0 0 0 3px rgba(79,140,255,.18)}
.planes-wompi{font-size:12px; margin:0}
.pago-card{max-width:560px; margin:0 auto}
.pago-botones{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
.pago-botones a{text-decoration:none}
@media (max-width:760px){
  .planes{padding:24px 16px 48px}
  .planes-cabeza h1{font-size:25px}
  .planes-info{grid-template-columns:1fr; gap:18px}
  .plan{flex:1 1 calc(50% - 8px); padding:18px 12px 16px}
  .plan-total{font-size:25px}
  .planes-otro{flex-direction:column; align-items:stretch; gap:14px}
  .planes-otro-elegir{justify-content:space-between}
  .planes-otro .planes-elegir{width:100%}
}
/* Administración › Planes (#130) */
.admin-ajustes .admin-planes-form label{max-width:none; min-width:200px}
.admin-planes-regalo{flex:1 1 100%; border:1px solid var(--line-soft); border-radius:var(--radius-sm); padding:12px 14px; margin:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:14px; color:var(--muted)}
.admin-planes-regalo legend{padding:0 6px; font-size:13px}
.admin-planes-regalo input{flex:none; width:70px; background:var(--card); border:1px solid var(--line); color:var(--txt);
  padding:8px 10px; border-radius:var(--radius-sm); font-size:15px}
.admin-promo-form{margin-top:14px}
.admin-promo-form .admin-promo-pct{flex:0 1 120px; min-width:110px}
.admin-promo-form .admin-promo-fecha{flex:0 1 160px; min-width:150px}
.admin-promo-form input[type=date]{color-scheme:dark}

/* ---- «Dónde ver» con dirección propia (#382) ---- */
.ficha{max-width:960px; margin:0 auto; padding:24px 22px 60px}
.ficha-migas{font-size:13px; color:var(--muted); margin-bottom:18px}
.ficha-migas a{color:var(--muted)}
.ficha-migas a:hover{color:var(--txt)}
.ficha-cabeza{display:flex; gap:26px; align-items:flex-start}
.ficha-poster{width:200px; height:auto; aspect-ratio:2/3; object-fit:cover; border-radius:14px; flex:none; box-shadow:var(--shadow)}
.ficha h1{margin:0 0 8px; font-size:30px; font-weight:800; letter-spacing:-.5px; line-height:1.15}
.ficha-datos{margin:0 0 14px; color:var(--muted); font-size:14px}
.ficha-resumen{margin:0 0 12px; font-size:16px; line-height:1.5; padding:12px 14px; background:var(--grad-soft); border-radius:var(--radius-sm)}
.ficha-sinopsis{margin:0; color:var(--muted); line-height:1.6}
.ficha-donde{margin-top:30px}
.ficha-donde h2{font-size:19px; margin:0 0 12px}
.ficha-prov{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.ficha-prov a,.ficha-prov li > span{display:flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--txt); text-decoration:none; font-size:14px}
.ficha-prov a:hover{border-color:var(--acc)}
.ficha-prov img{width:46px; height:46px; border-radius:10px}
.ficha-paises{margin:0; padding-left:20px; color:var(--muted); line-height:1.7; font-size:14px}
.ficha-paises b{color:var(--txt); font-weight:600}
.ficha-ficha{display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; margin:30px 0 0; font-size:14px}
.ficha-ficha dt{color:var(--muted)}
.ficha-ficha dd{margin:0}
.ficha-cs{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:36px; padding:16px 18px;
  background:var(--bg-elev); border:1px solid var(--line-soft); border-radius:var(--radius)}
.ficha-cs p{margin:0; flex:1; min-width:220px; line-height:1.5}
.ficha-fuente{margin-top:26px; font-size:12px; line-height:1.5}
.ficha-fuente a{color:var(--muted)}
@media (max-width:600px){
  .ficha{padding:18px 16px 48px}
  .ficha-cabeza{flex-direction:column}
  .ficha-poster{width:150px}
  .ficha h1{font-size:24px}
}
.preguntas h1{margin-bottom:22px}
.pregunta{padding:18px 0; border-top:1px solid var(--line-soft)}
.pregunta h2{margin:0 0 8px; font-size:18px}
.pregunta p{margin:0; color:var(--muted); line-height:1.6}
/* Pie de las páginas abiertas a buscadores (#382): centrado y breve */
.pie{max-width:1080px; margin:24px auto 0; padding:22px 16px 28px; border-top:1px solid var(--line-soft); color:var(--muted);
  font-size:12px; line-height:1.6; text-align:center}
.pie nav{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 20px; margin-bottom:12px; font-size:14px}
.pie a{color:var(--muted); text-decoration:none}
.pie a:hover{color:var(--txt)}
.pie p{margin:0 auto; max-width:620px}
.pie .pie-datos{font-size:11px; color:var(--muted-2)}
.pie .pie-autor{margin-top:10px; font-size:13px}
.pie .pie-autor a{color:var(--txt)}
.ficha-mas{margin:10px 0 0; font-size:14px}
/* Detalle de «Dónde ver»: bajo el póster, el enlace a la ficha completa (#382) */
.modal-lado{flex:none; display:flex; flex-direction:column; align-items:center; gap:10px; align-self:flex-start}
.modal-ficha{font-size:13px; color:var(--acc); text-decoration:none; font-weight:600; white-space:nowrap}
.modal-ficha:hover{text-decoration:underline}
@media (max-width:560px){ .modal-lado{align-items:flex-start} }
/* Manual de uso (#382) */
.manual-intro{color:var(--muted); line-height:1.6; margin:0 0 18px}
.manual-indice{background:var(--bg-elev); border:1px solid var(--line-soft); border-radius:var(--radius); padding:14px 18px; margin-bottom:10px}
.manual-indice ol{margin:0; padding-left:20px; columns:2; column-gap:30px; line-height:1.9}
.manual section{padding:20px 0 6px; border-top:1px solid var(--line-soft); margin-top:22px; scroll-margin-top:80px}
.manual h2{font-size:20px; margin:0 0 12px}
.manual p,.manual li{line-height:1.65; color:var(--muted)}
.manual b{color:var(--txt); font-weight:600}
.manual li{margin-bottom:6px}
.manual a{color:var(--acc)}
@media (max-width:600px){ .manual-indice ol{columns:1} }

/* ---- Chat de ayuda (#383) ---- */
.chat-boton{position:fixed; right:18px; bottom:18px; z-index:40; display:flex; align-items:center; gap:6px; padding:12px 18px;
  background:var(--grad); color:#fff; border:0; border-radius:999px; font:inherit; font-weight:600; cursor:pointer; box-shadow:var(--shadow)}
.chat-boton:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.chat-punto{width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 2px #fff}
body:has(#player:not([hidden])) .chat-boton,body:has(.modal:not([hidden])) .chat-boton{display:none}
.chat-panel{position:fixed; right:18px; bottom:78px; z-index:41; width:370px; max-width:calc(100vw - 32px); height:min(560px, calc(100vh - 110px));
  display:flex; flex-direction:column; background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.chat-panel[hidden]{display:none}
.chat-cab{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line-soft); background:var(--grad-soft)}
.chat-cab b{display:block; font-size:15px}
.chat-estado{font-size:12px; color:var(--muted)}
.chat-cerrar{background:none; border:0; color:var(--muted); font-size:16px; cursor:pointer; padding:6px 8px; border-radius:8px}
.chat-cerrar:hover{color:var(--txt)}
.chat-mensajes{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px}
.chat-msg{max-width:88%; padding:10px 12px; border-radius:14px; font-size:14px; line-height:1.5}
.chat-msg p{margin:0}
.chat-msg a{display:inline-block; margin-top:6px; font-size:13px; color:var(--acc); font-weight:600; text-decoration:none}
.chat-ayuda,.chat-asesor{align-self:flex-start; background:var(--card); border:1px solid var(--line-soft); border-bottom-left-radius:4px}
.chat-asesor{border-color:rgba(255,210,74,.4)}
.chat-usuario{align-self:flex-end; background:var(--grad); color:#fff; border-bottom-right-radius:4px}
.chat-autor{display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-bottom:3px}
.chat-asesor .chat-autor{color:var(--gold)}
.chat-sugerencias{display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px}
.chat-sugerencias[hidden]{display:none}
.chat-sugerencias button{background:var(--card); color:var(--txt); border:1px solid var(--line); border-radius:999px; padding:6px 11px; font:inherit; font-size:13px; cursor:pointer}
.chat-sugerencias button:hover{border-color:var(--acc)}
.chat-form{display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--line-soft)}
.chat-form input{flex:1; min-width:0; background:var(--card); border:1px solid var(--line); color:var(--txt); padding:10px 12px; border-radius:var(--radius-sm); font:inherit; font-size:14px}
.chat-form input:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(79,140,255,.18)}
.chat-form button{background:var(--grad); color:#fff; border:0; border-radius:var(--radius-sm); padding:0 14px; font:inherit; font-weight:600; cursor:pointer}
.chat-form button:disabled{opacity:.6; cursor:wait}
.chat-pie{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 12px 12px}
.chat-pedir[hidden]{display:none}
.chat-pedir{background:none; border:0; color:var(--acc); font:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:4px 0}
.chat-quedan{font-size:12px; color:var(--muted)}
@media (max-width:600px){
  .chat-boton{right:12px; bottom:12px; padding:11px 15px}
  .chat-panel{right:8px; left:8px; bottom:70px; width:auto; max-width:none; height:calc(100vh - 90px)}
}
/* Administración › Chat en vivo (#383); los globos reutilizan los del chat público */
.admin-chat .admin-filtros .admin-select{flex:0 0 280px}
.admin-chat-fila{width:100%; text-align:left; font:inherit; color:var(--txt); border:0; cursor:pointer}
.admin-chat-fila:hover,.admin-chat-fila.abierta{background:var(--card-hi)}
.admin-chat-fila.sin-leer b{color:var(--gold)}
.admin-chat-fila .admin-fila-txt span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:480px}
.admin-chat-lado{flex:none; text-align:right; font-size:12px; line-height:1.5}
.admin-chat-nuevo{font-size:11px; padding:1px 7px; border-radius:999px; background:rgba(255,210,74,.15); color:var(--gold); margin-left:6px}
.admin-chat-conv{display:flex; flex-direction:column; gap:12px}
.admin-chat-mensajes{display:flex; flex-direction:column; gap:10px; max-height:420px; overflow-y:auto; padding:4px 2px}
.admin-chat-mensajes .chat-usuario{align-self:flex-start; background:var(--card-hi); color:var(--txt); border:1px solid var(--line)}
.admin-chat-mensajes .chat-asesor{align-self:flex-end}
.admin-chat-mensajes .chat-ayuda{opacity:.75}
.admin-chat-form{display:flex; flex-direction:column; gap:10px}
.admin-chat-form textarea{background:var(--card); border:1px solid var(--line); color:var(--txt); padding:11px 13px; border-radius:var(--radius-sm);
  font:inherit; font-size:15px; resize:vertical}
.admin-chat-form textarea:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(79,140,255,.18)}
.admin-chat-botones{display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap}
@media (max-width:600px){ .admin-chat .admin-filtros .admin-select{flex:1 1 100%} .admin-chat-fila .admin-fila-txt span{max-width:220px} }