/* ==========================================================================
   ESTRUCTURA GENERAL Y MENSAJES DEL SISTEMA (JJROSMIL)
   ========================================================================== */
#contenedorVisor {
    height: auto !important;
    min-height: 200px;
    overflow: visible !important;
}

/* 1. Mensajes del Sistema */
.mensaje-informativo {
    display: inline-block;
    padding: 12px 20px;
    margin: 15px auto;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    max-width: 700px;
    text-align: center;
}

.mensaje-exito {
    background-color: #d4edda !important;
    color: #155724 !important;
    border: 1px solid #c3e6cb !important;
}

.mensaje-error {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border: 1px solid #f5c6cb !important;
}

/* 2. Estructura Visor B-6 */
.contenedor-formato {
    border: 2px solid #000;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    background-color: #fff;
}

.titulo-formato {
    background-color: #D9E1F2;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    border-bottom: 2px solid #000;
    font-size: 15px; /* Un punto más grande para el título principal */
}

.contenedor-cabecera-b6 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* 3. Lógica de Columnas (30% Membrete / 70% Datos) */
.columna-membrete {
    width: 30%;
    border-right: 2px solid #000;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 10px;
}

.columna-datos {
    width: 70%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* 4. Bloque Logo y Empresa */
.contenedor-logo-punteado {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-img-visor {
    width: 85px;
    height: 85px;
    border: 1px dashed #999;
    object-fit: contain;
    padding: 4px;
}

.brand-text-visor {
    display: flex;
    flex-direction: column;
}

.empresa-n {
    font-size: 11px;
    color: #333;
    margin: 0;
}

.empresa-s {
    font-size: 19px;
    font-weight: bold;
    font-style: italic;
    color: #000;
    margin: 0;
}

/* 5. Bloque de Datos */
.linea-dato {
    display: flex;
    border-bottom: none !important;
    padding: 6px 10px;
    align-items: center;
    min-height: 32px;
}

    .linea-dato:last-child {
        border-bottom: none;
    }

.etiqueta-b6 {
    font-weight: bold;
    font-size: 12px;
    width: 110px;
    text-transform: uppercase;
}

.fcl-barra-acciones {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
    padding: 15px;
    border-top: 1px solid #e2e8f0;
    background-color: #fafafa;
}

.fcl-btn-accion {
    background-color: #f5f5f5;
    color: #2d3748;
    border: 1px solid #cbd5e0;
    padding: 10px 22px;
    border-radius: 6px;
    font-weight: 800;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

    .fcl-btn-accion:hover {
        background-color: #e2e8f0;
    }

/* ==========================================================================
   ESTILOS ESPECÍFICOS PARA EL VISOR DEL FORMATO FCL (SISTEMA JJROSMIL)
   ========================================================================== */
.fcl-visor-gw-tabla {
    width: 70%;
    margin: 20px auto;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.fcl-visor-gw-header {
    background-color: #dce6f1 !important;
    color: #000000 !important;
    font-size: 13px !important; /* Incrementado para claridad en PC */
    font-weight: bold !important;
    border: 1px solid #000000 !important;
    padding: 8px 6px !important;
    text-align: center;
}

.fcl-visor-gw-row td {
    border: 1px solid #000000 !important;
    padding: 6px !important; /* Más respiro para las celdas */
    vertical-align: middle;
}

.fcl-visor-gw-dropdown {
    width: 100%;
    font-size: 13px;
    padding: 4px;
}

.fcl-visor-gw-textbox {
    width: 95%;
    font-size: 13px;
    padding: 4px;
    box-sizing: border-box;
}

/* 6. Estilos específicos para la fila inferior de total en una sola línea */
.fcl_visor_total_container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    box-sizing: border-box;
}

.fcl_visor_total_label {
    font-weight: bold;
    font-size: 13px;
    white-space: nowrap;
}

.fcl_visor_total_value {
    display: flex;
    gap: 4px;
    font-size: 13px;
    white-space: nowrap;
}

/* ==========================================================================
   TABLA INFERIOR DE PARÁMETROS LABORALES (CÁLCULO POR TRABAJADOR)
   ========================================================================== */
.contenedor-formato-calculo {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
    clear: both;
    font-family: Arial, sans-serif;
}

.fcl-tabla-parametros {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    border: 1px solid #000000 !important;
}

.fcl-tabla-parametros-header th {
    background-color: #dce6f1 !important;
    color: #000000 !important;
    font-size: 13px !important; /* Incrementado */
    font-weight: bold !important;
    border: 1px solid #000000 !important;
    padding: 8px 6px !important;
    text-align: center;
}

.fcl-tabla-parametros-row td {
    border: 1px solid #000000 !important;
    padding: 6px 8px !important;
    font-size: 13px; /* Incrementado */
    vertical-align: middle;
    color: #000000;
}

/* Clases específicas de alineación e importancia */
.txt-izquierda {
    text-align: left !important;
}

.txt-centro {
    text-align: center !important;
}

/* Tipografía monoespaciada para alinear decimales y números como Excel */
.txt-derecha {
    text-align: right !important;
    font-family: Consolas, Monaco, "Courier New", monospace !important;
}

.fcl-text-bold {
    font-weight: bold !important;
}

.row-resaltado-negrita td {
    font-weight: bold !important;
    background-color: #f2f2f2;
}

/* Caja flex para separar la descripción de los porcentajes amarillos */
.fcl-celda-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.fcl-contenedor-porcentajes {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.fcl-lbl-porcentaje {
    font-size: 11px;
    font-style: italic;
    color: #000000;
}

.fcl-input-porcentaje {
    width: 70px;
    background-color: #FFFF00 !important;
    color: #000000 !important;
    border: 1px dotted #000000 !important;
    font-size: 13px; /* Incrementado */
    text-align: right;
    padding: 2px 4px;
    font-weight: bold;
    font-family: Consolas, Monaco, "Courier New", monospace !important;
}

.fcl-param-textbox {
    width: 100%;
    box-sizing: border-box;
    font-size: 13px; /* Incrementado */
    padding: 4px 6px;
    border: 1px solid #cbd5e0;
    text-align: center;
    background-color: #ffffff;
    color: #000000;
}

.fcl-formula-hint {
    font-size: 11px; /* Incrementado */
    color: #555;
    font-weight: normal;
    font-style: italic;
}

/* Estilo específico para filas o celdas de deducción en JJRosMil */
.jjrosmil-vlr-resta {
    color: #c0392b !important;
    font-weight: bold !important;
    background-color: #fdf2f2 !important;
}

.txt-i21-resaltado {
    font-size: 16px !important;
    font-weight: bold !important;
}
/* ==========================================================================
   DISEÑO RESPONSIVO UNIFICADO (VISTA CELULAR TOTALMENTE OPTIMIZADA)
   ========================================================================== */
@media (max-width: 768px) {
    #contenedorVisor {
        margin-top: 10px;
        padding: 6px;
    }

    .contenedor-formato {
        max-width: 100%;
    }

    .columna-membrete, .columna-datos {
        width: 100%;
        border-right: none;
    }

    .columna-membrete {
        border-bottom: 2px solid #000;
        justify-content: flex-start;
        text-align: left;
        padding-left: 10px;
    }

    .fcl-barra-acciones {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }

    .fcl-btn-accion {
        width: 100%;
        box-sizing: border-box;
    }

    .fcl_visor_gw_tabla {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 !important;
        display: table !important;
    }

    /* Ajuste en celular: Fuente clara (12px) y padding reducido para que entre en ancho */
    .fcl_visor_gw_header {
        font-size: 12px !important;
        padding: 6px 2px !important;
        word-wrap: break-word !important;
    }

    /* Redefinición estricta de porcentajes de columnas en móvil para estabilidad */
    .fcl_visor_gw_tabla th:nth-child(1), .fcl_visor_gw_tabla td:nth-child(1) {
        width: 8% !important;
    }

    .fcl_visor_gw_tabla th:nth-child(2), .fcl_visor_gw_tabla td:nth-child(2) {
        width: 34% !important;
    }

    .fcl_visor_gw_tabla th:nth-child(3), .fcl_visor_gw_tabla td:nth-child(3) {
        width: 18% !important;
    }

    .fcl_visor_gw_tabla th:nth-child(4), .fcl_visor_gw_tabla td:nth-child(4) {
        width: 20% !important;
    }

    .fcl_visor_gw_tabla th:nth-child(5), .fcl_visor_gw_tabla td:nth-child(5) {
        width: 20% !important;
    }

    .fcl_visor_gw_row td {
        padding: 5px 2px !important;
    }

    /* Evitamos que el navegador rompa la lectura achicando los campos */
    .fcl_visor_gw_dropdown,
    .fcl_visor_gw_textbox {
        font-size: 12px !important;
        padding: 4px 2px !important;
        box-sizing: border-box !important;
    }

    /* --- RESPONSIVE TABLA DE PARÁMETROS LABORALES (MÓVIL) --- */
    .fcl-tabla-parametros-header th {
        font-size: 12px !important;
        padding: 6px 2px !important;
    }

    .fcl-tabla-parametros-row td {
        font-size: 12px !important;
        padding: 6px 3px !important;
    }

    .fcl-celda-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .fcl-contenedor-porcentajes {
        width: 100%;
        justify-content: flex-start;
        margin-top: 2px;
    }

    .fcl-param-textbox {
        font-size: 12px !important;
        padding: 4px 3px !important;
    }

    /* Control exacto sobre el cuadro amarillo en smartphones */
    .fcl-input-porcentaje {
        width: 60px;
        font-size: 12px !important;
        padding: 2px 3px;
    }

    .fcl-formula-hint {
        display: block;
        font-size: 10px;
    }

    .txt-i21-resaltado {
        font-size: 12px !important; /* Mantiene el tamaño 16 para que no se achique en celular */
    }


}