@import url('https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/*-----------------------------------------------------------------------*/
/*-------------------------  ESTILOS DE BODY ----------------------------*/
/*-----------------------------------------------------------------------*/
html {
    font-size: 12px;
}

@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(28, 61, 90, 0.5);
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}






/*------------------------------------------------------------------------------------------*/
/*-------------------------  DEMAS ESTILOS EN VISTAS EN GENERAL ----------------------------*/
/*------------------------------------------------------------------------------------------*/


/* ========================================================
    ESTILOS GENERALES PARA VISTAS DE REPORTE Y FORMULARIOS
    (DETALLES, FILTROS, KPI's)
    ========================================================
*/
/*variables en la ra�z*/
/* ============================================================
   PALETA UNIFICADA DEL SISTEMA
   Antes había 5 bloques :root distintos definidos en momentos
   diferentes, con varios intentos de "azul" y "gris oscuro" que
   no coincidían entre sí (#3498db, #004797, #0056b3, #258cfb...).
   Se consolidan aquí en un solo lugar, con UN azul marino de marca
   (el mismo del navbar, #1c3d5a) y una familia de acentos coherente.
   Los NOMBRES de variable se dejan intactos a propósito: se usan
   en decenas de reglas en este mismo archivo y no hace falta
   tocarlas una por una, solo unificar a qué valor apuntan.
   ============================================================ */
:root {
    /* --- Familia primaria: azul marino de marca (igual al navbar) --- */
    --color-primary: #1c3d5a;
    --color-primary-dark: #142b40;
    --color-data-link: #1c6ea4;      /* azul distinto para IDs/enlaces, más "clicable" que el navy */
    --color-blue-light: #e8f1f8;
    --color-hover-row: #eef4fa;
    --role-color-primary: #1c3d5a;

    /* --- Familia de éxito / verde-teal --- */
    --color-success-strong: #16a085;
    --color-accent-green: #1e7e34;
    --color-green-light: #e8f8f3;
    --role-color-success: #16a085;

    /* --- Familia de advertencia / ámbar --- */
    --color-warning-dark: #e08e0b;
    --color-warning-light: #fdf3e0;
    --color-warning-reactivation: #fdf3e0;
    --color-warning-border: #f5d998;
    --color-accent-yellow: #e0a800;
    --color-orange-light: #fdeee0;
    --color-stock-main: #e08e0b;
    --color-stock-bg: #fdf8f0;
    --color-stock-text: #1c2b3a;

    /* --- Familia de peligro / rojo --- */
    --color-accent-red: #c0392b;
    --role-color-danger: #e74c3c;

    /* --- Acento cyan (usado en encabezados text-info) --- */
    --color-accent-cyan: #0e7c86;

    /* --- Violeta (secciones de formulario tipo "datos fiscales") --- */
    --color-purple-light: #f2ecfb;

    /* --- Neutros --- */
    --color-dark-text: #1c2b3a;
    --color-background-stripe: #f7f9fb;
    --role-color-card-bg: #f8f9fa;

    /* --- Overrides de variables nativas de Bootstrap 5.2+: al cambiar
       esto aquí, TODOS los .btn-primary/.text-info/.bg-success/etc. de
       toda la aplicación heredan la paleta de marca sin tocar cada vista. --- */
    --bs-primary: #1c3d5a;
    --bs-primary-rgb: 28, 61, 90;
    --bs-secondary: #49627e;
    --bs-secondary-rgb: 73, 98, 126;
    --bs-info: #0e7c86;
    --bs-info-rgb: 14, 124, 134;
    --bs-success: #16a085;
    --bs-success-rgb: 22, 160, 133;
    --bs-warning: #e08e0b;
    --bs-warning-rgb: 224, 142, 11;
    --bs-danger: #e74c3c;
    --bs-danger-rgb: 231, 76, 60;
}

/* --- Estilo del Encabezado e Iconos (M�s Vibrante) --- */

.header-icon {
    /* Color primario m�s intenso y brillante */
    color: var(--color-accent-cyan); /* antes #00bcd4, ahora usa el acento cyan unificado */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

/* --- Estilos de Formulario y Etiquetado --- */

/* Estilos de etiquetas de formulario (Consolidado) */
.form-group label, .form-label {
    font-weight: 700; /* M�s peso para mayor legibilidad */
    color: #2c3e50; /* Gris oscuro para contraste */
}

/* Estilo para marcar campos obligatorios */
.required-field-label::after {
    content: " *";
    color: #e74c3c; /* Rojo de Danger m�s vivo */
    font-weight: bold;
}

/* Estilo para el campo de Cantidad (Resalta la Interacci�n en Edit/Create) */
#Cantidad {
    /*border: 2px solid #3498db;*/ /* Azul primario para indicar interacci�n */
    border: 3px solid var(--color-success-strong);
    font-size: 1.25rem;
    font-weight: 600;
    transition: border-color 0.3s;
}

    #Cantidad:focus {
        border-color: var(--color-primary-dark);
        box-shadow: 0 0 0 0.25rem rgba(28, 61, 90, 0.4);
    }

/* Estilo para campos de auditor�a/motivo */
.form-group-motivo textarea,
.motivo-field {
    /*border: 2px solid #f39c12;*/ /* Borde naranja intenso */
    border: 3px solid var(--color-warning-dark);
    box-shadow: 0 0 5px rgba(243, 156, 18, 0.5);
    background-color: #fef7e0; /* Fondo amarillo suave */
    border-radius: 0.5rem;
}

/* --- Resalte de Total a Pagar (KPI en formularios) --- */

#TotalAPagarFormatted {
    background-color: #e8f8f5; /* Fondo m�s claro */
    color: var(--color-success-strong);
    border: 3px solid var(--color-success-strong);
    font-size: 1.8rem;
    font-weight: 900;
    text-align: right;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 2px 10px rgba(26, 188, 156, 0.2);
}

/* --- Contenedores y Tarjetas --- */

.ccontainer {
    padding: 2rem 0;
}

/* Estilo Salida de ProductoLote o Merma */
.header-icon-salida {
    color: #ffc107; /* Amarillo Brillante */
    font-size: 1.5rem;
}

.stock-highlight-card {
    border: 2px solid #004797; /* Borde Azul Medianoche */
    background-color: #e8f0ff; /* Fondo muy claro */
    padding: 20px;
    border-radius: 12px;
}

.output-button-group .btn {
    transition: all 0.2s ease-in-out;
    border-radius: 8px;
}


/* Tarjeta principal con sombra m�s moderna y suave */
.ccard {
    box-shadow: 0 8px 30px rgba(44, 62, 80, 0.1); /* Sombra m�s amplia y sutil */
    border-radius: 1rem;
    background-color: #ffffff;
    padding: 2rem;
    border: 1px solid #ecf0f1; /* Borde muy ligero */
}

/* ----------------------------------- */
/* ESTILOS CUSTOMIZADOS AVANZADOS CANVAS COOPERATIVA/STOCK */
/* ----------------------------------- */

/* --color-stock-* consolidado en el :root único de arriba */

/* Estilo de la Tarjeta de Stock */
.stock-card {
    background-color: var(--color-stock-bg);
    border: 1px solid #f9e3c9;
    border-radius: 1rem; /* Borde m�s redondeado */
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
    overflow: hidden; /* Para el borde superior */
    position: relative;
}

    /* Efecto Hover Avanzado */
    .stock-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }

    /* Borde Superior Destacado */
    .stock-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 8px; /* Grosor de la l�nea */
        background-color: var(--color-stock-main);
    }

/* T�tulo del Producto */
.card-title-product {
    font-weight: 700;
    color: var(--color-stock-text);
    font-size: 1.4rem;
    margin-top: 0.5rem;
}

/* Descripci�n */
.product-description {
    font-size: 0.9rem;
    color: #7f8c8d;
    min-height: 2.5em; /* Asegurar altura consistente */
    margin-bottom: 1rem;
    font-style: italic;
}

/* Cantidad de Stock (Elemento CR�TICO) */
.stock-quantity {
    font-size: 3.5rem; /* Tama�o gigante */
    font-weight: 900;
    color: var(--color-stock-main);
    line-height: 1;
    margin-bottom: 0.5rem;
    text-shadow: 1px 1px 5px rgba(243, 156, 18, 0.4);
}

    .stock-quantity small {
        font-size: 1.5rem !important;
        font-weight: 600;
        color: #27ae60; /* Verde para el Kg */
    }

/* Bot�n de Salida */
.btn-salida {
    background-color: var(--color-stock-main);
    border-color: var(--color-stock-main);
    color: white;
    font-weight: 600;
    margin-top: 1rem;
    transition: background-color 0.2s;
    width: 100%;
}

    .btn-salida:hover {
        background-color: #e67e22; /* Tono m�s oscuro al hacer hover */
        border-color: #e67e22;
        color: white;
    }


/* --- Resalte de Total General (Reporte KPI - NUEVO ESTILO) --- */

.kpi-total-box {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); /* Degradado de impacto */
    color: white !important;
    border: none;
    border-radius: 0.75rem;
    padding: 25px !important;
    box-shadow: 0 10px 20px rgba(46, 204, 113, 0.4);
    animation: pulse 1.5s infinite alternate;
}

    .kpi-total-box h4 {
        color: white !important;
    }

    .kpi-total-box #totalGeneralDisplay {
        font-size: 3rem !important; /* M�s grande */
        font-weight: 900;
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
    }

@keyframes pulse {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.01);
    }
}


/* --- GRID / TABLA DE RESULTADOS --- */
/* Estilos base para la Cooperativa */
.action-card {
    border-radius: 0.75rem;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

    .action-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    }

.total-pending-card {
    background: linear-gradient(45deg, #dc3545, #c82333); /* Degradado rojo */
    color: white;
    border-radius: 0.75rem;
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.4);
}



.btn-action-icon {
    font-size: 1rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    margin: 0 2px;
}


/* Header de la Tabla: M�s oscuro y contrastante */
.table-primary {
    background-color: var(--color-success-strong);
    /*background-color: var(--color-primary-dark) !important;*/
    color: darkgray !important;
    border-color: #34495e !important;
}

    .table-primary th {
        border-color: #49627e !important; /* Separaci�n sutil */
        font-weight: 600;
        letter-spacing: 0.5px;
    }

/* Filas impares con color claro (para mejor legibilidad del stripe) */
/*.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9fb;
}*/

/* Filas al pasar el rat�n: efecto suave */
/*.table-hover > tbody > tr:hover {
    background-color: #e9eff4 !important;
    cursor: pointer;
}*/


/* --- Badges de Estado de Pago (M�s Definidos) --- */

.pagado-badge {
    font-size: 0.75em;
    font-weight: 700;
    padding: .5em .8em;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Pagado: �xito (Verde m�s n�tido) */
.badge-success-custom {
    background-color: #16a085;
    color: white;
}

/* Sin Pagar: Advertencia (Naranja fuerte) */
.badge-warning-custom {
    background-color: #e67e22;
    color: white;
}

/* --- Botones de Estado de Pago (Radio Toggle) --- */

.btn-group-toggle .btn {
    transition: all 0.3s;
    font-weight: 600;
}

.btn-group-toggle .btn-outline-secondary {
    color: #7f8c8d;
    border-color: #bdc3c7;
}

.btn-group-toggle .btn-outline-success {
    color: #2ecc71;
    border-color: #2ecc71;
}

.btn-group-toggle .btn-outline-warning {
    color: #f39c12;
    border-color: #f39c12;
}






/* Estado Activo: Resalta con color primario */
.btn-group-toggle .active {
    background-color: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary-dark) !important;
    box-shadow: 0 4px 8px rgba(28, 61, 90, 0.3);
    z-index: 1;
}

/* --- ESTILOS DE OTROS COMPONENTES (Mantenidos) --- */

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem 2rem;
}

    .details-grid dt {
        font-weight: 700;
        color: #7f8c8d; /* Gris sutil */
        text-transform: uppercase;
        font-size: 0.875rem;
        margin-bottom: 0.25rem;
    }

    .details-grid dd {
        font-weight: 600;
        color: #2c3e50; /* Gris oscuro para valor */
        margin-left: 0;
        font-size: 1rem;
    }
/* ... (Se mantienen otros estilos de stock, delete, etc. del c�digo original) ... */


/* Estilos espec�ficos para la tarjeta de Rol */
.role-card {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .role-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: #e9ecef;
    }

/*-----------------------------------------------------------------------------*/
/*-------------- ESTILOS PARA EL HIST�RICO DE CAMBIOS  ------------------------*/
/* ----------------------------------------------------------------------------*/


/* Contenedor de scroll para el Historial */
.history-scroll-container {
    max-height: 850px; /* Altura m�xima visible */
    overflow-y: auto;
    padding-right: 15px; /* Espacio para la barra de scroll */
}
/* Estilo general para �tems de la bit�cora */
.list-item-audit {
    margin-bottom: 0.75rem;
    border-radius: 0.5rem;
    border-left-width: 5px !important;
    padding: 1rem;
    transition: all 0.3s ease;
}
/* Colores de borde y badge para las acciones */
.list-group-item-action-modificacion {
    border-left-color: var(--color-warning-dark) !important;
}

.action-badge-modificacion {
    background-color: var(--color-warning-dark);
    color: white;
}

.list-group-item-action-alta {
    border-left-color: var(--color-success-strong) !important;
}

.action-badge-alta {
    background-color: var(--color-success-strong);
    color: white;
}

.list-group-item-action-baja {
    border-left-color: #e74c3c !important; /* Rojo */
}

.action-badge-baja {
    background-color: #e74c3c;
    color: white;
}

.action-badge {
    font-size: 0.8rem;
    padding: 0.4em 0.8em;
    border-radius: 0.75rem;
    font-weight: 700;
    float: right; /* Mover el badge a la derecha */
}

.details-grid dt {
    font-weight: 600; /* Headers m�s fuertes */
    color: #555;
}




/* Aseguramos que los 10 puntos quepan horizontalmente y se pueda hacer scroll si es necesario.*/
.timeline-container {
    display: flex;
    justify-content: space-between;
    white-space: nowrap; /* Mantiene todos los puntos en una sola l�nea */
    overflow-x: auto; /* Permite scroll en pantallas peque�as */
    padding-bottom: 15px; /* Espacio para scrollbar */
    padding-left: 0;
    padding-right: 0;
    margin-left: -5px; /* Ajuste visual */
    margin-right: -5px;
}

.timeline-point {
    flex-shrink: 0; /* Previene que los puntos se achiquen */
    width: 10%; /* 100% / 10 puntos = 10% */
    text-align: center;
    padding: 0 5px;
}

/* Definici�n del color "indigo" para simular Bootstrap 5 */
.bg-indigo {
    background-color: #6610f2 !important;
}

/* Estilo para el punto de estado actual (anillo) */
.timeline-active-ring {
    border: 4px solid #6c757d; /* Borde oscuro para resaltar */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transform: scale(1.1); /* Ligeramente m�s grande */
}

/* Estilo del texto en la l�nea de tiempo */
.timeline-text {
    font-size: 0.68rem; /* Tama�o de texto ligeramente mayor para mejor lectura */
    white-space: normal;
    line-height: 1.1;
}












/* ------------------------------------------------------ */
/* ------------------------------------------------------ */
/* -----------------------PRODUCTOS ----------------------*/
/* ------------------------------------------------------ */
/* ------------------------------------------------------ */

/* ------------------------------------------- */
/* ESTILOS ESPEC�FICOS PARA INPUTS DE PRECIO (Copiados de Edit.cshtml) */
/* ------------------------------------------- */
/* Estilo general para resaltar ambos precios */
.price-input-kpi-purchase, .price-input-kpi-sale {
    font-size: 1.5rem; /* M�s grande que el resto del formulario */
    font-weight: 700;
    padding: 1rem 0.75rem;
    transition: all 0.3s;
}

/* Estilo para el Precio de Compra (Verde, asociado a Costo/�xito) */
.price-input-kpi-purchase {
    color: var(--color-success-strong);
    border: 3px solid var(--color-success-strong);
}

    .price-input-kpi-purchase:focus {
        border-color: #16a085;
        box-shadow: 0 0 0 0.25rem rgba(26, 188, 156, 0.4);
    }

/* Estilo para el Precio de Venta (Azul, asociado a Primario/Venta) */
.price-input-kpi-sale {
    color: var(--color-primary);
    border: 3px solid var(--color-primary);
}

    .price-input-kpi-sale:focus {
        border-color: var(--color-primary-dark);
        box-shadow: 0 0 0 0.25rem rgba(28, 61, 90, 0.4);
    }

/* Estilo para el campo de Descripci�n (textarea) */
textarea.form-control {
    min-height: 100px;
}

/* Estilos para el campo de Motivo */
.form-group-motivo .motivo-field {
    border-width: 3px !important;
}

/* Removiendo el estilo #Cantidad que ya no se usa */
#Cantidad {
    border: initial;
    font-size: initial;
    font-weight: initial;
}






/* ------------------------------------------------------ */
/* ------------------------------------------------------ */
/* ----------------------- USUARIOS ----------------------*/
/* ------------------------------------------------------ */
/* ------------------------------------------------------ */



/* Estilos para los campos de contrase�a resaltados */
.password-input-kpi {
    font-size: 1.25rem;
    font-weight: 600;
    padding: 0.75rem;
    border: 2px solid var(--color-primary);
    transition: all 0.3s;
}

    .password-input-kpi:focus {
        border-color: var(--color-primary-dark);
        box-shadow: 0 0 0 0.25rem rgba(28, 61, 90, 0.4);
    }

/* Estilo para los botones de mostrar/ocultar */
.toggle-password {
    cursor: pointer;
    transition: color 0.2s;
    width: 40px;
    text-align: center;
}

    .toggle-password:hover {
        color: var(--color-primary);
    }

/* COLORES PASTEL PARA SEGMENTACI�N */
/* --color-blue-light / --color-green-light / --color-purple-light / --color-orange-light /
   --color-warning-reactivation / --color-warning-border / --color-dark-text
   consolidados en el :root único de arriba */

.bg-section-1 { /* Credenciales y Estatus - Azul/Celeste */
    background-color: var(--color-blue-light);
}

.bg-section-2 { /* Datos Personales y Roles - Verde/Menta */
    background-color: var(--color-green-light);
}

.bg-section-3 { /* Datos Fiscales y Contacto - Violeta/Lila */
    background-color: var(--color-purple-light);
}

.bg-section-4 { /* Observaciones/Antecedentes - Rosa/Durazno */
    background-color: var(--color-orange-light);
}

/* Agrupaci�n de Secciones con Fieldset */
.form-section-group {
    border: 1px solid #dee2e6;
    padding: 20px;
    padding-top: 10px;
    margin-bottom: 40px;
    border-radius: 0.75rem;
}

/* Leyenda de la Secci�n (Legend) */
.section-legend {
    font-size: 1.25rem;
    font-weight: 700;
    width: auto;
    padding: 0 10px;
    margin-bottom: 0;
    color: var(--color-dark-text); /* Texto oscuro para contraste */
    border-bottom: none;
    background-color: inherit;
}

.legend-icon {
    margin-right: 0.5rem;
    color: var(--color-primary);
}

/* Estilo de Inputs Moderno */
.form-control-modern, .select-multiple-styled {
    border-radius: 0.5rem;
    border: 1px solid #ced4da;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .form-control-modern:focus, .select-multiple-styled:focus {
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

.textarea-styled {
    resize: vertical;
}

.input-icon-prepend {
    background-color: #e9ecef;
    border-right: none;
}

/* Highlight para el bloque de Reactivaci�n (Inactivo) */
.reactivation-highlight-block {
    background-color: var(--color-warning-reactivation);
    border: 1px solid var(--color-warning-border);
    border-radius: 0.75rem;
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2);
}

.reactivation-icon {
    font-size: 1.25rem;
    margin-right: 0.5rem;
    color: #856404;
}

/* Estilo para el Estatus (Badge mejorado) */
.status-display {
    display: flex;
    align-items: center;
    padding-top: 0.5rem;
    font-size: 1rem;
    min-height: calc(1.5em + 0.75rem + 2px);
}

.status-badge {
    font-size: 0.95rem;
    padding: 0.5em 1em;
    border-radius: 0.5rem;
    font-weight: bold;
    color: white;
    min-width: 100px; /* Asegura un ancho m�nimo */
    text-align: center;
}
/* Colores Custom para Estatus */
.bg-success-custom {
    background-color: #28a816 !important;
}

.bg-danger-custom {
    background-color: #dc3545 !important;
}

/* Bot�n Guardar Grande */
.btn-save-large {
    padding: 0.75rem 2.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 0.75rem;
}

.btn-icon {
    margin-right: 0.5rem;
}

/* Mensajes de Validaci�n y Labels */
.required-field-label {
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.validation-message {
    font-size: 0.85rem;
    display: block;
    margin-top: 0.25rem;
}


/* ----------------- INDEX --------------------*/
/* ----------------- INDEX --------------------*/
/* ----------------- INDEX --------------------*/

/* Estilo para los badges de roles */
.role-badge {
    font-size: 0.85em;
    padding: 0.4em 0.7em;
    margin-right: 0.3em;
    border-radius: 0.5rem;
    font-weight: 600;
    color: #fff; /* El color del texto es blanco, contrastando con el fondo */
    display: inline-block;
    margin-bottom: 0.2rem;
}

/* Resaltar fila de usuarios inactivos */
.table-danger-light {
    background-color: #fce4e4; /* Rojo muy claro para destacar la fila */
}

/* Estilo para la cabecera de la tabla */
.bg-primary {
    background-color: #007bff !important;
}

/* Estilo para el hover de las filas */
/*.table-hover-custom tbody tr:hover {
    background-color: #e9ecef !important;
    transition: background-color 0.2s ease;
}*/
.table-hover-custom tbody tr:hover {
    background-color: #a7f9e2;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

/*.table-hover-custom tbody tr:hover {
    background-color: #8ef7ae;
    cursor: pointer;
}
*/



/*-------------------------------------------------------------------------------------------------------------------------------------------*/


/* ------------------------------------------------------ */
/* ------------------------------------------------------ */
/* ----------------------- PASSWORD ----------------------*/
/* ------------------------------------------------------ */
/* ------------------------------------------------------ */


/* Estilos para centrar y dar cuerpo a la tarjeta */
.password-card-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alineaci�n arriba para dejar espacio en la pantalla */
    min-height: 80vh;
    padding-top: 5vh; /* Peque�o margen superior */
}

.password-card {
    width: 100%;
    max-width: 500px; /* Un poco m�s ancha */
    border-radius: 1.5rem; /* Borde m�s redondeado */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Sombra m�s pronunciada */
    padding: 2.5rem;
    background-color: white;
}

.header-icon {
    color: var(--color-primary); /* Usamos variable CSS para coherencia */
}

/* Estilo para los botones de mostrar/ocultar */
.toggle-password {
    cursor: pointer;
    transition: color 0.2s;
    width: 40px;
    text-align: center;
}

    .toggle-password:hover {
        color: var(--color-primary);
    }

/* Estilo para el input group */
.input-group-password .form-control-lg {
    border-right: none;
}

/* Estilos para mensajes de TempData */
.message-box {
    animation: fadeInDown 0.5s ease-out;
}

@@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}







/* ------------------------------------------------------ */
/* ------------------------------------------------------ */
/* ----------------------- ROLES -- ----------------------*/
/* ------------------------------------------------------ */
/* ------------------------------------------------------ */



/* Estilos Customizados Avanzados */
/* --role-color-* consolidado en el :root único de arriba */

.header-icon-main {
    color: var(--role-color-primary);
}

/* Estilo de la Tarjeta de Rol */
.role-card {
    background-color: var(--role-color-card-bg);
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    padding: 1.5rem !important; /* M�s padding */
    position: relative;
}

    /* Efecto Hover Avanzado */
    .role-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
        border-color: var(--role-color-primary);
    }

/* T�tulo del Rol */
.role-title {
    font-weight: 700;
    color: var(--color-dark-text, #34495e);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
}

/* Icono del Rol */
.role-icon {
    color: var(--role-color-success);
    font-size: 1.8rem;
    margin-right: 1rem;
}

/* Contenedor de Acciones (Flotante) */
.card-actions {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 15px;
    right: 15px;
}

/* Mostrar Acciones al hacer hover */
.role-card:hover .card-actions {
    display: block;
}

/* Bot�n flotante de Creaci�n */
.create-button-fixed {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

/* Alerta cuando no hay roles */
.empty-list-alert {
    padding: 2rem;
    border-radius: 0.75rem;
    border-left: 5px solid var(--role-color-primary);
}














/* ------------------------------------------------------ */
/* ------------------------------------------------------ */
/* ----------------------- BITACORA EVENTOS---------------*/
/* ------------------------------------------------------ */
/* ------------------------------------------------------ */




/* ------------------------------------------- */
/* PALETA DE COLORES */
/* ------------------------------------------- */
/* --color-primary-dark / --color-accent-green / --color-accent-yellow / --color-accent-red /
   --color-accent-cyan / --color-background-stripe / --color-hover-row / --color-data-link
   consolidados en el :root único de arriba */

/* Tipograf�a e �conos */
.header-icon {
    color: var(--color-primary-dark);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

.text-vibrant-blue {
    color: var(--color-primary-dark);
}

/* ------------------------------------------- */
/* TARJETA Y TABLA */
/* ------------------------------------------- */
.card-bitacora {
    border-radius: 20px; /* Bordes un poco m�s suaves */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    border: none;
}

/* T�tulo principal m�s impactante */
.page-title {
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: 2.2rem;
}

.table-bitacora thead th {
    background-color: var(--color-primary-dark);
    color: white;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    padding: 14px 10px;
    border-bottom: none;
    user-select: none; /* Evita selecci�n de texto en el encabezado */
}

.table-bitacora tbody tr {
    transition: all 0.25s ease-in-out;
    border-bottom: 1px solid #eee;
}

    .table-bitacora tbody tr:nth-child(odd) {
        background-color: var(--color-background-stripe);
    }

    .table-bitacora tbody tr:hover {
        background-color: var(--color-hover-row);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    }

/* Estilo para los IDs Afectados como enlace sutil */
.afectado-id {
    color: var(--color-data-link);
    font-weight: 600;
    cursor: default; /* Si no es clickable, mantener cursor por defecto */
}


/* ------------------------------------------- */
/* BADGES DE ACCI�N */
/* ------------------------------------------- */
.badge-accion {
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    text-transform: uppercase;
    min-width: 90px;
    text-align: center;
    transition: transform 0.1s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra sutil */
}

    .badge-accion:hover {
        transform: scale(1.05);
        opacity: 0.9;
    }

.badge-creacion {
    background-color: var(--color-accent-green);
    color: white;
}

.badge-actualizacion {
    background-color: var(--color-accent-yellow);
    color: #333;
}

.badge-baja {
    background-color: var(--color-accent-red);
    color: white;
    font-size: 0.7rem;
}

.badge-login, .badge-logout {
    background-color: var(--color-accent-cyan);
    color: white;
}

.badge-default {
    background-color: #adb5bd;
    color: white;
}



.color-rol-1 {
    background-color: blue;
}

.color-rol-2 {
    background-color: purple;
}


.color-rol-3 {
    background-color: green;
}


.color-rol-4 {
    background-color: orange;
}

.color-rol-5 {
    background-color: red;
}

.color-rol-6 {
    background-color: maroon;
}
/* ------------------------------------------- */
/* B�SQUEDA y DataTables UI */
/* ------------------------------------------- */
/* Estilo para el campo de b�squeda de DataTables (por defecto) */
div.dataTables_wrapper div.dataTables_filter input {
    border-radius: 25px !important;
    border: 2px solid #ced4da !important;
    padding: 12px 20px !important;
    transition: all 0.3s;
    width: 300px !important; /* Ancho fijo para control */
    margin-left: 0.5em;
}

div.dataTables_wrapper div.dataTables_filter {
    text-align: right;
}

    div.dataTables_wrapper div.dataTables_filter label {
        color: var(--color-primary-dark);
        font-weight: 600;
    }

/* Estilo de paginaci�n */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.5em 1em;
    margin-left: 2px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    transition: background-color 0.2s, color 0.2s;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background-color: var(--color-primary-dark);
        color: white !important;
        border-color: var(--color-primary-dark);
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background-color: var(--color-primary-dark) !important;
        color: white !important;
        border-color: var(--color-primary-dark);
    }

/* Ocultamos el campo de b�squeda que estaba duplicado */
#clientSearch {
    display: none;
}

#noResultsMessage {
    display: none !important;
}
/* DataTables maneja esto */

/* Estilo para la columna de Fecha */
.col-fecha {
    width: 15%; /* Ancho fijo y compacto para la fecha/hora sin segundos */
    white-space: nowrap; /* Evita que la fecha se divida en varias l�neas */
    font-size: 0.85rem; /* Letra un poco m�s peque�a en la celda de fecha/hora */
}








/***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/
/***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/
/***/ /***/ /***/ /***/ /***/ /***/ /***                     APARIENCIA DE VISUALZIACI�N DE INICIO EN PLANTA       ***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/
/***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/
/***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/

/* ----------------------------------- */
/* ESTILOS AVANZADOS PARA EL MEN� DASHBOARD */
/* ----------------------------------- */

.pro-menu-card {
    /* Base: Utiliza el estilo de tarjeta con borde redondeado y padding */
    border-radius: 1.25rem; /* Aumentamos el redondeo */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Curva de transici�n m�s suave */
    border: 1px solid #e0e0e0;
    position: relative;
    overflow: hidden; /* Para el fondo del hover */
    background-color: white;
}

    /* Efecto Hover: Sombra y Elevaci�n Profesional */
    .pro-menu-card:hover {
        transform: translateY(-8px); /* M�s elevaci�n */
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(28, 61, 90, 0.12); /* Sombra m�s pronunciada y un sutil borde de color */
        border-color: #c4e3f8; /* Borde m�s claro al hacer hover */
    }

    /* Efecto de 'Globo' o Iluminaci�n Interna al hacer hover */
    .pro-menu-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at 50% 0%, rgba(28, 61, 90, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .pro-menu-card:hover::before {
        opacity: 1;
    }

/* Icono: Dise�o m�s definido */
.pro-menu-icon {
    font-size: 3.5rem; /* Icono m�s grande */
    margin-bottom: 0.5rem;
    display: inline-block;
    padding: 15px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s;
}

.pro-menu-card:hover .pro-menu-icon {
    transform: scale(1.05) rotate(-3deg); /* Micro-interacci�n: Peque�a rotaci�n y escala */
}

/* T�tulo */
.pro-menu-title {
    font-weight: 800; /* M�s peso */
    font-size: 1.6rem;
    color: #1c3d5a; /* Azul oscuro corporativo */
}

/* Descripci�n */
.pro-menu-description {
    font-size: 1rem;
    color: #6c757d;
    min-height: 40px;
}



/***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/
/***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/
/***/ /***/ /***/ /***/ /***/ /***/ /***                     APARIENCIA DE VISUALZIACI�N DE LOTES EN PLANTA       ***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/
/***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/
/***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/

/* ----------------------------------- */
/* ESTILOS AVANZADOS PARA LA VISTA LOTES */
/* ----------------------------------- */

/* Header de Tabla (Alineado al estilo Bitacora/Pro) */
.lotes-table-header {
    /* Utiliza el azul profundo de Bitacora */
    background-color: var(--color-primary-dark, #004797) !important;
    color: white;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    border-bottom: none;
    user-select: none;
}

/* Estilo para celda de Total a Pago (KPI en tabla) */
.text-kpi-success {
    color: var(--color-success-strong); /* Verde fuerte */
    font-weight: 700;
    font-size: 1.1rem;
    text-align: right;
    white-space: nowrap; /* Evita que el monto se divida */
}

/* Badge de Estatus para Lotes Pendientes (Entregado) */
.badge-lote-pending {
    background-color: #27ae60; /* Verde de �xito ligeramente m�s oscuro */
    color: white;
    font-weight: 700;
    padding: 0.5em 0.75em;
    border-radius: 0.5rem;
    min-width: 90px;
    box-shadow: 0 2px 4px rgba(39, 174, 96, 0.3);
    transition: transform 0.2s;
}

    .badge-lote-pending:hover {
        transform: scale(1.05); /* Efecto de burbuja al hacer hover */
    }

/* Bot�n de Inventario General (Mejora visual) */
.btn-inventario-general {
    background-color: var(--color-accent-cyan);
    border-color: var(--color-accent-cyan);
    transition: all 0.2s;
}

    .btn-inventario-general:hover {
        background-color: #00a8b8;
        border-color: #00a8b8;
    }




/***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/
/***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/
/***/ /***/ /***/ /***/ /***/ /***/ /***                     APARIENCIA DE VISUALZIACI�N DE LOTES EN PLANTA       ***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/
/***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/
/***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/ /***/

/* ----------------------------------- */
/* ESTILOS AVANZADOS PARA LA VISTA LOTES */
/* ----------------------------------- */


/* ============================================================ */
/* MÓDULO DE PLANTA: badges de etapa + matriz de permisos       */
/* (mismo lenguaje visual que .pagado-badge: pill, sombra suave) */
/* ============================================================ */
.etapa-badge {
    display: inline-block;
    font-size: 0.75em;
    font-weight: 700;
    padding: .4em .9em;
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    color: #fff;
}

.etapa-1 { background-color: var(--color-warning-dark); }   /* Lote Recibido: naranja, requiere acción */
.etapa-2 { background-color: #8e44ad; }                       /* Stand By: violeta */
.etapa-3 { background-color: var(--color-success-strong); }  /* Ingresado: verde */
.etapa-4 { background-color: var(--color-dark-text); }        /* En Proceso: gris oscuro */

/* Matriz de permisos: tabla compacta, encabezados de módulo fijos al hacer scroll horizontal */
.tabla-permisos th {
    white-space: nowrap;
    background-color: #f8f9fa;
}

.tabla-permisos td.col-modulo {
    font-weight: 700;
    white-space: nowrap;
}

.tabla-permisos .form-check {
    display: flex;
    justify-content: center;
}

/* Responsivo: en pantallas angostas la matriz se desplaza horizontalmente en vez de romperse */
.tabla-permisos-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}