/* ════════════════════════════════════════════════════════════════════
   Diario de Marruecos — /horarios-de-rezo/  ·  DM 1.14.0
   ────────────────────────────────────────────────────────────────────
   La página de los horarios de oración con LA MISMA PIEL QUE /el-tiempo/
   (orden del CEO): carga dm-tiempo.css entero —cabecera, rejilla mapa |
   resultado, mapa con la escala de Markets, desplegable, banda de aviso,
   número grande en serif— y aquí solo va lo propio, con prefijo .dmr__:

     · el número grande es LA HORA de la próxima oración, y a su lado el
       nombre en árabe en Amiri: el gesto de la casa, el mismo del titular
       árabe bajo cada noticia;
     · la banda de métricas tiene SEIS celdas (Fajr, Shuruq, Dhuhr, Asr,
       Maghrib, Isha) con llave de color, y la siguiente se marca;
     · en vez de los siete días, LA TABLA DEL MES, con el día hiyrí;
     · la aleya y la guía de las cinco oraciones, para el lector que no
       conoce el rito.

   El mapa pinta cada región con la hora de su Maghrib —el sol cruza
   Marruecos de Uchda a Dajla en cerca de una hora— en la misma escala
   rosa → claret del tiempo.
   ════════════════════════════════════════════════════════════════════ */

.dmr {
    /* las llaves de las seis celdas: alba, sol, mediodía, tarde, ocaso, noche */
    --dmr-k-fajr:    #0D7680;
    --dmr-k-sunrise: #F1CC70;
    --dmr-k-dhuhr:   #EF9457;
    --dmr-k-asr:     #C64A4A;
    --dmr-k-maghrib: var(--fp-claret, #C1272D);
    --dmr-k-isha:    #1A1614;
    --dmr-ar-font: 'Quiverleaf Arabic', Amiri, 'Noto Naskh Arabic', serif;
}

/* ─── El mapa: la escala del ocaso ──────────────────────────────────
   En el tiempo los tres escalones son AVISOS y los tres tiran a claret;
   aquí son la hora del Maghrib y con la misma escala el país entero
   salía rojo, como una alarma. La escala del ocaso empieza en la tierra
   de Markets (donde el sol se pone antes, el este), pasa por el rosa y
   acaba en claret solo donde queda «el último sol» (Dajla). El punto
   del desplegable y la leyenda siguen la misma escala. */
.dmr .dmt__mapa .dmmap__r[data-nivel="1"] { fill: var(--dmt-tierra); }
.dmr .dmt__mapa .dmmap__r[data-nivel="2"] { fill: var(--dmt-n1); }
.dmr .dmt__mapa .dmmap__r[data-nivel="3"] { fill: var(--dmt-n3); }
.dmr .dmt__leyenda i[data-n="1"], .dmr .dmt__row-dot[data-n="1"] { background: var(--dmt-tierra); }
.dmr .dmt__leyenda i[data-n="2"], .dmr .dmt__row-dot[data-n="2"] { background: var(--dmt-n1); }
.dmr .dmt__leyenda i[data-n="3"], .dmr .dmt__row-dot[data-n="3"] { background: var(--dmt-n3); }

/* ─── El árabe, siempre aislado y en su fuente ─────────────────────── */
.dmr__ar {
    font-family: var(--dmr-ar-font);
    direction: rtl;
    unicode-bidi: isolate;
    font-weight: 700;
}

/* ─── El sello de fecha: gregoriano arriba, hiyrí en claret ────────── */
.dmt__stamp .dmr__stamp-h { display: block; color: var(--fp-claret); }
.dmt__stamp .dmr__stamp-h .dmr__ar { font-size: 14px; letter-spacing: 0; text-transform: none; margin-left: 8px; font-weight: 400; }

/* ─── El desplegable: en vez de la temperatura, la próxima oración ──────
   («Maghrib 19:58» no cabe en la columna de 44px del tiempo) */
.dmr .dmt__sel-item { grid-template-columns: 10px 1fr auto; }
.dmr .dmt__sel-item-ic { display: none; }
.dmr .dmt__sel-item .dmt__sel-t { font-size: 13px; }
.dmr .dmt__sel-cur .dmt__sel-t { font-size: 14px; }
.dmr .dmt__sel-item.is-on .dmt__row-dot { outline: 1px solid #FFF8F2; }

/* ─── La banda «Próxima oración» (la banda de aviso del tiempo) ─────── */
.dmr__next .dmt__aviso-lv { background: var(--fp-ink); color: #FFF8F2; }
.dmr__next-tx { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* el rótulo de fuente envuelve a la derecha antes que partir la cuenta atrás */
.dmr__next .dmt__aviso-src { white-space: normal; text-align: right; line-height: 1.3; max-width: 38%; }
.dmr__next-tx b { font-weight: 800; }
.dmr__next-tx [data-dmr-next-cd] { color: var(--fp-claret); font-weight: 800; }
.dmr__next.is-inminente { background: var(--fp-claret); color: #fff; }
.dmr__next.is-inminente .dmt__aviso-lv { background: #fff; color: var(--fp-claret); }
.dmr__next.is-inminente [data-dmr-next-cd] { color: #fff; }

/* ─── Ahora: la hora grande en serif, el nombre en árabe al lado ────── */
.dmr__ahora {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 26px;
    align-items: center;
    margin: 0 0 16px;
}
.dmr__ahora-t {
    font-family: var(--fp-serif);
    font-weight: 800;
    font-size: clamp(52px, 6vw, 76px);
    line-height: .95;
    letter-spacing: -.03em;
    color: var(--fp-ink);
    font-variant-numeric: tabular-nums;
}
.dmr__ahora-c { font-size: 14px; color: var(--fp-ink-2); line-height: 1.5; min-width: 0; }
.dmr__ahora-c .dmr__ahora-ar {
    display: block;
    font-size: 34px;
    line-height: 1.15;
    color: var(--fp-claret);
    margin: 0 0 2px;
}
.dmr__ahora-c .dmr__ahora-n { display: block; }
.dmr__ahora-c .dmr__ahora-n b { color: var(--fp-ink); font-weight: 800; }
.dmr__ahora-c .dmr__ahora-prev { display: block; font-size: 12px; color: var(--fp-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ─── Las seis celdas ───────────────────────────────────────────────── */
.dmr__band {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    background: var(--fp-paper-2);
    margin: 0 0 18px;
}
.dmr__cell { padding: 10px 10px 11px 12px; border-left: 4px solid var(--fp-rule); min-width: 0; position: relative; }
.dmr__cell--fajr    { border-left-color: var(--dmr-k-fajr); }
.dmr__cell--sunrise { border-left-color: var(--dmr-k-sunrise); }
.dmr__cell--dhuhr   { border-left-color: var(--dmr-k-dhuhr); }
.dmr__cell--asr     { border-left-color: var(--dmr-k-asr); }
.dmr__cell--maghrib { border-left-color: var(--dmr-k-maghrib); }
.dmr__cell--isha    { border-left-color: var(--dmr-k-isha); }
.dmr__cell small {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fp-ink-2);
    margin-bottom: 3px;
}
.dmr__cell small .dmr__ar { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--fp-ink); font-weight: 700; }
.dmr__cell b { display: block; font-size: 19px; font-weight: 800; color: var(--fp-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dmr__cell em { display: block; font-style: normal; font-size: 10.5px; color: var(--fp-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ya pasó: se apaga */
.dmr__cell.is-past b { color: var(--fp-muted); }
.dmr__cell.is-past small { color: var(--fp-muted); }
.dmr__cell.is-past small .dmr__ar { color: var(--fp-muted); }
/* la siguiente: hora en claret y, en vez de la descripción, el sello
   «Siguiente» (con los dos juntos la celda cortaba «Siguiente · El a…») */
.dmr__cell.is-next { background: #FFFEFB; box-shadow: inset 0 3px 0 var(--fp-claret); }
.dmr__cell.is-next b { color: var(--fp-claret); }
.dmr__cell-tag { display: none; font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--fp-claret); margin-top: 2px; }
.dmr__cell.is-next em { display: none; }
.dmr__cell.is-next .dmr__cell-tag { display: block; }
/* el rótulo y su árabe no se pisan en celdas estrechas: si no caben en
   la línea (SHURUQ + الشروق a 1280px), el árabe baja a la suya, a la derecha */
.dmr__cell small { letter-spacing: .06em; flex-wrap: wrap; row-gap: 0; }
.dmr__cell small .dmr__ar { font-size: 12px; flex: 0 0 auto; margin-left: auto; }

/* ─── Los días en un desplegable (DM 1.14.0) ────────────────────────
   El mismo desplegable que el de ciudades; la lista no lleva punto. */
.dmr__dia-sel { margin: 10px 0 10px; }
.dmr .dmr__dia-sel .dmt__sel-item { grid-template-columns: 1fr auto; }
.dmr .dmr__dia-sel .dmt__sel-cur b { font-size: 15px; }
.dmr .dmr__dia-sel .dmt__sel-list { max-height: 320px; }
/* la tira del día elegido: seis horas con su llave de color arriba */
.dmr__dia-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    background: var(--fp-paper-2);
    margin: 0 0 8px;
}
.dmr__dia-c { padding: 8px 10px 9px; border-top: 3px solid var(--fp-rule); min-width: 0; }
.dmr__dia-c--fajr    { border-top-color: var(--dmr-k-fajr); }
.dmr__dia-c--sunrise { border-top-color: var(--dmr-k-sunrise); }
.dmr__dia-c--dhuhr   { border-top-color: var(--dmr-k-dhuhr); }
.dmr__dia-c--asr     { border-top-color: var(--dmr-k-asr); }
.dmr__dia-c--maghrib { border-top-color: var(--dmr-k-maghrib); }
.dmr__dia-c--isha    { border-top-color: var(--dmr-k-isha); }
.dmr__dia-c small { display: block; font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--fp-ink-2); margin-bottom: 2px; }
.dmr__dia-c b { font-size: 16px; font-weight: 800; color: var(--fp-ink); font-variant-numeric: tabular-nums; }
.dmr__dia-c--maghrib b { color: var(--fp-claret); }
/* el mes entero, plegado tras un enlace-botón */
.dmr__mes-toggle {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 6px 0 10px;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fp-claret);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--fp-rule);
}
.dmr__mes-toggle:hover { text-decoration-color: var(--fp-claret); }
.dmr__mes-toggle:focus-visible { outline: 2px solid var(--dmr-k-fajr); outline-offset: 2px; }
.dmr__mes-w[hidden] { display: none; }

/* ─── La tabla del mes ─────────────────────────────────────────────── */
.dmr__mes-w { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dmr__mes {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--fp-ink);
}
.dmr__mes th {
    position: sticky; top: 0;
    background: var(--fp-paper);
    text-align: right;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fp-ink-2);
    padding: 6px 8px 6px 0;
    border-bottom: 1px solid var(--fp-ink);
    white-space: nowrap;
}
.dmr__mes th .dmr__ar { display: block; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--fp-muted); font-weight: 400; }
.dmr__mes th:first-child, .dmr__mes td:first-child { text-align: left; padding-left: 8px; }
.dmr__mes th:nth-child(2), .dmr__mes td:nth-child(2) { text-align: left; }
.dmr__mes td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--fp-rule); text-align: right; white-space: nowrap; }
.dmr__mes td:first-child { font-weight: 800; }
.dmr__mes td:first-child small { font-weight: 400; color: var(--fp-muted); margin-left: 4px; text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
.dmr__mes td.dmr__mes-h { color: var(--fp-ink-2); font-size: 11.5px; }
.dmr__mes td.dmr__mes-h .dmr__ar { font-size: 12px; margin-left: 4px; font-weight: 400; color: var(--fp-muted); }
.dmr__mes td.dmr__mes-h.is-est { color: var(--fp-muted); }   /* estimado: fuera de la tabla oficial */
.dmr__mes tr.is-today td { background: #FFFEFB; font-weight: 800; box-shadow: inset 3px 0 0 var(--fp-claret); }
.dmr__mes tr.is-today td:first-child { color: var(--fp-claret); }
.dmr__mes td.dmr__mes-mag { color: var(--fp-claret); font-weight: 700; }
.dmr__mes tr.is-viernes td:first-child small { color: var(--fp-claret); }

/* ─── La aleya, bajo la rejilla ────────────────────────────────────── */
.dmr__aleya {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 56px;
    align-items: center;
    margin: 34px 0 0;
    padding: 22px 0 20px;
    border-top: 2px solid var(--fp-ink);
    border-bottom: 1px solid var(--fp-rule);
}
.dmr__aleya-ar {
    margin: 0;
    font-family: var(--dmr-ar-font);
    direction: rtl;
    unicode-bidi: isolate;
    text-align: right;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.7;
    color: var(--fp-ink);
    font-weight: 400;
}
.dmr__aleya-es {
    margin: 0;
    font-family: var(--fp-serif);
    font-size: 19px;
    line-height: 1.4;
    color: var(--fp-ink);
    font-style: italic;
}
.dmr__aleya-es small {
    display: block;
    margin-top: 8px;
    font-family: inherit;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fp-claret);
}
.dmr__aleya-es small span { font-family: var(--fp-sans, inherit); color: var(--fp-muted); font-weight: 400; letter-spacing: .04em; text-transform: none; margin-left: 8px; }

/* ─── La guía de las cinco oraciones ───────────────────────────────── */
.dmr__guia-h { margin: 22px 0 10px; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--fp-claret); }
.dmr__guia {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dmr__guia li { padding: 10px 14px 12px 12px; border-left: 4px solid var(--fp-rule); min-width: 0; }
.dmr__guia li[data-k="fajr"]    { border-left-color: var(--dmr-k-fajr); }
.dmr__guia li[data-k="dhuhr"]   { border-left-color: var(--dmr-k-dhuhr); }
.dmr__guia li[data-k="asr"]     { border-left-color: var(--dmr-k-asr); }
.dmr__guia li[data-k="maghrib"] { border-left-color: var(--dmr-k-maghrib); }
.dmr__guia li[data-k="isha"]    { border-left-color: var(--dmr-k-isha); }
.dmr__guia b { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 800; color: var(--fp-ink); margin-bottom: 4px; }
.dmr__guia b .dmr__ar { font-size: 16px; color: var(--fp-claret); font-weight: 700; }
.dmr__guia p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--fp-ink-2); }

.dmr__nota { margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: var(--fp-muted); }
.dmr__nota[hidden] { display: none; }
.dmr__vacio { margin: 0; padding: 40px 16px; text-align: center; font-family: var(--fp-serif); font-size: 16px; color: var(--fp-muted); }

/* ─── Móvil ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .dmr__band { grid-template-columns: repeat(3, 1fr); }
    .dmr__cell { border-bottom: 1px solid var(--fp-paper); }
    .dmr__aleya { grid-template-columns: 1fr; gap: 14px; }
    .dmr__aleya-ar { text-align: right; }
    .dmr__guia { grid-template-columns: 1fr 1fr; }
    .dmr__guia li:last-child { grid-column: 1 / -1; }
    .dmr__ahora-c .dmr__ahora-ar { font-size: 28px; }
}
@media (max-width: 560px) {
    .dmr__band { grid-template-columns: repeat(2, 1fr); }
    .dmr__dia-row { grid-template-columns: repeat(3, 1fr); }
    .dmr__dia-c { border-bottom: 1px solid var(--fp-paper); }
    /* la banda envuelve (dm-tiempo.css): el rótulo de fuente baja a su
       línea, a ancho completo y a la izquierda, no apretado en tres líneas */
    .dmr__next .dmt__aviso-src { max-width: none; text-align: left; }
    .dmr__cell b { font-size: 17px; }
    .dmr__guia { grid-template-columns: 1fr; }
    .dmr__ahora { gap: 4px 16px; }
    .dmr__mes { font-size: 12px; }
}
@media print {
    .dmt__mapa-w, .dmt__lista, .dmr__next, .fp-tpc__credit { display: none !important; }
    .dmt__grid { grid-template-columns: 1fr; }
}