/* =========================================================================
   A-WARE | Centro de Inicio — Sistema de diseño
   Todos los colores, radios, sombras y espacios viven en variables CSS.
   ========================================================================= */

:root{
  /* --- Marca A-WARE ---------------------------------------------------- */
  --aw-purple:        #5236B8;
  --aw-purple-dark:   #30206F;
  --aw-purple-light:  #8267E8;
  --aw-lavender:      #EEEAFE;
  --aw-cream:         #FFF3C4;
  --aw-white:         #FFFFFF;

  /* --- Semántico (tema claro) ------------------------------------------ */
  --bg:            #F7F7FB;
  --surface:       #FFFFFF;
  --surface-2:     var(--aw-lavender);
  --border:        #E4E1F2;
  --border-strong: #D3CDEC;
  --text:          #241F33;
  --text-2:        #6F6980;
  --accent:        var(--aw-purple);
  --accent-hover:  #452DA0;
  --accent-soft:   var(--aw-lavender);
  --on-accent:     #FFFFFF;
  --cream:         var(--aw-cream);
  --cream-ink:     #4A3B00;
  --ok:            #1F8A5B;
  --focus:         #1B6BFF;

  --grad-hero: linear-gradient(135deg, var(--aw-purple-dark) 0%, var(--aw-purple) 52%, var(--aw-purple-light) 100%);

  /* --- Tokens de forma ------------------------------------------------- */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-xl: 24px;  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(36,31,51,.05), 0 1px 3px rgba(36,31,51,.04);
  --sh-2: 0 8px 24px rgba(48,32,111,.10);
  --sh-3: 0 18px 44px rgba(48,32,111,.18);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;

  /* --- Tipografía ------------------------------------------------------ */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fs-xs: .8125rem;  /* 13 */
  --fs-sm: .875rem;   /* 14 */
  --fs-md: 1rem;      /* 16 */
  --fs-lg: 1.125rem;  /* 18 */
  --fs-xl: 1.375rem;  /* 22 */
  --fs-2xl: 1.75rem;  /* 28 */

  --wrap: 1240px;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* --- Tema oscuro ------------------------------------------------------- */
html[data-theme="dark"]{
  --bg:            #131120;
  --surface:       #1C1830;
  --surface-2:     #262040;
  --border:        #302949;
  --border-strong: #3E3560;
  --text:          #F1EFFA;
  --text-2:        #A9A2C2;
  --accent:        #9C85F2;
  --accent-hover:  #B29FF7;
  --accent-soft:   #2A2247;
  --on-accent:     #17122B;
  --cream:         #F5E3A0;
  --cream-ink:     #3A2E00;
  --ok:            #4FD39C;
  --focus:         #8AB4FF;
  --sh-1: 0 1px 2px rgba(0,0,0,.35);
  --sh-2: 0 8px 24px rgba(0,0,0,.45);
  --sh-3: 0 18px 44px rgba(0,0,0,.6);
  --grad-hero: linear-gradient(135deg, #241B4D 0%, #3E2B8F 52%, #6B53CF 100%);
}

/* ===================== Base ============================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:var(--fs-md); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; }
[hidden]{ display:none !important; }   /* gana sobre display:inline-flex de .btn */
button,input,select{ font:inherit; color:inherit; }
h1,h2,h3,p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--sp-4); }
.main{ padding-block:var(--sp-5) var(--sp-6); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:var(--sp-4); top:-100px; z-index:100;
  background:var(--surface); color:var(--text); padding:10px 16px;
  border-radius:var(--r-md); box-shadow:var(--sh-2); text-decoration:none; font-weight:600;
}
.skip-link:focus{ top:var(--sp-2); }

:where(a,button,input,select,[tabindex]):focus-visible{
  outline:3px solid var(--focus); outline-offset:2px; border-radius:var(--r-sm);
}

/* ===================== Encabezado ====================================== */
.topbar{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); padding-block:var(--sp-3); flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.brand__mark{ flex:0 0 auto; width:40px; height:40px; border-radius:11px; }
.brand__name{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--accent);
}
.brand__name span{ color:var(--text-2); font-weight:600; }
.brand__title{ font-size:var(--fs-xl); font-weight:750; letter-spacing:-.02em; line-height:1.2; }
.brand__sub{ font-size:var(--fs-sm); color:var(--text-2); }

.topbar__tools{ display:flex; align-items:center; gap:var(--sp-3); flex:1 1 320px; justify-content:flex-end; }

.search{ position:relative; flex:1 1 220px; max-width:340px; }
.search__icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; fill:none; stroke:var(--text-2);
  stroke-width:2; stroke-linecap:round; pointer-events:none;
}
.search__input{
  width:100%; padding:10px 36px 10px 38px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border-strong); border-radius:var(--r-pill);
  font-size:var(--fs-sm); transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.search__input::-webkit-search-cancel-button{ display:none; }
.search__input:hover{ border-color:var(--accent); }
.search__input:focus{ box-shadow:0 0 0 4px var(--accent-soft); border-color:var(--accent); }
.search__clear{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border:0; background:transparent; color:var(--text-2);
  border-radius:var(--r-pill); cursor:pointer; font-size:20px; line-height:1;
}
.search__clear:hover{ background:var(--surface-2); color:var(--text); }

.progress-chip{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:6px 14px 6px 8px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-pill); box-shadow:var(--sh-1);
}
.ring{ width:34px; height:34px; transform:rotate(-90deg); flex:0 0 auto; }
.ring circle{ fill:none; stroke-width:3.4; }
.ring__bg{ stroke:var(--surface-2); }
.ring__fg{
  stroke:var(--accent); stroke-linecap:round;
  stroke-dasharray:97.4; stroke-dashoffset:97.4;
  transition:stroke-dashoffset .5s var(--ease);
}
.progress-chip__text{ display:flex; flex-direction:column; line-height:1.15; }
.progress-chip__text b{ font-size:var(--fs-sm); font-variant-numeric:tabular-nums; }
.progress-chip__text small{ font-size:11px; color:var(--text-2); white-space:nowrap; }

.icon-btn{
  flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill);
  cursor:pointer; transition:background .18s var(--ease), border-color .18s var(--ease);
}
.icon-btn:hover{ background:var(--surface-2); border-color:var(--accent); }
.icon-btn__glyph{ font-size:17px; line-height:1; }
.icon-btn--plain{ background:transparent; border-color:transparent; }
.icon-btn--plain .icon-btn__glyph{ font-size:26px; }

/* ===================== Bienvenida ====================================== */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--grad-hero); color:#fff;
  border-radius:var(--r-xl); padding:var(--sp-6) var(--sp-6);
  box-shadow:var(--sh-2);
}
.hero__body{ position:relative; z-index:2; max-width:44rem; }
.hero__eyebrow{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--aw-cream); margin-bottom:var(--sp-2);
}
.hero__title{ font-size:var(--fs-2xl); font-weight:780; letter-spacing:-.025em; line-height:1.15; }
.hero__text{
  margin-top:var(--sp-2); font-size:var(--fs-lg);
  color:rgba(255,255,255,.88); max-width:38rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-5); }
/* el texto del botón "Continuar: …" es variable: se recorta con elipsis */
#resumeBtn{ display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.hero__art{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.orb{ position:absolute; border-radius:50%; }
.orb--1{ width:320px; height:320px; right:-90px; top:-130px; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.30), transparent 65%); }
.orb--2{ width:190px; height:190px; right:130px; bottom:-90px; background:radial-gradient(circle at 50% 50%, rgba(255,243,196,.30), transparent 68%); }
.orb--3{ width:130px; height:130px; right:30px; bottom:44px; border:1.5px solid rgba(255,255,255,.20); }

/* ===================== Botones ========================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 20px; border-radius:var(--r-pill); border:1px solid transparent;
  font-size:var(--fs-sm); font-weight:650; cursor:pointer; white-space:nowrap;
  transition:transform .14s var(--ease), background .18s var(--ease),
             border-color .18s var(--ease), color .18s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.42; cursor:not-allowed; }
.btn--cream{ background:var(--aw-cream); color:var(--cream-ink); box-shadow:var(--sh-1); }
.btn--cream:hover:not(:disabled){ background:#FFF8DC; }
.btn--ghost{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.34); }
.btn--ghost:hover:not(:disabled){ background:rgba(255,255,255,.24); }
.btn--primary{ background:var(--accent); color:var(--on-accent); }
.btn--primary:hover:not(:disabled){ background:var(--accent-hover); }
.btn--outline{ background:var(--surface); color:var(--text); border-color:var(--border-strong); }
.btn--outline:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.btn--link{ background:transparent; color:var(--accent); padding-inline:10px; }
.btn--link:hover:not(:disabled){ text-decoration:underline; }
.btn--done{ background:var(--ok); color:#fff; }

/* ===================== Filtros ========================================= */
.controls{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); margin-top:var(--sp-6); flex-wrap:wrap;
}
.chips{
  display:flex; gap:var(--sp-2); flex:1 1 auto;
  overflow-x:auto; padding-bottom:2px; scrollbar-width:thin;
}
.chip{
  flex:0 0 auto; padding:8px 16px; border-radius:var(--r-pill);
  background:var(--surface); color:var(--text-2);
  border:1px solid var(--border-strong); font-size:var(--fs-sm); font-weight:600;
  cursor:pointer; transition:all .18s var(--ease);
}
.chip:hover{ color:var(--accent); border-color:var(--accent); }
.chip[aria-pressed="true"]{
  background:var(--accent); color:var(--on-accent); border-color:var(--accent);
}
.sort{ display:flex; align-items:center; gap:var(--sp-2); flex:0 0 auto; }
.sort__label{ font-size:var(--fs-sm); color:var(--text-2); font-weight:600; }
.sort__select{
  padding:9px 14px; border-radius:var(--r-pill); background:var(--surface);
  border:1px solid var(--border-strong); font-size:var(--fs-sm); font-weight:600; cursor:pointer;
}
.sort__select:hover{ border-color:var(--accent); }

/* ===================== Biblioteca ====================================== */
.lib-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--sp-3); margin:var(--sp-6) 0 var(--sp-4);
}
.lib-title{ font-size:var(--fs-lg); font-weight:720; letter-spacing:-.015em; }
.lib-count{ font-size:var(--fs-sm); color:var(--text-2); }

.grid{
  display:grid; gap:var(--sp-5);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 268px), 1fr));
}

.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--border-strong); }
.card:focus-within{ border-color:var(--accent); }

.card__hit{
  position:absolute; inset:0; z-index:3; border:0; padding:0;
  background:transparent; cursor:pointer; border-radius:var(--r-lg);
}
.card__hit:focus-visible{ outline:3px solid var(--focus); outline-offset:-3px; }

.card__thumb{ position:relative; aspect-ratio:16/9; background:var(--surface-2); overflow:hidden; }
.card__img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s var(--ease);
}
.card:hover .card__img{ transform:scale(1.035); }

.card__play{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  background:rgba(36,31,51,.24); opacity:0; transition:opacity .2s var(--ease);
}
.card:hover .card__play,
.card:focus-within .card__play{ opacity:1; }
.card__play span{
  width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.96);
  display:grid; place-items:center; color:var(--aw-purple); font-size:17px; padding-left:3px;
  box-shadow:var(--sh-2);
}

.card__dur{
  position:absolute; z-index:2; right:10px; bottom:10px;
  background:rgba(20,16,34,.78); color:#fff; font-size:11px; font-weight:650;
  padding:4px 9px; border-radius:var(--r-pill); letter-spacing:.02em;
}
.card__flag{
  position:absolute; z-index:2; left:10px; top:10px;
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; padding:4px 9px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.94); color:var(--text-2);
}
.card__flag--done{ background:var(--ok); color:#fff; }
.card__flag--seen{ background:var(--aw-cream); color:var(--cream-ink); }

.card__body{ padding:var(--sp-4); display:flex; flex-direction:column; gap:6px; flex:1; }
.card__cat{
  align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent);
  background:var(--accent-soft); padding:3px 9px; border-radius:var(--r-sm);
}
.card__title{ font-size:var(--fs-md); font-weight:700; letter-spacing:-.012em; line-height:1.32; }
.card__desc{ font-size:var(--fs-sm); color:var(--text-2); flex:1; }

.card__bar{ height:4px; background:var(--surface-2); border-radius:var(--r-pill); overflow:hidden; margin-top:var(--sp-2); }
.card__bar i{ display:block; height:100%; width:0; background:var(--accent); border-radius:inherit; transition:width .4s var(--ease); }
.card__bar--done i{ background:var(--ok); }

.card__cta{
  display:flex; align-items:center; gap:6px; margin-top:var(--sp-2);
  font-size:var(--fs-sm); font-weight:650; color:var(--accent);
}
.card__cta svg{ width:14px; height:14px; fill:currentColor; transition:transform .2s var(--ease); }
.card:hover .card__cta svg{ transform:translateX(3px); }

.empty{
  text-align:center; padding:var(--sp-7) var(--sp-4); background:var(--surface);
  border:1px dashed var(--border-strong); border-radius:var(--r-lg);
}
.empty__title{ font-size:var(--fs-lg); font-weight:700; }
.empty__text{ color:var(--text-2); margin:var(--sp-2) 0 var(--sp-4); font-size:var(--fs-sm); }

/* ===================== Pie ============================================= */
.foot{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:var(--sp-3); margin-top:var(--sp-7); padding-top:var(--sp-4);
  border-top:1px solid var(--border);
}
.foot__brand{ font-size:var(--fs-sm); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.foot__brand span{ color:var(--text-2); }
.foot__by{ font-size:var(--fs-xs); color:var(--text-2); letter-spacing:.06em; }
.foot__by span{ font-weight:700; color:var(--text); }

/* ===================== Reproductor (modal) ============================= */
.modal{
  border:0; padding:0; background:transparent; width:min(880px, 100%);
  max-width:100%; max-height:100dvh; color:var(--text);
}
.modal::backdrop{ background:rgba(24,18,44,.62); backdrop-filter:blur(3px); }
.modal[open]{ animation:pop .22s var(--ease); }
@keyframes pop{ from{ opacity:0; transform:translateY(10px) scale(.985); } }

.modal__card{
  background:var(--surface); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sh-3); display:flex; flex-direction:column; max-height:100dvh;
}
.modal__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp-3); padding:var(--sp-4) var(--sp-5);
}
.modal__meta{ font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); }
.modal__title{ font-size:var(--fs-xl); font-weight:750; letter-spacing:-.02em; line-height:1.25; }

.player{ position:relative; aspect-ratio:16/9; background:#100C1E; overflow:hidden; }
.player video,.player iframe{ width:100%; height:100%; border:0; display:block; }
.player__ph{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center;
  gap:var(--sp-3); text-align:center; padding:var(--sp-5);
  background:var(--grad-hero); color:#fff;
}
.player__ph b{ font-size:var(--fs-lg); font-weight:720; }
.player__ph small{ font-size:var(--fs-sm); color:rgba(255,255,255,.82); max-width:34rem; }
.player__ph i{
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.4);
  font-size:24px; font-style:normal;
}

.modal__desc{
  padding:var(--sp-4) var(--sp-5) 0; color:var(--text-2);
  font-size:var(--fs-sm); overflow-y:auto;
}
.modal__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);
  padding:var(--sp-4) var(--sp-5); margin-top:var(--sp-2);
}
.modal__foot #mGo{ margin-left:auto; }

/* ===================== Modo compacto (?compact=true) =================== */
html[data-compact="true"] .brand__sub{ display:none; }
html[data-compact="true"] .brand__title{ font-size:var(--fs-lg); }
html[data-compact="true"] .brand__mark{ width:32px; height:32px; }
html[data-compact="true"] .topbar__inner{ padding-block:var(--sp-2); }
html[data-compact="true"] .progress-chip__text small{ display:none; }
html[data-compact="true"] .hero{ padding:var(--sp-5); }
html[data-compact="true"] .hero__text{ font-size:var(--fs-md); }
html[data-compact="true"] .main{ padding-block:var(--sp-4) var(--sp-5); }
html[data-compact="true"] .controls{ margin-top:var(--sp-5); }
html[data-compact="true"] .lib-head{ margin-block:var(--sp-5) var(--sp-3); }

/* ===================== Responsive ====================================== */
@media (max-width: 900px){
  .brand__sub{ display:none; }
  .topbar__tools{ flex:1 1 100%; justify-content:space-between; }
  .search{ max-width:none; }
  .hero{ padding:var(--sp-5); }
  .orb--1{ width:220px; height:220px; right:-70px; top:-100px; }
  .orb--2,.orb--3{ display:none; }
}
@media (max-width: 620px){
  :root{ --fs-2xl:1.5rem; --fs-xl:1.25rem; }
  .wrap{ padding-inline:var(--sp-3); }
  .grid{ gap:var(--sp-4); grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
  .progress-chip{ padding:5px 11px 5px 6px; }
  .progress-chip__text small{ display:none; }
  .controls{ gap:var(--sp-3); }
  .sort{ width:100%; }
  .sort__select{ flex:1; }
  .modal{ width:100%; }
  .modal__card{ border-radius:var(--r-lg) var(--r-lg) 0 0; }
  .modal__head,.modal__desc,.modal__foot{ padding-inline:var(--sp-4); }
  .modal__foot{ display:grid; grid-template-columns:1fr 1fr; }
  .modal__foot #mDone{ grid-column:1 / -1; order:-1; }
  .modal__foot #mGo{ grid-column:1 / -1; margin-left:0; justify-content:center; }
}
@media (max-width: 480px){
  /* la búsqueda gana su propia línea: en 320px no cabe junto al progreso */
  .topbar__tools{ flex-wrap:wrap; }
  .search{ order:3; flex:1 1 100%; }
  .progress-chip{ order:1; }
  .icon-btn{ order:2; }
}
@media (max-width: 360px){
  .grid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .card:hover{ transform:none; }
}