/* El Minuto - Deporte & Mundo 1.0.4 */
.em-dm{
  --em-accent:#107ACC;
  --em-shell:#ffffff;
  --em-border:rgba(16,122,204,.22);
  width:100%;
  margin:0 auto;
  padding:14px 0;
  box-sizing:border-box;
  font-family:"Poppins",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.em-dm *{box-sizing:border-box}
.em-dm__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.em-dm__card{min-width:0}
.em-dm__link{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid var(--em-border);
  border-radius:10px;
  background:#07172c;
  box-shadow:0 8px 24px rgba(9,31,58,.08);
  text-decoration:none !important;
  isolation:isolate;
}
.em-dm__image,.em-dm__placeholder{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}
.em-dm__image{
  object-fit:cover;
  transform:scale(1.001);
  transition:transform .35s ease;
}
.em-dm__placeholder{background:linear-gradient(135deg,#15345a,#07172c)}
.em-dm__shade{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(2,10,22,.05) 25%,rgba(2,10,22,.24) 54%,rgba(2,10,22,.92) 100%);
}
.em-dm__label{
  position:absolute;z-index:2;top:16px;left:16px;
  padding:9px 16px;
  border-radius:4px;
  background:var(--em-accent);
  color:#fff !important;
  font-size:13px;
  line-height:1;
  font-weight:600;
  letter-spacing:.025em;
}
.em-dm__content{
  position:absolute;z-index:2;left:20px;right:78px;bottom:18px;
  display:flex;flex-direction:column;gap:5px;
}
.em-dm__date{
  color:rgba(255,255,255,.88) !important;
  font-size:13px;
  line-height:1.3;
  font-weight:400;
}
.em-dm__title{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-size:clamp(20px,2vw,30px);
  line-height:1.16;
  letter-spacing:-.025em;
  font-weight:600;
  text-shadow:0 1px 10px rgba(0,0,0,.22);
}
.em-dm__arrow{
  position:absolute;z-index:3;right:18px;bottom:18px;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--em-accent);
  color:#fff !important;
  font-size:24px;font-weight:400;line-height:1;
  transition:transform .25s ease,filter .25s ease;
}
.em-dm__link:hover .em-dm__image{transform:scale(1.035)}
.em-dm__link:hover .em-dm__arrow{transform:translateX(3px);filter:brightness(1.08)}
.em-dm__link:focus-visible{outline:3px solid var(--em-accent);outline-offset:3px}

/* DARK: la tarjeta conserva su estética; se refuerza el borde azul. */
@media(prefers-color-scheme:dark){
  .em-dm{--em-shell:#061426;--em-border:rgba(16,122,204,.72)}
  .em-dm__link{box-shadow:0 8px 26px rgba(0,0,0,.24)}
}
body.dark .em-dm,
body.dark-mode .em-dm,
html.dark .em-dm,
[data-theme="dark"] .em-dm{
  --em-shell:#061426;
  --em-border:rgba(16,122,204,.72);
}
body.light .em-dm,
body.light-mode .em-dm,
html.light .em-dm,
[data-theme="light"] .em-dm{
  --em-shell:#ffffff;
  --em-border:rgba(16,122,204,.22);
}

/* Móvil: una tarjeta por fila, manteniendo el concepto del boceto. */
@media(max-width:767px){
  .em-dm{padding:10px 0}
  .em-dm__grid{grid-template-columns:1fr;gap:14px}
  .em-dm__link{aspect-ratio:16/10;border-radius:9px}
  .em-dm__label{top:12px;left:12px;padding:7px 12px;font-size:11px}
  .em-dm__content{left:14px;right:62px;bottom:14px;gap:4px}
  .em-dm__date{font-size:11px}
  .em-dm__title{font-size:clamp(18px,5.3vw,23px);line-height:1.18;font-weight:600}
  .em-dm__arrow{width:38px;height:38px;right:13px;bottom:13px;font-size:20px}
}
@media(prefers-reduced-motion:reduce){
  .em-dm__image,.em-dm__arrow{transition:none}
}


/* v1.0.1 — caja editorial y ancho controlado SOLO en escritorio */
@media (min-width:768px){
  .em-dm{
    max-width:1120px;
    margin-left:auto;
    margin-right:auto;
    padding:22px;
    border:1px solid rgba(16,122,204,.18);
    border-radius:14px;
    background:#f6f8fb;
    box-shadow:0 10px 30px rgba(8,31,58,.06);
  }

  body.dark .em-dm,
  body.dark-mode .em-dm,
  html.dark .em-dm,
  [data-theme="dark"] .em-dm{
    background:#061426;
    border-color:rgba(16,122,204,.34);
    box-shadow:0 12px 34px rgba(0,0,0,.22);
  }

  body.light .em-dm,
  body.light-mode .em-dm,
  html.light .em-dm,
  [data-theme="light"] .em-dm{
    background:#f6f8fb;
    border-color:rgba(16,122,204,.18);
  }
}

@media (min-width:768px) and (prefers-color-scheme:dark){
  .em-dm{
    background:#061426;
    border-color:rgba(16,122,204,.34);
    box-shadow:0 12px 34px rgba(0,0,0,.22);
  }
}


/* v1.0.2 — corrección específica para notebook/escritorio grande.
   Móvil (<768px) queda intacto. */
@media (min-width:768px){
  .em-dm{
    width:min(1060px, calc(100% - 48px)) !important;
    max-width:1060px !important;
    margin:18px auto !important;
    padding:26px !important;
    background:#f4f7fa !important;
    border:1px solid rgba(16,122,204,.22) !important;
    border-radius:14px !important;
    box-shadow:0 10px 30px rgba(8,31,58,.07) !important;
    overflow:hidden;
  }

  .em-dm__grid{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:18px !important;
  }

  .em-dm__link{
    width:100% !important;
    max-width:100% !important;
    aspect-ratio:16/9 !important;
  }

  .em-dm__title{
    font-size:clamp(20px,1.55vw,25px) !important;
    line-height:1.17 !important;
  }

  .em-dm__date{
    font-size:12px !important;
  }

  .em-dm__label{
    font-size:12px !important;
  }

  body.dark .em-dm,
  body.dark-mode .em-dm,
  html.dark .em-dm,
  [data-theme="dark"] .em-dm{
    background:#061426 !important;
    border-color:rgba(16,122,204,.48) !important;
    box-shadow:0 12px 34px rgba(0,0,0,.26) !important;
  }

  body.light .em-dm,
  body.light-mode .em-dm,
  html.light .em-dm,
  [data-theme="light"] .em-dm{
    background:#f4f7fa !important;
    border-color:rgba(16,122,204,.22) !important;
  }
}

@media (min-width:768px) and (prefers-color-scheme:dark){
  .em-dm{
    background:#061426 !important;
    border-color:rgba(16,122,204,.48) !important;
    box-shadow:0 12px 34px rgba(0,0,0,.26) !important;
  }
}

/* En monitores grandes no permitimos que Elementor vuelva a expandir el módulo. */
@media (min-width:1440px){
  .em-dm{
    width:1060px !important;
    max-width:1060px !important;
    padding:28px !important;
  }
  .em-dm__title{
    font-size:24px !important;
  }
}


/* v1.0.3 — acabado editorial azul.
   Se conservan las dimensiones y el móvil de v1.0.2. */
@media (min-width:768px){
  .em-dm{
    /* LIGHT: azul editorial muy suave, claramente perceptible */
    background:
      linear-gradient(135deg, rgba(16,122,204,.13), rgba(16,122,204,.055)) !important;
    border:1px solid rgba(16,122,204,.34) !important;
    box-shadow:
      0 12px 32px rgba(8,31,58,.09),
      inset 0 1px 0 rgba(255,255,255,.55) !important;
  }

  /* DARK explícito del tema */
  body.dark .em-dm,
  body.dark-mode .em-dm,
  html.dark .em-dm,
  [data-theme="dark"] .em-dm,
  [data-bs-theme="dark"] .em-dm{
    background:
      linear-gradient(135deg, #071b32 0%, #061426 58%, #08213c 100%) !important;
    border:1px solid rgba(16,122,204,.68) !important;
    box-shadow:
      0 14px 38px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(16,122,204,.16) !important;
  }

  /* LIGHT explícito del tema */
  body.light .em-dm,
  body.light-mode .em-dm,
  html.light .em-dm,
  [data-theme="light"] .em-dm,
  [data-bs-theme="light"] .em-dm{
    background:
      linear-gradient(135deg, rgba(16,122,204,.13), rgba(16,122,204,.055)) !important;
    border-color:rgba(16,122,204,.34) !important;
  }
}

@media (min-width:768px) and (prefers-color-scheme:dark){
  .em-dm{
    background:
      linear-gradient(135deg, #071b32 0%, #061426 58%, #08213c 100%) !important;
    border-color:rgba(16,122,204,.68) !important;
    box-shadow:
      0 14px 38px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(16,122,204,.16) !important;
  }
}

/* Reafirmamos que el teléfono conserva el diseño aprobado. */
@media (max-width:767px){
  .em-dm{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
}


/* v1.0.4 — LIGHT más visible.
   No altera dimensiones, DARK ni móvil. */
@media (min-width:768px){
  .em-dm{
    background:#E8F2FA !important;
    border-color:rgba(16,122,204,.38) !important;
  }

  body.light .em-dm,
  body.light-mode .em-dm,
  html.light .em-dm,
  [data-theme="light"] .em-dm,
  [data-bs-theme="light"] .em-dm{
    background:#E8F2FA !important;
    border-color:rgba(16,122,204,.38) !important;
    box-shadow:
      0 12px 32px rgba(8,31,58,.08),
      inset 0 1px 0 rgba(255,255,255,.72) !important;
  }

  /* DARK permanece exactamente con el acabado aprobado. */
  body.dark .em-dm,
  body.dark-mode .em-dm,
  html.dark .em-dm,
  [data-theme="dark"] .em-dm,
  [data-bs-theme="dark"] .em-dm{
    background:linear-gradient(135deg,#071b32 0%,#061426 58%,#08213c 100%) !important;
    border-color:rgba(16,122,204,.68) !important;
  }
}

@media (min-width:768px) and (prefers-color-scheme:dark){
  .em-dm{
    background:linear-gradient(135deg,#071b32 0%,#061426 58%,#08213c 100%) !important;
    border-color:rgba(16,122,204,.68) !important;
  }
}

@media (max-width:767px){
  .em-dm{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
}
