/* ==========================================================================
   NGC TABLE STYLER - NewGearCars
   Diseño minimalista, mobile-first, optimizado para tablas de F1
   Color corporativo: #E10600
   ========================================================================== */

/* --------------------------------------------------------------------------
   GOOGLE FONTS - Inter (clean, modern, muy legible en datos numéricos)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   VARIABLES (se sobreescriben desde el plugin con valores personalizados)
   -------------------------------------------------------------------------- */
:root {
    --ngc-accent: #E10600;
    --ngc-accent-light: #E1060012;
    --ngc-accent-hover: #E1060008;
    --ngc-font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --ngc-header-text: #FFFFFF;
    --ngc-bg: #FFFFFF;
    --ngc-text: #1A1A1A;
    --ngc-text-secondary: #6B7280;
    --ngc-border: #F0F0F0;
    --ngc-row-hover: #FAFAFA;
    --ngc-row-alt: #FDFDFD;
    --ngc-radius: 10px;
    --ngc-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --ngc-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------------
   CONTENEDOR RESPONSIVE - Scroll horizontal suave en móvil
   -------------------------------------------------------------------------- */
.entry-content table,
.post-content table,
.wp-block-table table,
article table,
.ngc-styled-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--ngc-font);
    font-size: 13px;
    line-height: 1.4;
    color: var(--ngc-text);
    background: var(--ngc-bg);
    border-radius: var(--ngc-radius);
    overflow: hidden;
    box-shadow: var(--ngc-shadow);
    margin: 1.5em 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Wrapper para scroll horizontal en móvil */
.ngc-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--ngc-radius);
    box-shadow: var(--ngc-shadow);
    margin: 1.5em 0;
    position: relative;
}

.ngc-table-wrapper table {
    margin: 0;
    box-shadow: none;
    border-radius: 0;
}

/* Indicador de scroll (sombra lateral) */
.ngc-table-wrapper.has-scroll::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to left, rgba(0,0,0,0.06), transparent);
    pointer-events: none;
    border-radius: 0 var(--ngc-radius) var(--ngc-radius) 0;
    transition: opacity 0.3s ease;
}

.ngc-table-wrapper.scrolled-end::after {
    opacity: 0;
}

/* --------------------------------------------------------------------------
   CABECERA - Fondo rojo corporativo, texto blanco, minimalista
   -------------------------------------------------------------------------- */
.entry-content table thead,
.post-content table thead,
.wp-block-table table thead,
article table thead,
.ngc-styled-table thead {
    background: var(--ngc-accent);
}

.entry-content table thead tr,
.post-content table thead tr,
.wp-block-table table thead tr,
article table thead tr,
.ngc-styled-table thead tr {
    background: var(--ngc-accent);
}

.entry-content table th,
.post-content table th,
.wp-block-table table th,
article table th,
.ngc-styled-table th {
    background: var(--ngc-accent);
    color: var(--ngc-header-text);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 10px 12px;
    text-align: left;
    border: none;
    white-space: nowrap;
    position: relative;
}

/* Separador sutil entre columnas de cabecera */
.entry-content table th + th,
.post-content table th + th,
.wp-block-table table th + th,
article table th + th,
.ngc-styled-table th + th {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

/* Primera y última celda de cabecera: bordes redondeados */
.entry-content table thead tr th:first-child,
.post-content table thead tr th:first-child,
.wp-block-table table thead tr th:first-child,
article table thead tr th:first-child,
.ngc-styled-table thead tr th:first-child {
    border-radius: var(--ngc-radius) 0 0 0;
}

.entry-content table thead tr th:last-child,
.post-content table thead tr th:last-child,
.wp-block-table table thead tr th:last-child,
article table thead tr th:last-child,
.ngc-styled-table thead tr th:last-child {
    border-radius: 0 var(--ngc-radius) 0 0;
}

/* --------------------------------------------------------------------------
   CELDAS - Limpio, aire, sin bordes pesados
   -------------------------------------------------------------------------- */
.entry-content table td,
.post-content table td,
.wp-block-table table td,
article table td,
.ngc-styled-table td {
    padding: 9px 12px;
    border: none;
    border-bottom: 1px solid var(--ngc-border);
    font-size: 13px;
    font-weight: 400;
    color: var(--ngc-text);
    vertical-align: middle;
    transition: background-color 0.15s ease;
}

/* CLAVE PARA F1: Evitar que los tiempos se rompan en dos líneas */
.entry-content table td,
.post-content table td,
.wp-block-table table td,
article table td,
.ngc-styled-table td {
    white-space: nowrap;
}

/* Filas alternas (zebra sutil) — SOLO en tablas con franjas activadas en Gutenberg */
.wp-block-table.is-style-stripes table tbody tr:nth-child(even),
.ngc-styled-table.ngc-striped tbody tr:nth-child(even) {
    background-color: var(--ngc-row-alt);
}

/* Hover en filas */
.entry-content table tbody tr:hover,
.post-content table tbody tr:hover,
.wp-block-table table tbody tr:hover,
article table tbody tr:hover,
.ngc-styled-table tbody tr:hover {
    background-color: var(--ngc-row-hover);
}

/* Última fila sin borde inferior */
.entry-content table tbody tr:last-child td,
.post-content table tbody tr:last-child td,
.wp-block-table table tbody tr:last-child td,
article table tbody tr:last-child td,
.ngc-styled-table tbody tr:last-child td {
    border-bottom: none;
}

/* --------------------------------------------------------------------------
   PRIMERA COLUMNA - Destacada (pos, nº, ranking...)
   -------------------------------------------------------------------------- */
.entry-content table td:first-child,
.post-content table td:first-child,
.wp-block-table table td:first-child,
article table td:first-child,
.ngc-styled-table td:first-child {
    font-weight: 700;
    color: var(--ngc-accent);
    font-size: 13px;
    min-width: 32px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   ESTILOS ESPECIALES PARA F1 - Highlight del mejor tiempo
   Solo se aplica a tablas con franjas (clasificaciones/tiempos)
   -------------------------------------------------------------------------- */

/* Fila del líder / primer puesto - acento sutil */
.wp-block-table.is-style-stripes table tbody tr:first-child,
.ngc-styled-table.ngc-striped tbody tr:first-child {
    background-color: var(--ngc-accent-light);
}

.wp-block-table.is-style-stripes table tbody tr:first-child:hover,
.ngc-styled-table.ngc-striped tbody tr:first-child:hover {
    background-color: #E1060018;
}

/* --------------------------------------------------------------------------
   MOBILE FIRST - Prioridad absoluta
   -------------------------------------------------------------------------- */

/* ---- Hasta 480px (móviles pequeños) ---- */
@media screen and (max-width: 480px) {

    .entry-content table,
    .post-content table,
    .wp-block-table table,
    article table,
    .ngc-styled-table {
        font-size: 11.5px;
    }

    .entry-content table th,
    .post-content table th,
    .wp-block-table table th,
    article table th,
    .ngc-styled-table th {
        padding: 8px 6px;
        font-size: 9.5px;
        letter-spacing: 0.03em;
    }

    .entry-content table td,
    .post-content table td,
    .wp-block-table table td,
    article table td,
    .ngc-styled-table td {
        padding: 7px 6px;
        font-size: 11.5px;
    }

    /* Columnas numéricas y tiempos: fuente condensada para ahorrar espacio */
    .entry-content table td,
    .post-content table td,
    .wp-block-table table td,
    article table td,
    .ngc-styled-table td {
        font-family: 'Barlow Condensed', var(--ngc-font);
        font-weight: 500;
    }

    .entry-content table th,
    .post-content table th,
    .wp-block-table table th,
    article table th,
    .ngc-styled-table th {
        font-family: var(--ngc-font);
    }

    .entry-content table td:first-child,
    .post-content table td:first-child,
    .wp-block-table table td:first-child,
    article table td:first-child,
    .ngc-styled-table td:first-child {
        font-size: 11.5px;
        min-width: 24px;
        padding-left: 4px;
        padding-right: 4px;
    }
}

/* ---- Hasta 768px (tablets / móviles grandes) ---- */
@media screen and (max-width: 768px) {

    .entry-content table,
    .post-content table,
    .wp-block-table table,
    article table,
    .ngc-styled-table {
        font-size: 12.5px;
    }

    .entry-content table th,
    .post-content table th,
    .wp-block-table table th,
    article table th,
    .ngc-styled-table th {
        padding: 9px 8px;
        font-size: 10px;
    }

    .entry-content table td,
    .post-content table td,
    .wp-block-table table td,
    article table td,
    .ngc-styled-table td {
        padding: 8px 8px;
    }
}

/* ---- Desktop (769px+) ---- */
@media screen and (min-width: 769px) {

    .entry-content table,
    .post-content table,
    .wp-block-table table,
    article table,
    .ngc-styled-table {
        font-size: 14px;
    }

    .entry-content table th,
    .post-content table th,
    .wp-block-table table th,
    article table th,
    .ngc-styled-table th {
        padding: 12px 16px;
        font-size: 11px;
    }

    .entry-content table td,
    .post-content table td,
    .wp-block-table table td,
    article table td,
    .ngc-styled-table td {
        padding: 10px 16px;
    }
}

/* --------------------------------------------------------------------------
   CAPTION / PIE DE TABLA
   -------------------------------------------------------------------------- */
.entry-content table caption,
.post-content table caption,
.wp-block-table table caption,
article table caption,
.ngc-styled-table caption {
    caption-side: bottom;
    padding: 8px 12px;
    font-size: 11px;
    color: var(--ngc-text-secondary);
    font-style: italic;
    text-align: left;
}

/* --------------------------------------------------------------------------
   OVERRIDE de estilos nativos de WordPress / Gutenberg
   -------------------------------------------------------------------------- */
.wp-block-table {
    margin: 0;
    overflow: visible;
}

.wp-block-table table {
    border: none !important;
}

.wp-block-table td,
.wp-block-table th {
    border: none !important;
}

/* Reset del estilo nativo de stripes de Gutenberg (usamos el nuestro propio) */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: transparent;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(even) {
    background-color: var(--ngc-row-alt);
}

.wp-block-table figcaption {
    font-size: 11px;
    color: var(--ngc-text-secondary);
    margin-top: 4px;
}

/* --------------------------------------------------------------------------
   SCROLLBAR PERSONALIZADO (Webkit)
   -------------------------------------------------------------------------- */
.ngc-table-wrapper::-webkit-scrollbar {
    height: 4px;
}

.ngc-table-wrapper::-webkit-scrollbar-track {
    background: var(--ngc-border);
    border-radius: 2px;
}

.ngc-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--ngc-accent);
    border-radius: 2px;
}

.ngc-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #C00500;
}

/* --------------------------------------------------------------------------
   ANIMACIONES SUTILES
   -------------------------------------------------------------------------- */
.entry-content table,
.post-content table,
.wp-block-table table,
article table,
.ngc-styled-table {
    transition: box-shadow 0.2s ease;
}

.ngc-table-wrapper:hover {
    box-shadow: var(--ngc-shadow-hover);
}

/* --------------------------------------------------------------------------
   PRINT - Limpio para imprimir
   -------------------------------------------------------------------------- */
@media print {
    .entry-content table,
    .post-content table,
    .wp-block-table table,
    article table,
    .ngc-styled-table {
        box-shadow: none;
        font-size: 10pt;
    }

    .entry-content table th,
    .post-content table th,
    .wp-block-table table th,
    article table th,
    .ngc-styled-table th {
        background: #333 !important;
        color: #FFF !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .entry-content table tbody tr:first-child,
    .post-content table tbody tr:first-child,
    .ngc-styled-table tbody tr:first-child {
        background: #f9f9f9 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}