/**
 * ARCHIVO: style.css
 * DESCRIPCIÓN: Hoja de estilos principal para el sistema de Contingencia DIAN FE
 * 
 * Paleta de colores del sistema:
 * - Primario: #523c32 (marrón oscuro - headers, footer)
 * - Secundario: #f7efd6 (beige claro - fondo general)
 * - Acento: #fd7c3b (naranja - hover effects)
 * - Neutros: #fff, #f5f5f5 (blancos para contenido)
 * 
 * Tipografía: Google Fonts 'Dosis' (sans-serif)
 */

/* ========== RESET Y ESTILOS GLOBALES ========== */

/* Reset general del documento */
*{
    padding: 0px;
    margin: 0px;
    font-family: 'Dosis', sans-serif; /* Fuente principal del sistema */
}

/* Fondo general del sistema (beige claro) */
body{
    background-color: #f7efd6!important;
}

/* Fondo de cajas/contenedores (beige más claro) */
.bg-color-caja{
    background-color: #fffcf5  !important;
}

/* ========== TIPOGRAFÍA ========== */

/* Títulos principales (h2) */
h2{ 
    letter-spacing: 2px; /* Espaciado entre letras para mejor legibilidad */
    text-transform: uppercase; /* Títulos en mayúsculas */
    font-weight:500;
    text-shadow: 0px 2px 1px #222222; /* Sombra para profundidad */
}

/* Títulos de tamaño 4 de Bootstrap */
.fs-4{
    font-weight:600;
    text-shadow: 0px 2px 1px #222222; /* Consistencia visual con h2 */
}

/* ========== FORMULARIOS ========== */

/* Estilo base para inputs y selects */
/* Estilo base para inputs y selects */
input,select{
    border:1px solid #ccc;
    border-radius: 3px;
    padding: 4px;
}

/* ========== LAYOUT Y ESTRUCTURA ========== */

/* Divisor vertical para sidebars */
.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh; /* Altura completa de la ventana */
}

/* ========== TABLAS (DataTables) ========== */

/* Bordes redondeados en tbody */
table tbody   {
    border-radius:203px;
}

/* Tamaño de fuente para tablas */
table #tabla {
    font-size: 13px;
}

/* Estilo de cabecera de tabla (marrón oscuro) */
.cabecera{
    background-color: #523c32;
    color: #fff;
}

/* Alineación centrada en celdas de DataTables */
table.dataTable tbody tr {
    text-align: center;
}

/* Filas de tabla con fondo blanco */
table #filas { 
    background-color: white;
    color:#545449;
}

/* Encabezados de tabla centrados */
.cabecera th {
  text-align: center!important;
}

/* Tamaño de fuente reducido para tablas ordenables */
.tablaOrden{
    font-size: 13px;
}

/* Fondo alterno para filas (zebra striping) */
.color-blanco{
    background:#f5f5f5!important;
}

/* ========== NAVEGACIÓN ========== */

/* Estilo base para menú de administración */
.navAdmin{
    background-color: #3e302b!important;
    border: 1px solid #776259!important;
}

/* Hover effect en navegación de admin */
.navAdmin:hover{
    background-color: #281e1a!important;
    border: 1px solid #281e1a!important;
    transition: all 0.2s!important; /* Transición suave */
}

/* Borde decorativo estilo "crepes" (marrón semi-transparente) */
.border-crepes{
    border: 1px solid #523c326d;
}

/* Alineación centrada en celdas de DataTables (duplicado - limpieza necesaria) */
table.dataTable tbody tr {
    text-align: center;
}

/* ========== CABECERA DE SECCIONES ========== */

/* Estilo para cabecera de secciones (bordes redondeados inferiores) */
.cabeza{
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    padding:5px;
}

/* Enlaces en cabecera (color beige rosado) */
.cabeza a{
    color: #bb9988;
    transition: all 300ms;
}

/* Hover en enlaces de cabecera (blanco con glow naranja) */
.cabeza a:hover{
    color: #ffffff;
    text-shadow: 0px 2px 1px #222222, 0px 0px 4px #fd7c3b; /* Efecto glow naranja */
}

/* ========== ANIMACIONES Y SPINNERS ========== */

/* Spinner de carga más lento (1.7s) */
/* Spinner de carga más lento (1.7s) */
.spinner-border {
    animation-duration: 1.7s!important;
}

/* ========== FOOTER ========== */

/* Contenedor del footer (espaciado superior) */
.footer{
    padding-top:10px;
    text-shadow: 0px 2px 1px #222222;
}

/* Footer principal (marrón oscuro, bordes superiores redondeados) */
.footer footer{
    text-align: center;
    padding-top: 37px;
    padding-bottom: 40px;
    color:white;
    background-color: #523c32; /* Color primario del sistema */
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

/* ========== BOTONES Y ENLACES INFORMATIVOS ========== */

/* Estilo base para botones/enlaces de información */
.info{
    background-color: #4d372d;
    color: #bfbfbf;
    font-size: 14px;
    transition: all 300ms; /* Transición suave */
}

/* Hover en botones info (oscurece y agrega glow) */
.info:hover{
    text-shadow: 0px 2px 1px #222222, 0px 0px 4px #fd7c3b; /* Glow naranja */
    background-color: #32241e; /* Más oscuro en hover */
    color: #ffffff;
    font-size: 14px;
}

/* Enlaces informativos de usuario */
.infoU{
    color: #bfbfbf;
    font-size: 14px;
    transition: all 300ms;
}

/* Hover en enlaces de usuario (glow naranja) */
.infoU:hover{
    text-shadow: 0px 2px 1px #222222, 0px 0px 4px #fd7c3b;
    color: #ffffff;
    font-size: 14px;
}

/* ========== COLORES Y UTILIDADES ========== */

/* Texto gris oscuro */
.gris{
    color:#535353;
    font-size:14px;
}

/* Guardado izquierda/derecha (tamaño de fuente) */
.SaveLeftAndRight{
    font-size: 16px;
}

/* ========== CONTENEDORES CON SCROLL (TEIBOL) ========== */
/* Serie de clases para contenedores de tabla con scroll vertical y alturas específicas */

/* Contenedor de tabla con scroll - altura 300px */
.teibol{
  overflow-y:scroll;
  height:300px;
}

/* Contenedor de tabla con scroll - altura 500px */
.teibol-5{
    overflow-y:scroll;
    height:500px;
}

/* Contenedor de tabla con scroll - altura 400px (variante 55) */
.teibol-55{
    overflow-y:scroll;
    height:400px;
}

/* Contenedor de tabla con scroll - altura 300px (variante 2) */
.teibol-2{
    overflow-y:scroll;
    height:300px;
}

/* Contenedor de tabla con scroll - altura 400px (variante 3) */
.teibol-3{
    height: 400px;
    overflow-y: scroll;
}

/* Contenedor de tabla con scroll - altura 500px (variante 44) */
.teibol-44{
    height: 500px;
    overflow-y: scroll;
}

/* ========== OFFCANVAS Y SIDEBAR ========== */

/* Ancho personalizado para offcanvas (sidebar) */
.offcanvas {
    width: 310px!important;
}

/* Ícono del botón hamburguesa (blanco para contraste en navbar oscuro) */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ========== IMÁGENES ========== */

/* Miniaturas de imagen con tamaño específico */
.img-thumbnail {
    width:230px;
    height:700;
}

/* ========== NAVEGACIÓN - CONTINUACIÓN ========== */

/* Enlaces en lista de navegación (color beige claro) */
ul li a{
    color: #f0dacf!important;
    transition: all 300ms;
    border-radius: 10px!important;
}

/* Hover en enlaces de navegación (azul brillante con fondo) */
ul li a:hover{
    color: #ffffff!important;
    border-radius: 10px!important;
    background-color: rgb(3, 142, 255)!important; /* Azul acento en hover */
}

/* ========== ENCABEZADOS DE SECCIÓN ========== */

/* Cabecera de color (marrón oscuro con bordes superiores redondeados) */
.color-cab{
    margin-bottom:-15px; /* Ajuste negativo para superposición */
    background-color: #523c32;
    color: #fff;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

/* ========== ESPACIADO Y MÁRGENES ========== */

/* Espaciado elemento 1 (margen inferior) */
.e-1{
    margin-bottom:20px;
}

/* Espaciado elemento 2 (margen superior negativo) */
.e-2{
    margin-top:-10px;
}

/* Espaciado general (margen superior negativo) */
.espaciado{
    margin-top:-14px;
}

/* ========== EFECTOS HOVER Y TRANSICIONES ========== */

/* Clase para elementos con transición suave (tarjetas, botones, etc.) */
.tp{
    transition: all 0.3s;
}

/* Hover con efecto de escala y cambio de color */
.tp:hover{
    transform: scale(1.10); /* Aumenta 10% el tamaño */
    background-color: #f7e5b0; /* Beige dorado en hover */
    transition: all 0.2s;
}

/* ========== RESET DE BOTONES ========== */

/* Eliminar bordes por defecto en todos los botones */
button {
    border: 0;
}

/* ========== SELECT2 (Plugin de selects mejorados) ========== */

/* Altura personalizada para select2 single */
.select2-container .select2-selection--single {
    height: 40px!important;
}

/* ========== DATATABLES - PERSONALIZACIÓN ========== */

/* Input de búsqueda de DataTables (ancho y fondo) */
.dataTables_filter input {
    width: 200px;
    background: white!important;
}

/* Padding personalizado para tabla ordenable */
#tabla-orden{
    padding:2px!important;
}

/* Wrapper de DataTables (ocultar scroll horizontal) */
.dataTables_wrapper {
    overflow-x: hidden;
}

/* Configuración de scroll en DataTables */
.dataTables_wrapper .dataTables_scroll {
    overflow-x: auto !important; /* Permitir scroll horizontal si es necesario */
    overflow-y: hidden !important; /* Ocultar scroll vertical */
    max-height: none !important; /* Permitir cualquier altura de contenido */
}

/* Contador de cantidad (espaciado específico) */
.cantidad {
    margin:10px;
    margin-bottom:-30px;
}

/* ========== SWEETALERT2 - PERSONALIZACIÓN ========== */

/* Remover sombra de texto en títulos de SweetAlert2 */
.swal2-title {
    text-shadow: none !important;
}

/* ========== CURSORES PERSONALIZADOS ========== */

/* Cursor de mano/pointer para elementos clickeables */
.cursor-dedo {
    cursor: pointer!important;
}

/* ========== INPUTS READ-ONLY ========== */

/* Estilo para inputs de solo lectura (fondo gris claro) */
input[type="text"]:read-only,
input[type="number"]:read-only,
input[type="date"]:read-only {
    background-color: #f2f0f0!important; /* Gris muy claro */
    border:1px solid #dad9d9; /* Borde más suave */
}




.cabecera th {
  text-align: center!important  ;
}