:root{
  --bg:#0b1f1a; --panel:#102921; --panel-2:#0f251f;
  --text:#f2f6f4; --muted:#a7c7bb; --brand:#0ea472; --brand-600:#0b8a62;
  --gold:#d4af37; --border:#1a4b3b; --ring:rgba(14,164,114,.25);
  --ar-lh: 2.1;     /* line-height para indo-pak */
  --ar-ls: .1px;    /* letter-spacing muy leve */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:ui-sans-serif,system-ui,Inter,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 500px at -10% -10%, rgba(14,164,114,.12), transparent 60%),
    radial-gradient(700px 400px at 120% 0%, rgba(212,175,55,.08), transparent 55%),
    var(--bg);
  display:flex; flex-direction:column;
}
header{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px; background:rgba(12,37,31,.7); border-bottom:1px solid var(--border); backdrop-filter:blur(10px);
  box-shadow:0 6px 18px rgba(0,0,0,.18); /* sombra sutil */
}
.logo{display:flex;align-items:center;gap:10px;color:var(--gold);text-decoration:none;font-weight:800}
.logo svg{width:26px;height:26px;fill:var(--gold)}
nav{display:flex;gap:12px;flex-wrap:wrap}
nav a{
  color:var(--text);opacity:.9;text-decoration:none;padding:8px 10px;border-radius:10px;
  position:relative; transition:opacity .15s ease, transform .15s ease;
}
nav a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px;
  height:2px; background:linear-gradient(90deg,var(--brand),var(--brand-600));
  transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
  border-radius:2px;
}
nav a:hover{opacity:1; transform:translateY(-1px)}
nav a:hover::after{ transform:scaleX(1) }
nav a:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:10px }

/* Estado activo si añades class="active" */
nav a.active{ opacity:1; background:#0f2a23 }
nav a.active::after{ transform:scaleX(1) }

/* Botones automáticos para login/registro (últimos dos enlaces) */
nav a:nth-last-child(2){
  border:1px solid var(--border); background:transparent; border-radius:12px; padding:8px 12px;
}
nav a:last-child{
  background:linear-gradient(180deg,var(--brand),var(--brand-600)); color:#fff; border-radius:12px; padding:8px 12px; font-weight:700;
  box-shadow:0 8px 18px rgba(14,164,114,.28);
}

/* Menú móvil */
.nav-toggle{display:none;background:#0f2a23;color:var(--text);border:1px solid var(--border);padding:8px 10px;border-radius:10px;cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.18) }
@media (max-width:720px){
  nav{display:none;width:100%} nav.open{display:flex;flex-wrap:wrap}
  nav a{width:100%; padding:12px; border:1px solid var(--border); background:var(--panel-2)}
  nav{gap:8px}
  .nav-toggle{display:block} header{flex-wrap:wrap}
}

.container{width:min(1100px, 100% - 24px); margin:16px auto}
.card{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:0 12px 26px rgba(0,0,0,.25)}
h1,h2{margin:0 0 10px}
.small{color:var(--muted)}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr 1fr}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}
.btn{
  appearance:none;border:none;cursor:pointer;border-radius:12px;
  background:linear-gradient(180deg,var(--brand),var(--brand-600));color:#fff;
  padding:12px 16px;font-weight:700;box-shadow:0 10px 20px rgba(14,164,114,.28)
}
.btn:disabled{opacity:.6;cursor:not-allowed}
.time-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px dashed var(--border)}
.time-row:last-child{border-bottom:none}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:center}
.table th{color:#d6efe6;font-weight:700}
input,select,textarea{width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);outline:none}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px var(--ring);border-color:#1f6c56}
footer{margin-top:auto;padding:22px;text-align:center;color:var(--muted)}
.badge{display:inline-block;background:#12392f;color:#cae9df;padding:6px 10px;border-radius:999px;border:1px solid #1e5a49}

/* — extras para Dua y Corán — */
.dua-card .arabic{font-size:1.3rem;line-height:1.6;direction:rtl;text-align:right}
.dua-card .translit{margin-top:6px;color:#d9eee6}
.dua-card .trans{margin-top:2px;color:var(--muted)}
.ayah{padding:12px;border-bottom:1px dashed var(--border)}
.ayah .a-ar{direction:rtl;text-align:right;font-size:1.3rem;line-height:1.7}
.ayah .a-tr{margin-top:6px;color:#d7efe6}
.ayah .a-es{margin-top:6px;color:var(--muted)}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
select,input[type="search"]{flex:1 1 220px}

/* ===== Fuentes árabes ===== */

/* Base: Uthmani / genérico */
.arabic, .a-ar {
  font-family: "Scheherazade New", "Noto Naskh Arabic", "Amiri", serif;
  font-feature-settings: "rlig" 1, "calt" 1;
  line-height: 1.9;
}

/* Indo-Pak desde CDN */
@font-face{
  font-family: "IndoPakQuran";
  src:
    url("https://cdn.jsdelivr.net/gh/alquran-cloud/quran-fonts/fonts/IndoPak/IndoPak.woff2") format("woff2"),
    url("https://cdn.jsdelivr.net/gh/alquran-cloud/quran-fonts/fonts/IndoPak/IndoPak.woff") format("woff");
  font-display: swap;
}

/* Mirror opcional */
@font-face{
  font-family: "IndoPakQuran";
  src: url("https://raw.githubusercontent.com/alquran-cloud/quran-fonts/master/fonts/IndoPak/IndoPak.woff2") format("woff2");
  font-display: swap;
}

/* Cuando esté activado modo Indo-Pak */
.mode-indo .a-ar,
.mode-indo .arabic{
  font-family: "IndoPakQuran", "Scheherazade New", "Noto Naskh Arabic", serif;
  line-height: var(--ar-lh);
  letter-spacing: var(--ar-ls);
  font-size: 1.35rem;
}

/* Cuando esté activado modo Uthmani (estándar) */
.mode-uth .a-ar,
.mode-uth .arabic{
  font-family: "Scheherazade New", "Noto Naskh Arabic", "Amiri", serif;
  line-height: 1.9;
  letter-spacing: 0;
}
/* ===== Fuentes árabes — versión estable (forzar Indo-Pak en todo el árabe) ===== */

/* Carga única de la fuente Indo-Pak */
@font-face{
  font-family: "IndoPakQuran";
  src:
    url("https://cdn.jsdelivr.net/gh/alquran-cloud/quran-fonts/fonts/IndoPak/IndoPak.woff2") format("woff2"),
    url("https://cdn.jsdelivr.net/gh/alquran-cloud/quran-fonts/fonts/IndoPak/IndoPak.woff") format("woff");
  font-display: swap;
}

/* Base (fallbacks) por si la Indo-Pak tarda en cargar */
.arabic, .a-ar{
  font-family: "IndoPakQuran", "Scheherazade New", "Noto Naskh Arabic", "Amiri", serif !important;
  font-feature-settings: "rlig" 1, "calt" 1;
  font-size: 1.45rem;   /* tamaño cómodo que usabas */
  line-height: 2.15;    /* aire entre líneas para ver bien los signos */
  letter-spacing: .12px;/* leve separación */
  direction: rtl;
  text-align: right;
}

/* Refuerzo por si alguna tarjeta aplica otra fuente */
.ayah .a-ar, .dua-card .arabic{
  font-family: "IndoPakQuran", "Scheherazade New", "Noto Naskh Arabic", "Amiri", serif !important;
}

/* (Opcional) si en algún momento quieres volver a alternar Uthmani/Indo-Pak,
   elimina el !important anterior y reintroduce las clases .mode-indo / .mode-uth. */


/* Por si tus tarjetas definen otra fuente, lo reforzamos */
.ayah .a-ar, .dua-card .arabic{
  font-family: inherit;
}

/* ===== Resaltado de āyah reproduciéndose ===== */
.ayah.playing{
  background:#0f251f;
  border-radius:12px;
  box-shadow:0 0 0 2px rgba(14,164,114,.25) inset;
}

/* ===== Mini reproductor inferior ===== */
.player-bar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  background: rgba(16,41,33,.97);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 22px rgba(0,0,0,.35);
  transform: translateY(120%);
  transition: transform .18s ease;
}
.player-bar.visible{ transform: translateY(0) }

.player-left, .player-right{ display:flex; align-items:center; gap:10px }
.player-mid{ display:flex; flex-direction:column; gap:8px }

.pbtn{
  appearance:none; border:none; cursor:pointer;
  background:#0f2a23; color:var(--text);
  padding:10px 12px; border-radius:12px;
  border:1px solid var(--border);
}
.pbtn.big{ font-size:1.06rem; font-weight:700; padding:10px 16px }
.pbtn:hover{ filter:brightness(1.05) }
.pbtn:active{ transform:scale(.98) }

.player-info{ display:flex; gap:10px; align-items:center }
#playerTime{ color:var(--muted) }

@media (max-width:680px){
  .player-info{ flex-wrap:wrap; gap:6px }
}

/* ===== Progreso personalizado mejorado ===== */
.progress{
  position: relative;
  width: 100%;
  height: 10px;
  background: #0e2a23;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  touch-action: none; /* para que el drag en móvil sea fluido */
}
.progress-fill{
  position:absolute; left:0; top:0; bottom:0;
  width:0%;
  background: linear-gradient(90deg, var(--brand), var(--brand-600));
  transition: width .12s linear;
}
.progress-dot{
  position:absolute; top:50%;
  transform: translate(-50%, -50%);
  width:16px; height:16px; border-radius:50%;
  background:#fff;
  border: 3px solid var(--brand-600);
  box-shadow: 0 0 10px rgba(14,164,114,.6);
  transition: left .1s linear, transform .1s ease;
  pointer-events: none; /* se arrastra desde la barra */
}
.progress:hover .progress-dot{ transform: translate(-50%, -50%) scale(1.05) }


/* ===== Drawer & Active nav ===== */
.top-nav a.active,
.drawer-nav a.active{
  background:#0f2a23;
  position:relative;
}
.top-nav a.active::after,
.drawer-nav a.active::after{
  content:"";
  position:absolute; left:10px; right:10px; bottom:6px;
  height:2px; background:linear-gradient(90deg,var(--brand),var(--brand-600));
  border-radius:2px;
}

/* Drawer móvil */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  z-index:70;
}
.drawer{
  position:fixed; top:0; bottom:0; left:0; width:80%;
  max-width:320px; background: rgba(12,37,31,.98);
  border-right:1px solid var(--border);
  box-shadow: 10px 0 24px rgba(0,0,0,.35);
  transform: translateX(-110%);
  transition: transform .2s ease;
  z-index:80;
  display:flex; flex-direction:column;
}
.drawer.open{ transform: translateX(0) }
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px; border-bottom:1px solid var(--border);
}
.logo-mini{ font-weight:800; color:var(--gold) }
.drawer-close{
  appearance:none; border:1px solid var(--border); background:#0f2a23;
  color:var(--text); border-radius:10px; padding:6px 10px; cursor:pointer;
}
.drawer-nav{ display:flex; flex-direction:column; padding:10px }
.drawer-nav a{
  color:var(--text); text-decoration:none; padding:10px 12px; border-radius:10px;
}
.drawer-nav a:hover{ background:#0f2a23 }
.drawer-nav hr{ border:none; border-top:1px solid var(--border); margin:8px 0 }

@media (max-width:720px){
  .top-nav{ display:none }
}

.prayer-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(800px,100% - 24px);z-index:90;background:var(--panel);border:1px solid var(--border);box-shadow:0 20px 40px rgba(0,0,0,.4);} 

/* Botón fino y redondeado */
.btn.thin{ padding:10px 14px }
.btn.pill{ border-radius:999px }

/* Contenedor de acciones */
.sticky-actions{
  position: sticky;
  bottom: 10px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background: linear-gradient(180deg, rgba(16,41,33,.0), rgba(16,41,33,.45));
  border-radius: 14px;
  margin-top: 18px;
}

.prayer-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.5); z-index:100 }
.prayer-modal[aria-hidden="false"]{ display:flex }
.modal-card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; width:min(720px, calc(100% - 24px)); box-shadow:0 20px 50px rgba(0,0,0,.3) }
.modal-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--border) }
.modal-body{ padding:14px 16px }
.modal-foot{ padding:12px 16px; display:flex; gap:8px; justify-content:flex-end; border-top:1px solid var(--border) }
.modal-close{ background:#0f2a23; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:8px 10px; cursor:pointer }

.offsets legend{ color:var(--muted); margin-bottom:6px }

@media (max-width:640px){
  .sticky-actions{ flex-direction:column }
}