/*
 * ═══════════════════════════════════════════════════════════════════════════
 *  unlimioo-styles.css  —  Mejoras visuales Metronic 8 + Bootstrap 5
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  ACTIVAR / DESACTIVAR
 *  ─────────────────────
 *  En appsettings.json: "UnlimiooStyles": { "Enabled": true }
 *  En _Layout.cshtml se incluye condicionalmente este archivo.
 *  Para desactivar globalmente: cambiar Enabled a false o quitar el <link>.
 *
 *  PORTABILIDAD A OTRO PROYECTO
 *  ─────────────────────────────
 *  Los selectores genéricos (DataTables, Bootstrap, Metronic) funcionan tal
 *  cual en cualquier proyecto con el mismo stack.
 *
 *  Los selectores específicos de SodecaPIM están agrupados en la sección
 *  «CONFIGURACIÓN DE SELECTORES» al inicio de cada bloque y marcados con
 *  el comentario «[PROYECTO]». Para adaptar a otro proyecto, busca y
 *  reemplaza únicamente esas cadenas:
 *
 *    #pimFormFields          → ID del contenedor flex de campos del form
 *    #pimFormGenericFields   → ID del segundo contenedor (metadata, etc.)
 *    .pim-chart-container    → clase del div que envuelve cada canvas
 *    .pim-charts-wrapper     → clase del wrapper exterior de charts
 *    .pim-*                  → clases de componentes PIM (Data Manager, Tags…)
 *    #kt_app_toolbar         → ID del toolbar Metronic superior
 *
 *  COLOR PRIMARIO METRONIC
 *  ────────────────────────
 *  Si tu tema usa un primary diferente, sustituye en todo el archivo:
 *    #009ef7  →  tu color hex
 *    0, 158, 247  →  tu color en RGB
 *
 * ═══════════════════════════════════════════════════════════════════════════
 */


/* ══════════════════════════════════════════════════════════════════════════
 * 1. CONDENSACIÓN DE ESPACIO  [GENÉRICO + PROYECTO]
 *    Reduce paddings del toolbar y márgenes de elementos de página para
 *    una UI más compacta y aprovechada.
 * ══════════════════════════════════════════════════════════════════════════ */

/* [PROYECTO] Toolbar Metronic superior — reducir padding vertical */
#kt_app_toolbar.app-toolbar {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}

/* [GENÉRICO] Bloque título + subtítulo de las vistas Index */
.container-fluid.no-margin-padding .mb-3.no-margin-padding {
    margin-bottom: 0.25rem !important;
}

.container-fluid.no-margin-padding p.text-gray-500.pt-1 {
    padding-top: 0.1rem !important;
    margin-bottom: 0 !important;
    font-size: 0.8rem;
    line-height: 1.3;
}

/* [GENÉRICO] DataTable: densidad de filas */
table.table.dataTable > tbody > tr > td,
table.table.dataTable > tbody > tr > th {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}

/* [GENÉRICO] DataTable: densidad de cabecera/pie */
table.table.dataTable > thead > tr > th,
table.table.dataTable > tfoot > tr > th {
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
}

/* [PROYECTO] Form groups: reducir margen de 1rem a 0.65rem */
#pimFormFields div.form-group,
#pimFormGenericFields div.form-group {
    margin: 0.65rem !important;
}

/* [PROYECTO] Form columns: 5 por fila (19%) en lugar de 3 (30%) */
#pimFormFields div.form-group:not(.d-block) {
    flex: 1 1 calc(19% - 1rem) !important;
    min-width: 19% !important;
    max-width: 19% !important;
}

#pimFormGenericFields div.form-group:not(.d-block) {
    flex: 1 1 calc(19% - 1rem) !important;
    min-width: 19% !important;
    max-width: 19% !important;
}

/* [PROYECTO] Alineación flex-start para que cada campo tenga la altura de su contenido */
#pimFormFields,
#pimFormGenericFields {
    align-items: flex-start !important;
}

#pimFormFields div.form-group:not(.d-block),
#pimFormGenericFields div.form-group:not(.d-block) {
    display: flex;
    flex-direction: column !important;
}

#pimFormFields div.form-group:not(.d-block) > span.pim-description-field + *,
#pimFormGenericFields div.form-group:not(.d-block) > span.pim-description-field + * {
    margin-top: 0.25rem !important;
}

/* [PROYECTO] Reducir el mb-5/mt-2 de wrappers de radio buttons */
#pimFormFields div.form-group > div[class*="mb-"],
#pimFormFields div.form-group > div[class*="mt-"],
#pimFormGenericFields div.form-group > div[class*="mb-"],
#pimFormGenericFields div.form-group > div[class*="mt-"] {
    margin-bottom: 0.15rem !important;
    margin-top: 0 !important;
}

/* [GENÉRICO] Botón Actions de cabecera de Index — aspecto Metronic btn-light-primary */
.general-action-button .btn.btn-secondary.dropdown-toggle {
    background-color: rgba(0, 158, 247, 0.1) !important;
    border-color: transparent !important;
    color: #009ef7 !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    box-shadow: none !important;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.general-action-button .btn.btn-secondary.dropdown-toggle::before {
    font-family: "bootstrap-icons";
    content: "\F3E4"; /* bi-gear */
    font-size: 0.9rem;
    font-weight: 400;
    margin-right: 0.4rem;
    vertical-align: -0.1em;
    line-height: 1;
}

.general-action-button .btn.btn-secondary.dropdown-toggle:hover,
.general-action-button .show > .btn.btn-secondary.dropdown-toggle {
    background-color: rgba(0, 158, 247, 0.18) !important;
    border-color: transparent !important;
    color: #009ef7 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 2. DATATABLES  [GENÉRICO]
 *    Color primario Metronic en filas seleccionadas, cabeceras, hover,
 *    foco en search/length, paginación activa, texto informativo.
 * ══════════════════════════════════════════════════════════════════════════ */

/* Color de fila seleccionada → azul Metronic */
:root {
    --dt-row-selected: 0, 158, 247;
    --dt-row-selected-text: 255, 255, 255;
}

/* Cabeceras y pies de tabla */
table.dataTable > thead > tr > th,
table.dataTable > tfoot > tr > th {
    background-color: var(--bs-gray-100);
    color: var(--bs-gray-600);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--bs-gray-200) !important;
}

/* Hover de fila (sin afectar filas seleccionadas) */
table.table.dataTable > tbody > tr:not(.selected):hover > * {
    box-shadow: inset 0 0 0 9999px rgba(0, 158, 247, 0.04) !important;
}

/* Input de búsqueda: foco Metronic */
div.dt-container div.dt-search input:focus {
    border-color: #009ef7;
    box-shadow: 0 0 0 0.2rem rgba(0, 158, 247, 0.15);
    outline: 0;
}

/* Select de longitud: foco Metronic */
div.dt-container div.dt-length select:focus {
    border-color: #009ef7;
    box-shadow: 0 0 0 0.2rem rgba(0, 158, 247, 0.15);
    outline: 0;
}

/* Paginación: botón de página activa */
div.dt-container div.dt-paging .pagination .page-item.active .page-link {
    background-color: #009ef7;
    border-color: #009ef7;
    color: #fff;
}

div.dt-container div.dt-paging .pagination .page-link:not([class*="active"]):hover {
    color: #009ef7;
}

/* Texto informativo de paginación */
div.dt-container div.dt-info {
    font-size: 0.82rem;
    color: var(--bs-gray-500);
    padding-top: 0.5rem;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 3. DATATABLES CONTROLS  [GENÉRICO]
 *    Estilos Metronic para la barra de búsqueda, selector de longitud,
 *    paginación y SearchBuilder (DataTables 2.x).
 * ══════════════════════════════════════════════════════════════════════════ */

/* Búsqueda — label + input */
div.dt-container div.dt-search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

div.dt-container div.dt-search label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-gray-500);
    margin-bottom: 0;
    white-space: nowrap;
}

div.dt-container div.dt-search input {
    font-size: 0.82rem;
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.375rem;
    padding: 0.3rem 0.65rem;
    color: var(--bs-gray-700);
    background-color: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    height: auto;
}

div.dt-container div.dt-search input:focus {
    border-color: #009ef7;
    box-shadow: 0 0 0 0.2rem rgba(0, 158, 247, 0.15);
    outline: 0;
}

/* Longitud de página */
div.dt-container div.dt-length {
    display: flex;
    align-items: center;
}

div.dt-container div.dt-length label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--bs-gray-600);
    margin-bottom: 0;
    white-space: nowrap;
}

div.dt-container div.dt-length select {
    font-size: 0.82rem;
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.375rem;
    padding: 0.25rem 1.8rem 0.25rem 0.55rem;
    color: var(--bs-gray-700);
    background-color: #fff;
    min-width: 55px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

div.dt-container div.dt-length select:focus {
    border-color: #009ef7;
    box-shadow: 0 0 0 0.2rem rgba(0, 158, 247, 0.15);
    outline: 0;
}

/* Paginación */
div.dt-container div.dt-paging .pagination {
    margin-bottom: 0;
    flex-wrap: wrap;
    gap: 0.2rem;
}

div.dt-container div.dt-paging .page-link {
    font-size: 0.8rem;
    border-radius: 0.35rem !important;
    padding: 0.25rem 0.55rem;
    border-color: var(--bs-gray-200);
    color: var(--bs-gray-600);
    background-color: var(--bs-gray-100);
    min-width: 2rem;
    text-align: center;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

div.dt-container div.dt-paging .page-link:hover {
    color: #009ef7;
    background-color: rgba(0, 158, 247, 0.08);
    border-color: rgba(0, 158, 247, 0.25);
}

div.dt-container div.dt-paging .page-item.disabled .page-link {
    color: var(--bs-gray-400);
    background-color: var(--bs-gray-100);
    border-color: var(--bs-gray-200);
    opacity: 0.55;
}

/* SearchBuilder: botón "Añadir condición" */
div.dtsb-searchBuilder button.dtsb-add {
    background-color: rgba(0, 158, 247, 0.08) !important;
    color: #009ef7 !important;
    border: 1px solid rgba(0, 158, 247, 0.22) !important;
    font-size: 0.82rem;
    font-weight: 500;
    border-radius: 0.375rem;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

div.dtsb-searchBuilder button.dtsb-add:hover {
    background-color: rgba(0, 158, 247, 0.18) !important;
}

/* SearchBuilder: criterios — selects e inputs */
div.dtsb-criteria select,
div.dtsb-criteria input.dtsb-value {
    font-size: 0.82rem;
    border: 1px solid var(--bs-gray-300) !important;
    border-radius: 0.375rem !important;
    padding: 0.3rem 0.65rem;
    color: var(--bs-gray-700);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

div.dtsb-criteria select {
    padding-right: 1.8rem;
}

div.dtsb-criteria select:focus,
div.dtsb-criteria input.dtsb-value:focus {
    border-color: #009ef7 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 158, 247, 0.15);
    outline: 0;
}

/* SearchBuilder: botón eliminar condición */
div.dtsb-criteria button.dtsb-delete {
    background-color: var(--bs-gray-100) !important;
    color: var(--bs-gray-500) !important;
    border: 1px solid var(--bs-gray-200) !important;
    border-radius: 0.35rem;
    padding: 0.25rem 0.55rem;
    font-size: 0.82rem;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

div.dtsb-criteria button.dtsb-delete:hover {
    background-color: rgba(220, 53, 69, 0.08) !important;
    color: #dc3545 !important;
    border-color: rgba(220, 53, 69, 0.2) !important;
}

/* SearchBuilder: espacio inferior para no solapar la tabla */
div.dt-container div.dtsb-searchBuilder {
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.25rem;
}

/* Sin scroll horizontal: permite que los dropdowns de acciones se superpongan sin ser recortados */
div.table-responsive {
    overflow: visible;
}

/* Dropdown de fila: z-index para superponerse a filas siguientes y capas del tema */
table.dataTable > tbody > tr > td .dropdown-menu {
    z-index: 1055;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 4. DROPDOWN ACCIONES  [GENÉRICO]
 *    Dropdowns de fila (DataTable) y de cabecera (card-toolbar).
 * ══════════════════════════════════════════════════════════════════════════ */

/* Trigger button: de nav-link plano a btn Metronic light */
table.dataTable tr > td.pim-item-actions .dropdown-toggle {
    padding: 0.3rem 0.65rem !important;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--bs-gray-700);
    background-color: var(--bs-gray-100);
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.475rem;
    text-decoration: none !important;
    cursor: pointer;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

table.dataTable tr > td.pim-item-actions .dropdown-toggle:hover,
table.dataTable tr > td.pim-item-actions .show > .dropdown-toggle {
    color: #009ef7;
    background-color: rgba(0, 158, 247, 0.08);
    border-color: rgba(0, 158, 247, 0.3);
}

/* Menú dropdown de fila */
table.dataTable tr > td.pim-item-actions .dropdown-menu {
    box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
    border-radius: 0.475rem;
    border: 1px solid var(--bs-gray-200);
    padding: 0.5rem 0;
    min-width: 160px;
}

/* Items de dropdown de fila */
table.dataTable tr > td.pim-item-actions .dropdown-item {
    padding: 0.45rem 1rem;
    font-size: 0.875rem;
    vertical-align: middle;
}

table.dataTable tr > td.pim-item-actions .dropdown-item .bi {
    font-size: 1rem;
    vertical-align: middle;
}

table.dataTable tr > td.pim-item-actions .dropdown-item:not(.text-danger):hover {
    background-color: rgba(0, 158, 247, 0.07);
    color: #009ef7;
}

table.dataTable tr > td.pim-item-actions .dropdown-item.text-danger:hover {
    background-color: rgba(220, 53, 69, 0.07);
}

/* Menú dropdown de cabecera (card-toolbar) */
.card-toolbar .dropdown-menu,
.general-action-button .dropdown-menu {
    box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
    border-radius: 0.475rem;
    border: 1px solid var(--bs-gray-200);
    padding: 0.5rem 0;
}

.card-toolbar .dropdown-item,
.general-action-button .dropdown-item {
    padding: 0.45rem 1rem;
    font-size: 0.875rem;
}

.card-toolbar .dropdown-item:not(.text-danger):hover,
.general-action-button .dropdown-item:not(.text-danger):hover {
    background-color: rgba(0, 158, 247, 0.07);
}

.card-toolbar .dropdown-item.text-danger:hover,
.general-action-button .dropdown-item.text-danger:hover {
    background-color: rgba(220, 53, 69, 0.07);
}

/* Icono en items de dropdown */
.pim-menu-icon {
    font-size: 1rem;
    vertical-align: middle;
    margin-right: 0.35rem;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 5. CAMPOS DE FORMULARIO  [PROYECTO]
 *    Labels, inputs, selects, checkboxes, tooltips de descripción.
 *    Selectores: #pimFormFields / #pimFormGenericFields
 * ══════════════════════════════════════════════════════════════════════════ */

/* Posición relativa del form-group (necesario para tooltip absoluto) */
#pimFormFields div.form-group,
#pimFormGenericFields div.form-group {
    position: relative;
}

/* Etiquetas */
#pimFormFields .form-label,
#pimFormGenericFields .form-label {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-gray-600);
    margin-bottom: 0.15rem;
    cursor: default;
    position: relative;
    display: inline-block;
}

/* Tooltip de descripción — oculto por defecto, visible al hover del label */
#pimFormFields div.form-group span.pim-description-field,
#pimFormGenericFields div.form-group span.pim-description-field {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    margin: 0;
    padding: 0;
    font-size: 0;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

#pimFormFields .form-label:hover + span.pim-description-field,
#pimFormGenericFields .form-label:hover + span.pim-description-field {
    visibility: visible;
    opacity: 1;
    max-height: 10rem;
    overflow: visible;
    pointer-events: auto;
    font-size: 0.78rem;
    position: absolute;
    top: 1.85rem; /* padding-top(0.6rem) + altura label(~1.1rem) + margen */
    left: 0;
    z-index: 300;
    background-color: #fff;
    border: 1px solid rgba(0, 158, 247, 0.3);
    border-radius: 0.375rem;
    padding: 0.35rem 0.6rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    color: var(--bs-gray-600);
    font-style: italic;
    line-height: 1.4;
    white-space: normal;
    min-width: 180px;
    max-width: 280px;
    margin: 0;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* Inputs y selects */
#pimFormFields .form-control,
#pimFormGenericFields .form-control {
    font-size: 0.82rem;
}

#pimFormFields .form-select,
#pimFormGenericFields .form-select {
    font-size: 0.82rem;
}

/* Foco en inputs y selects */
#pimFormFields .form-control:focus,
#pimFormFields .form-select:focus,
#pimFormGenericFields .form-control:focus,
#pimFormGenericFields .form-select:focus {
    border-color: #009ef7;
    box-shadow: 0 0 0 0.2rem rgba(0, 158, 247, 0.15);
}

/* Mensajes de error de validación */
#pimFormFields span.text-danger,
#pimFormGenericFields span.text-danger {
    display: block;
    font-size: 0.78rem;
    margin-top: 0.2rem;
}

/* Checkboxes y radio buttons */
#pimFormFields .form-check-input,
#pimFormGenericFields .form-check-input {
    width: 1.1em;
    height: 1.1em;
    border-color: var(--bs-gray-400);
    background-color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#pimFormFields .form-check-input:checked,
#pimFormGenericFields .form-check-input:checked {
    background-color: #009ef7 !important;
    border-color: #009ef7 !important;
}

#pimFormFields .form-check-input:focus,
#pimFormGenericFields .form-check-input:focus {
    border-color: #009ef7;
    box-shadow: 0 0 0 0.2rem rgba(0, 158, 247, 0.15);
}

#pimFormFields .form-check-label,
#pimFormGenericFields .form-check-label {
    font-size: 0.82rem;
    color: var(--bs-gray-700);
    cursor: pointer;
    line-height: 1.4;
}

#pimFormFields .form-check,
#pimFormGenericFields .form-check {
    margin-bottom: 0.2rem;
    padding-left: 1.6em;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 6. FORM LAYOUT: GAP SIMÉTRICO + SELECT2  [PROYECTO]
 *    Elimina márgenes individuales; usa column-gap en el contenedor flex.
 *    Recalcula ancho de columna para 5 cols con 4 gaps de 1rem.
 * ══════════════════════════════════════════════════════════════════════════ */

/* Eliminar margen horizontal individual */
#pimFormFields div.form-group,
#pimFormGenericFields div.form-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Gap uniforme en el contenedor flex */
#pimFormFields,
#pimFormGenericFields {
    column-gap: 1rem !important;
}

/* Recalcular ancho: 5 cols + 4 gaps de 1rem → col = (100% - 4rem) / 5 = 20% - 0.8rem */
#pimFormFields div.form-group:not(.d-block),
#pimFormGenericFields div.form-group:not(.d-block) {
    flex: 1 1 calc(20% - 0.8rem) !important;
    min-width: calc(20% - 0.8rem) !important;
    max-width: calc(20% - 0.8rem) !important;
}

/* Select2: mismo margin-top que el resto de controles */
#pimFormFields div.form-group .select2-container,
#pimFormGenericFields div.form-group .select2-container {
    margin-top: 0.25rem !important;
    width: 100% !important;
}

#pimFormFields .select2-selection,
#pimFormGenericFields .select2-selection {
    font-size: 0.82rem !important;
    min-height: unset;
}

#pimFormFields .select2-selection--single,
#pimFormGenericFields .select2-selection--single {
    border-color: var(--bs-gray-300) !important;
    border-radius: 0.375rem !important;
    height: auto !important;
    padding: 0.375rem 0.75rem !important;
    line-height: 1.5 !important;
}

#pimFormFields .select2-selection--single .select2-selection__rendered,
#pimFormGenericFields .select2-selection--single .select2-selection__rendered {
    padding-left: 0 !important;
    padding-right: 1.5rem !important;
    line-height: 1.5 !important;
    color: var(--bs-gray-700);
    font-size: 0.82rem;
}

#pimFormFields .select2-selection--single .select2-selection__arrow,
#pimFormGenericFields .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 0.5rem !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 7. FORM GROUP CARDS  [PROYECTO]
 *    Borde 1px sutil por campo + padding uniforme + row-gap en contenedor.
 * ══════════════════════════════════════════════════════════════════════════ */

#pimFormFields div.form-group,
#pimFormGenericFields div.form-group {
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 0.475rem;
    padding: 0.6rem 0.75rem !important;
    background-color: #fff;
    box-sizing: border-box;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#pimFormFields,
#pimFormGenericFields {
    row-gap: 0.55rem !important;
}

/* Suprimir <br> como flex items (desplazan el siguiente campo) */
#pimFormFields > br,
#pimFormGenericFields > br {
    display: none !important;
}

/* Tarjeta sutil en acordeones */
.accordion-body > .container-fluid > div.form-group {
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 0.475rem;
    padding: 0.6rem 0.75rem !important;
    background-color: #fff;
    box-sizing: border-box;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.accordion-body > .container-fluid {
    row-gap: 0.55rem !important;
}

.accordion-body > .container-fluid .form-label:hover + span.pim-description-field {
    top: 1.85rem;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 8. COHERENCIA GLOBAL DE FORMULARIOS  [PROYECTO]
 *    form-group.d-block, checkboxes, pimFormGenericFields read-only,
 *    tarjeta de Tags, botones guardar/acción/danger.
 * ══════════════════════════════════════════════════════════════════════════ */

/* form-group.d-block: flex-column para coherencia */
#pimFormFields div.form-group.d-block,
#pimFormGenericFields div.form-group.d-block {
    display: flex;
    flex-direction: column !important;
}

#pimFormFields div.form-group.d-block > .form-control,
#pimFormFields div.form-group.d-block > .form-select,
#pimFormGenericFields div.form-group.d-block > .form-control,
#pimFormGenericFields div.form-group.d-block > .form-select {
    width: 100% !important;
    margin-top: 0.25rem !important;
}

/* Checkboxes: margin-top consistente */
#pimFormFields div.form-group > span.pim-description-field + .form-check,
#pimFormFields div.form-group > span.pim-description-field + div > .form-check,
#pimFormGenericFields div.form-group > span.pim-description-field + .form-check,
#pimFormGenericFields div.form-group > span.pim-description-field + div > .form-check {
    margin-top: 0.25rem !important;
}

#pimFormFields div.form-group:not(.d-block) > span.pim-description-field + .form-check,
#pimFormGenericFields div.form-group:not(.d-block) > span.pim-description-field + .form-check,
#pimFormFields div.form-group:not(.d-block) > span.pim-description-field + div:not(.input-group):not(.pim-data-related-manager-associated-objects-container-div):not(.pim-data-related-manager-div-container-for-image-modal),
#pimFormGenericFields div.form-group:not(.d-block) > span.pim-description-field + div:not(.input-group):not(.pim-data-related-manager-associated-objects-container-div):not(.pim-data-related-manager-div-container-for-image-modal) {
    margin-top: 0.25rem !important;
}

/* pimFormGenericFields: spans read-only */
#pimFormGenericFields .form-group > br {
    display: none !important;
}

#pimFormGenericFields .form-group > span:not(.pim-description-field):not(.text-danger) {
    font-size: 0.88rem;
    color: var(--bs-gray-700);
    font-weight: 500;
    margin-top: 0.25rem !important;
    display: block;
}

/* Tarjeta de Tags (card.card-flush) */
#pimFormFields > div.form-group.card.card-flush,
#pimFormGenericFields > div.form-group.card.card-flush {
    border: 1px solid rgba(0, 158, 247, 0.15) !important;
    border-radius: 0.475rem !important;
    background-color: #fff;
}

#pimFormFields > div.form-group.card.card-flush > label.form-label,
#pimFormGenericFields > div.form-group.card.card-flush > label.form-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-gray-500);
    margin-bottom: 0.35rem;
}

/* Botón Guardar */
button.btn.btn-lg.btn-primary.w-100 {
    font-size: 0.95rem !important;
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    border-radius: 0.475rem !important;
    box-shadow: 0 2px 6px rgba(0, 158, 247, 0.3) !important;
    margin-top: 1rem;
    margin-bottom: 0.75rem !important;
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

button.btn.btn-lg.btn-primary.w-100:hover {
    box-shadow: 0 4px 10px rgba(0, 158, 247, 0.4) !important;
}

/* Botones acción (Back / Edit / Create / Check) */
a.action-link-button.btn,
a.action-link-button.btn.btn-secondary {
    background-color: var(--bs-gray-100) !important;
    color: var(--bs-gray-700) !important;
    border-color: var(--bs-gray-200) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    border-radius: 0.375rem !important;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out !important;
}

a.action-link-button.btn:hover,
a.action-link-button.btn.btn-secondary:hover {
    background-color: var(--bs-gray-200) !important;
    color: var(--bs-gray-800) !important;
}

a.action-link-button.btn i {
    margin-right: 0.3rem;
    font-size: 0.85rem;
}

#checkDataButton.btn.btn-light-primary {
    font-size: 0.82rem;
    font-weight: 500;
}

/* Botones peligrosos (btn-danger) */
.btn.btn-danger {
    border-radius: 0.375rem;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(220, 53, 69, 0.3);
    transition: box-shadow 0.15s ease-in-out;
}

.btn.btn-danger:hover {
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
}

/* Botón btn-sm btn-secondary (p.ej. Save version en Backup) */
button.btn.btn-sm.btn-secondary {
    font-size: 0.8rem;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 9. BREADCRUMB + ENCABEZADO + PESTAÑAS  [GENÉRICO]
 * ══════════════════════════════════════════════════════════════════════════ */

/* Breadcrumb Metronic */
ol.breadcrumb.breadcrumb-line {
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    gap: 0;
    margin: 0;
    padding: 0;
}

ol.breadcrumb.breadcrumb-line .breadcrumb-item {
    color: var(--bs-gray-500);
    display: flex;
    align-items: center;
}

ol.breadcrumb.breadcrumb-line .breadcrumb-item a,
ol.breadcrumb.breadcrumb-line .breadcrumb-item a.breadcrumb-item {
    color: #009ef7;
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

ol.breadcrumb.breadcrumb-line .breadcrumb-item a:hover {
    color: #0086d3;
}

ol.breadcrumb.breadcrumb-line .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--bs-gray-400);
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    font-size: 0.9rem;
    line-height: 1;
}

ol.breadcrumb.breadcrumb-line .breadcrumb-item:last-child {
    color: var(--bs-gray-700);
    font-weight: 600;
}

/* Encabezado de página (h3 + subtítulo en Edit/Create) */
.container-fluid.no-margin-padding h3.text-primary {
    font-size: 1.25rem !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.container-fluid.no-margin-padding > .row > h4 {
    font-size: 0.82rem;
    color: var(--bs-gray-500);
    font-weight: 400;
    margin-bottom: 0.5rem;
}

/* Pestañas lazy load — nav-line-tabs */
ul.nav.nav-tabs.nav-line-tabs {
    border-bottom: 1px solid var(--bs-gray-200);
    gap: 0;
    flex-wrap: wrap;
    margin-bottom: 0.75rem !important;
}

ul.nav.nav-tabs.nav-line-tabs .nav-item {
    margin-bottom: -1px;
}

ul.nav.nav-tabs.nav-line-tabs .nav-item .nav-link {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--bs-gray-500);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.55rem 0.9rem;
    transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    white-space: nowrap;
}

ul.nav.nav-tabs.nav-line-tabs .nav-item .nav-link:hover {
    color: var(--bs-gray-700);
    border-bottom-color: var(--bs-gray-300);
}

ul.nav.nav-tabs.nav-line-tabs .nav-item .nav-link.active {
    color: #009ef7 !important;
    font-weight: 600;
    border-bottom: 2px solid #009ef7;
    background-color: transparent;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 10. FORM GROUPS EN ACORDEONES  [SEMI-GENÉRICO]
 *     Convierte .accordion-body > .container-fluid en flex-wrap de 2 cols.
 * ══════════════════════════════════════════════════════════════════════════ */

.accordion-body > .container-fluid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start;
    gap: 0.25rem 0.75rem;
}

.accordion-body > .container-fluid > br {
    display: none !important;
}

.accordion-body > .container-fluid > label {
    flex: 0 0 100% !important;
    min-width: 100% !important;
}

.accordion-body > .container-fluid > div.form-group {
    flex: 1 1 calc(48% - 0.75rem) !important;
    min-width: calc(48% - 0.75rem) !important;
    max-width: calc(48% - 0.75rem) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
}

.accordion-body > .container-fluid {
    align-items: flex-start !important;
}

.accordion-body > .container-fluid > div.form-group > span.pim-description-field + * {
    margin-top: 0.25rem !important;
}

/* Tooltip de descripción en acordeones */
.accordion-body > .container-fluid > div.form-group {
    position: relative;
}

.accordion-body > .container-fluid > div.form-group > span.pim-description-field {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    margin: 0;
    padding: 0;
    font-size: 0;
}

.accordion-body > .container-fluid .form-label:hover + span.pim-description-field {
    visibility: visible;
    opacity: 1;
    max-height: 10rem;
    overflow: visible;
    pointer-events: auto;
    font-size: 0.78rem;
    position: absolute;
    top: 1.4rem;
    left: 0;
    margin-left: 0;
    z-index: 200;
    background-color: #fff;
    border: 1px solid rgba(0, 158, 247, 0.25);
    border-radius: 0.375rem;
    padding: 0.35rem 0.6rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    color: var(--bs-gray-600);
    font-style: italic;
    line-height: 1.4;
    white-space: normal;
    min-width: 180px;
    max-width: 280px;
    margin: 0;
}

.accordion-body > .container-fluid > div.form-group > div[class*="mb-"],
.accordion-body > .container-fluid > div.form-group > div[class*="mt-"] {
    margin-bottom: 0.15rem !important;
    margin-top: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 11. DATA RELATED MANAGER  [PROYECTO]
 *     Chips, contenedor dashed, botón Clear All, items de modal.
 *     Clases: .pim-data-related-manager-*
 * ══════════════════════════════════════════════════════════════════════════ */

.pim-data-related-manager-associated-objects {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;
    background-color: rgba(0, 158, 247, 0.08);
    border: 1px solid rgba(0, 158, 247, 0.22);
    padding: 0.2rem 0.55rem;
    margin-right: 0.3rem;
    margin-bottom: 0.3rem;
    color: var(--bs-gray-700);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.pim-data-related-manager-associated-objects-image-delete {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
    color: var(--bs-gray-600);
    vertical-align: middle;
}

.pim-data-related-manager-associated-objects:hover .pim-data-related-manager-associated-objects-image-delete,
.pim-data-related-manager-associated-objects-image-delete:hover {
    opacity: 1;
    color: #dc3545;
}

.pim-data-related-manager-associated-objects-container-div-border-dashed-soft {
    border: 2px dashed rgba(0, 158, 247, 0.3);
    border-radius: 0.475rem;
    background-color: rgba(0, 158, 247, 0.02);
}

.pim-data-related-manager-clear-associated-objects {
    display: none;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.25rem 0.65rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    background-color: rgba(220, 53, 69, 0.08);
    color: #dc3545;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease-in-out;
    line-height: 1.5;
    text-decoration: none;
}

.pim-data-related-manager-clear-associated-objects:hover {
    background-color: rgba(220, 53, 69, 0.16);
    color: #dc3545;
}

.pim-data-related-manager-associated-objects-item-modal-div {
    display: block;
    width: 100%;
    border-radius: 0.375rem;
    background-color: var(--bs-gray-100);
    border: 1px solid transparent;
    padding: 0.4rem 0.65rem;
    margin-right: 0;
    margin-bottom: 0.25rem;
    color: var(--bs-gray-700);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.pim-data-related-manager-associated-objects-item-modal-div:not(.pim-data-related-manager-associated-objects-item-modal-div-right):hover {
    background-color: rgba(0, 158, 247, 0.1);
    border-color: rgba(0, 158, 247, 0.25);
    color: var(--bs-gray-800);
}

.pim-data-related-manager-associated-objects-item-modal-div-right:hover {
    background-color: rgba(220, 53, 69, 0.08);
    border-color: rgba(220, 53, 69, 0.2);
}

.modal-scroll-title-container-left {
    border-right: 1px solid var(--bs-gray-200);
}

.pim-data-related-manager-modal-button-apply {
    background-color: #009ef7 !important;
    color: #fff !important;
    border-color: transparent !important;
    font-size: 0.82rem;
    font-weight: 600;
}

.pim-data-related-manager-modal-button-apply:hover {
    background-color: #0086d3 !important;
    color: #fff !important;
}

.pim-data-related-manager-modal-button-close {
    background-color: var(--bs-gray-100) !important;
    color: var(--bs-gray-600) !important;
    border-color: var(--bs-gray-200) !important;
    font-size: 0.82rem;
    font-weight: 500;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.pim-data-related-manager-modal-button-close:hover {
    background-color: rgba(220, 53, 69, 0.1) !important;
    color: #dc3545 !important;
    border-color: rgba(220, 53, 69, 0.22) !important;
}

.pim-data-related-manager-item-image-modal {
    width: 20px;
    height: 20px;
    margin-left: 0.35rem;
    margin-right: 0.35rem;
    padding: 0.3rem;
    background-color: rgba(0, 158, 247, 0.08);
    border: 1px solid rgba(0, 158, 247, 0.22);
    border-radius: 0.375rem;
    box-sizing: content-box;
    cursor: pointer;
    filter: brightness(0) saturate(100%) invert(47%) sepia(92%) saturate(1532%) hue-rotate(179deg) brightness(103%) contrast(110%);
    opacity: 0.85;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

.pim-data-related-manager-item-image-modal:hover {
    background-color: rgba(0, 158, 247, 0.18);
    border-color: rgba(0, 158, 247, 0.4);
    opacity: 1;
}

.pim-data-related-manager-details-presentation {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;
    background-color: var(--bs-gray-100);
    border: 1px solid var(--bs-gray-200);
    padding: 0.2rem 0.55rem;
    margin-right: 0.3rem;
    color: var(--bs-gray-600);
    font-size: 0.8rem;
    height: auto;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 12. FILTERING QUERIES MANAGER  [PROYECTO]
 *     Widget de condiciones guardadas. Clases: .pimfqm-*
 * ══════════════════════════════════════════════════════════════════════════ */

.pimfqm-container.card {
    border: 1px solid rgba(0, 158, 247, 0.15) !important;
    border-radius: 0.475rem;
    background-color: #fff;
}

.pimfqm-container .card-title span {
    color: var(--bs-gray-600) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

#pimfqmFilterName.form-control {
    font-size: 0.82rem;
    border-color: var(--bs-gray-300);
}

#pimfqmFilterName.form-control:focus {
    border-color: #009ef7;
    box-shadow: 0 0 0 0.2rem rgba(0, 158, 247, 0.15);
}

#pimfqmConfigureFiltersStateButton.btn {
    background-color: rgba(0, 158, 247, 0.08) !important;
    color: #009ef7 !important;
    border-color: rgba(0, 158, 247, 0.22) !important;
    font-size: 0.82rem;
    transition: background-color 0.15s ease-in-out;
}

#pimfqmConfigureFiltersStateButton.btn:not(:disabled):hover {
    background-color: rgba(0, 158, 247, 0.18) !important;
    border-color: rgba(0, 158, 247, 0.4) !important;
}

#pimfqmConfigureFiltersStateButton.btn img {
    filter: brightness(0) saturate(100%) invert(47%) sepia(92%) saturate(1532%) hue-rotate(179deg) brightness(103%) contrast(110%);
}

#pimfqmClearFiltering.btn {
    background-color: var(--bs-gray-100) !important;
    color: var(--bs-gray-600) !important;
    border-color: var(--bs-gray-200) !important;
    font-size: 0.8rem;
    font-weight: 500;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

#pimfqmClearFiltering.btn:hover {
    background-color: rgba(220, 53, 69, 0.08) !important;
    color: #dc3545 !important;
    border-color: rgba(220, 53, 69, 0.22) !important;
}

.pimfqm-tag-item {
    background-color: rgba(0, 158, 247, 0.07) !important;
    color: var(--bs-gray-700) !important;
    border: 1px solid rgba(0, 158, 247, 0.2) !important;
    border-radius: 0.375rem !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    padding: 0.25rem 0.55rem !important;
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.pimfqm-tag-item:hover {
    background-color: rgba(0, 158, 247, 0.15) !important;
    border-color: rgba(0, 158, 247, 0.35) !important;
    color: var(--bs-gray-800) !important;
}

.pimfqm-tag-item img.hover-scale {
    width: 13px;
    height: 13px;
    opacity: 0.4;
    filter: brightness(0);
    transition: opacity 0.15s ease-in-out, filter 0.15s ease-in-out;
}

.pimfqm-tag-item:hover img.hover-scale,
.pimfqm-tag-item img.hover-scale:hover {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(20%) sepia(98%) saturate(2000%) hue-rotate(340deg) brightness(90%) contrast(120%);
}


/* ══════════════════════════════════════════════════════════════════════════
 * 13. TAGS CONTROL  [PROYECTO]
 *     Chips de tags, select y botón de creación. Clases: .pim-tags-control-*
 * ══════════════════════════════════════════════════════════════════════════ */

.pim-tags-control-associated-tags div.pim-tags-control-associated-tags-item {
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 0.375rem;
    padding: 0.2rem 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-right: 0.35rem;
    margin-bottom: 0.25rem;
    outline: 1px solid transparent;
    transition: outline-color 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

.pim-tags-control-associated-tags div.pim-tags-control-associated-tags-item:hover {
    outline-color: rgba(0, 0, 0, 0.15);
    opacity: 0.85;
}

.pim-tags-control-associated-tags-item-image-delete {
    opacity: 0.5;
    transition: opacity 0.15s ease-in-out;
}

.pim-tags-control-associated-tags-item:hover .pim-tags-control-associated-tags-item-image-delete {
    opacity: 1;
}

.pim-tags-control-select-tags-combo.form-select {
    font-size: 0.82rem;
    border-color: var(--bs-gray-300);
}

.pim-tags-control-select-tags-combo.form-select:focus {
    border-color: #009ef7;
    box-shadow: 0 0 0 0.2rem rgba(0, 158, 247, 0.15);
}

.pim-tags-control-creation-tags .form-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-gray-500);
    margin-right: 0.4rem;
}

.pim-tags-control-creation-tags-input.form-control {
    font-size: 0.82rem;
    border-color: var(--bs-gray-300);
}

.pim-tags-control-creation-tags-input.form-control:focus {
    border-color: #009ef7;
    box-shadow: 0 0 0 0.2rem rgba(0, 158, 247, 0.15);
}

.pim-tags-control-creation-tags-button.btn {
    background-color: rgba(0, 158, 247, 0.08) !important;
    color: #009ef7 !important;
    border-color: rgba(0, 158, 247, 0.22) !important;
    font-size: 0.8rem;
    font-weight: 500;
    transition: background-color 0.15s ease-in-out;
}

.pim-tags-control-creation-tags-button.btn:hover {
    background-color: rgba(0, 158, 247, 0.18) !important;
    border-color: rgba(0, 158, 247, 0.4) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 14. PROPERTIES TABLE  [PROYECTO]
 *     Tabla de propiedades generada dinámicamente. ID: #propertiesTable
 * ══════════════════════════════════════════════════════════════════════════ */

#containerForDataModelProperties2 {
    margin-top: 0.5rem;
}

#propertiesTable .form-label {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-gray-600);
    margin-bottom: 0.4rem;
    display: inline-block;
}

#propertiesTable table.table-bordered {
    font-size: 0.82rem;
    border-color: var(--bs-gray-200);
    border-radius: 0.475rem;
    overflow: hidden;
}

#propertiesTable table.table-bordered th {
    background-color: var(--bs-gray-100);
    color: var(--bs-gray-600);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.5rem 0.6rem;
    border-color: var(--bs-gray-200);
    white-space: nowrap;
}

#propertiesTable table.table-bordered td {
    padding: 0.3rem 0.4rem;
    border-color: var(--bs-gray-200);
    vertical-align: middle;
}

#propertiesTable .form-control-sm {
    font-size: 0.82rem;
    border-color: var(--bs-gray-300);
    padding: 0.2rem 0.45rem;
}

#propertiesTable .form-control-sm:focus {
    border-color: #009ef7;
    box-shadow: 0 0 0 0.15rem rgba(0, 158, 247, 0.15);
}

#propertiesTable .form-control-sm:disabled {
    background-color: var(--bs-gray-100);
    opacity: 0.6;
    cursor: not-allowed;
}

#propertiesTable img.pim-menu-icon.cursor-pointer[src*="search"] {
    width: 15px;
    height: 15px;
    padding: 0.25rem;
    background-color: rgba(0, 158, 247, 0.08);
    border: 1px solid rgba(0, 158, 247, 0.22) !important;
    border-radius: 0.3rem;
    box-sizing: content-box;
    filter: brightness(0) saturate(100%) invert(47%) sepia(92%) saturate(1532%) hue-rotate(179deg) brightness(103%) contrast(110%);
    opacity: 0.85;
    transition: background-color 0.15s, opacity 0.15s;
    margin: 0.2rem !important;
}

#propertiesTable img.pim-menu-icon.cursor-pointer[src*="search"]:hover {
    background-color: rgba(0, 158, 247, 0.18);
    opacity: 1;
}

#ptAddRecordBtn.pim-menu-icon {
    width: 18px;
    height: 18px;
    margin-left: 0.5rem !important;
    padding-bottom: 0 !important;
    filter: brightness(0) saturate(100%) invert(47%) sepia(92%) saturate(1532%) hue-rotate(179deg) brightness(103%) contrast(110%);
    opacity: 0.75;
    cursor: pointer;
    transition: opacity 0.15s;
    vertical-align: middle;
}

#ptAddRecordBtn.pim-menu-icon:hover {
    opacity: 1;
}

#generateStructureBtn.btn {
    background-color: rgba(0, 158, 247, 0.08) !important;
    color: #009ef7 !important;
    border-color: rgba(0, 158, 247, 0.22) !important;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    transition: background-color 0.15s;
}

#generateStructureBtn.btn:hover {
    background-color: rgba(0, 158, 247, 0.18) !important;
}

#propertiesTable .delete-btn img.pim-menu-icon[src*="trash"] {
    width: 15px;
    height: 15px;
    opacity: 0.4;
    filter: brightness(0);
    transition: opacity 0.15s, filter 0.15s;
    margin: 0.15rem !important;
}

#propertiesTable .delete-btn:hover img.pim-menu-icon[src*="trash"] {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(20%) sepia(98%) saturate(2000%) hue-rotate(340deg) brightness(90%) contrast(120%);
}


/* ══════════════════════════════════════════════════════════════════════════
 * 15. CHARTS  [PROYECTO]
 *     Framing Metronic para .pim-chart-container y .pim-charts-wrapper.
 *     La clase .pim-chart-has-legend la añade renderHtmlLegend() en JS
 *     para activar el layout flex con leyenda lateral.
 * ══════════════════════════════════════════════════════════════════════════ */

.pim-chart-container {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 1rem !important;
    min-height: unset !important;
    max-height: unset !important;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.pim-chart-container > canvas.pim-chart {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* Layout flex cuando hay leyenda HTML lateral (clase añadida por JS) */
.pim-chart-container.pim-chart-has-legend {
    display: flex !important;
    align-items: flex-start;
    gap: 1.5rem;
}

/* Wrapper exterior de charts ModelCombined */
.pim-charts-wrapper {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #fafafa;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 16. DESIGN TOKENS  [GENÉRICO]
 *     Variables CSS globales para colores, sombras y radios.
 *     Para portar a otro proyecto: reemplaza únicamente los valores de
 *     --pim-primary-* con el color primario de tu tema.
 * ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Primario (Metronic #009ef7) */
    --pim-primary:          #009ef7;
    --pim-primary-rgb:      0, 158, 247;
    --pim-primary-dark:     #0086d3;
    --pim-primary-light:    rgba(0, 158, 247, 0.1);
    --pim-primary-lighter:  rgba(0, 158, 247, 0.06);

    /* Peligro */
    --pim-danger:           #dc3545;
    --pim-danger-light:     rgba(220, 53, 69, 0.08);

    /* Éxito */
    --pim-success:          #50cd89;
    --pim-success-light:    rgba(80, 205, 137, 0.1);

    /* Advertencia */
    --pim-warning:          #ffc700;
    --pim-warning-light:    rgba(255, 199, 0, 0.1);

    /* Sombras */
    --pim-shadow-sm:        0 1px 4px rgba(0, 0, 0, 0.06);
    --pim-shadow-md:        0 4px 12px rgba(0, 0, 0, 0.08);
    --pim-shadow-lg:        0 8px 24px rgba(0, 0, 0, 0.1);

    /* Radios */
    --pim-radius-sm:        0.35rem;
    --pim-radius-md:        0.475rem;
    --pim-radius-lg:        0.625rem;

    /* Campo sin borde: fondo de relleno para inputs */
    --pim-field-bg:         var(--bs-gray-100);
    --pim-field-bg-focus:   #fff;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 17. CONTROLES DE FORMULARIO GLOBALES  [GENÉRICO]
 *     Inputs, textareas y selects sin borde visible (filled style).
 *     El campo se reconoce por su fondo gris claro; al hacer foco
 *     el fondo se vuelve blanco y aparece una sombra de contorno.
 *     Compatible con Bootstrap 5 y Metronic 8.
 * ══════════════════════════════════════════════════════════════════════════ */

/* Input / Textarea / Select — base */
.form-control,
.form-select {
    background-color: var(--pim-field-bg) !important;
    border-color: transparent !important;
    border-radius: var(--pim-radius-sm) !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Foco: fondo blanco + sombra sutil */
.form-control:focus,
.form-select:focus {
    background-color: var(--pim-field-bg-focus) !important;
    border-color: transparent !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--pim-primary-rgb), 0.18) !important;
    outline: 0 !important;
}

/* Read-only e inputs deshabilitados: mantener fondo, opacidad reducida */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--bs-gray-100) !important;
    opacity: 0.65;
    cursor: default;
}

/* Textarea: altura mínima */
textarea.form-control {
    min-height: 4.5rem;
    resize: vertical;
}

/* Tamaño sm */
.form-control-sm {
    font-size: 0.82rem !important;
    padding: 0.25rem 0.55rem !important;
}

/* Input group: sin borde en los addons tampoco */
.input-group .input-group-text {
    background-color: var(--bs-gray-200) !important;
    border-color: transparent !important;
    color: var(--bs-gray-600);
    font-size: 0.85rem;
}

.input-group .form-control:focus {
    z-index: 1;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 18. CHECKBOXES Y RADIOS GLOBALES  [GENÉRICO]
 *     Aplica el color primario a todos los checkboxes y radios,
 *     independientemente del contenedor.
 * ══════════════════════════════════════════════════════════════════════════ */

.form-check-input {
    border-color: var(--bs-gray-400) !important;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.form-check-input:checked {
    background-color: var(--pim-primary) !important;
    border-color: var(--pim-primary) !important;
}

.form-check-input:focus {
    border-color: var(--pim-primary) !important;
    box-shadow: 0 0 0 0.18rem rgba(var(--pim-primary-rgb), 0.18) !important;
}

.form-check-label {
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--bs-gray-700);
}


/* ══════════════════════════════════════════════════════════════════════════
 * 19. SELECT2 GLOBAL  [GENÉRICO]
 *     Alinea Select2 con el filled-style de los demás controles.
 *     Para adaptar a otro proyecto: solo cambia las variables --pim-*.
 * ══════════════════════════════════════════════════════════════════════════ */

/* Contenedor principal */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--pim-field-bg) !important;
    border: 1px solid transparent !important;
    border-radius: var(--pim-radius-sm) !important;
    min-height: calc(1.5em + 0.75rem + 2px);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Foco */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    background-color: var(--pim-field-bg-focus) !important;
    border-color: transparent !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--pim-primary-rgb), 0.18) !important;
    outline: 0;
}

/* Texto seleccionado */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--bs-gray-700);
    font-size: 0.875rem;
    line-height: calc(1.5em + 0.75rem);
    padding-left: 0.6rem;
    padding-right: 1.8rem;
}

/* Flecha */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 0.4rem;
}

/* Dropdown */
.select2-dropdown {
    border: 1px solid var(--bs-gray-200) !important;
    border-radius: var(--pim-radius-md) !important;
    box-shadow: var(--pim-shadow-md) !important;
    background-color: #fff;
}

/* Campo de búsqueda dentro del dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--pim-field-bg) !important;
    border: 1px solid transparent !important;
    border-radius: var(--pim-radius-sm) !important;
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    background-color: #fff !important;
    box-shadow: 0 0 0 0.18rem rgba(var(--pim-primary-rgb), 0.15) !important;
    outline: 0;
}

/* Opciones */
.select2-container--default .select2-results__option {
    font-size: 0.875rem;
    padding: 0.35rem 0.75rem;
    color: var(--bs-gray-700);
    border-radius: 0;
}

.select2-container--default .select2-results__option--highlighted {
    background-color: var(--pim-primary-light) !important;
    color: var(--pim-primary) !important;
}

.select2-container--default .select2-results__option--selected {
    background-color: var(--bs-gray-100) !important;
    color: var(--bs-gray-800) !important;
    font-weight: 600;
}

/* Tags múltiple */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--pim-primary-light) !important;
    border: 1px solid rgba(var(--pim-primary-rgb), 0.22) !important;
    border-radius: var(--pim-radius-sm) !important;
    color: var(--bs-gray-700) !important;
    font-size: 0.8rem;
    padding: 0.1rem 0.5rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--bs-gray-500) !important;
    margin-right: 0.25rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--pim-danger) !important;
    background-color: transparent !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 20. SISTEMA DE BOTONES  [GENÉRICO]
 *     Botones consistentes por tipo de acción en toda la aplicación.
 *
 *     PRIMARIO (guardar, confirmar)    → btn-primary
 *     SECUNDARIO (cancelar, volver)    → btn-secondary / btn-light
 *     PELIGRO (eliminar)               → btn-danger / btn-light-danger
 *     ACCIÓN SUAVE (búsqueda, filtros) → btn-light-primary
 *     ÉXITO                            → btn-success / btn-light-success
 *     ADVERTENCIA                      → btn-warning / btn-light-warning
 * ══════════════════════════════════════════════════════════════════════════ */

/* Radio base de todos los botones */
.btn {
    border-radius: var(--pim-radius-sm) !important;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                box-shadow 0.15s ease, color 0.15s ease !important;
}

/* Primario — guardar, confirmar */
.btn.btn-primary {
    background-color: var(--pim-primary) !important;
    border-color: var(--pim-primary) !important;
    box-shadow: 0 2px 6px rgba(var(--pim-primary-rgb), 0.28) !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background-color: var(--pim-primary-dark) !important;
    border-color: var(--pim-primary-dark) !important;
    box-shadow: 0 4px 10px rgba(var(--pim-primary-rgb), 0.35) !important;
}

/* Light-primary — acciones suaves (filtrar, añadir condición, etc.) */
.btn.btn-light-primary {
    background-color: var(--pim-primary-light) !important;
    border-color: transparent !important;
    color: var(--pim-primary) !important;
    font-weight: 500;
}

.btn.btn-light-primary:hover,
.btn.btn-light-primary:focus {
    background-color: rgba(var(--pim-primary-rgb), 0.18) !important;
    border-color: transparent !important;
    color: var(--pim-primary) !important;
}

/* Secundario / light — volver, cancelar */
.btn.btn-secondary,
.btn.btn-light {
    background-color: var(--bs-gray-100) !important;
    border-color: var(--bs-gray-200) !important;
    color: var(--bs-gray-700) !important;
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-light:hover,
.btn.btn-light:focus {
    background-color: var(--bs-gray-200) !important;
    border-color: var(--bs-gray-300) !important;
    color: var(--bs-gray-800) !important;
}

/* Peligro — eliminar */
.btn.btn-danger {
    background-color: var(--pim-danger) !important;
    border-color: var(--pim-danger) !important;
    box-shadow: 0 2px 5px rgba(220, 53, 69, 0.28) !important;
}

.btn.btn-danger:hover,
.btn.btn-danger:focus {
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.38) !important;
}

/* Light-danger */
.btn.btn-light-danger {
    background-color: var(--pim-danger-light) !important;
    border-color: transparent !important;
    color: var(--pim-danger) !important;
}

.btn.btn-light-danger:hover,
.btn.btn-light-danger:focus {
    background-color: rgba(220, 53, 69, 0.16) !important;
    color: var(--pim-danger) !important;
}

/* Éxito */
.btn.btn-success {
    background-color: var(--pim-success) !important;
    border-color: var(--pim-success) !important;
}

.btn.btn-light-success {
    background-color: var(--pim-success-light) !important;
    border-color: transparent !important;
    color: #1a9e5e !important;
}

.btn.btn-light-success:hover {
    background-color: rgba(80, 205, 137, 0.18) !important;
}

/* Advertencia */
.btn.btn-warning {
    background-color: var(--pim-warning) !important;
    border-color: var(--pim-warning) !important;
    color: #fff !important;
}

.btn.btn-light-warning {
    background-color: var(--pim-warning-light) !important;
    border-color: transparent !important;
    color: #b38600 !important;
}

.btn.btn-light-warning:hover {
    background-color: rgba(255, 199, 0, 0.18) !important;
}

/* btn-sm — reducir tamaño */
.btn.btn-sm {
    font-size: 0.8rem !important;
    padding: 0.3rem 0.65rem !important;
}

/* btn-lg — aumentar */
.btn.btn-lg {
    font-size: 0.95rem !important;
    padding: 0.6rem 1.25rem !important;
    font-weight: 600 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 21. CARDS GLOBALES  [GENÉRICO]
 *     Tarjetas con sombra mínima, sin borde o con borde sutilísimo.
 * ══════════════════════════════════════════════════════════════════════════ */

.card {
    border-color: rgba(0, 0, 0, 0.07) !important;
    border-radius: var(--pim-radius-lg) !important;
    box-shadow: var(--pim-shadow-sm) !important;
}

.card-header {
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
    background-color: transparent !important;
}

.card-footer {
    border-top-color: rgba(0, 0, 0, 0.06) !important;
    background-color: transparent !important;
}

/* Tarjetas de acceso rápido (Club/Details) — efecto hover sin inline handlers */
.chronos-hover-card {
    transition: border-color .2s, box-shadow .2s !important;
}
.chronos-hover-card:hover {
    box-shadow: 0 4px 16px rgba(0, 158, 247, .12) !important;
}

/* Tarjeta "Generar horario" — gradiente azul con hover */
.chronos-generate-card {
    background: linear-gradient(135deg, #009ef7 0%, #0086d3 100%) !important;
    box-shadow: 0 4px 14px rgba(0, 158, 247, .3) !important;
    transition: opacity .2s, box-shadow .2s !important;
}
.chronos-generate-card:hover {
    opacity: 0.92 !important;
}

.card-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--bs-gray-800) !important;
}

.card-subtitle {
    font-size: 0.82rem !important;
    color: var(--bs-gray-500) !important;
}

/* Card flush: sin borde y sin sombra para composición interna */
.card.card-flush {
    border: none !important;
    box-shadow: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 22. BADGES GLOBALES  [GENÉRICO]
 *     Consistencia visual de badges / pills en toda la app.
 * ══════════════════════════════════════════════════════════════════════════ */

.badge {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 0.35rem !important;
    padding: 0.28em 0.55em !important;
    letter-spacing: 0.01em;
}

/* Tamaños alternativos */
.badge.badge-sm {
    font-size: 0.7rem !important;
    padding: 0.2em 0.45em !important;
}

/* Metronic badge-light-* — colores semánticos suaves */
.badge.badge-light-primary {
    background-color: var(--pim-primary-light) !important;
    color: var(--pim-primary) !important;
}

.badge.badge-light-success {
    background-color: var(--pim-success-light) !important;
    color: #1a9e5e !important;
}

.badge.badge-light-danger {
    background-color: var(--pim-danger-light) !important;
    color: var(--pim-danger) !important;
}

.badge.badge-light-warning {
    background-color: var(--pim-warning-light) !important;
    color: #b38600 !important;
}

.badge.badge-light-info {
    background-color: rgba(23, 198, 209, 0.1) !important;
    color: #13868e !important;
}

.badge.badge-light-secondary {
    background-color: var(--bs-gray-100) !important;
    color: var(--bs-gray-600) !important;
    border: 1px solid var(--bs-gray-200);
}


/* ══════════════════════════════════════════════════════════════════════════
 * 23. ALERTAS GLOBALES  [GENÉRICO]
 *     Alertas Bootstrap sin borde izquierdo grueso; solo color de fondo.
 * ══════════════════════════════════════════════════════════════════════════ */

.alert {
    border-radius: var(--pim-radius-md) !important;
    font-size: 0.875rem;
    border-width: 0 !important;
    padding: 0.75rem 1rem;
}

.alert-primary {
    background-color: var(--pim-primary-light) !important;
    color: #004a8f !important;
}

.alert-success {
    background-color: var(--pim-success-light) !important;
    color: #0d6640 !important;
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.1) !important;
    color: #8b1a26 !important;
}

.alert-warning {
    background-color: rgba(255, 199, 0, 0.12) !important;
    color: #7a5200 !important;
}

.alert-info {
    background-color: rgba(23, 198, 209, 0.1) !important;
    color: #0a5a60 !important;
}

.alert-secondary {
    background-color: var(--bs-gray-100) !important;
    color: var(--bs-gray-700) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 24. MODALES GLOBALES  [GENÉRICO]
 *     Ajustes de sombra, radio y cabecera/pie para todos los modales.
 * ══════════════════════════════════════════════════════════════════════════ */

.modal-content {
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: var(--pim-radius-lg) !important;
    box-shadow: var(--pim-shadow-lg) !important;
}

.modal-header {
    border-bottom: 1px solid var(--bs-gray-200) !important;
    padding: 1rem 1.25rem 0.75rem !important;
    background-color: var(--bs-gray-50, #fafafa);
    border-top-left-radius: calc(var(--pim-radius-lg) - 1px) !important;
    border-top-right-radius: calc(var(--pim-radius-lg) - 1px) !important;
}

.modal-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--bs-gray-800);
}

.modal-body {
    padding: 1.1rem 1.25rem !important;
    font-size: 0.875rem;
    color: var(--bs-gray-700);
}

.modal-footer {
    border-top: 1px solid var(--bs-gray-200) !important;
    padding: 0.75rem 1.25rem !important;
    background-color: var(--bs-gray-50, #fafafa);
    border-bottom-left-radius: calc(var(--pim-radius-lg) - 1px) !important;
    border-bottom-right-radius: calc(var(--pim-radius-lg) - 1px) !important;
    gap: 0.5rem;
}

/* Botón cierre (×) */
.modal-header .btn-close {
    opacity: 0.45;
    transition: opacity 0.15s ease;
}

.modal-header .btn-close:hover {
    opacity: 0.85;
}

/* Fondo oscurecido */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.35) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 25. SIDEBAR METRONIC — light-sidebar  [GENÉRICO]
 *     Fondo blanco, iconos y texto legibles, estados hover/active claros.
 * ══════════════════════════════════════════════════════════════════════════ */

/* Contenedor lateral: fondo blanco, borde sutil */
.app-sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid #e9ecef !important;
    box-shadow: 2px 0 8px rgba(0,0,0,0.04) !important;
}

/* Zona del logo/brand */
.app-sidebar-logo {
    border-bottom: 1px solid #e9ecef !important;
    padding-top: 1.1rem !important;
    padding-bottom: 1.1rem !important;
}

/* Scrollbar sidebar */
.app-sidebar::-webkit-scrollbar { width: 4px; }
.app-sidebar::-webkit-scrollbar-track { background: transparent; }
.app-sidebar::-webkit-scrollbar-thumb { background: #dee2e6; border-radius: 4px; }

/* Heading de sección */
.app-sidebar-menu .menu-section .menu-section-text,
.app-sidebar-menu .menu .menu-heading {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #a1a5b7 !important;
    padding: 0.75rem 0.9rem 0.25rem !important;
}

/* Menu link base */
.app-sidebar-menu .menu .menu-item .menu-link {
    border-radius: 0.4rem !important;
    padding: 0.55rem 0.9rem !important;
    margin: 0.1rem 0.6rem !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    color: #5e6278 !important;
}

/* Icono */
.app-sidebar-menu .menu .menu-item .menu-link .menu-icon {
    color: #a1a5b7 !important;
    transition: color 0.15s ease !important;
    min-width: 1.8rem;
}
.app-sidebar-menu .menu .menu-item .menu-link .menu-icon i {
    font-size: 1rem !important;
}

/* Texto */
.app-sidebar-menu .menu .menu-item .menu-link .menu-title {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #3f4254 !important;
}

/* Hover */
.app-sidebar-menu .menu .menu-item .menu-link:hover {
    background-color: rgba(0, 158, 247, 0.07) !important;
}
.app-sidebar-menu .menu .menu-item .menu-link:hover .menu-icon {
    color: var(--pim-primary) !important;
}
.app-sidebar-menu .menu .menu-item .menu-link:hover .menu-title {
    color: var(--pim-primary) !important;
}

/* Estado activo */
.app-sidebar-menu .menu .menu-item.active > .menu-link,
.app-sidebar-menu .menu .menu-item.here > .menu-link,
.app-sidebar-menu .menu .menu-item .menu-link.active {
    background-color: rgba(0, 158, 247, 0.1) !important;
}
.app-sidebar-menu .menu .menu-item.active > .menu-link .menu-icon,
.app-sidebar-menu .menu .menu-item.active > .menu-link .menu-title,
.app-sidebar-menu .menu .menu-item.here > .menu-link .menu-icon,
.app-sidebar-menu .menu .menu-item.here > .menu-link .menu-title,
.app-sidebar-menu .menu .menu-item .menu-link.active .menu-icon,
.app-sidebar-menu .menu .menu-item .menu-link.active .menu-title {
    color: var(--pim-primary) !important;
    font-weight: 600 !important;
}

/* Sub-menú */
.app-sidebar-menu .menu .menu-sub .menu-item .menu-link {
    padding-left: 2.8rem !important;
    font-size: 0.85rem !important;
}

/* Separador */
.app-sidebar-menu .menu .separator {
    border-top-color: #e9ecef !important;
    margin: 0.5rem 0.75rem !important;
}

/* Footer del sidebar */
.app-sidebar-footer {
    border-top: 1px solid #e9ecef !important;
}

/* Sidebar minimizado: footer compacto (icono perfil centrado, sin copyright) */
[data-kt-app-sidebar-minimize=on] .app-sidebar-footer,
body.app-sidebar-minimize .app-sidebar-footer {
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
    align-items: center !important;
}
[data-kt-app-sidebar-minimize=on] .app-sidebar-footer > div,
body.app-sidebar-minimize .app-sidebar-footer > div {
    justify-content: center !important;
    gap: 0.25rem !important;
    flex-wrap: wrap !important;
    margin-bottom: 0.25rem !important;
}
[data-kt-app-sidebar-minimize=on] .app-sidebar-footer .text-muted,
body.app-sidebar-minimize .app-sidebar-footer .text-muted {
    display: none !important;
}
/* Ocultar el language switcher cuando el sidebar está plegado */
[data-kt-app-sidebar-minimize=on] .app-sidebar-footer .app-navbar-item:has(img),
body.app-sidebar-minimize .app-sidebar-footer .app-navbar-item:has(img) {
    display: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 26. HEADER / TOPBAR METRONIC  [GENÉRICO]
 *     Barra superior: links, menú, fondo, separadores.
 * ══════════════════════════════════════════════════════════════════════════ */

/* Fondo y borde inferior del header — altura compacta */
.app-header {
    border-bottom: 1px solid var(--bs-gray-200) !important;
    background-color: #fff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    --app-header-height: 52px !important;
    min-height: 52px !important;
    height: 52px !important;
}

#kt_app_header_wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 52px !important;
}

/* Menú del header — links de navegación */
.app-header-menu .menu .menu-item .menu-link {
    border-radius: var(--pim-radius-sm) !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--bs-gray-600) !important;
    transition: background-color 0.12s ease, color 0.12s ease !important;
}

.app-header-menu .menu .menu-item .menu-link:hover {
    background-color: var(--pim-primary-lighter) !important;
    color: var(--pim-primary) !important;
}

.app-header-menu .menu .menu-item.active > .menu-link,
.app-header-menu .menu .menu-item.here > .menu-link,
.app-header-menu .menu .menu-item .menu-link.active {
    color: var(--pim-primary) !important;
    background-color: var(--pim-primary-light) !important;
    font-weight: 600 !important;
}

/* Menú flyout en header */
.app-header-menu .menu .menu-sub-dropdown {
    border: 1px solid var(--bs-gray-200) !important;
    border-radius: var(--pim-radius-md) !important;
    box-shadow: var(--pim-shadow-md) !important;
    padding: 0.5rem 0 !important;
}

.app-header-menu .menu .menu-sub-dropdown .menu-item .menu-link {
    padding: 0.45rem 1rem !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* Topbar: iconos de acción (notificaciones, usuario, etc.) */
.app-navbar-item .btn-icon {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--bs-gray-500) !important;
    border-radius: var(--pim-radius-sm) !important;
    transition: background-color 0.12s ease, color 0.12s ease !important;
}

.app-navbar-item .btn-icon:hover {
    background-color: var(--pim-primary-lighter) !important;
    color: var(--pim-primary) !important;
}

/* Separador vertical en topbar */
.app-navbar-item .separator-vertical,
.topbar-separator {
    border-left-color: var(--bs-gray-200) !important;
    opacity: 0.7;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 27. DROPDOWNS GLOBALES  [GENÉRICO]
 *     Menús desplegables Bootstrap con estilo Metronic coherente.
 * ══════════════════════════════════════════════════════════════════════════ */

.dropdown-menu {
    border: 1px solid var(--bs-gray-200) !important;
    border-radius: var(--pim-radius-md) !important;
    box-shadow: var(--pim-shadow-md) !important;
    padding: 0.45rem 0 !important;
    font-size: 0.875rem;
}

.dropdown-item {
    padding: 0.42rem 1rem !important;
    color: var(--bs-gray-700) !important;
    font-size: 0.875rem !important;
    transition: background-color 0.12s ease, color 0.12s ease !important;
    border-radius: 0;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--pim-primary-lighter) !important;
    color: var(--bs-gray-800) !important;
}

.dropdown-item.text-danger:hover,
.dropdown-item.active-danger:hover {
    background-color: rgba(220, 53, 69, 0.08) !important;
    color: var(--pim-danger) !important;
}

.dropdown-item.active {
    background-color: var(--pim-primary-light) !important;
    color: var(--pim-primary) !important;
    font-weight: 600;
}

.dropdown-divider {
    border-top-color: var(--bs-gray-200) !important;
    margin: 0.3rem 0 !important;
}

.dropdown-header {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--bs-gray-400) !important;
    padding: 0.4rem 1rem 0.2rem !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 28. TOOLTIPS  [GENÉRICO]
 *     Bootstrap tooltips con estilo coherente.
 * ══════════════════════════════════════════════════════════════════════════ */

.tooltip-inner {
    background-color: var(--bs-gray-800) !important;
    color: #fff !important;
    font-size: 0.78rem !important;
    border-radius: var(--pim-radius-sm) !important;
    padding: 0.3rem 0.6rem !important;
    max-width: 220px;
    text-align: left;
}

.bs-tooltip-auto .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--bs-gray-800) !important;
}

.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: var(--bs-gray-800) !important;
}

.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--bs-gray-800) !important;
}

.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: var(--bs-gray-800) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 29. TABLAS GENERALES (no DataTable)  [GENÉRICO]
 *     Tablas .table de Bootstrap con coherencia visual.
 * ══════════════════════════════════════════════════════════════════════════ */

.table {
    font-size: 0.875rem;
    color: var(--bs-gray-700);
}

.table thead th {
    background-color: var(--bs-gray-100) !important;
    color: var(--bs-gray-600) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 2px solid var(--bs-gray-200) !important;
    white-space: nowrap;
}

.table tbody tr:hover > * {
    background-color: rgba(var(--pim-primary-rgb), 0.03) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

.table-bordered {
    border-color: var(--bs-gray-200) !important;
}

.table-bordered th,
.table-bordered td {
    border-color: var(--bs-gray-200) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * 30. SCROLLBAR PERSONALIZADA  [GENÉRICO]
 *     Scrollbar fina y sutil en contenedores con overflow.
 * ══════════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--bs-gray-300);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bs-gray-400);
}