/* =====================================================================
   style.css — Centro de Descargas Perú (CDD)
   Tema oscuro limpio, contrastado y ligero
   Combina estilos de app + auth + modal registro
   ===================================================================== */

/* ---------- Tema ---------- */
:root{
  --bg:#0e1224; --bg-2:#12183a; --surface:#181f45; --surface-2:#1b2452;
  --border:#26316b; --accent:#7c9dff; --accent-2:#6ef7d8; --text:#eef2ff;
  --muted:#a9b4d6; --ok:#4cd188; --err:#ff6b6b; --warn:#ffd166;
  --shadow:0 10px 30px rgba(0,0,0,.25); --r:16px; --trans:180ms cubic-bezier(.2,.8,.2,1);

  /* Breakpoints (nuevos) */
  --bp-lg:1200px;
  --bp-md:980px;
  --bp-sm:680px;
}

/* ---------- Reset mínimo ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, #1a2050 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 10%, #0d1233 0%, transparent 60%),
    linear-gradient(180deg,#0a0f28 0%, var(--bg) 100%);
  font:16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}

/* Scrollbar (webkit) */
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-track{background:#0c1130}
*::-webkit-scrollbar-thumb{background:#2a3773;border-radius:10px}
*::-webkit-scrollbar-thumb:hover{background:#3a4aa3}

/* ---------- Utilidades ---------- */
a{color:#a9c2ff;text-decoration:none;transition:color var(--trans)}
a:hover{color:#c4d3ff;text-decoration:underline}
.muted{color:var(--muted)} .right{text-align:right}
.pill{display:inline-block;padding:.15rem .55rem;border-radius:999px;background:#0f1740;border:1px solid var(--border);color:#c3ccf2;font-size:.78rem}
.w120{width:120px} .w100{width:100%} .mt{margin-top:.65rem}
.row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.row.inline{justify-content:flex-start} .row.wrap{flex-wrap:wrap}
.grid{display:grid;gap:1rem} .g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.two{grid-template-columns:1fr 1fr} .col-span{grid-column:1/-1}

/* ---------- Layout de app ---------- */
/* Áreas: sidebar (fijo) + main (contiene topbar + content) */
.layout{
  display:grid;
  grid-template-columns:280px 1fr;
  grid-template-areas:"sidebar main";
  min-height:100vh;
}
.sidebar{ grid-area:sidebar; }
.main-wrap{ grid-area:main; display:flex; flex-direction:column; min-height:100vh; min-width:0; } /* <-- min-width evita overflow */

/* Colapso de sidebar en DESKTOP (no tapa el contenido) */
.layout.sidebar-collapsed{ grid-template-columns:0 1fr; }
.layout.sidebar-collapsed .sidebar{ width:0; padding:0; border-right:0; overflow:hidden; }

/* Topbar (dentro de .main-wrap) */
.topbar{
  display:flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem; border-bottom:1px solid var(--border);
  background:var(--bg-2); position:sticky; top:0; z-index:1200;
}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px;height:40px;border-radius:10px;border:1px solid var(--border);
  background:transparent;color:var(--text);cursor:pointer;
}
.topbar-title{font-weight:700;font-size:1rem;letter-spacing:.2px}

/* Sidebar */
.sidebar{
  background:#0e1430; border-right:1px solid #1f2a54; padding:1rem;
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:1rem;
  transition:transform .25s ease,width .25s ease,padding .25s ease;
}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:800}
.brand img{width:28px;height:28px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.logo-circle{
  width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#081024; font-weight:900;
  box-shadow:0 6px 16px rgba(124,157,255,.3);
}
.brand-text{font-size:1.02rem;letter-spacing:.2px}

.nav{display:grid;gap:.35rem}
.nav a{
  display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border-radius:12px; border:1px solid transparent;
  color:#dbe3ff; transition:background var(--trans), border-color var(--trans), transform var(--trans);
}
.nav a:hover{background:#111a3c;border-color:#273669;transform:translateX(2px)}
.nav a.active{background:linear-gradient(90deg, rgba(124,157,255,.18), rgba(110,247,216,.10));border-color:#3a4aa3;color:#fff}
.nav svg{width:18px;height:18px;display:block}

.sidebar-section{margin-top:auto;border-top:1px solid #1f2a54;padding-top:1rem}
.sidebar-title{font-weight:700;color:#cdd6ff;margin-bottom:.4rem}
.support-links{display:grid;gap:.45rem}
.support-link{display:inline-flex;align-items:center;gap:.45rem}
.support-link svg{width:18px;height:18px;}

/* Contenido principal */
.content{ padding:1.2rem; flex:1; min-width:0; } /* <-- min-width evita overflow */
.section{ padding:1.2rem }

/* ---------- Tarjetas ---------- */
.card{
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:1rem 1.2rem;
  overflow-x:auto; /* <-- ayuda a tablas anchas en móvil */
}

/* ---------- Formularios ---------- */
input,select,textarea{
  width:100%;padding:.65rem .7rem;border:1px solid var(--border);
  border-radius:12px;background:#0f1631;color:var(--text);
  outline:none;transition:border-color var(--trans),box-shadow var(--trans),background var(--trans);
}
input::placeholder, textarea::placeholder{color:#8fa0d0}
input:focus,select:focus,textarea:focus{border-color:#4b63d0;box-shadow:0 0 0 3px rgba(124,157,255,.18);background:#0e1533}

/* Botones */
.btn{appearance:none;border:0;padding:.62rem .95rem;border-radius:12px;cursor:pointer;font-weight:700;letter-spacing:.2px;transition:transform var(--trans),box-shadow var(--trans),background var(--trans)}
.btn.primary{color:#081024;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 8px 20px rgba(124,157,255,.20)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(124,157,255,.28)}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}
.btn.ghost:hover{background:#0f1740;color:#dfe6ff}
.btn.danger{background:#ff6b6b22;border:1px solid #ff6b6b66;color:#ffb3b3}
.btn.danger:hover{background:#ff6b6b33}

/* Chips / icon previews */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .6rem;border:1px solid var(--border);border-radius:999px;background:#0f173e;color:#dbe3ff;cursor:pointer;transition:transform var(--trans),background var(--trans),border-color var(--trans)}
.chip:hover{transform:translateY(-1px);background:#131f53;border-color:#3a4aa3}
.chip svg{width:16px;height:16px}
.icon-preview{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--border);border-radius:10px;background:#0f173e}
.icon-preview svg{width:18px;height:18px}

/* Progreso */
.progress{position:relative;height:10px;background:#0b0f1f;border-radius:999px;overflow:hidden;border:1px solid #0d1436}
.bar{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .14s linear}

/* Tablas */
table{width:100%;border-collapse:collapse;min-width:520px} /* min-width para permitir scroll en cards */
th,td{padding:.65rem .55rem;border-bottom:1px solid var(--border);text-align:left;font-size:.95rem;vertical-align:top;word-break:break-word}
th{color:#c5cff0;font-weight:700}
tbody tr:hover{background:rgba(124,157,255,.06)}

/* Tarjetas de categorías */
.cat-card{background:#101842;border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:transform var(--trans),box-shadow var(--trans),border-color var(--trans);cursor:pointer}
.cat-card img{width:100%;height:150px;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.05)}
.cat-card .cat-body{padding:.7rem .75rem}
.cat-card .cat-actions{margin-top:.55rem;display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.cat-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.35);border-color:#3a4aa3}

/* Footer */
#app-footer{margin-top:2rem;padding:1rem 1.2rem;border-top:1px solid #1f2a54;background:#0d1433}

/* Estados */
.status{font-size:.9rem}
.status.ok{color:var(--ok)} .status.err{color:var(--err)} .status.warn{color:var(--warn)}

/* =====================================================================
   AUTH (login/registro)
   ===================================================================== */
.auth-wrap{min-height:100%;display:grid;place-items:center;padding:1.5rem}
.auth-card{background:var(--surface);border:1px solid #222a48;border-radius:16px;padding:1.2rem 1.4rem;box-shadow:0 10px 30px #0007}
.auth-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:1rem}
.auth-col{display:grid;gap:1rem}
.auth-video .video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:#0f1631}
.input-with-icon{position:relative}
.input-with-icon input{padding-right:42px}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:#0f173e;color:#cfd6ff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--trans),border-color var(--trans),transform var(--trans)}
.pw-toggle:hover{background:#131f53;border-color:#3a4aa3;transform:translateY(-50%) scale(1.03)}
.pw-toggle i{font-size:14px;line-height:1}
.dial-group{display:flex;align-items:stretch;width:100%}
.dial-select{width:170px;min-width:150px;max-width:220px;border-radius:12px 0 0 12px;border-right:0;background:#0e1840;color:#dbe3ff}
.dial-phone{flex:1;border-radius:0 12px 12px 0;border-left:1px solid var(--border)}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(6,10,28,.6);backdrop-filter:blur(3px);z-index:1000;padding:1rem}
.modal.show{display:flex;animation:fadeIn .15s ease-out}
.modal .box,.modal-dialog{background:var(--surface-2);border:1px solid var(--border);border-radius:16px;width:min(720px,96vw);padding:1rem 1.2rem;box-shadow:0 20px 60px #000a;animation:pop .16s ease-out}
.close-x{position:absolute;top:.6rem;right:.8rem;background:transparent;border:0;color:#cfd6ff;font-size:20px;cursor:pointer}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.8rem}
.support-bar{display:flex;align-items:center;gap:.6rem;overflow:auto;padding:.4rem 0 .2rem;border-top:1px solid var(--border);margin-top:.6rem}
.support-bar a.btn{white-space:nowrap}
.pw-reqs{display:flex;gap:.4rem;flex-wrap:wrap;margin:.2rem 0 .4rem}
.badge{display:inline-block;padding:.2rem .5rem;border-radius:999px;background:#0e1840;border:1px solid var(--border);color:#b7c1df;font-size:.78rem;opacity:.7}
.badge.ok{opacity:1;border-color:#4cd188aa;color:#bff3d6;background:#184533}

/* --------- Responsive ---------- */
@media (max-width:1200px){
  .layout{grid-template-columns:230px 1fr}
  .g3,.g4{grid-template-columns:1fr 1fr}
}

@media (max-width:980px){
  .layout{grid-template-columns:1fr;grid-template-areas:"main";min-height:100vh;}
  .sidebar{
    position:fixed;inset:0 auto 0 0;width:290px;transform:translateX(-100%);
    z-index:1300;box-shadow:0 10px 30px rgba(0,0,0,.35);background:#0e1430;height:100vh;
  }
  .layout.nav-open .sidebar{transform:translateX(0)}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:1250;display:block}
  .layout.nav-open + .scrim{opacity:1;pointer-events:auto}

  .content{ padding:.9rem }                    /* menos padding en móvil */
  .topbar{ padding:.55rem .7rem }              /* topbar compacto */
  .icon-btn{ width:38px;height:38px }

  /* utilidades grid colapsadas */
  .g2,.two{grid-template-columns:1fr}
  .g3,.g4{grid-template-columns:1fr}
  .grid.g3, .grid.g4{gap:.9rem}

  /* tablas más compactas */
  th,td{padding:.55rem .5rem;font-size:.92rem}
}

@media (max-width:680px){
  /* todavía más compacto en muy chico */
  .topbar-title{font-size:.95rem}
  .content{ padding:.75rem }
  th,td{padding:.5rem .45rem;font-size:.9rem}
}

/* ---------- Pequeños detalles ---------- */
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
pre{background:#0f173d;padding:.7rem;border:1px solid var(--border);border-radius:12px;overflow:auto}
hr{border:none;border-top:1px solid var(--border);margin:1rem 0}

/* Animaciones */
@keyframes pop{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* =====================================================================
   Ajustes para Tutoriales (videos) y pequeños detalles UI
   ===================================================================== */

/* Tarjetas de video en la lista (lado derecho del reproductor) */
.video-tile{
  background:#101842;
  border:1px solid var(--border);
  border-radius:12px;
  padding:.7rem;
  transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.video-tile:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  border-color:#3a4aa3;
}

/* Asegura que el player ocupe todo el espacio del contenedor */
#vPlayerBox iframe,
#vPlayerBox video{
  width:100%;
  height:100%;
  display:block;
  border:0;
  border-radius:12px;
}

/* Grid de lista de videos: estirar las cards para que ocupen bien la fila */
#vList{ align-items:stretch; }

/* Botón de Like cuando está activo */
.btn.ghost.active{
  background:#142055;
  color:#eaf0ff;
  border-color:#3a4aa3;
}

/* Bloque <details> "Añadir video (admin)" */
details summary{
  list-style:none;
  user-select:none;
  display:flex;
  align-items:center;
  gap:.5rem;
  cursor:pointer;
}
details[open] summary{ color:#dbe3ff; }

/* -------------------- Comentarios (avatar + body) -------------------- */
.cmt{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
}
.cmt .cmt-avatar{
  width:42px;height:42px;border-radius:50%;
  object-fit:cover;border:1px solid var(--border);flex:0 0 auto;
  background:#0f1631;
}
.cmt .cmt-body{flex:1;min-width:0}
.cmt .cmt-meta{
  display:flex;align-items:center;gap:.5rem;justify-content:space-between;flex-wrap:wrap
}
.cmt .cmt-name{font-weight:700}
.cmt .cmt-time{font-size:.85rem;color:var(--muted)}
.cmt .cmt-text{margin-top:.35rem;white-space:pre-wrap;word-break:break-word}

/* En móvil, un poco más chico el avatar para ahorrar espacio */
@media (max-width:680px){
  .cmt .cmt-avatar{width:36px;height:36px}
}
/* ====================== FIX Responsive Player ====================== */
/* Forzamos al contenedor a comportarse como “frame” con ratio y sin flex */
#vPlayerBox{
  position: relative !important;
  display: block !important;     /* sobreescribe el inline display:flex */
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;           /* conserva bordes redondeados del player */
}

/* El media se ajusta EXACTO al frame */
#vPlayerBox iframe,
#vPlayerBox video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Limita la altura en pantallas pequeñas para que no “domine” la vista */
@media (max-width: 980px){
  #vPlayerBox{ max-height: 50vh; }
}
@media (max-width: 680px){
  #vPlayerBox{ max-height: 38vh; }
}
/* ====== Vídeos (modal + comentarios) sobre fondo oscuro ====== */
#vModal {
  background: var(--surface, #0b1028);
  color: var(--text, #e6e9ff);
  border: 1px solid var(--border, #263160);
  border-radius: 16px;
  padding: 1rem;
}
#vModal::backdrop { background: rgba(0,0,0,.6); }

#vmPlayer {
  background: #0f173e; /* mantiene el frame oscuro del player */
  border: 1px solid var(--border, #263160);
  border-radius: 12px;
}

/* Botón de like activo legible en dark */
#vmLike.active,
.btn.ghost.active {
  background: rgba(255,255,255,.06);
  border-color: var(--border, #263160);
}

/* Lista de tarjetas de video (tiles) más legibles en dark */
.video-tile.card {
  background: var(--surface-2, #0d1330);
  border: 1px solid var(--border, #263160);
}

/* Caja de comentarios + inputs en dark */
#vComments .comment-box textarea {
  background: var(--surface-2, #0d1330);
  color: var(--text, #e6e9ff);
  border: 1px solid var(--border, #263160);
}
#vComments .comment-box textarea::placeholder {
  color: var(--muted, #a8b3e6);
}

/* Cada comentario en tarjeta */
.comment-card {
  background: var(--surface-2, #0d1330);
  border: 1px solid var(--border, #263160);
  border-radius: 12px;
}
.comment-card .comment-meta small {
  color: var(--muted, #a8b3e6);
}

/* Avatar redondo con borde sutil */
.comment-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border, #263160);
}

/* Botón Eliminar en comentarios: contraste */
.comment-card .btn.ghost {
  color: var(--text, #e6e9ff);
  border-color: var(--border, #263160);
}
.comment-card .btn.ghost:hover {
  background: rgba(255,255,255,.06);
}