.elementor-15748 .elementor-element.elementor-element-0034c4f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS *//* ======================================================
   Football Pool – Predicciones del Jugador
   Responsive + Parche + Modo Noche "Dormilón"
   by WIDDI
====================================================== */

/* ---------- Tokens / Brand ---------- */
:root{
  --ol-blue:#00528A;
  --ol-sky:#2DD0F8;
  --ol-text:#0F172A;
  --ol-muted:#6B7280;
  --ol-card:#FFFFFF;
  --ol-border:#E7EEF6;
  --ol-shadow:0 8px 24px rgba(0,0,0,.06);
  --ol-r:16px;
}

/* ---------- 1) PARCHE de contenedor (quitamos el 600px y centramos) ---------- */
.site-main.post-15748,
.site-main.page,
main.site-main{
  max-width: var(--wp--style--global--wide-size, 1200px) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(12px, 2vw, 20px);
  padding-right: clamp(12px, 2vw, 20px);
}

/* ---------- 2) Encabezado e intro ---------- */
.page-header{ margin: clamp(8px, 1.5vw, 14px) 0; }
.page-header .entry-title{
  font-family:"Montserrat",system-ui,sans-serif;
  font-weight:900; letter-spacing:.2px; color:var(--ol-text);
  margin:0 0 4px;
}
.user-page-intro{
  color:#475569; margin: 4px 0 14px; font-size: clamp(.95rem, 1.5vw, 1.05rem);
}
.user-page-intro .username{ font-weight:800; color:var(--ol-blue); }

/* ---------- 3) Banda de fase ---------- */
.matchinfo .matchtype{
  background: linear-gradient(90deg, var(--ol-blue), var(--ol-sky));
  color:#fff; font-weight:800; letter-spacing:.25px;
  padding:.7rem 1rem; border-radius:10px; margin:0 0 14px;
}

/* ---------- 4) GRID Responsive 3 → 2 → 1 ---------- */
.matchinfo.new-layout,
.matchinfo{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: clamp(12px, 2vw, 18px);
}
@media (max-width: 1100px){
  .matchinfo{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 680px){
  .matchinfo{ grid-template-columns: 1fr; }
}

/* ---------- 5) Tarjeta del partido (solo lectura) ---------- */
.match-card{
  background:var(--ol-card);
  border:1px solid var(--ol-border);
  border-radius:var(--ol-r);
  padding: clamp(12px, 1.8vw, 16px);
  box-shadow:var(--ol-shadow);
  position:relative; overflow:hidden;
  display:grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "head head"
    "hflag aflag"
    "hname aname"
    "meta  meta";
  row-gap:8px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.match-card:hover{
  transform: translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.10);
  border-color:#dbe7f2;
}
.match-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--ol-blue),var(--ol-sky));
}

/* Header (fecha/hora) */
.match-card-header{
  grid-area:head;
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:4px;
}
.match-card-header .matchdate{
  color:var(--ol-muted); font-weight:700; font-size:.95rem;
}
.match-card-header .time{
  background:#F6F8FB; border:1px solid var(--ol-border); border-radius:999px;
  padding:.24rem .6rem; font-size:.9rem; font-weight:700; color:var(--ol-text);
}

/* Banderas */
.flag{ display:flex; justify-content:center; }
.flag img{
  width: clamp(82px, 12vw, 100px);
  height: clamp(52px, 8vw, 64px);
  object-fit:cover;
  border-radius:12px; border:1px solid #EFF3F8;
  box-shadow:0 4px 12px rgba(0,0,0,.10);
}
.flag.home{ grid-area:hflag; }
.flag.away{ grid-area:aflag; }

/* Nombres */
.match .home, .match .away{
  text-align:center; font-weight:900; color:var(--ol-text);
  margin-top:2px; font-size: clamp(1rem, 1.6vw, 1.1rem);
}
.match .home{ grid-area:hname; }
.match .away{ grid-area:aname; }

/* Footer (íconos) */
.match-card-footer{
  grid-area:meta; margin-top:6px;
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
}
.user-score .no-score{ display:none; }
.pie-chart-icon{
  width:22px; height:22px; display:block; filter: saturate(1) opacity(.9);
  transition: transform .15s ease, filter .15s ease;
}
.fp-icon a:hover .pie-chart-icon{ transform: translateY(-1px); filter: saturate(1.2); }

/* Joker readonly */
.fp-joker-box.readonly{
  width:32px; height:32px; border-radius:999px; position:relative;
  background: radial-gradient(circle at 70% 30%, #FFFFFF 0%, #F0F7FF 40%, #E7F3FF 100%);
  border:1px solid var(--ol-border); box-shadow:0 4px 10px rgba(0,0,0,.08);
  opacity:.9;
}
.fp-joker-box.readonly::after{
  content:"⚽"; position:absolute; inset:0; display:grid; place-items:center; font-size:14px;
  color:#808B97;
}

/* Limpieza de restos del tema que rompen layout */
.match-card, .match{ width:auto !important; margin:0 !important; }
.match .score{ display:none !important; } /* aquí no se muestran inputs ni resultados */

/* ---------- 6) Focus visible (accesibilidad) ---------- */
.match-card a:focus{ outline:none; }
.match-card:focus-within{
  box-shadow: 0 0 0 3px rgba(45,208,248,.22), 0 10px 24px rgba(0,82,138,.18);
}

/* ---------- 7) Responsive extra ---------- */
@media (min-width:1440px){
  .matchinfo{ grid-template-columns: repeat(4, minmax(260px, 1fr)); }
}

/* ======================================================
   8) MODO NOCHE "DORMILÓN"
   Actívalo añadiendo .ol-dormilon (o .ol-dark) al <body> o contenedor padre.
====================================================== */
.ol-dormilon, .ol-dark{
  --ol-text:#E7F6FF;
  --ol-muted:#B7C7D6;
  --ol-card:#0B1723;
  --ol-border:#123047;
  --ol-shadow:0 10px 24px rgba(0,0,0,.40);
}

.ol-dormilon .page-header .entry-title,
.ol-dark .page-header .entry-title{ color:var(--ol-text); }

.ol-dormilon .user-page-intro,
.ol-dark .user-page-intro{ color:var(--ol-muted); }

.ol-dormilon .match-card,
.ol-dark .match-card{
  background:var(--ol-card);
  border-color:var(--ol-border);
  box-shadow:var(--ol-shadow);
}
.ol-dormilon .match-card::before,
.ol-dark .match-card::before{
  background:linear-gradient(90deg,#0FA0D0,#2DD0F8);
}

.ol-dormilon .match-card-header .matchdate,
.ol-dark .match-card-header .matchdate{ color:var(--ol-muted); }

.ol-dormilon .match-card-header .time,
.ol-dark .match-card-header .time{
  background:#0E2233; color:#E7F6FF; border-color:#163652;
}

.ol-dormilon .match .home, .ol-dormilon .match .away,
.ol-dark .match .home, .ol-dark .match .away{ color:#E7F6FF; }

.ol-dormilon .flag img,
.ol-dark .flag img{
  border-color:#163652; box-shadow:0 6px 16px rgba(0,0,0,.45);
}

.ol-dormilon .fp-joker-box.readonly,
.ol-dark .fp-joker-box.readonly{
  background: radial-gradient(circle at 70% 30%, #0E2233 0%, #0B1723 40%, #10283A 100%);
  border-color:#163652;
  color:#cfeaff;
}

/* (Opcional) si el usuario usa sistema oscuro y no pones clase, aplica automáticamente */
@media (prefers-color-scheme: dark){
  body:not(.ol-dormilon):not(.ol-dark) .match-card{
    background:#0B1723; border-color:#123047; box-shadow:0 10px 24px rgba(0,0,0,.40);
  }
  body:not(.ol-dormilon):not(.ol-dark) .match-card::before{
    background:linear-gradient(90deg,#0FA0D0,#2DD0F8);
  }
  body:not(.ol-dormilon):not(.ol-dark) .match-card-header .time{
    background:#0E2233; color:#E7F6FF; border-color:#163652;
  }
  body:not(.ol-dormilon):not(.ol-dark) .match .home,
  body:not(.ol-dormilon):not(.ol-dark) .match .away{ color:#E7F6FF; }
  body:not(.ol-dormilon):not(.ol-dark) .flag img{
    border-color:#163652; box-shadow:0 6px 16px rgba(0,0,0,.45);
  }
}


.matchtype {
    display: none;
}/* End custom CSS */