﻿/* Estilos de apoyo (tablas apilables, scroll, impresion). El sistema visual esta en ff-theme.css */



.table {
    --bs-table-bg: #fff;
}

.table thead.table-light th {
    background-color: #f8f9fa;
    color: #495057;
    border-bottom: 1px solid #e9ecef;
}




/* Efecto hover suave para las filas de las tablas que son clickeables (ej. PAMI) */
tbody tr[style*="cursor: pointer"]:hover {
    background-color: rgba(13, 110, 253, 0.05) !important;
    transition: background-color 0.2s ease;
}

/* Personalización de la barra de desplazamiento para que se vea más limpia */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f8f9fa; 
}
 
::-webkit-scrollbar-thumb {
    background: #ced4da; 
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #adb5bd; 
}

/* Ajuste para que las tarjetas principales tengan una sombra un poco más difuminada */

/* --- USO DESDE EL CELULAR (hasta 576 px de ancho) ---
   Validar desde el celular es clave (por ejemplo, con cortes de luz): botones y campos comodos para el dedo (44 px), modales que entran en
   la pantalla (con su propio scroll), tablas que no se desbordan y el logo de la marca sin tapar los botones de accion. */
@media (max-width: 576px) {
    .container, .container-fluid { padding-left: 12px; padding-right: 12px; }

    .btn, .btn-sm, .btn-lg { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .5rem .9rem; font-size: 1rem; }
    .btn-link { min-height: 44px; }
    .btn-close { width: 44px; height: 44px; padding: 0; background-position: center; background-size: 1rem; }
    .form-control, .form-control-sm, .form-control-lg, .form-select, .form-select-sm { min-height: 44px; font-size: 16px; }   /* 16 px: el celular no hace zoom al enfocar */
    .form-check-input { width: 1.4em; height: 1.4em; }
    .nav-link, .dropdown-item { padding-top: .7rem; padding-bottom: .7rem; }
    .navbar-toggler { min-width: 44px; min-height: 44px; }

    /* Modales: entran en la pantalla (aunque el teclado ocupe la mitad) y el cuerpo hace scroll */
    .modal-dialog { margin: .5rem; max-width: none; }
    .modal-content { max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); }
    .modal-dialog:not(.modal-dialog-scrollable) .modal-content { display: flex; flex-direction: column; }
    .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .modal-footer { flex-wrap: wrap; gap: .5rem; }
    .modal-footer > .btn { flex: 1 1 auto; margin: 0; }
    input, select, textarea { scroll-margin-block: 96px; }

    /* Tablas "apilables": cada fila pasa a ser una tarjeta con sus rotulos (data-label), sin scroll lateral */
    .tabla-movil thead { display: none; }
    .tabla-movil, .tabla-movil tbody { display: block; width: 100%; }
    .tabla-movil tr { display: block; margin-bottom: .75rem; padding: .5rem .75rem; background: #fff; border: 1px solid #dee2e6; border-radius: .75rem; }
    .tabla-movil td { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; padding: .3rem 0; border: 0; text-align: right; }
    .tabla-movil td::before { content: attr(data-label); flex: 0 0 34%; font-weight: 600; color: #6c757d; text-align: left; }
    .tabla-movil td[colspan] { display: block; text-align: center; }
    .tabla-movil td[colspan]::before { content: none; }
    .tabla-movil td.acciones-movil { display: block; text-align: left; }
    .tabla-movil td.acciones-movil::before { display: block; margin-bottom: .35rem; }
    .tabla-movil td.acciones-movil .btn { width: 100%; margin-top: .35rem; }
    .tabla-movil td.acciones-movil > div { margin-top: 0; }

}

/* ---- Vista de PRUEBA (Estadisticas, Presentaciones, panel de auditoria): franja amarilla y marca de agua al imprimir ---- */
.franja-prueba { background: #ffc107; color: #212529; font-weight: 700; text-align: center; padding: .6rem 1rem; border-radius: .5rem; margin-bottom: 1rem; border: 2px solid #997404; }
@media print {
    .franja-prueba { display: block !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .franja-prueba.d-none { display: none !important; }
    body.vista-prueba::before {
        content: "PRUEBA"; position: fixed; top: 38%; left: 0; right: 0; text-align: center; font-size: 11rem; font-weight: 900; letter-spacing: .6rem;
        color: rgba(220, 53, 69, .16); transform: rotate(-24deg); z-index: 99999; pointer-events: none; -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
}

