@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
    font-family: "Montserrat", sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #f0f0f0; /* Fallback */
    /* overflow: hidden; */
}

/* Header */
header {
    background-color: #1263B5;
    padding: 10px;
}
header img {
    margin-left: 2rem;
    height: 40px;
}


/* Sistema Grid Desktop */
@media (min-width: 1025px) {
    .grid-container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        margin: 0 auto;
        width: 100%;
    }
    
    /* Ocultar ship-point en desktop, solo se usan line-card */
    .ship-point {
        display: none !important;
    }

    /* Utilidades de columnas */
    .col-1 { grid-column: span 1; }
    .col-2 { grid-column: span 2; }
    .col-3 { grid-column: span 3; }
    .col-4 { grid-column: span 4; }
    .col-5 { grid-column: span 5; }
    .col-6 { grid-column: span 6; }
    .col-7 { grid-column: span 7; }
    .col-8 { grid-column: span 8; }
    .col-9 { grid-column: span 9; }
    .col-10 { grid-column: span 10; }
    .col-11 { grid-column: span 11; }
    .col-12 { grid-column: span 12; }
}

/* Cards / Sitios */
.card {
    color: #fff;
    text-align: center;
    padding-top:10px  ;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
        height: 11rem;

}

.card h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.card p {
    font-size: 0.9rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.card-fondo-1 {
    background-color: #364E7A;
}

.card-fondo-2 {
    background-color: #4A85C3;
}

.card-fondo-3 {
    background-color: #5DB0F2;
    align-items: center;
    justify-content: center;
}
    .grid-cards.col-4.card-fondo-3.card p {
    font-size: 25px;
    width: 200px;
    margin: 0 auto;
    text-align: center;
    font-weight: bold;
        padding-top: 1.5rem;
}

/* Ships and Lines */
.ship-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: auto; /* Push to bottom of content area */
    margin-bottom: 2rem;
    z-index: 1;
}

/* Puntos de conexión en proa y popa del barco */
.ship-point {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.2) inset;
    z-index: 5;
}

/* Punto en proa (parte delantera del barco) */
.ship-point.ship-bow {
    top: 20%;
    left: 10%;
}

/* Punto en popa (parte trasera del barco) */
.ship-point.ship-stern {
    top: 20%;
    right: 10%;
}

/* Color pink para Sitio 1 */
.ship-point-pink {
    background-color: #D67EA6;
}

/* Color green para Sitio 2 */
.ship-point-green {
    background-color: #39AB7E;
}



/* Connecting lines simulation */

.line-card-1 {
    color: #000;
    position: absolute;
    bottom: 94px;
    left: 7.063rem;
    width: 1px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.9);
    transform: rotate(236deg);
    transform-origin: bottom left;
    z-index: 2;
}

.line-card-1-2 {
 color: #000;
    position: absolute;
    bottom: 88px;
    left: 7rem;
    width: 1px;
    height: 52px;
    background-color: rgba(255, 255, 255, 0.9);
    transform: rotate(157deg);
    transform-origin: bottom left;
    z-index: 2;


}
.line-card-1-3 {
       color: #000;
    position: absolute;
    bottom: 100px;
    width: 1px;
    height: 105px;
    background-color: rgba(255, 255, 255, 0.9);
    transform: rotate(125deg);
    transform-origin: bottom left;
    z-index: 2;
    right: 115px
}
.line-card-1-4 {
       color: #000;
    position: absolute;
    bottom: 97px;
    width: 1px;
    height: 210px;
    background-color: rgba(255, 255, 255, 0.9);
    transform: rotate(106deg);
    transform-origin: bottom left;
    z-index: 2;
    left: 371px;
}
.line-card-1-3::before{
 content: '';
    position: absolute;
    bottom: -6px;
    left: -7px;
    width: 14px;
    height: 14px;
    background-color: #D67EA6;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.2) inset;
}

.line-card-1::before{
    content: '';
    position: absolute;
    bottom: -6px;
    left: -7px;
    width: 14px;
    height: 14px;
    background-color: #D67EA6;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.2) inset;
}

.line-card-2-1{
   color: #000;
    position: absolute;
    bottom: 92px;
    left: 124px;
    width: 1px;
    height: 85px;
    background-color: rgba(255, 255, 255, 0.9);
    transform: rotate(230deg);
    transform-origin: bottom left;
    z-index: 2;
}
.line-card-2-1::before{
    content: '';
    position: absolute;
    bottom: -6px;
    left: -7px;
    width: 14px;
    height: 14px;
    background-color: #39AB7E;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.2) inset;
}
.line-card-2-2 {
    color: #000;
    position: absolute;
    bottom: 88px;
    left: 8rem;
    width: 1px;
    height: 85px;
    background-color: rgba(255, 255, 255, 0.9);
    transform: rotate(126deg);
    transform-origin: bottom left;
    z-index: 2;
}

.line-card-2-3 {
  color: #000;
    position: absolute;
    bottom: 94px;
    left: 23rem;
    width: 1px;
    height: 55px;
    background-color: rgba(255, 255, 255, 0.9);
    transform: rotate(175deg);
    transform-origin: bottom left;
    z-index: 2;
}
.line-card-2-3::before{
    content: '';
    position: absolute;
    bottom: -6px;
    left: -7px;
    width: 14px;
    height: 14px;
    background-color: #39AB7E;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.2) inset;
} 

.lines-svg{
    display: none;
}
.line-card-2-4 {
    color: #000;
    position: absolute;
    bottom: 88px;
    left: 23.3rem;
    width: 1px;
    height: 89px;
    background-color: rgba(255, 255, 255, 0.9);
    transform: rotate(123deg);
    transform-origin: bottom left;
    z-index: 2;
}
/* Separator */
.separador {
    height: 25px;
    border-top: 8px solid #1263B5;
    background-color: #3085DD;
    width: 100%;
}

/* Ruler / Timeline */
.linea {
    background-color: #455176;
    display: flex;
    align-items: center;
    color: #a0aabf;
    padding: 1rem 0rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.ruler-section {
    flex: 1; /* Each section takes 1/3 space */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    position: relative;
}

/* Add dashed separators in ruler too to match columns */
.ruler-section:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    border-right: 1px dashed rgba(255, 255, 255, 0.2);
}

.linea span {
    margin: 0 2px;
}

.bubble {
    color: #fff;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    display: inline-block;
    position: relative;
    z-index: 10;
}

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

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

/* Tables Section */
.tables-section {
    padding: 20px 0;
    margin-bottom: 50px;
}

.table-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 15px;
}

/* Common Table Styles */
table {
    width: 90%;
    border-collapse: separate;
    border-spacing: 2px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #1B264F;
    margin: 0 auto;
}
img.ship-img {
    width: 16rem;
    position: relative;
    top: -45px;
    height: 10rem;
}

th, td {
    padding: 12px 5px;
    text-align: center;
}

/* Header Styles */
thead th {
    background-color: #1B264F;
    color: white;
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* Main Table Specifics */
.data-table tbody td:first-child {
    background-color: #1B264F;
    color: white;
    text-align: right;
    padding-right: 15px;
    width: 30%;
    font-size: 0.75rem;
}

/* Data Cell Styles */
tbody td {
    background-color: #E6E6E6;
    color: #1B264F;
}

/* Status Colors */
.status.working {
    background-color: #C4D600;
    color: #1B264F;
}

.status.co {
    background-color: #EBCB3D;
    color: #1B264F;
}

.status.cb {
    background-color: #D93025;
    color: white;
}

/* Bottom Tables Specifics */
.info-table th, .stats-table th {
    background-color: #1B264F;
    padding: 8px;
    font-size: 0.75rem;
}

.info-table td, .stats-table td {
    padding: 10px;
    background-color: #E6E6E6;
}

/* Rounded Corners Handling */
/* Top Left/Right of Headers */
.data-table thead th:first-child,
.info-table thead th:first-child,
.stats-table thead th:first-child {
    border-top-left-radius: 15px;
}

.data-table thead th:last-child,
.info-table thead th:last-child,
.stats-table thead th:last-child {
    border-top-right-radius: 15px;
}

/* Bottom Left/Right of Last Row */
.data-table tbody tr:last-child td:first-child,
.info-table tbody tr:last-child td:first-child,
.stats-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 15px;
}

.data-table tbody tr:last-child td:last-child,
.info-table tbody tr:last-child td:last-child,
.stats-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 15px;
}

/* Dashed Line Separator between panels on Desktop */
@media (min-width: 1024px) {
    .table-wrapper:first-child {
        position: relative;
    }
    
    .table-wrapper:first-child::after {
        content: '';
        position: absolute;
        right: -2px; /* Center of the gap implies 0 if we use border on grid col, but grid gap is handled by parent */
        /* Actually, grid-gap creates space. We need to place this line in between. */
        /* Let's attach it to the right of the first column */
        top: 20px;
        bottom: 20px;
        width: 1px;
        border-right: 1px dashed #1B264F;
        opacity: 0.3;
    }
}

.sin-tabla {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
}


/* Responsive Lineas - Media Queries para resoluciones grandes */
/* Ajuste de líneas para mantener alineación con barcos centrados al crecer la pantalla */

/* 
   Cálculo aproximado:
   Al aumentar el ancho de la pantalla, las columnas (col-4) crecen.
   Como los barcos (.ship-container img) están centrados, se mueven hacia la derecha.
   Las líneas con 'left' fijo deben aumentar su valor.
   Las líneas con 'right' fijo deben aumentar su valor.
   Desplazamiento necesario ≈ (Nuevo Ancho Columna - Ancho Base 1024px) / 2
*/

/* --- 1440px --- */


/* --- 1600px --- */
@media (min-width: 1600px) {
    /* Shift approx +96px (+6rem) relative to base */

    /* Sitio 1 */
     .line-card-1 {
        left: calc(7.063rem + 4rem);
    }
    .line-card-1-2 {
        left: calc(7rem + 3.9rem);
    }
    .line-card-1-3 {
                 right: calc(115px + 63px);
        height: 156px;
        transform: rotate(114deg);
}
    
    .line-card-1-4 {
     left: calc(371px + 58px);
        height: 303px;
        bottom: 99px;
        transform: rotate(101deg);
    }

    /* Sitio 2 */
    .line-card-2-1 {
    left: calc(124px + 69px);
    transform: rotate(247deg);
    height: 133px;
}
      .line-card-2-2 {
        left: calc(8rem + 4rem);
        transform: rotate(137deg);
        height: 66px;
    }
    .line-card-2-3 {
              left: calc(23rem + 4rem);
        transform: rotate(142deg);
        height: 68px;
    }
    .line-card-2-4 {
                   left: calc(23.3rem + 4.3rem);
        height: 129px;
        bottom: 89px;
        transform: rotate(112deg);
    }
}

/* --- 1920px (Full HD) --- */
@media (min-width: 1920px) {
    /* Shift approx +150px (+9.375rem) relative to base */

    /* Sitio 1 */
    .line-card-1 {
            left: calc(7.063rem + 4.4rem);
        transform: rotate(250deg) !important;
        height: 162px !important;
}
   .line-card-1-2 {
    left: calc(7rem + 4.2rem);
    transform: rotate(194deg);
            height: 4dvh;
}
    .line-card-1-3 {
           right: calc(115px + 82px);
    transform: rotate(110deg);
    height: 178px !important;
    }
       .line-card-1-4 {
        left: calc(371px + 77px);
        height: 324px;
        bottom: 97px;
        transform: rotate(100deg);
    }

    /* Sitio 2 */
    .line-card-2-1 {
           left: calc(124px + 87px);
    height: 138px;
    }
    .line-card-2-2 {
    left: calc(8rem + 5.4rem);
    transform: rotate(140deg);
    height: 64px;
}
    .line-card-2-3 {
    left: calc(23rem + 5.4rem);
    transform: rotate(136deg);
    height: 74px;
}
    .line-card-2-4 {
    left: calc(23.3rem + 5.4rem);
    transform: rotate(109deg);
    height: 147px;
}
}

/* --- 2560px (2K) --- */
@media (min-width: 2560px) {
     /* Shift approx +256px (+16rem) relative to base */
    
    /* Sitio 1 */
    .line-card-1 {
        left: calc(7.063rem + 16rem); 
        
    }
    .line-card-1-2 {
        left: calc(7rem + 16rem);
    }
    .line-card-1-3 {
        right: calc(115px + 256px);
    }
    .line-card-1-4 {
        left: calc(371px + 256px);
    }

    /* Sitio 2 */
    .line-card-2-1 {
        left: calc(124px + 256px);
    }
    .line-card-2-2 {
        left: calc(8rem + 16rem);
    }
    .line-card-2-3 {
        left: calc(23rem + 16rem);
    }
    .line-card-2-4 {
        left: calc(23.3rem + 16rem);
    }
}



.line-card-1 {
       color: #000;
    position: absolute;
    bottom: 94px;
    width: 1px;
    height: 94px;
    background-color: rgba(255, 255, 255, 0.9);
    transform: rotate(234deg);
    transform-origin: bottom left;
    z-index: 2;
}