/* ════════════════════════════════════════════════════════════════════
   Diario de Marruecos — /el-tiempo/  ·  DM 1.11.0
   ────────────────────────────────────────────────────────────────────
   La página del tiempo con la piel de la calculadora (salmón desnudo,
   titular serif, regla negra gorda, cabeceras de panel en claret) y el
   MAPA con los colores del de Markets (orden del CEO): la tierra sin
   dato en gris cálido flotando sobre el papel, y el dato en la escala
   claret de fp-worldmap.js —de rgb(216,138,131) a #C1272D—. Aquí el
   dato es el aviso: sin aviso, gris; amarillo, naranja y rojo son tres
   pasos de esa misma escala. Así el mapa del tiempo y el de Markets
   son hermanos a la vista.

   DISPOSICIÓN: el mapa a la izquierda y EL RESULTADO A LA DERECHA
   (orden del CEO): las fichas de las 18 ciudades arriba de la columna
   derecha, y debajo la ciudad elegida — aviso, temperatura grande,
   banda de métricas y los siete días.

   Reutiliza de fp-skin.css: .fpgc__head, .fpgc__panel-h, .fp-tpc__tip,
   .fp-tpc__foot. Lo propio, con prefijo .dmt__.
   ════════════════════════════════════════════════════════════════════ */

.dmt {
    /* DM 1.12.0 · «todo un poco más ancho» (CEO): la calculadora va a
       1000px; el tiempo, con mapa y detalle lado a lado, respira mejor
       a 1180. Pisa el max-width de .rkp--fp solo en esta página.
       DM 1.15.0 · otra vez «un poco más» (CEO): 1280. También para
       /horarios-de-rezo/, que carga esta hoja. */
    max-width: 1280px;
    /* La escala del mapa de Markets, en tres pasos hacia el claret */
    --dmt-tierra: #CBC0B4;                 /* sin aviso: la tierra de Markets   */
    --dmt-n1:     rgb(216, 138, 131);      /* amarillo: el rosa donde empieza   */
    --dmt-n2:     rgb(196,  70,  66);      /* naranja: a mitad de camino        */
    --dmt-n3:     var(--fp-claret, #C1272D);/* rojo: el claret pleno            */
    /* Las llaves de color de la banda de métricas (las del FT) */
    --dmt-k1: #0D7680;
    --dmt-k2: #EF9457;
    --dmt-k3: #F1CC70;
    --dmt-k4: var(--fp-claret, #C1272D);
}

/* ─── Cabecera: la de la calculadora, con el sello de fecha ────────── */
.dmt__stamp {
    flex: 0 0 auto;
    text-align: right;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fp-ink-2);
    line-height: 1.6;
    white-space: nowrap;
}
.dmt__stamp b { display: block; color: var(--fp-claret); }

/* ─── La rejilla: mapa | resultado ─────────────────────────────────── */
.dmt__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: "mapa right";
    gap: 18px 56px;
    align-items: start;
}
.dmt__mapa-w { grid-area: mapa; }
.dmt__right  { grid-area: right; min-width: 0; }

/* ─── El mapa, con los colores de Markets ──────────────────────────── */
.dmt__mapa {
    position: relative;
    min-height: 320px;
    /* DM 1.12.0 · sin la regla de encima: el CEO vio dos lineas, una
       sobre el mapa y otra mas gruesa sobre las ciudades, y las quito. */
    padding-top: 6px;
}
.dmt__mapa svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 640px;
    overflow: visible;
}
.dmt__mapa .dmmap__r {
    fill: var(--dmt-tierra);
    stroke: var(--fp-paper, #FFF1E5);    /* el contorno es el propio papel */
    stroke-width: 40;                     /* unidades del viewBox (18.500 de ancho) */
    stroke-linejoin: round;
    cursor: pointer;
    transition: fill .15s ease;
}
.dmt__mapa .dmmap__r[data-nivel="1"] { fill: var(--dmt-n1); }
.dmt__mapa .dmmap__r[data-nivel="2"] { fill: var(--dmt-n2); }
.dmt__mapa .dmmap__r[data-nivel="3"] { fill: var(--dmt-n3); }
.dmt__mapa .dmmap__r:hover { fill: var(--fp-claret); }
/* seleccionada: contorno a tinta, como .is-sel en Markets */
.dmt__mapa .dmmap__r.is-on { stroke: var(--fp-ink); stroke-width: 120; }
.dmt__mapa .dmmap__r:focus-visible { outline: none; stroke: var(--fp-ink); stroke-width: 120; }

.dmt__mapa-cargando {
    position: absolute;
    inset: 6px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--fp-muted);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.dmt__mapa.is-ready .dmt__mapa-cargando { display: none; }

/* La leyenda: puntos con la misma escala */
.dmt__leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 10px 0 0;
    padding: 9px 0 0;
    border-top: 1px solid var(--fp-rule);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fp-ink-2);
}
.dmt__leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.dmt__leyenda i { width: 10px; height: 10px; border-radius: 50%; background: var(--dmt-tierra); }
.dmt__leyenda i[data-n="1"] { background: var(--dmt-n1); }
.dmt__leyenda i[data-n="2"] { background: var(--dmt-n2); }
.dmt__leyenda i[data-n="3"] { background: var(--dmt-n3); }
.dmt__leyenda small { flex-basis: 100%; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--fp-muted); }

/* ─── Columna derecha · las fichas de ciudad ───────────────────────── */
.dmt__lista { padding: 6px 0 0; }   /* DM 1.12.0 · sin la regla gorda de encima */
.dmt__lista .fpgc__panel-h { margin-bottom: 12px; }

/* ─── El desplegable de ciudades (DM 1.12.0) ────────────────────────
   Sustituye a las dieciocho píldoras. El botón lleva la voz de los
   inputs de la calculadora —blanco roto, borde fino, sin radio— y la
   lista cae por debajo con la misma tipografía de tablero. */
.dmt__sel { position: relative; margin: 0 0 18px; }
.dmt__sel-btn {
    appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px 11px 14px;
    background: #FFFEFB;
    border: 1px solid #B9AFA5;
    border-radius: 0;
    font-family: inherit;
    color: var(--fp-ink);
    cursor: pointer;
    text-align: left;
}
.dmt__sel-btn:hover { border-color: var(--fp-ink); }
.dmt__sel-btn:focus-visible { outline: 2px solid var(--dmt-k1); outline-offset: -1px; border-color: var(--dmt-k1); }
.dmt__sel-cur { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.dmt__sel-cur b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.dmt__sel-cur small { font-size: 11px; color: var(--fp-muted); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmt__sel-t { margin-left: auto; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--fp-ink); white-space: nowrap; }
.dmt__sel-caret { flex: 0 0 auto; color: var(--fp-ink-2); transition: transform .15s; }
.dmt__sel.is-open .dmt__sel-caret { transform: rotate(180deg); }
.dmt__sel-list {
    position: absolute;
    z-index: 8;
    left: 0; right: 0; top: calc(100% - 1px);
    margin: 0; padding: 4px 0; list-style: none;
    background: #FFFEFB;
    border: 1px solid var(--fp-ink);
    box-shadow: 0 10px 28px -10px rgba(26, 22, 20, .35);
    max-height: 380px;
    overflow-y: auto;
    display: none;
}
.dmt__sel.is-open .dmt__sel-list { display: block; }
.dmt__sel-item {
    appearance: none;
    width: 100%;
    display: grid;
    grid-template-columns: 10px 1fr 22px 44px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 14px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--fp-rule);
    font-family: inherit;
    font-size: 13.5px;
    color: var(--fp-ink);
    text-align: left;
    cursor: pointer;
}
.dmt__sel-item:last-child { border-bottom: 0; }
.dmt__sel-item:hover, .dmt__sel-item:focus-visible { background: var(--fp-paper-2); outline: none; }
.dmt__sel-item.is-on { background: var(--fp-ink); color: #FFF8F2; }
.dmt__sel-item.is-on .dmt__sel-t, .dmt__sel-item.is-on .dmt__sel-item-n small { color: #FFF8F2; }
.dmt__sel-item-n { font-weight: 700; min-width: 0; }
.dmt__sel-item-n small { display: block; font-weight: 400; font-size: 10.5px; color: var(--fp-muted); }
.dmt__sel-item-ic svg { display: block; width: 18px; height: 18px; }
.dmt__sel-item .dmt__sel-t { font-size: 14px; }
.dmt__rows { display: none; }   /* DM 1.12.0 · sustituidas por el desplegable */
.dmt__row {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px 5px 8px;
    background: #FFFEFB;
    border: 1px solid rgba(26, 22, 20, .35);
    border-radius: 999px;                 /* la píldora de la calculadora */
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--fp-ink);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background .12s, color .12s;
}
.dmt__row:hover { border-color: var(--fp-ink); }
.dmt__row.is-on { background: var(--fp-ink); color: #FFF8F2; border-color: var(--fp-ink); }
.dmt__row-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dmt-tierra); flex: 0 0 auto; }
.dmt__row-dot[data-n="1"] { background: var(--dmt-n1); }
.dmt__row-dot[data-n="2"] { background: var(--dmt-n2); }
.dmt__row-dot[data-n="3"] { background: var(--dmt-n3); }
.dmt__row-n small { display: none; }     /* la región no cabe en una píldora */
.dmt__row-ic { display: none; }
.dmt__row-t { font-weight: 800; opacity: .85; }

/* ─── Columna derecha · el detalle ─────────────────────────────────── */
.dmt__det { border-top: 2px solid var(--fp-ink); padding-top: 14px; }
.dmt__city[hidden] { display: none; }

/* La banda de aviso: tira fina, en la escala del mapa */
.dmt__aviso {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    margin: 0 0 16px;
    background: var(--fp-paper-2);
    color: var(--fp-ink);
    font-size: 12.5px;
    line-height: 1.4;
}
.dmt__aviso-lv {
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 3px 8px;
    background: var(--dmt-tierra);
    color: var(--fp-ink);
}
.dmt__aviso--1 .dmt__aviso-lv { background: var(--dmt-n1); color: #fff; }
.dmt__aviso--2 .dmt__aviso-lv { background: var(--dmt-n2); color: #fff; }
.dmt__aviso--3 { background: var(--dmt-n3); color: #fff; }
.dmt__aviso--3 .dmt__aviso-lv { background: #fff; color: var(--dmt-n3); }
.dmt__aviso-src { margin-left: auto; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; white-space: nowrap; }

/* Ahora: el número grande en serif */
.dmt__ahora {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 22px;
    align-items: center;
    margin: 0 0 16px;
}
.dmt__ahora-ic svg { display: block; width: 76px; height: 76px; }
.dmt__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;
}
.dmt__ahora-t sup { font-size: .42em; vertical-align: top; margin-left: 2px; font-weight: 700; }
.dmt__ahora-c { font-size: 14px; color: var(--fp-ink-2); margin-top: 5px; line-height: 1.5; }
.dmt__ahora-c b { color: var(--fp-ink); font-weight: 800; }
.dmt__ahora-c span + span::before { content: "·"; margin: 0 7px; color: var(--fp-muted); }

/* La banda de métricas: la tira tostada de la calculadora, con llave */
.dmt__band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--fp-paper-2);
    margin: 0 0 18px;
}
.dmt__cell { padding: 10px 12px 12px; border-left: 4px solid var(--fp-rule); min-width: 0; }
.dmt__cell--1 { border-left-color: var(--dmt-k1); }
.dmt__cell--2 { border-left-color: var(--dmt-k2); }
.dmt__cell--3 { border-left-color: var(--dmt-k3); }
.dmt__cell--4 { border-left-color: var(--dmt-k4); }
.dmt__cell small {
    display: block;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fp-ink-2);
    margin-bottom: 3px;
}
.dmt__cell b { font-size: 19px; font-weight: 800; color: var(--fp-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dmt__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; }

/* Los siete días, compactos para la columna */
.dmt__dias-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 6px;
    padding: 0 0 6px;
    border-bottom: 2px solid var(--fp-ink);
}
.dmt__dias-h h2 { margin: 0; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--fp-claret); }
.dmt__dias-h span { font-size: 10px; color: var(--fp-muted); letter-spacing: .06em; text-transform: uppercase; }
.dmt__dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; }
.dmt__dia { padding: 10px 4px 10px; border-right: 1px solid var(--fp-rule); text-align: center; min-width: 0; }
.dmt__dia:last-child { border-right: 0; }
.dmt__dia.is-today { box-shadow: inset 0 3px 0 var(--fp-claret); }
.dmt__dia-n { display: block; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--fp-ink); }
.dmt__dia-d { display: block; font-size: 10px; color: var(--fp-muted); margin-bottom: 6px; }
.dmt__dia svg { display: block; width: 28px; height: 28px; margin: 0 auto 5px; }
.dmt__dia-c { display: block; font-size: 10px; color: var(--fp-ink-2); min-height: 2.6em; line-height: 1.3; }
.dmt__dia-t { display: block; margin-top: 4px; font-variant-numeric: tabular-nums; }
.dmt__dia-t b { font-size: 14px; font-weight: 800; color: var(--fp-ink); }
.dmt__dia-t span { font-size: 11.5px; color: var(--fp-muted); margin-left: 4px; }
.dmt__dia-r { display: block; margin-top: 4px; font-size: 10px; color: var(--dmt-k1); font-weight: 700; min-height: 1.3em; }

.dmt__vacio { margin: 0; padding: 40px 16px; text-align: center; font-family: var(--fp-serif); font-size: 16px; color: var(--fp-muted); }

/* El pie: fuente y atribución del mapa. d-maps exige crédito (CC BY-SA). */
.dmt__foot { margin-top: 26px; gap: 28px; }
.dmt__foot .fp-tpc__src { white-space: normal; }
/* DM 1.15.0 · EL LOGO DE CAMAL SALÍA APLASTADO (CEO). El texto de fuente
   de estas páginas es largo y envuelve, y el enlace del logo —un elemento
   flex sin flex-shrink:0— se estrechaba con él: ancho recortado con el
   alto clavado a 18px = logo encogido. En la calculadora no pasa porque
   su texto es corto. El enlace ya no encoge, el logo va a 22px y con su
   proporción (947×307). */
.dmt__foot .fp-tpc__credit { flex: 0 0 auto; }
.dmt__foot .fp-tpc__credit-logo { height: 22px; width: auto; max-width: none; }
.dmt__foot a { color: inherit; text-decoration: underline; text-decoration-color: var(--fp-rule); }

/* ─── Móvil ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .dmt__grid { grid-template-columns: 1fr; grid-template-areas: "right" "mapa"; gap: 18px; }
    .dmt__mapa svg { max-height: 380px; }
    .dmt__sel-list { max-height: 300px; }
    .dmt__band { grid-template-columns: 1fr 1fr; }
    .dmt__dias { grid-template-columns: repeat(7, minmax(78px, 1fr)); overflow-x: auto; }
    .dmt__ahora-ic svg { width: 56px; height: 56px; }
    .dmt__stamp { display: none; }
}
@media (max-width: 560px) {
    .dmt__cell { padding: 9px 10px 11px; }
    .dmt__cell b { font-size: 17px; }
    /* Visto en la maqueta a 375px: el sello «Aviso de la redacción» se
       comía el texto del aviso y lo dejaba en cuatro líneas. En estrecho
       la banda envuelve y el sello baja a su propia línea. */
    .dmt__aviso { flex-wrap: wrap; gap: 8px 12px; }
    .dmt__aviso-src { margin-left: 0; flex-basis: 100%; }
}