/*
 * ===================================================================
 * THEME OVERRIDE - OPCIÓN A: AZUL MARINO PORTUARIO
 * ===================================================================
 * 
 * Este archivo debe cargarse DESPUÉS de todos los CSS existentes:
 * - screen.css
 * - pagination.css
 * - jquery-ui-1.8.21.custom.css
 * - blh_maritimo_impo.css
 * 
 * Así sobrescribe los colores sin modificar los archivos originales.
 * ===================================================================
 */

/* ============================================
   VARIABLES DE COLOR (Para referencia)
   ============================================ */
/*
   --primary:       #0D2B4E    (Azul marino oscuro - headers, títulos)
   --secondary:     #1A4B7A    (Azul marino medio - th de tablas)
   --accent:        #0E7EC1    (Azul cielo - links, botones, focus)
   --accent-teal:   #00B4A0    (Teal - estados OK)
   --row-even:      #F0F6FF    (Azul muy claro - filas pares)
   --row-odd:       #FFFFFF    (Blanco - filas impares)
   --row-hover:     #D6EAFF    (Azul claro - hover en filas)
   --border:        #C2D6ED    (Azul gris - bordes)
   --bg-page:       #E8EFF8    (Fondo de página)
   --bg-search:     #F5F9FF    (Fondo barra búsqueda)
   --text-dark:     #1a2332    (Texto principal)
   --text-muted:    #5A7A9A    (Texto secundario)
   --warning:       #E8A020    (Ámbar - advertencias)
*/

/* ============================================
   BODY & BACKGROUND
   ============================================ */
body {
    background: #E8EFF8 !important;
}

/* ============================================
   TABLA PRINCIPAL (headers de tabla)
   ============================================ */
thead th {
    background: linear-gradient(90deg, #1A4B7A 0%, #1E5590 100%) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-right: 1px solid rgba(255,255,255,0.1);
}

/* ============================================
   FILAS DE TABLA (zebra stripes)
   ============================================ */
tbody tr:nth-child(even) td, 
tbody tr.even td {
    background: #F0F6FF !important;
}

tbody tr:nth-child(odd) td {
    background: #FFFFFF !important;
}

/* HOVER deshabilitado - solo cursor pointer */
tbody tr:hover td {
    cursor: pointer;
}

/* Si en el futuro quieres reactivar el hover con un color sutil, usa esto: */
/*
tbody tr:hover td {
    background: #E8F3FF !important;
    cursor: pointer;
}
*/

/* ============================================
   BORDES DE TABLA
   ============================================ */
table.principal {
    border: 1px solid #C2D6ED !important;
    box-shadow: 0 2px 12px rgba(13, 43, 78, 0.08);
}

td {
    border-color: #C2D6ED !important;
}

/* ============================================
   LINKS
   ============================================ */
a {
    color: #0E7EC1 !important;
    text-decoration: none;
    font-weight: 600;
}

a:hover, 
a:focus {
    color: #0A5F94 !important;
    text-decoration: underline;
}

/* ============================================
   INPUTS & SELECTS (focus state)
   ============================================ */
input[type=text]:focus, 
input[type=password]:focus, 
input.text:focus, 
input.title:focus, 
textarea:focus {
    border-color: #0E7EC1 !important;
    box-shadow: 0 0 0 3px rgba(14, 126, 193, 0.15) !important;
    outline: none !important;
}

select:focus {
    background-color: #EBF5FF !important;
    border-color: #0E7EC1 !important;
    outline: none !important;
}

form input:focus {
    outline: 1px solid #0E7EC1 !important;
}

/* ============================================
   FIELDSETS & LEGENDS
   ============================================ */
fieldset {
    border: 1px solid #C2D6ED !important;
    background: #FFFFFF;
    border-radius: 6px;
}

legend {
    color: #0D2B4E !important;
    font-weight: 700 !important;
    background: #F5F9FF;
    padding: 4px 12px;
    border-radius: 4px;
}

/* ============================================
   PAGINACIÓN
   ============================================ */
.pagination a {
    border: 1px solid #C2D6ED !important;
    color: #1A4B7A !important;
    background: #FFFFFF;
    transition: all 0.15s;
}

.pagination a:hover {
    background: #EBF5FF !important;
    border-color: #0E7EC1 !important;
    color: #0E7EC1 !important;
}

.pagination .current {
    background: #0E7EC1 !important;
    color: #FFFFFF !important;
    border: 1px solid #0E7EC1 !important;
    font-weight: 700;
}

.pagination .current.prev, 
.pagination .current.next {
    color: #5A7A9A !important;
    border-color: #C2D6ED !important;
    background: #FFFFFF !important;
}

/* ============================================
   BOTONES DE OPCIONES (editar, ver, eliminar)
   ============================================ */
img.boton_opcion {
    opacity: 0.8;
    transition: opacity 0.15s, transform 0.15s;
}

img.boton_opcion:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* ============================================
   TITULOS Y SUBTITULOS
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    color: #0D2B4E !important;
}

td.subtitulo {
    background: #F5F9FF !important;
    color: #1A4B7A !important;
    font-weight: 700;
    padding: 8px !important;
    border-bottom: 2px solid #0E7EC1 !important;
}

/* ============================================
   MENSAJES DE ERROR/ALERTA/ÉXITO
   ============================================ */
.error, .alert {
    background: #FFF3F0 !important;
    color: #C53030 !important;
    border: 2px solid #F8C9BE !important;
}

.success {
    background: #F0FBF9 !important;
    color: #00816D !important;
    border: 2px solid #A8E0DA !important;
}

.notice {
    background: #FFF9EB !important;
    color: #8B6914 !important;
    border: 2px solid #F5D89F !important;
}

.info {
    background: #EBF5FF !important;
    color: #0D5A94 !important;
    border: 2px solid #B8D9F2 !important;
}

/* ============================================
   MEJORAS ADICIONALES
   ============================================ */

/* Inputs con mejor contraste */
input[type=text], 
input[type=password], 
input.text, 
select {
    border: 1px solid #C2D6ED !important;
    background-color: #FFFFFF !important;
    color: #1a2332 !important;
    padding: 6px 10px;
    border-radius: 4px;
}

/* Caption de tablas */
caption {
    background: #F5F9FF !important;
    color: #0D2B4E !important;
    font-weight: 700;
    padding: 8px !important;
}

/* Box container */
.box {
    background: #F5F9FF !important;
    border: 1px solid #C2D6ED !important;
    border-radius: 6px;
}

/* HR separadores */
hr {
    background: #C2D6ED !important;
    color: #C2D6ED !important;
    border: none !important;
    height: 1px !important;
}

/* Quiet y loud text */
.quiet {
    color: #5A7A9A !important;
}

.loud {
    color: #0D2B4E !important;
    font-weight: 700 !important;
}

/* ============================================
   ESTILOS ESPECÍFICOS BLH MARÍTIMO IMPO
   ============================================ */

/* Criterios de búsqueda - fondo mejorado */
table.criterios_busq_tbl_contenedora {
    background: #F5F9FF;
    padding: 12px;
    border: 1px solid #C2D6ED;
    border-radius: 6px;
}

/* Labels de criterios con color corporativo */
td.criterio_busq_lbl_t_nave,
td.criterio_busq_lbl_t_consignee,
td.criterio_busq_lbl_n_referencia,
td.criterio_busq_lbl_n_blhijo {
    color: #1A4B7A !important;
    font-weight: 600;
}

/* Referencia destacada */
td.referencia {
    font-weight: 700 !important;
    color: #0D2B4E !important;
}

/* ============================================
   AUTOCOMPLETE (jQuery UI)
   ============================================ */
.ui-menu-item {
    font-size: 80%;
}

.ui-menu .ui-menu-item a {
    color: #1a2332 !important;
}

.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
    background: #D6EAFF !important;
    border-color: #0E7EC1 !important;
    color: #0D2B4E !important;
}

/* ============================================
   OPCIONAL: ANIMACIONES SUAVES
   ============================================ */
table.principal,
tbody tr,
a,
input,
select {
    transition: all 0.15s ease-in-out;
}

/* ============================================
   RESPONSIVE - TABLET Y SMARTPHONE
   Fuerza los mismos estilos en todos los 
   dispositivos con mayor especificidad
   ============================================ */

/* Forzar colores base en cualquier pantalla */
@media screen and (max-width: 1024px) {

    body {
        background: #E8EFF8 !important;
    }

    /* Headers de tabla */
    thead th,
    table thead th,
    .principal thead th {
        background: linear-gradient(90deg, #1A4B7A 0%, #1E5590 100%) !important;
        color: #FFFFFF !important;
        font-weight: 700 !important;
    }

    /* Filas zebra */
    tbody tr:nth-child(even) td,
    tbody tr.even td {
        background: #F0F6FF !important;
    }

    tbody tr:nth-child(odd) td {
        background: #FFFFFF !important;
    }

    /* Bordes */
    table.principal {
        border: 1px solid #C2D6ED !important;
    }

    td {
        border-color: #C2D6ED !important;
    }

    /* Links */
    a {
        color: #0E7EC1 !important;
        font-weight: 600;
    }

    /* Inputs y selects */
    input[type=text],
    input[type=password],
    input.text,
    select {
        border: 1px solid #C2D6ED !important;
        background-color: #FFFFFF !important;
        color: #1a2332 !important;
        border-radius: 4px;
    }

    input[type=text]:focus,
    input[type=password]:focus,
    input.text:focus,
    textarea:focus {
        border-color: #0E7EC1 !important;
        box-shadow: 0 0 0 3px rgba(14, 126, 193, 0.15) !important;
    }

    /* Fieldsets */
    fieldset {
        border: 1px solid #C2D6ED !important;
        background: #FFFFFF;
        border-radius: 6px;
    }

    legend {
        color: #0D2B4E !important;
        font-weight: 700 !important;
    }

    /* Títulos */
    h1, h2, h3, h4, h5, h6 {
        color: #0D2B4E !important;
    }

    /* Paginación */
    .pagination a {
        border: 1px solid #C2D6ED !important;
        color: #1A4B7A !important;
        background: #FFFFFF;
    }

    .pagination .current {
        background: #0E7EC1 !important;
        color: #FFFFFF !important;
        border: 1px solid #0E7EC1 !important;
        font-weight: 700;
    }

    /* Mensajes */
    .error, .alert {
        background: #FFF3F0 !important;
        color: #C53030 !important;
        border: 2px solid #F8C9BE !important;
    }

    .success {
        background: #F0FBF9 !important;
        color: #00816D !important;
        border: 2px solid #A8E0DA !important;
    }

    .notice {
        background: #FFF9EB !important;
        color: #8B6914 !important;
        border: 2px solid #F5D89F !important;
    }

    .info {
        background: #EBF5FF !important;
        color: #0D5A94 !important;
        border: 2px solid #B8D9F2 !important;
    }

    /* Subtítulos */
    td.subtitulo {
        background: #F5F9FF !important;
        color: #1A4B7A !important;
        font-weight: 700;
        border-bottom: 2px solid #0E7EC1 !important;
    }

    /* Box */
    .box {
        background: #F5F9FF !important;
        border: 1px solid #C2D6ED !important;
        border-radius: 6px;
    }

    /* HR */
    hr {
        background: #C2D6ED !important;
        border: none !important;
        height: 1px !important;
    }
}

/* ============================================
   AJUSTES ESPECÍFICOS PARA SMARTPHONE
   ============================================ */
@media screen and (max-width: 768px) {

    /* Tablas: scroll horizontal en lugar de desbordarse */
    table.principal {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
        font-size: 12px !important;
    }

    /* Celdas más compactas */
    td, th {
        padding: 6px 8px !important;
        white-space: nowrap;
    }

    /* Inputs full width */
    input[type=text],
    input[type=password],
    input.text,
    select {
        width: 100% !important;
        font-size: 14px !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;
    }

    /* Fieldsets ocupan todo el ancho */
    fieldset {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 12px !important;
    }

    /* Paginación más grande para dedos */
    .pagination a,
    .pagination .current {
        padding: 8px 12px !important;
        font-size: 14px !important;
        min-width: 36px;
        text-align: center;
    }

    /* Títulos más pequeños */
    h1 { font-size: 20px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 16px !important; }
}