:root {
    --azul: #0B3C66;
    --azul-osc: #062944;
    --naranja: #F08C2E;
    --gris: #f5f7fa;
    --borde: #dfe5ec;
}

* {
    box-sizing: border-box
}

body {
    margin-left: 25px !important;
    margin-right: 20px !important;
    margin-top: 80px !important;
    padding: 0 !important;
    background: #ffffff !important;
    font: 12.5px/1.35 "Century Gothic","Segoe UI",Arial,Helvetica,sans-serif !important;
    color: #2b2b2b !important;
}

.page {
    box-sizing: border-box !important; /* incluye padding y border dentro del ancho */
    width: 100% !important; /* ocupa todo el ancho disponible */
    margin: 0 5px !important; /* 5px izquierda y derecha */
    border: 1px solid #eee !important;
    padding: 10px !important; /* opcional, espacio interno */
}




/* HEADER */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top:46px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px
}

    .brand img {
        height: 50px
    }

    .brand small {
        display: block;
        margin-top: 1px;
        font-size: 10px;
        color: #6b7a8a
    }

.header-center {
    text-align: center;
    flex: 1;
    margin: 0 6px;
}

    .header-center h1 {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        color: var(--azul-osc);
        text-transform: uppercase
    }

    .header-center h2 {
        margin: 1px 0 0;
        font-size: 12px;
        font-weight: 700;
        color: var(--azul-osc);
        text-transform: uppercase
    }

    .header-center .sub {
        font-size: 10px;
        color: #6f7e8e;
        margin-top: 1px
    }

.contact {
    font-size: 10px;
    line-height: 1.2;
    text-align: right;
    color: #344a5f
}


    .contact i {
        color: orange;
        margin-right: 6px;
    }

    .contact a {
        color: inherit; /* para que no cambie el color del enlace */
        text-decoration: none;
    }

        .contact a:hover {
            text-decoration: underline;
        }


    .contact a {
        color: #344a5f;
        text-decoration: none
    }

.meta {
    margin: 4px 0;
    font-size: 10px;
    color: #485a6b
}

.rule {
    height: 2px;
    background: var(--naranja);
    border-radius: 2px;
    margin: 4px 0 8px
}

/* ROW DE TARJETAS */
.row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px
}

.col {
    flex: 1;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 6px 8px;
}

    .col h3 {
        margin: 0 0 4px;
        font-size: 12px;
        font-weight: 700;
        color: var(--azul);
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .col small.subtitle {
        display: block;
        color: #6d7f90;
        font-size: 10px
    }

.campo {
    display: flex;
    margin: 2px 0;
    font-size: 11.5px
}

    .campo b {
        width: 85px;
        color: var(--azul-osc)
    }

.score-box {
    background: var(--gris);
    border: 1px solid var(--borde);
    border-radius: 8px;
    padding: 6px;
    font-size: 11.5px;
}

    .score-box .puntaje {
        font-weight: 700;
        color: #1e2f41;
        margin-bottom: 3px
    }

.pill {
    display: inline-block;
    padding: 0px 6px;
    border: 1px dashed var(--naranja);
    border-radius: 999px;
    color: var(--naranja);
    font-size: 9.5px;
    font-weight: 700;
}

/* TABLA */



.tabla-wrap {
    border: 1.5px solid var(--azul);
    border-radius: 16px;
    padding: 10px;
    margin-top: 6px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9px !important;
}

thead th {
    background: var(--azul) !important;
    color: #fff !important;
    padding: 8px !important;
    text-align: center !important;
    font-weight: 700 !important;
    border-right: 2px solid #fff !important;
}

    thead th:last-child {
        border-right: none !important;
    }

tbody td {
    padding: 7px 8px !important;
    border-bottom: 1px solid #e6edf3 !important;
    text-align: center !important;
}

tbody tr:nth-child(even) {
    background: #f9fbfd !important;
}

tbody td:first-child {
    text-align: left !important;
}


/* FOOTER */
.foot-rule {
    height: 2px;
    background: var(--naranja);
    border-radius: 2px;
    margin-top: 8px
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    font-size: 10px;
    color: #6c7b8b;
}


.info-container {
    display: flex;
    align-items: center; /* Alineación vertical */
    gap: 1px; /* Espacio entre icono y texto */
    font: 12.5px/1.35 "Century Gothic","Segoe UI",Arial,Helvetica,sans-serif;
}

.icono {
    width: 34px; /* Ajusta al tamaño del ícono como en la imagen */
    height: auto;
}

.info-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.titulo {
    font-weight: bold;
    color: var(--azul); /* Azul oscuro */
    margin: 0;
}

.subtitulo {
    color: #FF6600; /* Naranja */
    font-size: 0.9em;
    margin: 0;
}


@media (max-width: 768px) {
    .header {
        flex-direction: column; /* apila logo, centro y contacto */
        align-items: center;
        text-align: center;
    }

    .brand {
        justify-content: center;
        margin-bottom: 8px;
    }

        .brand img {
            height: 40px; /* logo más pequeño en móviles */
        }

    .header-center {
        margin: 4px 0;
    }

        .header-center h1 {
            font-size: 12px;
        }

        .header-center h2 {
            font-size: 10px;
        }

        .header-center .sub {
            font-size: 9px;
        }

    .contact {
        text-align: center;
        font-size: 9px;
        margin-top: 6px;
    }

        .contact i {
            margin-right: 4px;
        }

    .page {
        margin: 0 2px !important; /* menos margen lateral en móviles */
        padding: 6px !important; /* menos padding interno */
    }

    .meta {
        text-align: center;
        font-size: 9px;
    }

    .rule {
        margin: 6px auto;
        width: 60%; /* regla más corta en móviles */
    }
}