/* ============================================================
   Club de Remo – Regatas  |  estilo.css  v1.5.0
   ============================================================ */

.remo-tabla-wrapper {
    margin: 1.5rem 0;
    font-family: inherit;
}

.remo-titulo {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 .25rem;
}

.remo-meta {
    color: #666;
    font-size: .875rem;
    margin: 0 0 1rem;
}

/* ── Tabla ────────────────────────────────────────────────── */
.remo-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}

.remo-tabla thead th {
    background: #003d7a !important;
    color: #ffffff !important;
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.remo-tabla tbody td {
    padding: 9px 14px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
}

.remo-tabla tbody tr:last-child td {
    border-bottom: none;
}

.remo-tabla tbody tr:hover td {
    background: #f0f5ff;
}

/* ── Columnas de ancho fijo ───────────────────────────────── */
.remo-col-pos { width: 52px;  text-align: center; }
.remo-col-pts { width: 72px;  text-align: center; }
.remo-col-num { width: 80px;  text-align: center; }

/* ── Número de posición ───────────────────────────────────── */
.remo-pos {
    display: inline-block;
    font-weight: 700;
    color: #374151;
}

/* ── Escudo del equipo ────────────────────────────────────── */
.remo-escudo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 8px;
    flex-shrink: 0;
}

/* ── Columna equipo ───────────────────────────────────────── */
.remo-col-equipo {
    display: table-cell;
    vertical-align: middle;
}

/* ── Diferencia de tiempo ─────────────────────────────────── */
.remo-diff {
    color: #6b7280;
    font-size: .875rem;
}

/* ── Aviso sin datos ──────────────────────────────────────── */
.remo-aviso {
    color: #9ca3af;
    font-style: italic;
    margin: 1rem 0;
}

/* ── Gráfico ──────────────────────────────────────────────── */
.remo-historico-wrapper canvas {
    max-height: 420px;
}

/* =============================================================
   MÓVIL  ≤ 600px  — layout de tarjetas en lugar de tabla
   ============================================================= */
@media (max-width: 600px) {

    /* Ocultar thead y convertir filas en tarjetas */
    .remo-tabla thead {
        display: none;
    }

    .remo-tabla,
    .remo-tabla tbody,
    .remo-tabla tr {
        display: block;
        width: 100%;
    }

    .remo-tabla tr {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin-bottom: 8px;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.06);
    }

    .remo-tabla td {
        display: inline;
        border: none;
        padding: 0;
        font-size: .875rem;
        vertical-align: middle;
    }

    /* Posición: badge circular a la izquierda */
    .remo-tabla td.remo-col-pos {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        background: #003d7a;
        color: #fff;
        border-radius: 50%;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: .8rem;
    }

    .remo-tabla td.remo-col-pos .remo-pos {
        color: #fff;
        font-size: .8rem;
    }

    /* Equipo: crece y ocupa el espacio disponible */
    .remo-tabla td.remo-col-equipo {
        flex: 1;
        display: flex !important;
        align-items: center;
        font-weight: 600;
        font-size: .9rem;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Tiempo y puntos: al final, compactos */
    .remo-tabla td:not(.remo-col-pos):not(.remo-col-equipo) {
        flex-shrink: 0;
        font-size: .8rem;
        color: #555;
        display: flex !important;
        align-items: center;
    }

    /* Puntos: resaltado */
    .remo-tabla td.remo-col-pts {
        background: #f3f4f6;
        border-radius: 4px;
        padding: 2px 7px !important;
        font-weight: 700;
        color: #111;
        font-size: .85rem;
    }

    .remo-tabla td.remo-col-num {
        background: #f3f4f6;
        border-radius: 4px;
        padding: 2px 7px !important;
        font-size: .8rem;
    }

    .remo-escudo {
        width: 22px;
        height: 22px;
        margin-right: 6px;
    }

    .remo-diff {
        font-size: .78rem;
    }

    /* Gráfico en móvil */
    .remo-historico-wrapper canvas {
        max-height: 280px;
    }
}