/* Tarjeta de partido de la web pública (resources/views/components/web/partido-card.blade.php).
   Línea gráfica de Golazo: cuerpo blanco con la diagonal gris (.bg-diagonal-light) y pie rojo.
   Todas las clases empiezan con "pc-" para no afectar otras páginas. */

.pc-columna { padding: .5rem; }

.pc-tarjeta {
  --pc-rojo: #d60000;            /* rojo de la marca con contraste AA sobre texto blanco */
  --pc-negro: #0a0a0a;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: .75rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  transition: transform .16s ease, box-shadow .16s ease;
}
.pc-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
@media (prefers-reduced-motion: reduce) { .pc-tarjeta, .pc-tarjeta:hover { transition: none; transform: none; } }

.pc-cuerpo { flex: 1; padding: .7rem .85rem .8rem; color: var(--pc-negro); }

/* ---------- estado y día/hora ---------- */
.pc-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; min-height: 1.4rem; }
.pc-estado {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem; border-radius: 50rem;
  font-family: 'Poppins', sans-serif; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  white-space: nowrap;
}
.pc-estado-programado { background: var(--pc-negro); color: #fff; }
.pc-estado-hoy        { background: #198754; color: #fff; }
.pc-estado-finalizado { background: #3c3c3b; color: #fff; }
.pc-estado-pendiente  { background: #ffc107; color: var(--pc-negro); }
.pc-estado-sin-fecha  { background: #e9ecef; color: #3c3c3b; }
.pc-estado-postergado { background: #fd7e14; color: var(--pc-negro); }
.pc-estado-suspendido { background: var(--pc-rojo); color: #fff; }
.pc-cuando { font-size: .8rem; font-weight: 600; color: #3c3c3b; white-space: nowrap; }

/* ---------- equipos y marcador ---------- */
.pc-enfrentamiento { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: .5rem; }
.pc-equipo {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  min-width: 0; padding: .25rem; border-radius: .5rem;
  color: var(--pc-negro); text-decoration: none; text-align: center;
}
.pc-equipo:hover .pc-nombre { color: var(--pc-rojo); }
.pc-escudo { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.pc-escudo img { max-width: 56px; max-height: 56px; }
.pc-nombre {
  font-family: 'Poppins', sans-serif; font-size: .8rem; font-weight: 600; line-height: 1.2; text-transform: uppercase;
  /* nombres largos: hasta dos líneas y "…" */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.pc-equipo.pc-gana .pc-nombre { font-weight: 800; }
.pc-equipo.pc-pierde { opacity: .55; }

.pc-centro { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 4.5rem; padding-top: .6rem; }
.pc-marcador {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: 'Bahnschrift', 'Poppins', sans-serif; font-size: 2.1rem; font-weight: 700; line-height: 1; color: #5c636a;
}
.pc-marcador .pc-gana { color: var(--pc-negro); }
.pc-marcador.pc-empate { color: var(--pc-negro); } /* empate: los dos en negro */
.pc-guion { color: var(--pc-rojo); }
.pc-penales { margin-top: .3rem; font-size: .7rem; font-weight: 600; color: #3c3c3b; white-space: nowrap; }
.pc-vs { font-family: 'Bahnschrift', 'Poppins', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--pc-negro); line-height: 1; }
.pc-hora { margin-top: .35rem; padding: .2rem .55rem; border-radius: 50rem; background: var(--pc-negro); color: #fff; font-size: .78rem; font-weight: 700; white-space: nowrap; }

/* ---------- pie: cancha y compartir ---------- */
.pc-pie {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .9rem; background: var(--pc-rojo); color: #fff;
  font-family: 'Poppins', sans-serif; font-size: .78rem;
}
.pc-cancha { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.pc-compartir { flex-shrink: 0; color: #fff; font-weight: 700; text-decoration: none; padding: .2rem .5rem; border-radius: 50rem; border: 1px solid rgba(255, 255, 255, .55); }
.pc-compartir:hover { background: #fff; color: var(--pc-rojo); }

/* foco visible al navegar con teclado */
.pc-equipo:focus-visible, .pc-compartir:focus-visible { outline: 3px solid #ffc107; outline-offset: 2px; }

/* equipo seguido por el visitante (public/js/web/campeonato.js) */
.cp-seguido .pc-tarjeta { box-shadow: 0 0 0 3px #ffc107, 0 2px 10px rgba(0, 0, 0, .25); }

@media (max-width: 575.98px) {
  .pc-escudo, .pc-escudo img { width: 48px; height: 48px; max-width: 48px; max-height: 48px; }
  .pc-marcador { font-size: 1.85rem; }
}