/* Reset básico */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }

body { background-color: #fff; color: #333; margin: 0px; padding: 0px;} /* #f4f7f6 */

.left {
	float: left;
}

.right {
	float: right;
}

.bordered {
	border: 1px solid #dadada;
}
/* Header & Navigation */
.main-header {
    background: #1f1d44; /*#2c3e50;*/
    color: white;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo { font-size: 1.5rem; font-weight: bold; margin-right: auto; }

.main-menu { display: flex; list-style: none; }
.main-menu li { position: relative; }
.main-menu a {
    color: white;
    text-decoration: none;
    padding: 20px 15px;
    display: block;
    transition: background 0.3s;
}
.main-menu a:hover { background: #34495e; }

/* Submenus Desktop */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 180px;
    display: none;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.submenu a { color: #333; padding: 12px 15px; border-bottom: 1px solid #eee; }
.submenu a:hover { background: #f1f1f1; }

.has-submenu:hover .submenu { display: block; }

/* Menu Toggle (Mobile Only) */
.menu-toggle { display: none; cursor: pointer; flex-direction: column; gap: 5px; margin-right: 15px; }
.menu-toggle span { width: 25px; height: 3px; background: white; border-radius: 2px; }

/* Responsive Mobile Layout */
@media (max-width: 768px) {
    .menu-toggle { display: flex; }
    
    .nav-container {
        position: fixed;
        top: 0;
        left: -280px; /* Escondido */
        width: 280px;
        height: 100vh;
        background: #2c3e50;
        transition: left 0.3s ease;
        z-index: 1001;
        padding-top: 60px;
    }

    .nav-container.open { left: 0; }

    .main-menu { flex-direction: column; }
    
    .submenu {
        position: static;
        background: #1a252f;
        display: none; /* Controlado por jQuery */
        box-shadow: none;
    }
    .submenu a { color: #bdc3c7; padding-left: 30px; }

    .overlay.active {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }
}

/* Tabs */
.tabs-container { background: white; border-radius: 8px; overflow: hidden; margin-top: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.tabs-header { display: flex; border-bottom: 2px solid #eee; }
.tab-item { padding: 15px 25px; cursor: pointer; border-bottom: 2px solid transparent; transition: 0.3s; }
.tab-item.active { border-bottom: 2px solid #3498db; color: #3498db; font-weight: bold; }
.tab-pane { padding: 0px; display: none; }
.tab-pane.active { display: block; }

/* --- Desktop: Comportamiento de Pestañas --- */
.tabs-header-nav { display: flex; border-bottom: 2px solid #ddd; }
.tab-link { padding: 12px 20px; cursor: pointer; background: #eee; border-radius: 8px 8px 0 0; margin-right: 5px; }
.tab-link.active { background: #3498db; color: white; }

.accordion-header { display: none; } /* Oculto en desktop */
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* --- Móvil: Transformación a Acordeón (< 768px) --- */
@media (max-width: 768px) {
    .tabs-header-nav { display: none; } /* Escondemos la barra horizontal */

    .accordion-header { 
        display: block; 
        padding: 15px; 
        background: #2c3e50; 
        color: white; 
        cursor: pointer;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        font-weight: bold;
    }

    .tab-pane { 
        display: block; /* En móvil todos los contenedores existen, pero controlamos el contenido */
        margin-bottom: 5px;
    }

	/* Por defecto, el contenido del acordeón está cerrado */
	/*
    .tab-inner-content { 
        display: none; 
        border-radius: 0; 
    }
    */

/* Quitamos el display: block forzado del .tab-pane.active .tab-inner-content */
    /* Dejamos que jQuery maneje la visibilidad del contenido */
    .tab-inner-content { 
        display: none; 
        overflow: hidden; /* Ayuda a que la animación sea más limpia */
    }
    
    .tab-pane.active .tab-inner-content { 
        display: block; /* Solo mostramos el contenido del que esté "active" */
    }

	/* Color destacado para el acordeón abierto */
	/*
    .tab-pane.active .accordion-header {
        background: #3498db; 
    }
    */
    
.accordion-header {
        position: relative; /* Necesario para ubicar el símbolo */
        padding-right: 40px; /* Espacio para que el texto no choque con el icono */
    }

    /* Dibujamos el símbolo "+" por defecto */
    .accordion-header:after {
        content: '+';
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.2rem;
        font-weight: bold;
        transition: all 0.3s ease;
    }

    /* Cambiamos a "-" cuando el padre (tab-pane) está activo */
    .tab-pane.active .accordion-header:after {
        content: '−'; /* Usamos el signo menos real para que se vea mejor */
        transform: translateY(-50%) rotate(180deg); /* Animación de rotación opcional */
    }    
}




/* Tabla con Divs */
.div-table { display: flex; flex-direction: column; width: 100%; border: 1px solid #eee; margin-top: 15px; }
.div-table-header { display: flex; background: #ecf0f1; font-weight: bold; }
.div-table-row { display: flex; border-top: 1px solid #eee; background: white; }
.div-cell { flex: 1; padding: 12px; }

.colspan-2 { flex: 2 !important; }
.colspan-3 { flex: 3 !important; }
.colspan-4 { flex: 4 !important; }

.rowspan-2 {
    height: auto;
    align-self: stretch;
    display: flex;
    align-items: center; /* Centra el contenido verticalmente */
}

/* --- Modificador Table Bordered --- */

/* Contenedor principal con borde superior e izquierdo */
.div-table.table-bordered {
    border: 1px solid #dfdfdf;
    border-bottom: none; /* Evita duplicar con la última fila */
    border-right: none;  /* Evita duplicar con la última celda */
}

/* Cada celda con borde derecho e inferior */
.div-table.table-bordered .div-cell {
    border-right: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
}

/* Ajuste para el header si tiene color de fondo */
.div-table.table-bordered .div-table-header {
    border-bottom: none; 
}

/* Quitar margen superior si la tabla está dentro de un contenedor con padding */
.div-table.table-bordered {
    margin-top: 15px;
}
/* --- Modificadores de Tamaño para Tablas --- */

/* Tabla Pequeña (Compacta) */
.div-table.table-sm .div-cell {
    padding: 5px 8px;
    font-size: 0.85rem;
}

/* Tabla Normal (Ya la tenemos, pero la definimos por claridad) */
.div-table .div-cell {
    padding: 12px;
    transition: all 0.2s ease;
}

/* Tabla Grande (Espaciada) */
.div-table.table-lg .div-cell {
    padding: 20px 15px;
    font-size: 1.1rem;
}

/* --- Bonus: Tabla Estilo "Striped" (Cebra) --- */
.div-table.table-striped .div-table-row:nth-child(even) {
    background-color: #f9f9f9;
}

/* --- Bonus: Efecto Hover --- */
.div-table.table-hover .div-table-row:hover {
    background-color: #f1f4f6;
    cursor: default;
}


/*
@media (max-width: 600px) {
    .div-table-header { display: none; }
    .div-table-row { flex-direction: column; padding: 0px; border-bottom: 0px solid #dfdfdf;}
    .div-cell { display: flex; justify-content: space-between; padding: 5px 15px; }
    .div-cell:before { content: attr(data-label); font-weight: bold; color: #7f8c8d; }
}
*/

@media (max-width: 600px) {
    .div-table-header { display: none; }
    .div-table-row { flex-direction: column; padding: 0px; border-bottom: 0px solid #dfdfdf; }

    .div-cell { 
        display: flex; 
        /* Cambiamos esto: */
        justify-content: flex-start; 
        /* Agregamos un espacio entre el label y el valor: */
        gap: 15px; 
        padding: 5px 15px; 
    }

    /* Opcional: Para que el label tenga siempre el mismo ancho 
       y los valores queden alineados verticalmente entre sí */
    .div-cell:before { 
        content: attr(data-label); 
        font-weight: bold; 
        color: #7f8c8d;
        min-width: 100px; /* Ajusta este ancho según tus etiquetas más largas */
        flex-shrink: 0;   /* Evita que el nombre se encoja */
    }
}

/* Utilities */
.content { padding: 10px; max-width: 100%; } /*   margin: auto; 1200px */
.badge { padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; }
.badge.active { background: #d4edda; color: #155724; }
.badge.inactive { background: #f8d7da; color: #721c24; }


/* modal y formularios */
/* Botones */
/* .btn { padding: 15px; margin-top: 27px; border: none; border-radius: 4px; cursor: pointer; transition: 0.3s; font-weight: 600; text-decoration: none; justify-content: center; align-items: center; display: flex; min-width: 150px;} */
.btn {
    padding: 15px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
    font-weight: 600;
    text-decoration: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    min-width: unset;
    white-space: nowrap;
}
.btn-primary { background: #3498db; color: white; }
.btn-success { background: #27ae60; color: white;  } /* width: 100%;  margin-top: 10px; */
.btn-danger { background: #e01b24; color: white;  }
.btn:hover { opacity: 0.9; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15); }

/* Modales */
.modal { 
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); 
    z-index: 2000; align-items: center; justify-content: center; 
}
.modal-content { background: white; width: 90%; border-radius: 8px; overflow: hidden; animation: slideDown 0.3s ease; } /*  max-width: 500px; */
.modal-header { padding: 15px 20px; background: #f8f9fa; display: flex; justify-content: space-between; border-bottom: 1px solid #ddd; }
.modal-body { padding: 20px; }
.close-modal { cursor: pointer; font-size: 1.5rem; }

@keyframes slideDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Formularios */
.form-groupx { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; font-size: 0.9rem; }
.form-group input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; outline: none; }
.form-group input:focus { border-color: #3498db; }
.form-group.error input { border-color: #e74c3c; background: #fdf2f2; }
.error-msg { color: #e74c3c; font-size: 0.8rem; display: none; }
.form-group.error .error-msg { display: block; }

/* --- Fancy Form Styles --- */

.subtitle { color: #7f8c8d; margin-bottom: 25px; font-size: 0.95rem; }

/* Estructura de Filas (Grid System Simple con Flexbox) */
.form-row { display: flex; flex-wrap: wrap; gap: 15px; } /* margin-bottom: 15px; */
.form-group { flex: 1; min-width: 0;} /* margin-bottom: 1px;  min-width evita overflow */

/* Clases de utilidad para columnas (Simulando Bootstrap) 
.col-4 { flex: 0 0 calc(33.333% - 10px); }
.col-6 { flex: 0 0 calc(50% - 7.5px); }
*/
/* Selector universal para todas las columnas col- */
[class*="col-"] {
    padding-left: var(--gap-x);
    padding-right: var(--gap-x);
    /* padding-bottom: var(--gap-y); */
    box-sizing: border-box;
    flex-shrink: 0;
}

/* --- 1. MÓVIL / DEFAULT (col-X) --- */
.col-1  { flex: 0 0 calc( 8.333333% - 1.5px); }
.col-2  { flex: 0 0 calc( 16.666667% - 0.5px); }
.col-3  { flex: 0 0 calc( 25% - 1.5px); }
.col-4  { flex: 0 0 calc(33.333%  - 1.5px); }
.col-5  { flex: 0 0 calc( 41.666667% - 1.5px); }
.col-6 { flex: 0 0 calc(50% - 1.5px); }
.col-7  { flex: 0 0 calc( 58.333333% - 1.5px); }
.col-8  { flex: 0 0 calc( 66.666667% - 0.5px); }
.col-9  { flex: 0 0 calc( 75% - 1.5px); }
.col-10 { flex: 0 0 calc( 83.333333% - 1.5px); }
.col-11 { flex: 0 0 calc( 91.666667% - 1.5px); }
.col-12 { flex: 0 0 calc( 100% - 1.5px); }



/* --- 2. TABLET (col-md-X) Desde 768px --- */
@media (min-width: 768px) {
    .col-md-1  { flex: 0 0 calc( 8.333333% - 1.5px); }
    .col-md-2  { flex: 0 0 calc( 16.666667% - 1.5px); }
    .col-md-3  { flex: 0 0 calc( 25% - 1.5px); }
    .col-md-4  { flex: 0 0 calc( 33.333333% - 1.5px); }
    .col-md-6  { flex: 0 0 calc( 50% - 1.5px); }
    .col-md-10 { flex: 0 0 calc( 83.333333%); }
    .col-md-12 { flex: 0 0 calc( 100% - 1.5px); }
}

/* --- 3. DESKTOP (col-lg-X) Desde 1024px --- */
@media (min-width: 1024px) {
    .col-lg-1  { flex: 0 0 calc( 8.333333% - 1.5px); }
    .col-lg-2  { flex: 0 0 calc( 16.666667%); }
    .col-lg-3  { flex: 0 0 calc( 25% - 1.5px); }
    .col-lg-4  { flex: 0 0 calc( 33.333333% - 1.5px); }
    .col-lg-5  { flex: 0 0 calc( 41.666667% - 1.5px); }
    .col-lg-6  { flex: 0 0 calc( 50% - 1.5px); }
    .col-lg-7  { flex: 0 0 calc( 58.333333% - 1.5px); }
    .col-lg-8  { flex: 0 0 calc( 66.666667% - 1.5px); }
    .col-lg-9  { flex: 0 0 calc( 75% - 1.5px); }
    .col-lg-10 { flex: 0 0 calc( 83.333333%); }
    .col-lg-11 { flex: 0 0 calc( 91.666667% - 1.5px); }
    .col-lg-12 { flex: 0 0 calc( 100% - 1.5px); }
}

/* Utilidad para anchos específicos (Control total) */
.col-fix { flex: 0 0 calc( var(--w, 100%)); }

 /* Todo a una columna en móvil */
 /*
@media (max-width: 768px) {
    .col-4, .col-6 { flex: 0 0 100%; }
    .form-row { gap: 0; }
}
*/

.form-row { gap: 0; }

.form-group {
    width: 100%;
    max-width: 100%;
    overflow: hidden; /* Corta cualquier desborde accidental */
}

/* Estilos de Label y Input Base */
.form-group label {
    display: block; 
    margin-bottom: 6px; 
    font-weight: 600; 
    font-size: 0.9rem; 
    color: #2c3e50;
}

/* Reset y Modernización de Inputs */
.fancy-form input[type="text"],
.fancy-form input[type="email"],
.fancy-form input[type="password"],
.fancy-form input[type="date"],
.fancy-form input[type="file"],
.fancy-form input[type="submit"],
.fancy-form select,
.fancy-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #d1d8dd;
    border-radius: 6px;
    font-size: 1rem;
    color: #495057;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
    -webkit-appearance: none; /* Quita estilo por defecto en iOS/Safari */
    line-height: 30px;
}

/* Efecto Focus (Fancy Shadow) */
.fancy-form input:focus,
.fancy-form select:focus,
.fancy-form textarea:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

/* Textarea y File styling */
.fancy-form textarea { resize: vertical; }
.fancy-form input[type="file"] { padding: 9px; cursor: pointer; }

/* Personalización del SELECT (Flecha custom) */
.select-wrapper { position: relative; }
.select-wrapper::after {
    content: '▼'; font-size: 0.7rem; color: #7f8c8d;
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    pointer-events: none;
}

/* --- Fancy Checkboxes & Radios --- */
.fancy-check, .fancy-radio {
    display: flex; align-items: center; cursor: pointer;
    font-weight: normal; font-size: 0.95rem; margin-bottom: 10px;
    position: relative; padding-left: 30px;
}

.fancy-check input, .fancy-radio input { position: absolute; opacity: 0; }

/* El cuadro/círculo custom */
.checkmark, .radio-mark {
    position: absolute; top: 0; left: 0; height: 20px; width: 20px;
    background-color: #eee; border-radius: 4px; border: 1px solid #ccc;
    transition: 0.2s;
}
.radio-mark { border-radius: 50%; } /* Círculo para radio */

/* Hover state */
.fancy-check:hover input ~ .checkmark,
.fancy-radio:hover input ~ .radio-mark { background-color: #ddd; }

/* Checked state (Color Azul) */
.fancy-check input:checked ~ .checkmark,
.fancy-radio input:checked ~ .radio-mark { background-color: #3498db; border-color: #2980b9; }

/* El icono interno (check/dot) */
.checkmark::after, .radio-mark::after {
    content: ""; position: absolute; display: none;
}

/* Mostrar icono cuando está checked */
.fancy-check input:checked ~ .checkmark::after,
.fancy-radio input:checked ~ .radio-mark::after { display: block; }

/* Estilo del Check (Tick) */
.checkmark::after {
    left: 7px; top: 3px; width: 5px; height: 10px;
    border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Estilo del Punto (Radio) */
.radio-mark::after {
    left: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: white;
}

/* --- Botones de Acción y Estados --- padding-top: 10px; */
.form-actions {
    display: flex; justify-content: flex-end; gap: 20px;  padding-top: 10px;  margin-top: 15px;
} /*
    border-top: 1px solid #eee;*/

.btn-secondary { background: #95a5a6; color: white; }
.btn-secondary:hover { background: #7f8c8d; }

/* Estado Error (Validación) */
.form-group.error input { border-color: #e74c3c; box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2); }
.form-group.error .error-msg { color: #e74c3c; display: block; font-size: 0.8rem; margin-top: 5px; }
.error-msg { display: none; }


/* --- Modificadores de Tamaño para Formularios --- */

/* 1. Formulario Pequeño (Compacto) */
.fancy-form.form-sm input, 
.fancy-form.form-sm select, 
.fancy-form.form-sm textarea {
    padding: 4px 10px;
    font-size: 0.8rem;
    border-radius: 4px;
}

.fancy-form input[type=number] {
	text-align: right;
}

/* Chrome, Safari, Edge, Opera */
.fancy-form input::-webkit-outer-spin-button,
.fancy-form input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.fancy-form input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.fancy-form .form-sm label {
    font-size: 0.8rem;
    margin-bottom: 3px;
}
.fancy-form .form-sm .form-group {
    margin-bottom: 0px;
}

/* 2. Formulario Grande (Enfocado/Login) */
.fancy-form .form-lg input, 
.fancy-form .form-lg select, 
.fancy-form .form-lg textarea {
    padding: 16px 20px;
    font-size: 1.2rem;
    border-radius: 8px;
}
.fancy-form .form-lg label {
    font-size: 1rem;
    margin-bottom: 8px;
}
.fancy-form .form-lg .btn {
    padding: 15px 30px;
    font-size: 1.1rem;
}

/* --- Mejora de Checkboxes para tamaños --- */
.fancy-form .form-sm .checkmark, 
.fancy-form .form-sm .radio-mark {
    height: 16px;
    width: 16px;
}
.fancy-form .form-sm .fancy-check, 
.fancy-form .form-sm .fancy-radio {
    padding-left: 25px;
    font-size: 0.85rem;
}

/* Toasts (Notificaciones) */
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 3000; }
.toast { background: #333; color: white; padding: 15px 25px; border-radius: 4px; margin-top: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); animation: fadeInRight 0.3s ease; }
.toast.success { border-left: 5px solid #2ecc71; }

@keyframes fadeInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Acordeón */
.accordion { margin-top: 15px; border: 1px solid #ddd; border-radius: 4px; }
.acc-header { padding: 15px; background: #fff; cursor: pointer; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; font-weight: bold; }
.acc-body { padding: 15px; display: none; background: #fafafa; border-bottom: 1px solid #eee; }



/***************************************************/
/* TEXT CLASSES */

.text-small {font-size:.8em; line-height:1.875rem;} /* margin-bottom:1.875em; */
.text-normal {font-size:1em; line-height:2.0rem;} /* margin-bottom:1.875em; */
.text-large {font-size:1.5em;line-height:2rem; } /* margin-bottom:1.25em; */
.text-extra-large {font-size:2.5em;line-height:3.5rem;margin-bottom:1.25em;}

.text-quiet {color:#666;}
.text-loud {color:#000; font-weight:bold}
.text-highlight {background:#ff0;}
.text-top {margin-top:0;padding-top:0;}
.text-bottom {margin-bottom:0;padding-bottom:0;}
.text-thin {font-weight: lighter;}
.text-center {text-align: center;}
.text-left { text-align: left !important;}
.text-right {text-align: right;}
.text-link {text-decoration:none; padding:3px 10px;}
.text-bold { font-weight:bold;}
.text-padding { padding: 0.8rem !important; }
.text-shadow { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}

.hide {display:none;}

.success, .error, .notice, .info {
	border:3px solid #ddd; 
	line-height: 2.5em; 
	padding: 0 12px;
    transition: all 0.2s ease;
} /* padding:.8em;margin-bottom:0.6em; */
.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
.info {background:#DBE3FF;color:#514721;border-color:#729fcf;}
.error {background:#FBE3E4;color:#8a1f11;border-color:#c62f1f;}

.error a {color:#8a1f11; background:none; padding:0; margin:0; }
.notice a {color:#514721; background:none; padding:0; margin:0; }
.info a {color:#514721; background:none; padding:0; margin:0; }
.success a {color:#264409; background:none; padding:0; margin:0; }
.error img, .notice img,  .info img,.success img{
  margin:0 3px -3px 0 !important;
  padding:0;
  border:none;
  width:16px;
  height:16px;
  float:none;
}

.hide { display: none;}




/* Sombra sutil: ideal para tarjetas o contenedores estándar */
.sombra-suave {
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Sombra media: para elementos que deben resaltar (como el hover de un botón) */
.sombra-media {
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.15);
}

/* Sombra pronunciada: para modales o menús flotantes */
.sombra-fuerte {
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.2);
}

/* Combinación con tus gradientes */
.btn-gradiente-sombra {
    border: none;
    cursor: pointer;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-gradiente-sombra:active {
    transform: translate(2px, 2px); /* Efecto de presionar hacia la sombra */
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}




/* --- Utilidades de Posicionamiento JIT --- */

.flex-center {
    display: flex !important;
    justify-content: center; /* Centrado Horizontal */
    width: 100%;
}

/* Contenedor que centra TODO su contenido (Vertical y Horizontal) */
.flex-center-all {
    display: flex !important;
    justify-content: center; /* Centrado Horizontal */
    align-items: center;     /* Centrado Vertical */
    min-height: 80vh;       /* Ocupa el alto de la pantalla si es necesario */
    width: 100%;
}

/* Centrado Horizontal manteniendo alineación de texto normal */
.mx-auto {
    float: none !important;  /* Anulamos el float de las clases span-xc */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Clase para asegurar que el texto interno no se centre 
.text-left {
    text-align: left !important;
}
*/

/**********************  esquinas **************************/
/* Redondeado ligero (Ideal para inputs y botones pequeños) */
.rounded-sm { border-radius: 4px !important; }

/* Redondeado estándar (Ideal para tarjetas y contenedores) */
.rounded { border-radius: 8px !important; }

/* Redondeado pronunciado */
.rounded-lg { border-radius: 15px !important; }

/* Totalmente circular (Para avatares o botones icono) */
.rounded-full { border-radius: 50% !important; }

/* Sin redondeado (Para resetear elementos) */
.rounded-none { border-radius: 0 !important; }

/* Solo esquinas superiores */
.rounded-t { 
    border-top-left-radius: 8px !important; 
    border-top-right-radius: 8px !important; 
}

/* Solo esquinas inferiores */
.rounded-b { 
    border-bottom-left-radius: 8px !important; 
    border-bottom-right-radius: 8px !important; 
}

/* Solo lado izquierdo */
.rounded-l { 
    border-top-left-radius: 8px !important; 
    border-bottom-left-radius: 8px !important; 
}

/* Solo lado derecho */
.rounded-r { 
    border-top-right-radius: 8px !important; 
    border-bottom-right-radius: 8px !important; 
}

.rounded-tl { border-top-left-radius: 8px !important; }
.rounded-tr { border-top-right-radius: 8px !important; }
.rounded-bl { border-bottom-left-radius: 8px !important; }
.rounded-br { border-bottom-right-radius: 8px !important; }

/********************** gaps ********************************/

.g-1 {margin: 5px; }
.g-2 { margin: 10px; }
.g-3 { margin: 15px; }
.g-4 { margin: 20px; }
.g-5 { margin: 25px; }

.gb-1 { margin-bottom: 5px; }
.gb-2 { margin-bottom: 10px; }
.gb-3 { margin-bottom: 15px; }
.gb-4 { margin-bottom: 20px; }
.gb-5 { margin-bottom: 25px; }



/* 1. Aseguramos que el body ocupe todo el alto de la pantalla */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 2. El contenido principal crece para ocupar el espacio sobrante */
.content {
  flex: 1;
}

/* 3. Estilos opcionales para tu footer */
footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 1rem;
}


/**************************************************/
/* --- JIT Cards --- */
.card {
    background: #ffffff;
    /* border: 1px solid #000; */
    border-radius: 8px; /* Esquinas redondeadas consistentes */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); /* Tu sombra suave */
    overflow: hidden; /* Para que el fondo del header respete el redondeado */
    display: flex;
    flex-direction: column;
    /*
    margin-bottom: 20px;
    margin-left: 5px;
    */
	margin-right: 5px;
    margin-left: 5px;    
}

/* Encabezado de la Card */
.card-header {
    background: #f8f9fa;
    /* border-bottom: 1px solid #ddd; */
    padding: 12px 20px;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Cuerpo de la Card */
.card-body {
    padding: 20px;
    flex: 1 1 auto;
}

/* Títulos y textos internos */
.card-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2rem;
    color: #2c3e50;
}

.card-text {
    margin-bottom: 15px;
    color: #666;
    line-height: 1.5;
}

/* Ajuste necesario para que el gap no rompa el cálculo del 25% */
.row .card {
    /* calc(25% - (espacio_total_gap / numero_de_tarjetas)) */
    flex: 0 1 calc(25% - 15px); 
}

/* En móvil, que vuelvan al 100% */
@media (max-width: 768px) {
    .row .card {
        flex: 0 1 100%;
    }
}



/* ----------------------- Badges ------------------------------ */

/* Contenedor del link (necesita posición relativa) */
.nav-link-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* El Badge en sí */
.badge {
    /* position: absolute; */
    top: 8px;    /* Ajusta hacia arriba s */
    right: -12px; /* Ajusta hacia la derecha */
    
    background-color: #e74c3c; /* Rojo JIT */
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px; /* Forma de píldora */
    line-height: 1;
    min-width: 10px;
    text-align: center;
    
    /* Sutil borde blanco para que resalte sobre el fondo */
    border: 2px solid #000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Variante redonda para cuando es solo un número pequeño (1-9) */
.badge-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    top: 8px;
    right: -12px;
}

.badge-pulse {
    animation: shadow-pulse 2s infinite;
}

@keyframes shadow-pulse {
    0% { box-shadow: 0 0 0 0px rgba(231, 76, 60, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
    100% { box-shadow: 0 0 0 0px rgba(231, 76, 60, 0); }
}


/************************************ BOTON FLOTANTE ********************************************/

/* --- Contenedor del Botón Flotante --- */
.floating-btn {
    position: fixed;
    top: 20px; /* Separación del borde inferior */
    right: 0px; /*  Alineado a la derecha como pediste */
    width: 56px;
    height: 56px;
    background-color: #3498db; /* Azul JIT */
    border-radius: 80%; /* Totalmente redondo */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 1000; /* Siempre por encima de todo */
    transition: transform 0.2s ease;
    overflow: hidden; /* Corta cualquier desborde accidental */
}

.floating-btn:hover {
    transform: scale(2.1);
    background-color: #2980b9;
}

/* --- Badge específico para el botón flotante --- */
.floating-badge {
    position: absolute;
    top: 19px;
    right: 20px;
    background-color: #e74c3c; /* Rojo para notificaciones */
    color: white;
    font-size: 12px;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

/* El icono + (o cualquier otro) */
.floating-btn-icon {
    font-size: 24px;
    font-weight: bold;
}

/* --- Animación de Sacudida (Wobble) para el Botón --- */
@keyframes attention {
    0% { transform: scale(1); }
    10%, 20% { transform: scale(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.3) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.3) rotate(-3deg); }
    100% { transform: scale(1) rotate(0); }
}

/* --- Animación de Brillo (Pulse) para el Badge --- */
@keyframes badge-glow {
    0% { box-shadow: 0 0 0 0px rgba(231, 76, 60, 0.7); }
    100% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
}

/* Aplicamos la animación al botón flotante */
/* Nota: Usamos una clase extra 'has-notif' para activarla solo cuando sea necesario */
.floating-btn.has-notif {
    animation: attention 1.5s ease-in-out infinite;
    animation-delay: 2s; /* Espera 2 segundos entre cada sacudida */
}

.floating-btn.has-notif .floating-badge {
    animation: badge-glow 1.5s infinite;
}

/************************************ COLORES CLASSES *******************************************/
.rojo-claro { color: #ef2929; }
.rojo { color: #cc0000; }
.rojo-obscuro { color: #a40000; }
.fondo-rojo-claro { background-color: #ef2929; }
.fondo-rojo { background-color: #cc0000; }
.fondo-rojo-obscuro { background-color: #a40000; }

/* anaranjados */
.anaranjado-claro { color: #fcaf3e }
.anaranjado { color: #f57900; }
.anaranjado-obscuro { color: #ce5c00; }

.fondo-anaranjado-claro { background-color: #fcaf3e }
.fondo-anaranjado{ background-color: #f57900;}
.fondo-anaranjado-obscuro { background-color: #ce5c00; }

/* amarillos */
.amarillo-claro { color: #fce94f; }
.amarillo { color: #edd400; }
.amarillo-obscuro { color: #c4a000; }
.fondo-amarillo-claro{ background-color: #edd400;}
.fondo-amarillo { background-color: #edd400; }
.fondo-amarillo-obscuro { background-color: #c4a000; }

/* morado */
.morado-claro { color: #c061cb; }
.morado { color: #9141ac; }
.morado-obscuro { color: #613583; }
.fondo-morado-claro{ background-color: #c061cb; }
.fondo-morado { background-color: #9141ac; }
.fondo-morado-obscuro { background-color: #613583; }

/* verde */
.verde-claro{ color: #8ae234; }
.verde { color: #73d216; }
.verde-obscuro { color: #4e9a06; }
.fondo-verde-claro { background-color: #73d216;}
.fondo-verde-obscuro { background-color: #4e9a06;}

/* azules */
.azul-claro { color: #729fcf; }
.azul { color: #3465a4; }
.azul-obscuro { color: #1f1d44; } /* #204a87 */
.fondo-azul-claro { background-color: #729fcf; }
.fondo-azul { background-color: #3465a4; }
.fondo-azul-obscuro{ background-color: #1f1d44; } /* #3465a4 */

.aqua { color: #0dcaf0; }
.fondo-aqua { background-color: #0dcaf0; }
/* blanco y negro */
.blanco { color: #fff;}
.negro {color: #000;}
.gris-claro {color: #c0bfbc; }
.gris-medio { color: #c0bfbc; }
.gris-obscuro {color: #77767b; }

.fondo-blanco { background-color: #fff; }
.fondo-gris-blanco { background-color: #fff;}
.fondo-negro { background-color: #000;}
.fondo-gris-claro { background-color: #eeeeee;} /*#deddda  #c0bfbc */
.fondo-gris { background-color: #9a9996;}
.fondo-gris-obscuro { background-color: #77767b;}

/* --- NUEVOS ESTÁNDARES DE GRADIENTES JIT (CSS PURO) --- */

/* --- LIBRERÍA DE GRADIENTES JIT (REVISIÓN COMPLETA) --- */

/* Clase base para botones o barras */
[class^="fondo-gradiente-"] {
    height: 35px;
    /* display: flex; */
    align-items: center;
    padding: 0 12px;
    transition: all 0.2s ease;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 3px;
    color: #fff; /* Texto blanco por defecto para fondos oscuros */
    text-shadow: 0px 1px 1px rgba(0,0,0,0.2);
}

/* 1. VERDE (Standard y -obscuro) */
.fondo-gradiente-verde {
    background: linear-gradient(180deg, #b8d362 0%, #a4c339 50%, #91b226 51%, #a4c339 100%);
}
.fondo-gradiente-verde:hover, .fondo-gradiente-verde-obscuro {
    background: linear-gradient(180deg, #91b226 0%, #7d9b20 50%, #6a841a 51%, #7d9b20 100%);
}

/* 2. AZUL (Standard y -obscuro) */
.fondo-gradiente-azul {
    background: linear-gradient(180deg, #59a9f2 0%, #3d94e6 50%, #2480d5 51%, #3d94e6 100%);
}
.fondo-gradiente-azul:hover, .fondo-gradiente-azul-obscuro {
    background: linear-gradient(180deg, #2480d5 0%, #1e6bb5 50%, #175794 51%, #1e6bb5 100%);
}

/* 3. GRIS MEDIO (Standard y -obscuro) */
.fondo-gradiente-gris-medio {
    background: linear-gradient(180deg, #a6a6a6 0%, #8e8e8e 50%, #777777 51%, #8e8e8e 100%);
}
.fondo-gradiente-gris-medio:hover, .fondo-gradiente-gris-obscuro {
    background: linear-gradient(180deg, #777777 0%, #636363 50%, #4f4f4f 51%, #636363 100%);
}

/* 4. AMARILLO (Standard y -obscuro) */
.fondo-gradiente-amarillo {
    background: linear-gradient(180deg, #fcd33d 0%, #fbc211 50%, #e6af0a 51%, #fbc211 100%);
    color: #444; text-shadow: none; /* Texto oscuro para mejor legibilidad */
}
.fondo-gradiente-amarillo:hover, .fondo-gradiente-amarillo-obscuro {
    background: linear-gradient(180deg, #e6af0a 0%, #d19f08 50%, #bd9006 51%, #d19f08 100%);
}

/* 5. ROJO (Standard y -obscuro) */
.fondo-gradiente-rojo {
    background: linear-gradient(180deg, #f26d5f 0%, #ee4130 50%, #d92e1e 51%, #ee4130 100%);
}
.fondo-gradiente-rojo:hover, .fondo-gradiente-rojo-obscuro {
    background: linear-gradient(180deg, #d92e1e 0%, #c12214 50%, #a81c10 51%, #c12214 100%);
}

/* 5. ANARANJADO (Standard y -obscuro) */
.fondo-gradiente-anaranjado {
    background: linear-gradient(180deg, #ffa348 0%, #ff7800 50%, #e66100 51%, #ff7800 100%); /* grados primer-color 0%, segundo-color 50%, tercer-color 51%, segundo-color 100%
}
.fondo-gradiente-rojo:hover, .fondo-gradiente-rojo-obscuro {
    background: linear-gradient(180deg, #d92e1e 0%, #c12214 50%, #a81c10 51%, #c12214 100%);
}


/* 6. GRIS CLARO (Standard y Hover) */
.fondo-gradiente-gris {
    height: 35px;
    background: linear-gradient(180deg, #f2f2f2 0%, #e6e6e6 50%, #d9d9d9 51%, #e6e6e6 100%);
    color: #444; text-shadow: none;
}
.fondo-gradiente-gris:hover {
    background: linear-gradient(180deg, #d9d9d9 0%, #cccccc 50%, #bfbfbf 51%, #cccccc 100%);
}

/* 7. GRIS EXTRA CLARO (El del final de la imagen, casi blanco) */
.fondo-gradiente-blanco {
    background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 50%, #f2f2f2 51%, #f7f7f7 100%);
    color: #333;
    text-shadow: none;
    border: 1px solid #dcdcdc;
}
.fondo-gradiente-blanco:hover {
    background: linear-gradient(180deg, #f2f2f2 0%, #e9e9e9 50%, #dfdfdf 51%, #e9e9e9 100%);
}