/* =============================================================
   LRF WIDGET v3.6 - Liga Rafaelina de Fútbol
   style.css — Estilos del shortcode [lrf_tablas]
   ============================================================= */

/* --- Contenedor principal del widget --- */
#lrf-tablas { font-family: 'Oswald', 'Segoe UI', Arial, sans-serif; }

/* --- Tarjeta de cada grupo (card con sombra y bordes redondeados) --- */
.lrf-grupo {
    margin-bottom: 32px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* --- Título del grupo (banner rojo superior) --- */
.lrf-grupo .lrf-header-tit {
    background-color: #d00024;
    color: #fff;
    padding: 12px 20px;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
}

/* --- Fila de selectores (Categoría / División / Torneo) --- */
.lrf-grupo .lrf-header-sel {
    background: #d00024;
    padding: 0 15px 14px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.lrf-grupo .lrf-header-sel .lrf-sel-item { flex: 1; min-width: 140px; }
.lrf-grupo .lrf-header-sel label {
    display: block;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.lrf-grupo .select-control {
    width: 100%;
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    color: #333;
    background: #fff;
    cursor: pointer;
}

/* --- Tabs Posiciones / Fixture --- */
.lrf-grupo .lrf-tabs {
    background: #d00024;
    display: flex;
    border-bottom: 2px solid #d4072a;
}
.lrf-grupo .lrf-tabs a {
    display: inline-block;
    padding: 1px 20px;
    text-decoration: none;
    color: #ffffff;
    font-size: 16px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}
.lrf-grupo .lrf-tabs a:hover { color: #fff; }
.lrf-grupo .lrf-tabs a.active { color: #fff; border-bottom-color: #ffffff; }

/* --- Fondo general del área de contenido --- */
.lrf-grupo .lrf-content { background: #d4072a; }

/* --- Tabla de posiciones (standings) --- */
.lrf-grupo table.posiciones { width: 100%; border-collapse: collapse; }
.lrf-grupo table.posiciones thead tr { background: #1a1a1a; color: #fff; }
.lrf-grupo table.posiciones th {
    padding: 9px 6px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background-color: #a10000 !important
}
.lrf-grupo table.posiciones th:first-child { text-align: left; padding-left: 12px !important; }
.lrf-grupo table.posiciones td { padding: 8px 6px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 18px; }
.lrf-grupo table.posiciones td:first-child { text-align: left; padding-left: 12px; }
.lrf-grupo table.posiciones tbody tr:hover { background: rgba(0,0,0,0.15); }
.lrf-grupo table.posiciones tbody tr:nth-child(odd) { background: rgba(0,0,0,0.1); }
.lrf-grupo table.posiciones tbody tr:nth-child(odd):hover { background: rgba(0,0,0,0.15); }

/* --- Nombre largo (desktop) y corto (mobile) del club --- */
.lrf-nombre-corto { display: none; }
.lrf-nombre-largo { display: inline;     font-size: 18px !important; }

/* --- Fixture: navegación de fechas (botones circulares numerados) --- */
.lrf-grupo .lrf-fechas-wrap {
    padding: 8px 12px;
}
table tbody tr th, table tbody tr td {
    line-height: 20px;}
.lrf-grupo .lrf-fechas-wrap a {
    display: inline-block;
    min-width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin: 2px;
    border-radius: 50%;
    text-decoration: none;
    color: #ffffff;
    font-size: 16px !important;
    font-weight: 700;
    /*border: 1px solid #ffffff;*/
    transition: all 0.2s;
    /*background: black;*/
}
.lrf-grupo .lrf-fechas-wrap a:hover { background: #333; color: #fff; }
.lrf-grupo .lrf-fechas-wrap a.active,
.lrf-grupo .lrf-fechas-wrap a.lrf-fecha-activa {
    background: #86051b !important;
    color: #fff !important;
    border-color: #d4072a !important;
}
table th{
        background: #d4072a;
}
#main table thead tr th{
        text-align: center !important;
        font-size: 15px;
        color: white;
}
#main table thead tr th:first-child{
        text-align: center !important;
}

/* --- Fixture: etiqueta de la fecha programada --- */
.lrf-grupo .lrf-fecha-label {
    padding: 6px 14px;
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    background: #d4072a;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

/* --- Colores del estado del partido (JUGADO / PROGRAMADO) --- */
.lrf-estado-jugado { color: #2ecc71 !important; font-weight: 700; }
.lrf-estado-prog   { color: #f39c12 !important; font-weight: 700; }

/* --- Fixture desktop: visibilidad por breakpoint --- */
.lrf-desktop-only { display: table !important; width: 100%; }
.lrf-mobile-only  { display: none !important; }

/* --- Fixture desktop: tabla de partidos (7 columnas)
   Fecha | Logo Local | Nombre Local | Resultado | Nombre Visitante | Logo Visitante | Estado --- */
table.detalleFechaActual { /*table-layout: fixed;*/ width: 100%; font-size: 14px; border-collapse: collapse; }
table.detalleFechaActual thead tr { background: #1a1a1a; }
table.detalleFechaActual th { padding: 8px 5px; color: #ccc; font-size: 11px; font-weight: 700; text-align: center; text-transform: uppercase; }
table.detalleFechaActual th:nth-child(3),
table.detalleFechaActual th:nth-child(5) { text-align: left; }
table.detalleFechaActual td { padding: 8px 5px; border-bottom: 1px solid rgba(255,255,255,0.2); overflow: hidden; color: #fff; }

table.detalleFechaActual td:first-child  { width: 8%;  text-align: center; font-size: 12px; color: rgba(255,255,255,0.75); white-space: nowrap; }
table.detalleFechaActual td:nth-child(2) { width: 33%; text-align: center; }
table.detalleFechaActual td:nth-child(3) { width: 3%;  text-align: center; }
table.detalleFechaActual td:nth-child(4) { width: 10%; text-align: center; font-weight: 700; white-space: nowrap; }
table.detalleFechaActual td:nth-child(5) { width: 3%;  text-align: center; }
table.detalleFechaActual td:nth-child(6) { width: 33%; text-align: center; }
table.detalleFechaActual td:nth-child(7) { width: 10%; text-align: right; font-size: 11px; text-transform: uppercase; }

table.detalleFechaActual img { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }
table.detalleFechaActual tbody tr:hover { background: rgba(0,0,0,0.15); }
table.detalleFechaActual tbody tr:nth-child(odd) { background: rgba(0,0,0,0.1); }

/* --- Fixture mobile: cards de partidos (logo + nombre + resultado) --- */
.lrf-partido-card {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding: 2px 12px;
    background: transparent;
}
.lrf-partido-card:nth-child(odd) { background: rgba(0,0,0,0.1); }
.lrf-partido-meta {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
}
.lrf-partido-equipos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
}
.lrf-equipo-local, .lrf-equipo-visitante {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
}
.lrf-equipo-visitante { flex-direction: row-reverse; text-align: right; }
.lrf-equipo-local img, .lrf-equipo-visitante img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.lrf-equipo-local span, .lrf-equipo-visitante span { overflow: hidden; }
.lrf-resultado-card {
    flex-shrink: 0;
    width: 42px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
.lrf-resultado-card.no-jugado { font-size: 12px; color: rgba(255,255,255,0.5); }

/* --- Pie de widget: fecha de última actualización --- */
.lrf-actualizacion {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    text-align: right;
    padding: 7px 14px;
    background: rgba(0,0,0,0.1);
    border-top: 1px solid rgba(255,255,255,0.2);
}

.lrf-content > div { border: none !important; margin: 0 !important; }

/* =============================================================
   MOBILE (max-width: 640px)
   Oculta tabla desktop, muestra cards móviles y ajusta tipografía
   ============================================================= */
@media (max-width: 640px) {

    #main table tbody tr {
    height: auto !important;
    line-height: 25px;
    border-bottom: 1px solid #fff;
}

    .lrf-mobile-only { display: block !important; width: 100% !important; }
.lrf-mobile-only tbody { display: block; width: 100% !important; }
.lrf-mobile-only tr { display: block !important; width: 100% !important; }
.lrf-mobile-only td { display: block; width: 100% !important; padding: 0 !important; box-sizing: border-box; }
.lrf-partido-card { width: 100%; box-sizing: border-box; }
.lrf-partido-equipos { width: 100%; }
.lrf-equipo-local, .lrf-equipo-visitante { flex: 1; min-width: 0; }


    .lrf-grupo .lrf-header-sel { gap: 8px; }
    .lrf-grupo .lrf-header-sel .lrf-sel-item { min-width: 100%; }

    .lrf-nombre-largo { display: none !important; }
    .lrf-nombre-corto { display: inline !important; font-size: 12px !important; }

    .lrf-desktop-only { display: none !important; }
    .lrf-mobile-only { display: block !important; width: 100% !important; }
    .lrf-mobile-only td { display: block; width: 100% !important; padding: 0 !important; box-sizing: border-box; }

    .lrf-grupo table.posiciones { font-size: 14px; }
    .lrf-grupo table.posiciones th { font-size: 13px; }
    .lrf-grupo table.posiciones th,
    .lrf-grupo table.posiciones td { padding: 5px 2px; font-size: 13px; }
    .lrf-grupo table.posiciones th:first-child,
    .lrf-grupo table.posiciones td:first-child { padding-left: 8px; }

    .lrf-equipo-local, .lrf-equipo-visitante { align-items: center; gap: 4px; }
    .lrf-equipo-visitante { flex-direction: row-reverse; }
    .lrf-equipo-local span { text-align: left; white-space: normal; word-break: break-word; line-height: 15px; }
    .lrf-equipo-visitante span { text-align: right; white-space: normal; word-break: break-word; line-height: 15px; }

    #main table thead tr th { text-align: left !important; font-size: 13px; color: white; }
    #main table thead tr th:first-child { text-align: left !important; }
}