/* ==========================================================================
   ADMIN UI - Fase 1 de la modernizacion visual del panel
   Se carga despues de main.css y style.css (ver Views/Template/header_admin.php).
   Para desactivarlo basta con quitar ese <link>.
   Solo estiliza clases existentes de Bootstrap 4 / Vali Admin: no hay que tocar vistas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens (claro)
   -------------------------------------------------------------------------- */
:root {
    --ui-fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

    --ui-fondo: #f4f5f7;
    --ui-superficie: #ffffff;
    --ui-superficie-2: #f7f8fa;
    --ui-hover: #f2f4f7;
    --ui-borde: #e4e6eb;
    --ui-borde-input: #d5d8de;
    --ui-texto: #1f2328;
    --ui-texto-suave: #687080;

    --ui-acento: #2768ac;
    --ui-acento-hover: #1f5690;
    --ui-acento-suave: rgba(39, 104, 172, 0.10);
    --ui-anillo: rgba(39, 104, 172, 0.28);
    --ui-enlace: #2768ac;

    --ui-radio: 14px;
    --ui-radio-sm: 8px;
    --ui-sombra: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --ui-sombra-alta: 0 12px 32px rgba(16, 24, 40, 0.14);
}

/* --------------------------------------------------------------------------
   Tokens (oscuro). Tambien se redefinen las variables de style.css para que
   sus reglas [data-theme="dark"] usen la paleta nueva sin editarlas.
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
    /* barras de desplazamiento, calendarios y selects nativos en oscuro */
    color-scheme: dark;

    --ui-fondo: #15161c;
    --ui-superficie: #1e1f27;
    --ui-superficie-2: #262732;
    --ui-hover: #2a2b36;
    --ui-borde: rgba(255, 255, 255, 0.08);
    --ui-borde-input: rgba(255, 255, 255, 0.16);
    --ui-texto: #e7e7ea;
    --ui-texto-suave: #a0a2ad;

    --ui-acento: #3a7bc8;
    --ui-acento-hover: #4a8ad6;
    --ui-acento-suave: rgba(102, 178, 255, 0.14);
    --ui-anillo: rgba(102, 178, 255, 0.35);
    --ui-enlace: #7cb8ff;

    --ui-sombra: 0 1px 2px rgba(0, 0, 0, 0.30);
    --ui-sombra-alta: 0 16px 40px rgba(0, 0, 0, 0.55);

    /* variables de style.css */
    --bg: var(--ui-fondo);
    --text: var(--ui-texto);
    --card-bg: var(--ui-superficie);
    --border-color: var(--ui-borde);
    --input-bg: var(--ui-superficie-2);
    --input-border: var(--ui-borde-input);
    --link-color: var(--ui-enlace);
    --btn-primary-bg: var(--ui-acento);
    --btn-primary-border: var(--ui-acento);
    --btn-secondary-bg: #4b4d5c;
    --btn-secondary-border: #4b4d5c;
    --app-title: transparent;
    --app-content-bg: var(--ui-fondo);
}

/* Las tarjetas de Cpanel/Transacciones comparten la superficie del panel */
[data-theme="dark"] .cp {
    --cp-fondo: var(--ui-superficie);
    --cp-borde: var(--ui-borde);
}

/* --------------------------------------------------------------------------
   Base y tipografia
   -------------------------------------------------------------------------- */
body {
    font-family: var(--ui-fuente);
    color: var(--ui-texto);
    -webkit-font-smoothing: antialiased;
}

.tooltip,
.popover {
    font-family: var(--ui-fuente);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

a {
    color: var(--ui-enlace);
}

a:hover {
    color: var(--ui-acento-hover);
}

.text-muted {
    color: var(--ui-texto-suave) !important;
}

/* El cian de Vali (#46E7FE) pasa a ser el acento del panel */
.text-primary { color: var(--ui-acento) !important; }
.bg-primary,
.badge-primary { background-color: var(--ui-acento) !important; color: #fff; }
.border-primary { border-color: var(--ui-acento) !important; }

hr {
    border-top-color: var(--ui-borde);
}

/* --------------------------------------------------------------------------
   Area de contenido y encabezado de pagina
   -------------------------------------------------------------------------- */
.app-content {
    background-color: var(--ui-fondo);
    padding: 24px 28px;
}

.app-title {
    margin: 0 0 20px;
    padding: 4px 0 0;
    background-color: transparent;
    box-shadow: none;
    gap: 12px;
}

[data-theme="dark"] .app-title {
    background-color: transparent !important;
}

.app-title h1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 22px;
    font-weight: 600;
    color: var(--ui-texto);
}

.app-title h1 > i {
    color: var(--ui-acento);
}

/* Encabezado de pagina: migas arriba, titulo a la izquierda y acciones a la derecha.
   El orden se da con CSS para no tener que mover las migas en cada vista. */
.app-title {
    flex-wrap: wrap;
    justify-content: flex-start;
}

.app-title > .app-breadcrumb {
    order: -1;
    flex: 0 0 100%;
    margin: 0 0 -6px;
}

/* Acciones (boton Nuevo/Nueva venta) junto al titulo, a la izquierda. El gap del contenedor da la separacion. */
.app-title-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: 0;
}

@media (max-width: 480px) {
    /* Vali lo pasaba a columna; en fila con wrap el orden de arriba sigue valiendo */
    .app-title {
        flex-direction: row;
        align-items: center;
    }

    .app-title > .app-breadcrumb {
        margin-top: 0;
    }

    .app-title-acciones {
        width: 100%;
        margin-left: 0;
    }

    .app-title-acciones .btn {
        flex: 1 1 auto;
    }
}

/* Botones que algunas vistas aun ponen dentro del <h1> */
.app-title h1 .btn {
    font-size: 13px;
    padding: 0.35rem 0.8rem;
}

.app-title p {
    margin-top: 4px;
    font-style: normal;
    color: var(--ui-texto-suave);
}

.app-breadcrumb {
    font-size: 12px;
    font-weight: 500;
}

.app-breadcrumb .breadcrumb-item,
.app-breadcrumb .breadcrumb-item a,
.app-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--ui-texto-suave);
}

@media (max-width: 576px) {
    .app-content {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .app-title {
        margin: 0 0 16px;
        padding: 0;
    }
}

/* --------------------------------------------------------------------------
   Tarjetas (.tile, .card, .widget-small)
   -------------------------------------------------------------------------- */
.tile,
[data-theme="dark"] .tile {
    background-color: var(--ui-superficie) !important;
    color: var(--ui-texto) !important;
    border: 1px solid var(--ui-borde);
    border-radius: var(--ui-radio);
    box-shadow: var(--ui-sombra);
    padding: 20px;
    margin-bottom: 20px;
    /* Vali animaba "all": al cambiar de tema la tarjeta parpadeaba en blanco */
    transition: box-shadow .2s ease;
}

.tile .tile-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.tile .overlay {
    border-radius: var(--ui-radio);
}

@media (max-width: 576px) {
    .tile {
        padding: 16px;
    }
}

.card,
[data-theme="dark"] .card {
    background-color: var(--ui-superficie) !important;
    color: var(--ui-texto) !important;
    border: 1px solid var(--ui-borde);
    border-radius: var(--ui-radio);
}

.card-header {
    background-color: var(--ui-superficie-2);
    border-bottom-color: var(--ui-borde);
}

.card-header:first-child {
    border-radius: calc(var(--ui-radio) - 1px) calc(var(--ui-radio) - 1px) 0 0;
}

.card-footer {
    background-color: var(--ui-superficie-2);
    border-top-color: var(--ui-borde);
}

/* Indicadores del dashboard: tarjeta con icono en cuadro redondeado */
.widget-small {
    align-items: center;
    gap: 14px;
    padding: 14px;
    margin-bottom: 20px;
    border-radius: var(--ui-radio);
    box-shadow: var(--ui-sombra);
}

.widget-small.primary.coloured-icon,
.widget-small.info.coloured-icon,
.widget-small.warning.coloured-icon,
.widget-small.danger.coloured-icon {
    border: 1px solid var(--ui-borde);
    background-color: var(--ui-superficie);
    color: var(--ui-texto);
}

.widget-small .icon {
    min-width: 52px;
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 12px;
    font-size: 1.4rem;
}

.widget-small .info {
    padding: 0;
}

.widget-small .info h4 {
    text-transform: none;
    font-size: 13px;
    font-weight: 500;
}

.widget-small.coloured-icon .info h4 {
    color: var(--ui-texto-suave);
}

.widget-small .info p {
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.widget-small.primary.coloured-icon .icon {
    background-color: var(--ui-acento);
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--ui-radio-sm);
    font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Vali hacia "saltar" el boton con sombra pesada al pasar el mouse */
.btn:not([disabled]):not(.disabled):not(.btn-link):hover,
.btn:not([disabled]):not(.disabled):not(.btn-link):focus {
    transform: none;
    box-shadow: none;
}

.btn:focus-visible,
.btn.focus {
    box-shadow: 0 0 0 3px var(--ui-anillo) !important;
}

/* Separacion icono-texto tambien para las clases de FA6 (fas, far, fa-solid).
   En tablas los botones son solo icono, asi que alli no se separa. */
.btn > i:first-child {
    margin-right: 6px;
}

.table .btn > i {
    margin-right: 0;
}

.btn-sm,
.btn-group-sm > .btn {
    border-radius: 6px;
}

.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--ui-acento);
    border-color: var(--ui-acento);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--ui-acento-hover);
    border-color: var(--ui-acento-hover);
    color: #fff;
}

.btn-outline-primary {
    color: var(--ui-acento);
    border-color: var(--ui-acento);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--ui-acento);
    border-color: var(--ui-acento);
    color: #fff;
}

/* style.css pone texto blanco en todos los botones en oscuro: los claros lo necesitan oscuro.
   Se excluyen los .dropdown-toggle porque bootstrap-select dibuja sus selects como btn-light
   y style.css les da fondo oscuro (quedaba texto oscuro sobre fondo oscuro). */
[data-theme="dark"] .btn-warning,
[data-theme="dark"] .btn-light:not(.dropdown-toggle) {
    color: #1b1b1f !important;
}

/* Selects de bootstrap-select (formularios de Ventas, Combos, Compras, Usuarios, Recargas, Descuentos) */
.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.bootstrap-select > .dropdown-toggle.bs-placeholder:active {
    border: 1px solid var(--ui-borde-input);
    border-radius: var(--ui-radio-sm);
    background-color: var(--ui-superficie) !important;
    color: var(--ui-texto) !important;
    box-shadow: none;
}

[data-theme="dark"] .bootstrap-select > .dropdown-toggle,
[data-theme="dark"] .bootstrap-select > .dropdown-toggle.bs-placeholder {
    background-color: var(--ui-superficie-2) !important;
    color: var(--ui-texto) !important;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option-inner-inner {
    color: var(--ui-texto-suave);
}

.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.show > .dropdown-toggle {
    border-color: var(--ui-acento);
    box-shadow: 0 0 0 3px var(--ui-anillo) !important;
    outline: none !important;
}

/* style.css desplaza todos los menus con margin:-8%; aqui tapaba el propio campo */
.bootstrap-select .dropdown-menu {
    margin: 4px 0 0;
    min-height: 0;
}

.bootstrap-select .dropdown-menu.inner {
    margin: 0;
}

.bootstrap-select .dropdown-menu li a,
.bootstrap-select .dropdown-menu li a span.text {
    background-color: transparent;
    color: var(--ui-texto);
    box-shadow: none;
}

.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:focus {
    background-color: var(--ui-hover);
}

.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li a.active,
.bootstrap-select .dropdown-menu li.active a {
    background-color: var(--ui-acento);
    color: #fff;
}

.bootstrap-select .dropdown-menu li.selected a span.text,
.bootstrap-select .dropdown-menu li a.active span.text {
    color: #fff;
}

.bootstrap-select .dropdown-menu li.no-results {
    background-color: transparent;
    color: var(--ui-texto-suave);
}

[data-theme="dark"] .btn-outline-primary {
    color: var(--ui-enlace) !important;
}

[data-theme="dark"] .btn-outline-primary:hover {
    color: #fff !important;
}

/* Botones de accion dentro de tablas (los generan los Controllers) */
.table .btn {
    padding: 0.25rem 0.55rem;
    font-size: 0.8rem;
    line-height: 1.4;
    border-radius: 6px;
}

/* Botones de exportar de DataTables */
.dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.dt-buttons .btn {
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */
label {
    font-weight: 500;
}

.form-control,
.custom-select {
    border-radius: var(--ui-radio-sm);
    border-color: var(--ui-borde-input);
    background-color: var(--ui-superficie);
    color: var(--ui-texto);
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--ui-acento);
    box-shadow: 0 0 0 3px var(--ui-anillo);
    background-color: var(--ui-superficie);
    color: var(--ui-texto);
}

.form-control::placeholder {
    color: var(--ui-texto-suave);
    opacity: 0.8;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--ui-superficie-2);
}

.form-control-sm {
    border-radius: 6px;
}

.input-group-text {
    border-color: var(--ui-borde-input);
    background-color: var(--ui-superficie-2);
    color: var(--ui-texto-suave);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select {
    background-color: var(--ui-superficie-2);
}

/* style.css fuerza los select al fondo de pagina con !important */
[data-theme="dark"] select.form-control,
[data-theme="dark"] select.custom-select {
    background-color: var(--ui-superficie-2) !important;
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
    background-color: var(--ui-fondo);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ui-acento);
    border-color: var(--ui-acento);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px var(--ui-anillo);
}

/* Filtros por columna dentro del <thead> (inputs sin clase en Netflix, Usuarios, Recargas) */
.table thead th input:not([type="checkbox"]):not(.form-control) {
    width: 100%;
    min-width: 70px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    border: 1px solid var(--ui-borde-input);
    border-radius: 6px;
    background-color: var(--ui-superficie);
    color: var(--ui-texto);
}

.table thead th input:not([type="checkbox"]):not(.form-control):focus {
    outline: none;
    border-color: var(--ui-acento);
    box-shadow: 0 0 0 3px var(--ui-anillo);
}

/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */
.table {
    color: var(--ui-texto);
    background-color: transparent;
    box-shadow: none;
}

.table th,
.table td {
    padding: 0.65rem 0.75rem;
    vertical-align: middle;
    border-top: 1px solid var(--ui-borde);
}

.table-sm th,
.table-sm td {
    padding: 0.4rem 0.5rem;
}

.table thead th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ui-texto-suave);
    background-color: var(--ui-superficie-2);
    border-top: 0;
    border-bottom: 1px solid var(--ui-borde);
    white-space: nowrap;
}

/* Sin rejilla: solo lineas horizontales */
.table-bordered,
.table-bordered th,
.table-bordered td {
    border-left: 0;
    border-right: 0;
}

.table-bordered {
    border-top: 0;
    border-bottom: 1px solid var(--ui-borde);
}

.table-bordered thead th,
.table-bordered thead td {
    border-bottom-width: 1px;
}

.table-hover tbody tr:hover {
    background-color: var(--ui-hover);
    color: var(--ui-texto);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--ui-superficie-2);
}

.table td {
    font-variant-numeric: tabular-nums;
}

/* Modo oscuro: reemplaza los grises fijos de style.css */
[data-theme="dark"] table {
    background-color: transparent;
}

[data-theme="dark"] table thead {
    background-color: transparent;
}

[data-theme="dark"] table th,
[data-theme="dark"] table td {
    border-color: var(--ui-borde);
}

[data-theme="dark"] table tr:hover,
[data-theme="dark"] table tbody tr:hover,
[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--ui-hover) !important;
}

[data-theme="dark"] table thead tr:hover {
    background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   DataTables
   -------------------------------------------------------------------------- */
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label,
div.dataTables_wrapper div.dataTables_info {
    font-size: 13px;
    color: var(--ui-texto-suave);
}

div.dataTables_wrapper div.dataTables_length select {
    border-radius: 999px;
}

div.dataTables_wrapper div.dataTables_filter input {
    border-radius: 999px;
    padding-left: 14px;
    padding-right: 14px;
}

table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc {
    padding-right: 26px;
}

/* --------------------------------------------------------------------------
   Paginacion (style.css anulaba el color de la pagina activa)
   -------------------------------------------------------------------------- */
.pagination {
    gap: 4px;
}

.page-link,
.page-item:first-child .page-link,
.page-item:last-child .page-link {
    margin-left: 0;
    border-radius: var(--ui-radio-sm);
    border: 1px solid var(--ui-borde);
    background-color: var(--ui-superficie);
    color: var(--ui-texto);
    box-shadow: none;
}

.page-link:hover {
    background-color: var(--ui-hover);
    border-color: var(--ui-borde);
    color: var(--ui-texto);
}

.page-link:focus {
    box-shadow: 0 0 0 3px var(--ui-anillo);
}

.page-item.active .page-link {
    background-color: var(--ui-acento);
    border-color: var(--ui-acento);
    color: #fff;
}

.page-item.disabled .page-link {
    background-color: var(--ui-superficie);
    border-color: var(--ui-borde);
    color: var(--ui-texto-suave);
    opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Menus desplegables (solo aspecto: la posicion la sigue dando style.css)
   -------------------------------------------------------------------------- */
.dropdown-menu {
    border: 1px solid var(--ui-borde);
    border-radius: 10px;
    padding: 6px;
    background-color: var(--ui-superficie);
    color: var(--ui-texto);
    box-shadow: var(--ui-sombra-alta);
}

.dropdown-item {
    border-radius: 6px;
    padding: 0.45rem 0.75rem;
    background-color: transparent;
    color: var(--ui-texto);
    box-shadow: none;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--ui-hover);
    color: var(--ui-texto);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--ui-acento);
    color: #fff;
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--ui-superficie);
}

/* --------------------------------------------------------------------------
   Modales
   -------------------------------------------------------------------------- */
.modal-content,
[data-theme="dark"] .modal-content {
    background-color: var(--ui-superficie) !important;
    color: var(--ui-texto) !important;
    border: 1px solid var(--ui-borde);
    border-radius: 16px;
    box-shadow: var(--ui-sombra-alta);
    /* Sin overflow:hidden: recortaba las listas de los selects que se abren dentro de la modal */
}

.modal-header,
.modal-body,
.modal-footer {
    background-color: transparent;
    color: inherit;
    box-shadow: none;
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ui-borde);
}

.modal-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--ui-borde);
}

.modal-header .close {
    color: inherit;
    text-shadow: none;
}

.modal-backdrop.show {
    opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Badges y alertas
   -------------------------------------------------------------------------- */
.badge {
    padding: 0.3em 0.65em;
    border-radius: 999px;
    font-weight: 600;
}

.alert {
    border-radius: 10px;
}

/* ==========================================================================
   FASE 2 - Encabezado y menu lateral
   ========================================================================== */
/* Menu lateral: claro en modo claro y oscuro en modo oscuro */
:root {
    /* Tono azul grisaceo muy suave: separa el menu del contenido sin oscurecerlo */
    --ui-sidebar: #eef3f9;
    --ui-sidebar-2: #ffffff;
    --ui-sidebar-texto: #3a4556;
    --ui-sidebar-texto-fuerte: #1b2433;
    --ui-sidebar-icono: #6b84a6;
    --ui-sidebar-hover: rgba(39, 104, 172, 0.08);
    --ui-sidebar-activo: rgba(39, 104, 172, 0.15);
    --ui-sidebar-acento: #2768ac;
    --ui-sidebar-tarjeta: #ffffff;
    --ui-sidebar-tarjeta-borde: #dde6f1;
    --ui-sidebar-chip: #eef3f9;
    --ui-sidebar-borde: #dde6f1;
    --ui-sidebar-scroll: rgba(0, 0, 0, 0.15);
    --ui-sidebar-saldo: #1a7f3a;
    --ui-sidebar-saldo-fondo: rgba(26, 138, 58, 0.10);

    /* Rojo de la marca DAOX: normal sobre fondo claro y mas claro sobre fondo oscuro */
    --ui-marca-rojo: #e0241b;
}

[data-theme="dark"] {
    --ui-marca-rojo: #ff4b3e;
}

[data-theme="dark"] {
    --ui-sidebar: #101117;
    --ui-sidebar-2: #1a1b24;
    --ui-sidebar-texto: #c4c7d2;
    --ui-sidebar-texto-fuerte: #ffffff;
    --ui-sidebar-icono: #8a8fa3;
    --ui-sidebar-hover: rgba(255, 255, 255, 0.06);
    --ui-sidebar-activo: rgba(58, 123, 200, 0.24);
    --ui-sidebar-acento: #7cb8ff;
    --ui-sidebar-tarjeta: rgba(255, 255, 255, 0.04);
    --ui-sidebar-tarjeta-borde: transparent;
    --ui-sidebar-chip: rgba(255, 255, 255, 0.08);
    --ui-sidebar-borde: rgba(255, 255, 255, 0.04);
    --ui-sidebar-scroll: rgba(255, 255, 255, 0.14);
    --ui-sidebar-saldo: #6fd99a;
    --ui-sidebar-saldo-fondo: rgba(60, 195, 95, 0.14);

    /* variables de style.css */
    --sidebar-bg: var(--ui-sidebar);
    --navbar-bg: var(--ui-superficie);
    --app-header__logo: var(--ui-sidebar);
}

/* --------------------------------------------------------------------------
   Encabezado
   -------------------------------------------------------------------------- */
.app-header,
[data-theme="dark"] .app-header {
    background-color: var(--ui-superficie) !important;
    border-bottom: 1px solid var(--ui-borde);
    align-items: center;
}

.app-header h4 {
    margin: 0;
}

/* Logo: un solo color, sin sombras */
a.app-header__logo {
    margin-top: 0;
    line-height: 50px;
    font-family: var(--ui-fuente);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ui-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-header__logo span.D,
.app-header__logo span.AA {
    color: inherit;
    text-shadow: none;
}

.app-header__logo span.AA {
    color: var(--ui-acento);
}

/* "DA" conserva el rojo de la marca (tambien colorea el nombre de empresa en roles 4 y otros) */
.app-header__logo span.D {
    color: var(--ui-marca-rojo);
}

.app-header__logo span#mts {
    font-size: 19px;
    font-weight: 400;
    opacity: 0.75;
}

@media (min-width: 768px) {
    /* En escritorio el logo forma columna con el menu lateral */
    a.app-header__logo,
    [data-theme="dark"] a.app-header__logo {
        align-self: stretch;
        background-color: var(--ui-sidebar) !important;
        border-right: 1px solid var(--ui-sidebar-borde);
        color: var(--ui-sidebar-texto-fuerte);
    }

    .app-header__logo span.AA {
        color: var(--ui-sidebar-acento);
    }

    /* Con el menu colapsado (50px) el logo ya no forma columna con el */
    .sidenav-toggled a.app-header__logo,
    [data-theme="dark"] .sidenav-toggled a.app-header__logo {
        background-color: transparent !important;
        border-right: 0;
        color: var(--ui-texto);
    }

    .sidenav-toggled .app-header__logo span.AA {
        color: var(--ui-acento);
    }
}

@media (max-width: 767px) {
    a.app-header__logo,
    [data-theme="dark"] a.app-header__logo {
        background-color: transparent !important;
    }
}

/* Al pasar el mouse el logo conserva su color (antes heredaba el texto de la pagina) */
.app-header__logo:hover,
.app-header__logo:focus {
    color: var(--ui-texto);
}

@media (min-width: 768px) {
    .app:not(.sidenav-toggled) .app-header__logo:hover,
    .app:not(.sidenav-toggled) .app-header__logo:focus {
        color: var(--ui-sidebar-texto-fuerte);
    }
}

.app-header__logo span#mts {
    color: inherit;
}

/* Boton de menu (hamburguesa) */
.app-sidebar__toggle {
    align-self: center;
    width: 38px;
    height: 38px;
    margin: 0 8px;
    padding: 0;
    border-radius: var(--ui-radio-sm);
    font-size: 17px;
    line-height: 1;
    color: var(--ui-texto-suave);
}

.app-sidebar__toggle:hover,
.app-sidebar__toggle:focus {
    background-color: var(--ui-hover);
    color: var(--ui-texto);
}

/* Iconos de la derecha */
.app-nav {
    align-items: center;
    gap: 4px;
}

.app-nav__item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 10px;
    line-height: 20px;
    border-radius: var(--ui-radio-sm);
    color: var(--ui-texto-suave);
}

.app-nav__item:hover,
.app-nav__item:focus {
    background-color: var(--ui-hover);
    color: var(--ui-texto);
    text-decoration: none;
}

.app-nav__item .fa-lg {
    font-size: 1.15em;
}

/* Menu de usuario: inicial + nombre */
.app-nav__avatar {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    background-color: var(--ui-acento);
    color: #fff;
}

.app-nav__nombre {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-texto);
}

/* Interruptor claro/oscuro: la perilla de color indica el tema actual
   (sol ambar en claro, luna azul en oscuro) y el icono activo va en blanco encima */
.switch {
    width: 62px;
    height: 30px;
    margin: 0 6px 0 0;
    padding: 0 8px;
    border: 1px solid #f0cf73;
    background-color: #fff6dc;
    transition: background-color .25s ease, border-color .25s ease;
}

.switch.active {
    border-color: #3d5f92;
    background-color: #1b2740;
}

.switch:hover {
    box-shadow: 0 0 0 3px var(--ui-anillo);
}

.switch i {
    font-size: 13px;
    color: #b58a1b;
    transition: color .25s ease;
}

.switch.active i {
    color: #8fa6c9;
}

.switch::before {
    top: 50%;
    left: 2px;
    width: 26px;
    height: 26px;
    transform: translateY(-50%);
    background-color: #f5b301;
    box-shadow: 0 2px 6px rgba(181, 120, 0, 0.45);
    transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.switch.active::before {
    transform: translate(30px, -50%);
    background-color: #3a7bc8;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.switch:not(.active) .fa-sun,
.switch.active .fa-moon {
    color: #fff;
}

/* Notificaciones */
.app-notification__title {
    padding: 10px 16px;
    font-weight: 600;
    text-align: left;
    background-color: transparent;
    color: var(--ui-texto);
    border-bottom: 1px solid var(--ui-borde);
}

.app-notification__item {
    border-radius: 6px;
    border-bottom: 0;
    padding: 8px 10px;
}

.app-notification__item:hover,
.app-notification__item:focus {
    background-color: var(--ui-hover);
}

/* --------------------------------------------------------------------------
   Menu lateral
   -------------------------------------------------------------------------- */
.app-sidebar,
[data-theme="dark"] .app-sidebar {
    padding-top: 62px;
    background-color: var(--ui-sidebar) !important;
    box-shadow: none;
    border-right: 1px solid var(--ui-sidebar-borde);
}

.app-sidebar::-webkit-scrollbar-thumb {
    background: var(--ui-sidebar-scroll);
    border-radius: 3px;
}

/* Tarjeta del usuario */
.app-sidebar__user {
    gap: 12px;
    margin: 0 10px 14px;
    padding: 12px;
    border: 1px solid var(--ui-sidebar-tarjeta-borde);
    border-radius: 12px;
    background-color: var(--ui-sidebar-tarjeta);
    color: var(--ui-sidebar-texto-fuerte);
}

[data-theme="light"] .app-sidebar__user,
:root:not([data-theme="dark"]) .app-sidebar__user {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.app-sidebar__user > div {
    min-width: 0;
}

.app-sidebar__user-avatar {
    width: 42px;
    height: 42px;
    margin-right: 0;
    padding: 0;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--ui-sidebar-2);
}

.app-sidebar__user-name,
[data-theme="dark"] .app-sidebar__user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-sidebar-texto-fuerte) !important;
}

/* Nombres largos: hasta dos lineas en vez de cortarse */
.app-sidebar__user-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow-wrap: anywhere;
}

.app-sidebar__user-designation {
    font-size: 12px;
    color: var(--ui-sidebar-icono);
}

/* Saldo como chip. functions_ventas/combos reescriben su texto, por eso el icono va en ::before */
.app-sidebar__saldo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin-top: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ui-sidebar-saldo);
    background-color: var(--ui-sidebar-saldo-fondo);
}

.app-sidebar__saldo::before {
    content: "\f555";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
}

.app-sidebar__saldo:empty {
    display: none;
}

/* Codigo y saldo en chips que bajan de linea si no caben (codigos largos como ADAMD001) */
.app-sidebar__user-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.app-sidebar__user-chips .app-sidebar__saldo {
    margin-top: 0;
}

.app-sidebar__codigo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ui-sidebar-texto-fuerte);
    background-color: var(--ui-sidebar-chip);
}

/* Etiqueta "Cód." en tono suave para que resalte el codigo */
.app-sidebar__codigo small {
    margin-right: -2px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ui-sidebar-icono);
}

/* Elementos del menu */
.app-menu {
    padding: 0 10px 40px;
}

.app-menu__item,
.treeview.is-expanded [data-toggle='treeview'] {
    margin: 2px 0;
    padding: 9px 12px;
    border-left: 0;
    border-radius: var(--ui-radio-sm);
    font-size: 14px;
    color: var(--ui-sidebar-texto);
    background-color: transparent;
    box-shadow: none;
}

.app-menu__icon {
    width: 28px;
    color: var(--ui-sidebar-icono);
    transition: color .15s ease;
}

[data-theme="dark"] .app-menu__label {
    color: inherit !important;
}

.app-menu__item:hover,
.app-menu__item:focus,
.treeview.is-expanded [data-toggle='treeview'] {
    background-color: var(--ui-sidebar-hover);
    color: var(--ui-sidebar-texto-fuerte);
}

.app-menu__item:hover .app-menu__icon,
.treeview.is-expanded [data-toggle='treeview'] .app-menu__icon {
    color: var(--ui-sidebar-texto-fuerte);
}

/* Activo: fondo de acento suave y una barra fina a la izquierda */
.app-menu__item.active,
.app-menu__item.active:hover {
    background-color: var(--ui-sidebar-activo);
    color: var(--ui-sidebar-texto-fuerte);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--ui-sidebar-acento);
}

.app-menu__item.active .app-menu__icon {
    color: var(--ui-sidebar-acento);
}

.treeview-indicator {
    font-size: 12px;
    opacity: 0.6;
}

/* Submenu */
.treeview-menu {
    background-color: transparent;
}

.treeview-item {
    margin: 1px 0;
    padding: 7px 12px 7px 22px;
    border-radius: var(--ui-radio-sm);
    font-size: 13px;
    color: var(--ui-sidebar-texto);
    background-color: transparent;
    box-shadow: none;
}

.treeview-item:hover,
.treeview-item:focus {
    background-color: var(--ui-sidebar-hover);
    color: var(--ui-sidebar-texto-fuerte);
}

.treeview-item.active,
.treeview-item.active:hover {
    background-color: transparent;
    color: var(--ui-sidebar-acento);
    font-weight: 600;
}

/* Las vinetas (fa-circle) eran negras por style.css: ahora puntos discretos */
.treeview-item .icon.fa-circle {
    margin-right: 12px;
    font-size: 5px;
    color: currentColor;
    opacity: 0.6;
}

.treeview-item.active .icon.fa-circle {
    opacity: 1;
}

/* Fondo oscuro detras del menu abierto en celular */
@media (max-width: 767px) {
    .app-sidebar__overlay {
        background-color: rgba(0, 0, 0, 0.45);
    }
}

/* Menu colapsado en escritorio (50px de ancho) */
@media (min-width: 768px) {
    .sidebar-mini.sidenav-toggled .app-sidebar__user {
        justify-content: center;
        margin: 0 0 14px;
        padding: 8px 0;
        border-color: transparent;
        background-color: transparent;
        box-shadow: none;
    }

    .sidebar-mini.sidenav-toggled .app-sidebar__user-avatar {
        width: 32px;
        height: 32px;
    }

    .sidebar-mini.sidenav-toggled .app-sidebar__user > div {
        display: none;
    }

    .sidebar-mini.sidenav-toggled .app-menu {
        padding: 0;
    }

    .sidebar-mini.sidenav-toggled .app-menu__item,
    .sidebar-mini.sidenav-toggled .treeview.is-expanded [data-toggle='treeview'] {
        margin: 0;
        padding: 12px 15px;
        border-radius: 0;
    }

    .sidebar-mini.sidenav-toggled .app-menu__label,
    .sidebar-mini.sidenav-toggled .treeview-menu {
        background-color: var(--ui-sidebar-2);
        color: var(--ui-sidebar-texto-fuerte);
        box-shadow: var(--ui-sombra-alta);
    }

    .sidebar-mini.sidenav-toggled .treeview:hover .app-menu__item {
        background-color: var(--ui-sidebar-2);
    }

    .sidebar-mini.sidenav-toggled .treeview-menu {
        padding: 6px;
    }
}

/* ==========================================================================
   FASE 3 - Piezas reutilizables para las vistas
   ========================================================================== */

/* Indicadores (KPIs) */
.ui-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.ui-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--ui-borde);
    border-radius: var(--ui-radio);
    background-color: var(--ui-superficie);
    box-shadow: var(--ui-sombra);
}

.ui-kpi-icono {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 18px;
    color: var(--ui-acento);
    background-color: var(--ui-acento-suave);
}

.ui-kpi-icono-bueno {
    color: #1a8a3a;
    background-color: rgba(26, 138, 58, 0.10);
}

[data-theme="dark"] .ui-kpi-icono-bueno {
    color: #5fd38a;
    background-color: rgba(60, 195, 95, 0.14);
}

.ui-kpi-titulo {
    display: block;
    font-size: 13px;
    color: var(--ui-texto-suave);
}

.ui-kpi-valor {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

/* Unidad junto al numero ("en pesos (COP)", "COP") */
.ui-kpi-unidad {
    font-size: 13px;
    font-weight: 500;
    color: var(--ui-texto-suave);
}

/* Encabezado de tarjeta con acciones o filtros a la derecha */
.ui-tile-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 16px;
}

.ui-tile-encabezado .tile-title {
    margin-bottom: 0;
}

/* Filtros en linea (fecha + hora) */
.ui-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
}

.ui-filtro label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--ui-texto-suave);
}

.ui-filtro-campos {
    display: flex;
    gap: 6px;
}

.ui-filtro-campos input[type="date"] {
    width: 150px;
}

.ui-filtro-campos input[type="time"],
.ui-filtro-campos input[type="number"] {
    width: 110px;
}

@media (max-width: 576px) {
    .ui-filtros,
    .ui-filtro {
        width: 100%;
    }

    .ui-filtro-campos input[type="date"],
    .ui-filtro-campos input[type="time"] {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .ui-filtros .btn {
        width: 100%;
    }
}

/* Graficos de Chart.js dentro de embed-responsive */
.ui-grafico canvas {
    width: 100%;
    height: 90%;
}

/* Filtros tipo pildora (mismo estilo que Cpanel / Transacciones) */
.ui-pildoras {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--ui-borde);
    background-color: var(--ui-superficie-2);
}

.ui-pildoras button {
    padding: 5px 14px;
    border: 0;
    border-radius: 999px;
    font-size: 13px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.ui-pildoras button:hover {
    background-color: var(--ui-hover);
}

.ui-pildoras button.activo {
    background-color: var(--ui-acento);
    color: #fff;
}

.ui-pildoras button:focus-visible {
    outline: 2px solid var(--ui-acento);
    outline-offset: 2px;
}

/* Productos mas vendidos (Dashboard) */
.tp-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.tp-resumen:empty {
    display: none;
}

.tp-dato {
    padding: 12px 14px;
    border-radius: 12px;
    background-color: var(--ui-superficie-2);
}

.tp-dato > span:first-child {
    display: block;
    font-size: 12px;
    color: var(--ui-texto-suave);
}

.tp-dato strong {
    display: block;
    font-size: 1.3rem;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.tp-variacion {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background-color: var(--ui-hover);
    color: var(--ui-texto-suave);
}

.tp-variacion.sube { color: #1a8a3a; background-color: rgba(26, 138, 58, 0.12); }
.tp-variacion.baja { color: #d03b3b; background-color: rgba(208, 59, 59, 0.12); }

[data-theme="dark"] .tp-variacion.sube { color: #5fd38a; }
[data-theme="dark"] .tp-variacion.baja { color: #ff7b72; }

.tp-lista {
    display: grid;
    gap: 6px;
}

.tp-fila {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 14px;
    padding: 10px 12px;
    border-radius: 12px;
}

.tp-fila:hover {
    background-color: var(--ui-hover);
}

.tp-puesto {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ui-texto-suave);
    background-color: var(--ui-superficie-2);
}

.tp-fila:nth-child(1) .tp-puesto { color: #fff; background-color: var(--ui-acento); }

.tp-nombre {
    min-width: 0;
}

.tp-nombre strong {
    display: block;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-barra {
    height: 8px;
    margin-top: 6px;
    border-radius: 999px;
    background-color: var(--ui-superficie-2);
    overflow: hidden;
}

.tp-barra span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #5aa2ff, var(--ui-acento));
}

.tp-cifras {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tp-cifras strong {
    display: block;
    font-size: 15px;
}

.tp-cifras small {
    display: block;
    font-size: 12px;
    color: var(--ui-texto-suave);
}

/* Filtros de mercado y periodo */
.tp-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Nacional = azul de la marca, internacional = morado */
.tp-chip {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
    color: #7b4bd1;
    background-color: rgba(123, 75, 209, 0.12);
}

[data-theme="dark"] .tp-chip {
    color: #b79bff;
}

.tp-barra-internacional span {
    background: linear-gradient(90deg, #b79bff, #7b4bd1);
}

.tp-mercados div {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 13px;
}

.tp-mercados b {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.tp-mercados small {
    min-width: 46px;
    text-align: right;
    color: var(--ui-texto-suave);
}

.tp-marca {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.tp-marca-nacional { background-color: var(--ui-acento); }
.tp-marca-internacional { background-color: #7b4bd1; }

.tp-vacio {
    padding: 18px 0;
    text-align: center;
    color: var(--ui-texto-suave);
}

@media (max-width: 576px) {
    .ui-tile-encabezado .ui-pildoras,
    .tp-filtros {
        width: 100%;
        justify-content: space-between;
    }

    .tp-fila {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .tp-cifras {
        grid-column: 2;
        text-align: left;
    }

    .tp-cifras strong,
    .tp-cifras small {
        display: inline;
        margin-right: 8px;
    }
}

/* Cargador a pantalla completa (toggleLoader) */
.loading {
    background-color: rgba(0, 0, 0, 0.25);
}

.loading > i {
    color: var(--ui-acento);
}

/* ==========================================================================
   FASE 4 - Modales y login
   ========================================================================== */

/* Muchas modales envuelven el formulario en una .tile: dentro de la modal se aplana */
.modal .tile,
[data-theme="dark"] .modal .tile {
    margin-bottom: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent !important;
}

.modal .tile-title {
    margin-bottom: 18px;
    padding-right: 32px;
    font-size: 1.1rem;
}

/* Boton cerrar (x): tambien cuando la modal no tiene .modal-header */
.modal .close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border-radius: var(--ui-radio-sm);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    opacity: 0.6;
}

.modal .close:hover,
.modal .close:focus {
    opacity: 1;
    background-color: var(--ui-hover);
}

.modal-header .close {
    margin: -4px -6px -4px auto;
}

.modal-body > .close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
}

/* Pie de formulario dentro de modales (tile-footer): botones a la derecha */
.tile-footer {
    border-top-color: var(--ui-borde);
}

.modal .tile-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
}

.modal .tile-footer > .row {
    flex: 1 1 100%;
    margin: 0;
    justify-content: flex-end;
}

.modal .tile-footer > .row > [class*="col-"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: none;
    padding: 0;
}

/* Iconos de FA4 de ancho fijo dentro de botones de modales */
.modal .btn .fa-fw.fa-lg {
    width: auto;
    font-size: 1em;
}

.modal-footer > * {
    margin: 0;
}

.modal-footer {
    gap: 8px;
}

/* Icono decorativo antes de la etiqueta de cada campo */
.modal .form-group > i:first-child {
    width: 18px;
    color: var(--ui-texto-suave);
}

.modal .form-group {
    margin-bottom: 14px;
}

.modal-dialog-scrollable .modal-body,
.modal-body {
    overflow-wrap: anywhere;
}

@media (max-width: 576px) {
    .modal-dialog {
        margin: 12px;
    }

    .modal .tile-footer .btn,
    .modal-footer .btn {
        flex: 1 1 auto;
    }
}

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */
/* Fondo inmersivo: toda la pantalla en azul profundo con aros de la marca
   y una tarjeta translucida centrada. Igual en escritorio y celular. */
.ui-login {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 16px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(900px 600px at 15% 0%, rgba(39, 104, 172, 0.55), transparent 60%),
        radial-gradient(700px 500px at 100% 100%, rgba(224, 36, 27, 0.28), transparent 60%),
        linear-gradient(160deg, #0a2748 0%, #061a33 55%, #040f20 100%);
}

/* Rejilla de puntos muy tenue sobre el fondo */
.ui-login-fondo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* Aros de la marca (azul y rojo) */
.ui-login-aro {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(90, 162, 255, 0.28);
}

.ui-login-aro-1 {
    width: 560px;
    height: 560px;
    top: -220px;
    right: -160px;
    box-shadow: 0 0 0 70px rgba(90, 162, 255, 0.04), 0 0 0 140px rgba(90, 162, 255, 0.025);
}

.ui-login-aro-2 {
    width: 340px;
    height: 340px;
    bottom: -150px;
    left: -110px;
    border-color: rgba(255, 75, 62, 0.35);
    box-shadow: 0 0 0 50px rgba(255, 75, 62, 0.05);
}

.ui-login-aro-3 {
    width: 120px;
    height: 120px;
    top: 18%;
    left: 12%;
    border-color: rgba(255, 255, 255, 0.10);
}

/* Tarjeta translucida */
.ui-login-tarjeta {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    padding: 34px 30px 26px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
    -webkit-backdrop-filter: blur(18px);
            backdrop-filter: blur(18px);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.ui-login-marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    text-align: center;
}

.ui-login-marca img {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.10), 0 10px 24px rgba(0, 0, 0, 0.35);
}

.ui-login-nombre {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.ui-login-nombre .D { color: #ff5a4e; }
.ui-login-nombre .AA { color: #8fc2ff; }

.ui-login-nombre small {
    font-size: inherit;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
}

.ui-login h1 {
    margin: 6px 0 2px;
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
}

.ui-login-subtitulo {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
}

.ui-login label {
    color: rgba(255, 255, 255, 0.85);
}

/* Campos oscuros translucidos */
.ui-login-campo {
    position: relative;
}

.ui-login-campo > i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
}

.ui-login-campo .form-control {
    height: 46px;
    padding-left: 40px;
    padding-right: 44px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background-color: rgba(4, 15, 32, 0.45);
    color: #fff;
}

.ui-login-campo .form-control::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.ui-login-campo .form-control:focus {
    border-color: #5aa2ff;
    background-color: rgba(4, 15, 32, 0.6);
    box-shadow: 0 0 0 3px rgba(90, 162, 255, 0.30);
    color: #fff;
}

/* Autocompletado del navegador: conserva el fondo oscuro */
.ui-login-campo .form-control:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #0b2340 inset;
    caret-color: #fff;
}

/* Boton para ver la contrasena */
.ui-login-ver {
    position: absolute;
    top: 50%;
    right: 6px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    transform: translateY(-50%);
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.ui-login-ver:hover,
.ui-login-ver:focus-visible {
    background-color: rgba(255, 255, 255, 0.10);
    color: #fff;
    outline: none;
}

/* Aviso de error dentro de la tarjeta */
.ui-login-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 2px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 90, 78, 0.45);
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
    color: #ffd9d6;
    background-color: rgba(224, 36, 27, 0.16);
}

.ui-login-error[hidden] {
    display: none;
}

.ui-login-error i {
    margin-top: 2px;
    color: #ff7b72;
}

.ui-login-error-animar {
    animation: uiLoginSacudir .35s ease;
}

@keyframes uiLoginSacudir {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
}

@media (prefers-reduced-motion: reduce) {
    .ui-login-error-animar {
        animation: none;
    }
}

/* Boton rojo DAOX */
.ui-login .btn-primary,
.ui-login .btn-primary:disabled {
    height: 46px;
    margin-top: 10px;
    border: 0;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #ff4b3e 0%, #e0241b 60%, #b81810 100%);
    box-shadow: 0 10px 22px -8px rgba(224, 36, 27, 0.75);
}

.ui-login .btn-primary:hover,
.ui-login .btn-primary:focus {
    background: linear-gradient(135deg, #ff5a4e 0%, #e83026 60%, #c41c13 100%);
    box-shadow: 0 12px 26px -8px rgba(224, 36, 27, 0.85);
}

.ui-login .btn-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 90, 78, 0.45) !important;
}

.ui-login-pie {
    margin: 22px 0 0;
    font-size: 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
}

.ui-login-pie i {
    margin-right: 4px;
    color: #5fd38a;
}

@media (max-width: 480px) {
    .ui-login-tarjeta {
        padding: 28px 20px 22px;
        border-radius: 18px;
    }

    .ui-login-aro-1 {
        width: 360px;
        height: 360px;
        top: -170px;
        right: -170px;
    }

    .ui-login-aro-3 {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Requisitos de contrasena en vivo (Views/Template/Modals/PoliticaPassword.php
   y Assets/js/politica_password.js)
   -------------------------------------------------------------------------- */
.ui-politica {
    --ui-politica-ok: #1a7f37;
    --ui-politica-error: #c0392b;
    list-style: none;
    margin: 4px 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--ui-borde);
    border-radius: var(--ui-radio-sm);
    background: var(--ui-superficie-2);
    font-size: 0.85rem;
}

[data-theme="dark"] .ui-politica {
    --ui-politica-ok: #5fd38a;
    --ui-politica-error: #ff8a80;
}

.ui-politica li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    color: var(--ui-texto-suave);
    transition: color 0.15s ease;
}

.ui-politica li i {
    width: 14px;
    text-align: center;
    color: inherit;
}

.ui-politica li.ok {
    color: var(--ui-politica-ok);
}

/* solo se marca en rojo lo que falla cuando ya hay algo escrito */
.ui-politica li.mal {
    color: var(--ui-politica-error);
}

/* Boton "Recargar saldo" (Ventas/Combos): pildora con degradado y brillo para destacar la accion de pago */
.btn-recargar-saldo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border: none;
    border-radius: 999px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #18a558, #0ea5a5);
    box-shadow: 0 6px 16px rgba(14, 165, 165, 0.40);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    /* Brillo + el mismo latido de "Nueva venta" (keyframes pulse en main.css) */
    animation: pulso-recarga 2.6s ease-in-out infinite, pulse 1.5s infinite;
}
.btn-recargar-saldo:hover,
.btn-recargar-saldo:focus {
    animation: none;
    color: #fff;
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 10px 24px rgba(24, 165, 88, 0.55);
}
.btn-recargar-saldo:active {
    transform: translateY(0);
}
@keyframes pulso-recarga {
    0%, 100% { box-shadow: 0 6px 16px rgba(14, 165, 165, 0.40); }
    50% { box-shadow: 0 8px 24px rgba(24, 165, 88, 0.70); }
}
@media (prefers-reduced-motion: reduce) {
    .btn-recargar-saldo { animation: none; }
}

/* Dashboard > Almacen: cuadricula compacta de productos con sus cuentas disponibles */
.alm-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-bottom: 16px;
}
.alm-resumen {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.alm-resumen span {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--ui-hover);
    color: var(--ui-texto-suave);
}
.alm-resumen .alm-ok { color: #16a34a; }
.alm-resumen .alm-agotado { color: #dc2626; }
.alm-controles {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}
.alm-controles input[type=search] {
    width: 220px;
    border-radius: 999px;
}
.alm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    color: var(--ui-texto-suave);
    white-space: nowrap;
    cursor: pointer;
}
.alm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}
.alm-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--ui-borde);
    border-left: 4px solid #16a34a;
    border-radius: var(--ui-radio-sm);
    background: var(--ui-superficie);
}
.alm-item span {
    font-size: 13px;
    line-height: 1.3;
}
.alm-item strong {
    min-width: 36px;
    padding: 2px 8px;
    border-radius: 999px;
    text-align: center;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    background: rgba(22, 163, 74, 0.14);
    color: #16a34a;
}
/* Pocas cuentas (menos de 5) */
.alm-item.alm-bajo { border-left-color: #d97706; }
.alm-item.alm-bajo strong { background: rgba(217, 119, 6, 0.15); color: #d97706; }
/* Agotado */
.alm-item.alm-vacio { border-left-color: #dc2626; opacity: .7; }
.alm-item.alm-vacio strong { background: rgba(220, 38, 38, 0.14); color: #dc2626; }
.alm-sin-resultados {
    grid-column: 1 / -1;
    padding: 16px;
    text-align: center;
    color: var(--ui-texto-suave);
}
@media (max-width: 576px) {
    .alm-controles { margin-left: 0; width: 100%; }
    .alm-controles input[type=search] { flex: 1; width: auto; }
}

/* Boton de ayuda del encabezado */
.app-nav__ayuda i { font-size: 1.3em; }

/* ===== Centro de ayuda (Controllers/Ayuda.php) ===== */
.ayuda { --ayuda-acento: var(--ui-acento); }

/* Portada con saludo y buscador */
.ayuda-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    padding: 36px 32px 32px;
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .18), transparent 40%),
        radial-gradient(circle at 10% 110%, rgba(14, 165, 165, .55), transparent 45%),
        linear-gradient(135deg, #1f4f8f 0%, #2768ac 55%, #3a7bc8 100%);
    box-shadow: var(--ui-sombra-alta);
}
.ayuda-hero-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    background: rgba(255, 255, 255, .16);
}
.ayuda-hero h1 { margin: 14px 0 6px; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; color: #fff; }
.ayuda-hero p { margin: 0 0 22px; opacity: .88; }
.ayuda-buscar { position: relative; max-width: 640px; }
.ayuda-buscar i {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    color: #687080;
    pointer-events: none;
}
.ayuda-buscar input {
    width: 100%;
    height: 54px;
    padding: 0 20px 0 50px;
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    color: #1f2328;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    outline: none;
}
.ayuda-buscar input:focus { box-shadow: 0 0 0 4px rgba(255, 255, 255, .35), 0 10px 30px rgba(0, 0, 0, .18); }

/* Tarjetas de temas */
.ayuda-temas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.ayuda-tema {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--ui-borde);
    border-radius: 16px;
    background: var(--ui-superficie);
    color: var(--ui-texto);
    text-decoration: none;
    box-shadow: var(--ui-sombra);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ayuda-tema:hover {
    transform: translateY(-2px);
    border-color: var(--ayuda-acento);
    color: var(--ui-texto);
    text-decoration: none;
    box-shadow: var(--ui-sombra-alta);
}
.ayuda-tema-icono {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 19px;
    color: var(--ayuda-acento);
    background: var(--ui-acento-suave);
}
.ayuda-tema-icono.grande { width: 58px; height: 58px; font-size: 24px; border-radius: 16px; }
.ayuda-tema-texto { flex: 1; min-width: 0; }
.ayuda-tema-texto strong { display: block; font-size: 15px; margin-bottom: 2px; }
.ayuda-tema-texto small {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ui-texto-suave);
}
.ayuda-tema-flecha { color: var(--ui-texto-suave); font-size: 12px; transition: transform .15s ease; }
.ayuda-tema:hover .ayuda-tema-flecha { transform: translateX(3px); color: var(--ayuda-acento); }
.ayuda-vacio { display: none; grid-column: 1 / -1; padding: 30px; text-align: center; color: var(--ui-texto-suave); }

/* Lectura: lista lateral + articulo */
.ayuda-lectura { display: none; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.ayuda-lateral {
    position: sticky;
    top: 80px;
    padding: 14px;
    border: 1px solid var(--ui-borde);
    border-radius: 16px;
    background: var(--ui-superficie);
}
.ayuda-volver {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    font-weight: 600;
    color: var(--ayuda-acento);
}
.ayuda-volver:hover { background: var(--ui-acento-suave); text-decoration: none; }
.ayuda-lateral nav { display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 190px); overflow-y: auto; }
.ayuda-lateral nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13.5px;
    color: var(--ui-texto);
}
.ayuda-lateral nav a i { width: 18px; text-align: center; color: var(--ui-texto-suave); }
.ayuda-lateral nav a:hover { background: var(--ui-hover); text-decoration: none; }
.ayuda-lateral nav a.activo { background: var(--ui-acento-suave); color: var(--ayuda-acento); font-weight: 600; }
.ayuda-lateral nav a.activo i { color: var(--ayuda-acento); }

.ayuda-articulo {
    padding: 30px 34px;
    border: 1px solid var(--ui-borde);
    border-radius: 18px;
    background: var(--ui-superficie);
    box-shadow: var(--ui-sombra);
}
.ayuda-articulo-cabecera { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--ui-borde); }
.ayuda-articulo-cabecera h2 { margin: 0 0 4px; font-size: 1.55rem; font-weight: 700; }
.ayuda-articulo-cabecera p { margin: 0; color: var(--ui-texto-suave); }
.ayuda-subtitulo {
    margin: 26px 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ui-texto-suave);
}
.ayuda-articulo-cabecera + .ayuda-subtitulo { margin-top: 0; }

/* Pasos numerados con linea de tiempo */
.ayuda-pasos { list-style: none; counter-reset: paso; margin: 0; padding: 0; }
.ayuda-pasos li {
    position: relative;
    counter-increment: paso;
    padding: 4px 0 18px 50px;
    line-height: 1.6;
}
.ayuda-pasos li::before {
    content: counter(paso);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--ayuda-acento);
    box-shadow: 0 0 0 4px var(--ui-acento-suave);
}
.ayuda-pasos li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 38px;
    bottom: 4px;
    left: 15px;
    width: 2px;
    background: var(--ui-borde);
}
.ayuda-pasos li:last-child { padding-bottom: 4px; }

/* Nota destacada */
.ayuda-nota {
    display: flex;
    gap: 14px;
    margin-top: 22px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(217, 119, 6, .35);
    background: rgba(217, 119, 6, .09);
}
.ayuda-nota > i { margin-top: 3px; font-size: 18px; color: #d97706; }
.ayuda-nota strong { display: block; margin-bottom: 4px; }
.ayuda-nota p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; }

/* Pantallazos en marco de navegador */
.ayuda-galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.ayuda-galeria figure { margin: 0; }
.ayuda-pantalla {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ui-borde);
    border-radius: 14px;
    background: #0f1117;
    cursor: zoom-in;
    box-shadow: 0 12px 30px rgba(16, 24, 40, .18);
    transition: transform .15s ease, box-shadow .15s ease;
}
.ayuda-pantalla:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(16, 24, 40, .28); }
.ayuda-pantalla-barra { display: flex; gap: 6px; padding: 9px 12px; background: #262833; }
.ayuda-pantalla-barra i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.ayuda-pantalla-barra i:nth-child(2) { background: #febc2e; }
.ayuda-pantalla-barra i:nth-child(3) { background: #28c840; }
.ayuda-pantalla img { display: block; width: 100%; max-height: 420px; object-fit: cover; object-position: top; }
.ayuda-pantalla-zoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity .15s ease;
}
.ayuda-pantalla:hover .ayuda-pantalla-zoom { opacity: 1; }
.ayuda-galeria figcaption { margin-top: 8px; font-size: 12.5px; text-align: center; color: var(--ui-texto-suave); }

/* Anterior / siguiente */
.ayuda-articulo-pie { display: flex; justify-content: space-between; gap: 14px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--ui-borde); }
.ayuda-paginar {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 48%;
    padding: 12px 16px;
    border: 1px solid var(--ui-borde);
    border-radius: 12px;
    font-weight: 600;
    color: var(--ui-texto);
}
.ayuda-paginar small { font-weight: 400; color: var(--ui-texto-suave); }
.ayuda-paginar.siguiente { margin-left: auto; text-align: right; }
.ayuda-paginar:hover { border-color: var(--ayuda-acento); color: var(--ayuda-acento); text-decoration: none; }

.ayuda-pie { margin: 28px 0 40px; text-align: center; color: var(--ui-texto-suave); }

/* Visor de pantallazos */
.ayuda-visor {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 10, 16, .88);
    backdrop-filter: blur(4px);
}
.ayuda-visor.abierto { display: flex; }
.ayuda-visor figure { margin: 0; max-width: 1200px; }
.ayuda-visor img { display: block; max-width: 100%; max-height: 85vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.ayuda-visor figcaption { margin-top: 10px; color: #fff; text-align: center; }
.ayuda-visor-cerrar {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    font-size: 28px;
    line-height: 44px;
    color: #fff;
    background: rgba(255, 255, 255, .15);
    cursor: pointer;
}
.ayuda-visor-cerrar:hover { background: rgba(255, 255, 255, .25); }

@media (max-width: 992px) {
    .ayuda-lectura { grid-template-columns: 1fr; }
    .ayuda-lateral { position: static; padding: 6px; }
    .ayuda-lateral nav { display: none; }
    .ayuda-volver { margin: 0; }
}
@media (max-width: 576px) {
    .ayuda-hero { padding: 26px 18px 22px; border-radius: 16px; }
    .ayuda-articulo { padding: 22px 18px; }
    .ayuda-articulo-cabecera { align-items: flex-start; }
    .ayuda-paginar { max-width: 100%; }
    .ayuda-articulo-pie { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    .ayuda-tema, .ayuda-pantalla { transition: none; }
}