/* pronosticos.css — Solo estilos del contenedor .partido-card y su interior */

:root {
  --blanco:     #ffffff;
  --gris-fondo: #f4f5f7;
  --gris-borde: #e8eaed;
  --gris-texto: #6b7280;
  --negro:      #111318;
  --negro-soft: #1f2330;
  --acento:     #1a56db;
  --acento-bg:  #eff4ff;
  --font:       'Outfit', sans-serif;
  --radio:      12px;
  --radio-sm:   8px;
  --sombra:     0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05);
  --sombra-hov: 0 2px 8px rgba(0,0,0,.10), 0 8px 24px rgba(0,0,0,.08);

  --c-btts-si:  #059669; --bg-btts-si:  #ecfdf5; --bd-btts-si:  #6ee7b7;
  --c-over:     #2563eb; --bg-over:     #eff6ff; --bd-over:     #93c5fd;
  --c-btts-no:  #dc2626; --bg-btts-no:  #fef2f2; --bd-btts-no:  #fca5a5;
  --c-ha1:      #d97706; --bg-ha1:      #fffbeb; --bd-ha1:      #fcd34d;
  --c-ha15:     #7c3aed; --bg-ha15:     #f5f3ff; --bd-ha15:     #c4b5fd;
}

/* Wrappers opcionales del página (no necesarios si solo usas partido-card) */
.partidos-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 740px) { .partidos-grid { grid-template-columns: 1fr 1fr; } }

/* ---- TARJETA ---- */
.partido-card {
  font-family: var(--font);
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  border: 1px solid var(--gris-borde);
  overflow: visible;
  transition: box-shadow .2s;
  display: flex;
  flex-direction: column;
}
.partido-card:hover { box-shadow: var(--sombra-hov); }

/* Equipos */
.partido-equipos {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--gris-borde);
}
.equipo { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.equipo-escudo { width: 44px; height: 44px; object-fit: contain; display: block; }
.equipo-nombre {
  font-size: .8rem; font-weight: 600; text-align: center;
  line-height: 1.25; color: var(--negro-soft);
  word-break: break-word; hyphens: auto;
}

.partido-centro { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 4px; flex-shrink: 0; }
.vs-label       { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--gris-texto); }
.partido-hora   { font-size: 1rem; font-weight: 700; color: var(--negro); letter-spacing: -.01em; }
.partido-hora .tz { font-size: .58rem; font-weight: 500; color: var(--gris-texto); margin-left: 2px; }
.partido-lugar  { font-size: .6rem; color: var(--gris-texto); text-align: center; max-width: 80px; line-height: 1.3; display: none; }

/* Pronóstico */
.pronostico {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  margin: 10px 14px 0;
  border-radius: var(--radio-sm);
}

.prono-tipo-wrap { display: flex; align-items: center; gap: 7px; min-width: 0; position: relative; }
.prono-tipo-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.prono-tipo-dot { background: var(--gris-texto); }

.prono-tipo { font-size: .8rem; font-weight: 600; color: var(--negro-soft); }

.prono-cuota-wrap { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.prono-cuota      { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; color: var(--negro); }
.prono-casa-logo  { display: block; width: auto; max-width: 64px; height: 14px; object-fit: contain; border-radius: 2px; }
.prono-casa-text  { max-width: 64px; overflow: hidden; font-size: .62rem; font-weight: 600; color: var(--gris-texto); text-overflow: ellipsis; white-space: nowrap; }

/* Explicación desplegable del pronóstico */
.prono-explicacion { position: static; }
.prono-explicacion summary {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--gris-texto);
  background: rgba(255,255,255,.72);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}
.prono-explicacion summary::-webkit-details-marker { display: none; }
.prono-explicacion summary:hover,
.prono-explicacion summary:focus-visible { color: var(--acento); outline: none; }
.prono-explicacion-contenido {
  position: absolute;
  z-index: 5;
  top: calc(100% + 10px);
  left: -10px;
  width: min(420px, calc(100vw - 54px));
  padding: 12px 14px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio-sm);
  background: var(--blanco);
  box-shadow: var(--sombra-hov);
  color: var(--negro-soft);
}
.prono-explicacion-contenido p {
  margin: 0 0 9px;
  font-size: .76rem;
  font-weight: 400;
  line-height: 1.5;
}
.prono-explicacion-contenido p:last-child { margin-bottom: 0; }

/* Pie */
.partido-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-top: 10px;
  border-bottom: 1px solid var(--gris-borde);
}
.partido-footer .comp-escudo    { width: 20px; height: 20px; object-fit: contain; display: block; }
.partido-footer-texto           { font-size: .68rem; font-weight: 600; color: var(--gris-texto); text-transform: uppercase; letter-spacing: .05em; }

/* ---- RESPONSIVE ---- */
@media (max-width: 739px) {
  .partido-card { min-width: 0; overflow: hidden; padding-bottom: 10px; }
  .partido-equipos { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .partido-footer-texto { min-width: 0; overflow-wrap: anywhere; }
  .partido-footer .comp-escudo { flex-shrink: 0; }
  .pronostico { gap: 6px; padding: 8px; margin-inline: 10px; }
  .prono-tipo-dot { display: none; }
  .prono-tipo-wrap { flex: 1 1 0; gap: 5px; }
  .prono-tipo { min-width: 0; overflow-wrap: anywhere; }
  .prono-cuota-wrap {
    display: grid;
    grid-template-columns: max-content 44px;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
    column-gap: 6px;
    row-gap: 2px;
    flex: 0 0 auto;
    text-align: center;
  }
  .prono-cuota-wrap .prono-cuota {
    grid-column: 1;
    grid-row: 1;
    display: block;
    line-height: 1.2;
  }
  .prono-probabilidades {
    grid-column: 1;
    grid-row: 2;
    display: block;
    line-height: 1.3;
  }
  .prono-probabilidades-detalle { display: none; }
  .prono-cuota-wrap .prono-casa-logo,
  .prono-cuota-wrap .prono-casa-text {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 44px !important;
    max-width: 44px;
  }
  .prono-explicacion { flex: 0 0 auto; }
  .prono-explicacion summary {
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    color: #854d0e;
    background: #fef08a;
    border-color: #eab308;
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
  }
  .prono-explicacion summary:hover,
  .prono-explicacion summary:focus-visible,
  .prono-explicacion[open] summary {
    color: #713f12;
    background: #fde047;
    outline: 2px solid #eab308;
    outline-offset: 2px;
  }
  /* Panel flotante fuera de la tarjeta; pulsar de nuevo el botón lo cierra. */
  .prono-explicacion-contenido {
    position: fixed;
    z-index: 1000;
    top: auto;
    bottom: 16px;
    left: 16px;
    width: calc(100vw - 32px);
    max-height: 55vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 12px 14px;
    overflow-wrap: anywhere;
  }
}
@media (min-width: 450px) {
  .equipo-escudo { width: 50px; height: 50px; }
  .equipo-nombre { font-size: .85rem; }
  .partido-hora  { font-size: 1.1rem; }
  .prono-cuota   { font-size: 1.1rem; }
  .prono-casa-logo { height: 15px; }
}
@media (min-width: 740px) {
  .partido-equipos { padding: 18px 18px 14px; }
  .equipo-escudo   { width: 54px; height: 54px; }
  .equipo-nombre   { font-size: .88rem; }
  .partido-lugar   { display: block; }
  .pronostico      { padding: 8px 12px; margin: 10px 18px 0; }
  .partido-footer  { padding: 10px 18px; }
  .prono-cuota     { font-size: 1.15rem; }
  .prono-casa-logo { height: 16px; }
}
@media (min-width: 900px) {
  .equipo-escudo { width: 60px; height: 60px; }
  .equipo-nombre { font-size: .92rem; }
  .prono-cuota   { font-size: 1.2rem; }
  .prono-casa-logo { height: 16px; }
}