/* ============================================
   RESPONSIVE CSS - Resoluciones pequeñas
   ============================================ */

/* Base: Desktop 1366x768 y superior se ve bien */

/* ============================================
   DESKTOP VERSION (desde 1025px en adelante)
   Incluye iPad Pro (1024x1366) como mobile
   ============================================ */
@media (min-width: 1025px) {
    .mobile-only,
    .mobile-version {
        display: none !important;
    }
    
    .desktop-only,
    .desktop-version {
        display: block !important;
    }
    
    /* Asegurar que el grid-container desktop funcione correctamente */
    .desktop-version .grid-container {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr);
        margin: 0 auto;
        width: 100%;
    }
    
    /* Asegurar que .linea se muestre en desktop */
    .desktop-only.linea {
        display: flex !important;
    }
    
    /* Asegurar que .separador se muestre en desktop */
    .desktop-only.separador {
        display: block !important;
    }
    
    /* Ocultar ship-point en desktop, solo se usan line-card */
    .desktop-version .ship-point {
        display: none !important;
    }
}

/* ============================================
   MOBILE VERSION (hasta 1024px - incluye iPad Pro)
   ============================================ */
@media (max-width: 1024px) {
    .desktop-only,
    .desktop-version {
        display: none !important;
    }
    
    .mobile-only,
    .mobile-version {
        display: block !important;
    }
    
    /* Asegurar que tables-section también se apile en mobile */
    .tables-section.grid-container {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* ============================================
   TABLET VERTICAL Y MÓVILES GRANDES
   Incluye iPad Air (820x1180) e iPad Pro (1024x1366)
   ============================================ */
@media (max-width: 1024px) {
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* Ocultar elementos desktop en mobile */
    .desktop-only {
        display: none !important;
    }

    /* Mostrar elementos mobile */
    .mobile-only {
        display: block !important;
    }
    
    .mobile-version {
        display: block;
        position: relative;
        width: 100%;
    }

    /* Header ajustes */
    header {
        padding: 8px;
    }
    
    header img {
        height: 35px;
        margin-left: 1rem;
    }

    /* Mobile Tabs Navigation */
    .mobile-tabs {
        display: flex;
        justify-content: center;
        gap: 0;
        background-color: #455176;
        padding: 0;
    }

    .tab-button {
        flex: 1;
        background-color: #455176;
        color: #fff;
        border: none;
        padding: 12px 8px;
        font-size: 0.9rem;
        font-weight: 700;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.3s ease;
        /* border-bottom: 3px solid transparent; */
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .tab-title {
        font-size: 0.9rem;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 1.2;
    }

    .tab-subtitle {
        font-size: 0.65rem;
        font-weight: 400;
        text-transform: none;
        line-height: 1.2;
        margin-top: 4px;
        opacity: 0.95;
    }

    /* Tab 1 - Color de card-fondo-1 */
    .tab-button[data-slide="0"] {
        background-color: #364E7A;
    }

    /* Tab 2 - Color de card-fondo-2 */
    .tab-button[data-slide="1"] {
        background-color: #4A85C3;
    }

    /* Tab 3 - Color de card-fondo-3 */
    .tab-button[data-slide="2"] {
        background-color: #5DB0F2;
    }

    .tab-button.active {
        color: #fff;
        opacity: 1;
    }

    .tab-button:not(.active) {
        opacity: 0.8;
    }

    /* Slider Container */
    .slider-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden; /* Cambiar a hidden para evitar desbordamiento */
        z-index: 1;
    }

    .slider-track {
        display: flex;
        transition: transform 0.3s ease;
        width: 300%; /* 3 slides */
        position: relative;
        z-index: 0;
        overflow: visible; /* Permitir que las líneas se vean fuera del track */
    }
    
    /* Asegurar que el SVG quede por debajo de los slide-items */
    .slider-track > .ship-lines-svg {
        z-index: 5 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        pointer-events: none !important;
    }
    
    .slider-track > .slide-item {
        z-index: 4 !important;
        position: relative !important;
    }

    .slide-item {
        width: 33.333% !important;
        flex-shrink: 0;
        min-height: auto;
        padding: 15px 10px 50px 10px;
        position: relative;
        display: flex;
        flex-direction: column;
        z-index: 1;
    }

    /* Mostrar títulos mobile */
    .mobile-title {
        display: block;
    }
    
    .mobile-p {
        display: none; /* Ocultar párrafos en mobile, ya están en los tabs */
    }

    /* Grid: Cambiar a una columna para el contenedor principal (solo mobile, excluir desktop-only) */
    .grid-container:not(.slider-track):not(.desktop-only) {
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
        gap: 0;
    }

    /* Anular clases de columnas en móvil */
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
        grid-column: unset !important;
    }

    /* Cards en slider */
    .grid-cards {
        width: 100% !important;
        margin: 0;
        height: auto;
        min-height: 20rem;
        flex: 1;
        position: relative;
        z-index: 1;
    }

    .card h2 {
        font-size: 1.3rem;
    }

    /* Los párrafos dentro de mobile-slider-container ya están ocultos con .mobile-p */

    /* Ship images más pequeñas */
    .ship-container {
        margin-bottom: 1.5rem;
        position: relative;
        z-index: 6;
    }

    img.ship-img {
        width: 20rem;
        height: 12.5rem;
        top: -30px;
        position: relative;
        z-index: 5;
    }
    
    /* Ajustar puntos del barco en mobile - deben estar por encima de todo */
    .mobile-version .ship-point {
        width: 12px;
        height: 12px;
        z-index: 8 !important;
        position: absolute;
        display: block !important; /* Asegurar que se muestren en mobile */
    }
    
    .mobile-version .ship-point.ship-bow {
        top: 50%;
        left: 26vw;
    }
    
    .mobile-version .ship-point.ship-stern {
        top: 50%;
        right: 26vw;
    }
    
    /* Asegurar que los bubbles también estén por encima de las líneas */
    .mobile-version .bubble {
        position: relative;
        z-index: 8 !important;
    }
    
    /* Asegurar que el mobile-ruler-section esté por encima */
    .mobile-version .mobile-ruler-section {
        position: relative;
        z-index: 6;
    }

    /* Ajustar líneas de conexión en móvil */
    .mobile-version .line-card-1,
    .mobile-version .line-card-1-2,
    .mobile-version .line-card-1-3,
    .mobile-version .line-card-1-4,
    .mobile-version .line-card-2-1,
    .mobile-version .line-card-2-2,
    .mobile-version .line-card-2-3,
    .mobile-version .line-card-2-4 {
        display: block;
    }
    
    /* Ocultar líneas CSS antiguas en mobile, ahora usamos SVG dinámico */
    .mobile-version .line-card-1,
    .mobile-version .line-card-1-2,
    .mobile-version .line-card-1-3,
    .mobile-version .line-card-1-4,
    .mobile-version .line-card-2-1,
    .mobile-version .line-card-2-2,
    .mobile-version .line-card-2-3,
    .mobile-version .line-card-2-4 {
        display: none;
    }
    
    /* Estilos para el SVG de líneas - debe estar por debajo de ship-points y bubbles */
    .ship-lines-svg {
        overflow: visible !important;
        z-index: 5 !important;
        position: absolute !important;
        pointer-events: none !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Asegurar que el SVG dentro del slider-track tenga z-index 5 */
    .slider-track .ship-lines-svg {
        z-index: 5 !important;
    }

    /* Mobile Ruler Section dentro de cada card */
    .mobile-ruler-section {
        background-color: #455176;
        padding: 0.75rem 0.5rem;
        font-size: 0.65rem;
        font-weight: 600;
        color: #a0aabf;
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-top: auto;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        box-sizing: border-box;
        z-index: 6;
    }

    .mobile-ruler-section span {
        margin: 0 2px;
        font-size: 0.6rem;
        white-space: nowrap;
    }

    .mobile-ruler-section .bubble {
        padding: 2px 6px;
        border-radius: 10px;
        font-size: 0.7rem;
        display: inline-block;
        position: relative;
        z-index: 8 !important;
    }

    .mobile-ruler-section .bubble.pink {
        background-color: #D67EA6;
        border: 1px solid #FFFFFF;
        color: #fff;
    }

    .mobile-ruler-section .bubble.green {
        background-color: #56C288;
        border: 1px solid #FFFFFF;
        color: #fff;
    }

    /* Navigation Arrows */
    .slider-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0px;
        background-color: #f0f0f0;
        position: relative;
        width: 100%;
        box-sizing: border-box;
    }
    
    .nav-arrow {
        background-color: #4a85c3;
        color: #fff;
        border: none;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        padding: 0;
    }
    button.nav-arrow.nav-prev {
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
    }
    button.nav-arrow.nav-next {
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
    }
    
    .next-slide-name {
        font-size: 0.9rem;
        font-weight: 600;
        color: #4a85c3;
        white-space: nowrap;
        margin-right: 10px;
        display: flex;
        align-items: center;
        margin-left: auto; /* Empuja el texto hacia la derecha, junto al botón next */
    }

    .nav-arrow:hover {
        background-color: #364E7A;
        transform: scale(1.1);
    }

    .nav-arrow:active {
        transform: scale(0.95);
    }

    .nav-arrow svg {
        width: 50px;
        height: 50px;
    }

    .nav-prev {
        margin-right: auto;
    }

    /* .nav-next {
        margin-left: auto;
    } */

    /* Separador - oculto en mobile */
    .separador {
        display: none;
    }

    /* Ruler/Timeline desktop - oculto en mobile */
    .linea {
        display: none;
    }

    /* Tables Section - Apilar verticalmente */
    .tables-section {
        display: flex !important;
        flex-direction: column !important;
        padding: 15px 0;
        gap: 20px;
    }

    .tables-section.grid-container {
        display: flex !important;
        flex-direction: column !important;
    }

    .table-wrapper {
        width: 100% !important;
        padding: 0 10px;
    }

    table {
        width: 100%;
        font-size: 0.7rem;
    }

    th, td {
        padding: 8px 4px;
    }

    thead th {
        font-size: 0.75rem;
    }

    .data-table tbody td:first-child {
        font-size: 0.65rem;
        padding-right: 10px;
        width: 35%;
    }

    .info-table th, 
    .stats-table th {
        font-size: 0.65rem;
        padding: 6px;
    }

    .info-table td, 
    .stats-table td {
        padding: 8px 4px;
    }

    /* Sin tabla */
    .sin-tabla {
        padding: 20px;
    }

    .sin-tabla img {
        max-width: 80%;
        height: auto;
    }
}

/* ============================================
   MÓVILES PEQUEÑOS (360x800 y similares)
   ============================================ */
@media (max-width: 412px) {
    /* Similar estructura a 820px pero con ajustes más pequeños */
    
    header img {
        height: 30px;
        margin-left: 0.5rem;
    }

    .grid-cards {
        min-height: 9rem;
        padding: 12px 8px;
    }

    .card h2 {
        font-size: 1.1rem;
    }

    /* Los párrafos dentro de mobile-slider-container ya están ocultos con .mobile-p */

    img.ship-img {
        width: 15rem;
        height: 9.375rem;
        top: -25px;
    }

    .separador {
        height: 18px;
        border-top-width: 5px;
    }

    .linea {
        padding: 0.5rem 0.25rem;
        font-size: 0.6rem;
    }

    .ruler-section {
        min-width: 280px;
        padding: 0 5px;
    }

    .linea span {
        margin: 0 0.5px;
        font-size: 0.55rem;
    }

    .bubble {
        padding: 1px 3px;
        font-size: 0.55rem;
    }

    .tables-section {
        padding: 12px 0;
        gap: 15px;
    }

    .table-wrapper {
        padding: 0 8px;
    }

    table {
        font-size: 0.65rem;
    }

    th, td {
        padding: 6px 3px;
    }

    thead th {
        font-size: 0.7rem;
    }

    .data-table tbody td:first-child {
        font-size: 0.6rem;
        padding-right: 8px;
        width: 40%;
    }

    .info-table th, 
    .stats-table th {
        font-size: 0.6rem;
        padding: 5px;
    }

    .info-table td, 
    .stats-table td {
        padding: 6px 3px;
    }

    .sin-tabla img {
        max-width: 70%;
    }
}

/* ============================================
   TABLET HORIZONTAL (768x1024)
   ============================================ */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    /* Para tablets en vertical - usar 3 columnas en lugar de 12 */
    .desktop-version .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-cards {
        height: 10rem;
    }

    img.ship-img {
        width: 50vw;
        height: 15.625rem;
    }

    table {
        font-size: 0.75rem;
    }
}

/* ============================================
   AJUSTES ESPECÍFICOS POR ALTURA
   ============================================ */
@media (max-height: 800px) and (max-width: 820px) {
    /* Para pantallas cortas */
    .card {
        height: auto;
        min-height: 8rem;
    }

    .tables-section {
        padding: 10px 0;
    }

    .separador {
        height: 15px;
    }
}