/* ==========================================================================
   components.css — Componentes unificados (QA de diseño 22/10)
   --------------------------------------------------------------------------
   Va la ÚLTIMA de las hojas: fija una sola versión de cada componente
   (controles de formulario, botones, badges, tarjetas, tablas, paginación…)
   con los valores de tokens.css, por encima de Keen y de los estilos
   sueltos que se fueron acumulando en cada hoja.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CONTROLES DE FORMULARIO
   Antes solo input[type=text|search] tenía estilo propio (gris, 35px, 11.7px)
   y email/tel/number/date caían en el .form-control de Keen (blanco, 44px).
   -------------------------------------------------------------------------- */
#facilita-app .form-control,
#facilita-app .form-select,
.app-main .form-control,
.app-main .form-select,
.modal .form-control,
.modal .form-select {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--bg-card);
    color: var(--text-strong);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: 20px;
    box-shadow: none;
}
:where(#facilita-app, .app-main, .modal) .form-control {
    padding: 9px 12px;
}
:where(#facilita-app, .app-main, .modal) .form-select {
    padding: 9px 36px 9px 12px;
}
#facilita-app input.form-control:not([type="file"]):not([type="range"]):not([type="color"]),
#facilita-app select.form-select:not([multiple]):not([size]),
.app-main input.form-control:not([type="file"]):not([type="range"]):not([type="color"]),
.app-main select.form-select:not([multiple]):not([size]),
.modal input.form-control:not([type="file"]):not([type="range"]):not([type="color"]),
.modal select.form-select:not([multiple]):not([size]) {
    height: var(--ctl-h);
    min-height: var(--ctl-h);
}
#facilita-app .form-control[type="file"],
.modal .form-control[type="file"] {
    min-height: var(--ctl-h);
    padding: 7px 12px;
}
#facilita-app textarea.form-control,
.modal textarea.form-control {
    min-height: 80px;
    line-height: 1.5;
}
/* Variante compacta: solo para barras de filtros densas */
#facilita-app input.form-control-sm:not([type="file"]),
#facilita-app select.form-select-sm:not([multiple]),
.modal input.form-control-sm:not([type="file"]),
.modal select.form-select-sm:not([multiple]) {
    height: var(--ctl-h-sm);
    min-height: var(--ctl-h-sm);
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 13px;
}
#facilita-app .form-control::placeholder,
.modal .form-control::placeholder {
    color: var(--text-muted);
    opacity: 1;
}
#facilita-app .form-control:focus,
#facilita-app .form-select:focus,
.app-main .form-control:focus,
.app-main .form-select:focus,
.modal .form-control:focus,
.modal .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft-strong);
    outline: none;
}
#facilita-app .form-control:disabled,
#facilita-app .form-control[readonly]:not(.flatpickr-input),
#facilita-app .form-select:disabled,
.modal .form-control:disabled,
.modal .form-select:disabled {
    background-color: var(--bg-subtle);
    color: var(--text-body);
}
#facilita-app .form-control.form-control-solid,
#facilita-app .form-select.form-select-solid,
.modal .form-control.form-control-solid,
.modal .form-select.form-select-solid {
    background-color: var(--bg-card);
    border-color: var(--border);
}
.form-label,
#facilita-app label.form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-strong);
    margin-bottom: 6px;
}
.form-text {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.form-check-label {
    font-size: var(--fs-base);
    color: var(--text-body);
}
.form-check-input:checked {
    background-color: var(--brand-fill);
    border-color: var(--brand-fill);
}
.form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft-strong);
}
/* iOS hace zoom en los campos de menos de 16px */
@media (max-width: 767.98px) {
    #facilita-app .form-control,
    #facilita-app .form-select,
    .app-main .form-control,
    .app-main .form-select,
    .modal .form-control,
    .modal .form-select,
    #facilita-app .search-input,
    .swal2-input,
    .swal2-textarea,
    .swal2-select {
        font-size: var(--fs-md) !important;
    }
}

/* --------------------------------------------------------------------------
   2. BOTONES — un solo sistema
   Alto --ctl-h, radio 8, 600 14px. Variantes: primario, secundario, suave,
   peligro, fantasma. El -sm solo encoge dentro de barras de filtros y tablas.
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-font-size: var(--fs-base);
    font-size: var(--fs-base);
    font-weight: 600;
    border-radius: var(--radius-md);
    min-height: var(--ctl-h);
    line-height: 20px;
    gap: var(--sp-2);
}
.btn:not(.btn-icon):not(.btn-link):not(.dropdown-toggle-split):not(.btn-action) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
}
.btn.btn-sm:not(.btn-icon):not(.btn-link) {
    padding: 9px 14px;
}
:is(.list-filters, .list-controls, .filters-bar, .filter-bar, table, .dataTable, .table-responsive) .btn.btn-sm {
    min-height: var(--ctl-h-sm);
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 13px;
}
.btn i, .btn .ki-outline {
    font-size: 1em;
    line-height: 1;
}

/* Primario */
.btn.btn-primary,
.btn-primary-facilitame,
.btn-facilitame {
    background-color: var(--brand-fill) !important;
    border: 1px solid var(--brand-fill) !important;
    color: #fff !important;
}
.btn.btn-primary:hover:not(:disabled),
.btn.btn-primary:focus-visible,
.btn-primary-facilitame:hover:not(:disabled),
.btn-facilitame:hover:not(:disabled) {
    background-color: var(--brand-fill-hover) !important;
    border-color: var(--brand-fill-hover) !important;
    color: #fff !important;
    transform: none;
}
.btn-primary-facilitame,
.btn-facilitame {
    height: auto !important;
    min-height: var(--ctl-h);
    padding: 9px 16px !important;
    border-radius: var(--radius-md) !important;
}
.btn.btn-primary i, .btn-primary-facilitame i, .btn-facilitame i { color: #fff; }

/* Secundario: blanco con borde */
.btn.btn-light,
.btn.btn-secondary,
.btn.btn-outline,
.btn.btn-outline-secondary,
.btn.btn-light-secondary,
.btn.btn-active-light {
    background-color: var(--bg-card);
    border: 1px solid var(--border-strong);
    color: var(--text-strong);
}
.btn.btn-light:hover:not(:disabled),
.btn.btn-secondary:hover:not(:disabled),
.btn.btn-outline:hover:not(:disabled),
.btn.btn-outline-secondary:hover:not(:disabled),
.btn.btn-light-secondary:hover:not(:disabled) {
    background-color: var(--bg-subtle);
    border-color: var(--border-strong);
    color: var(--text-strong);
}
.btn.btn-light i, .btn.btn-secondary i, .btn.btn-outline i { color: var(--text-body); }

/* Contorno de marca = secundario con texto de marca */
.btn.btn-outline-primary,
.btn.btn-outline-facilitame {
    background-color: var(--bg-card);
    border: 1px solid var(--brand);
    color: var(--brand-strong);
}
.btn.btn-outline-primary:hover:not(:disabled),
.btn.btn-outline-facilitame:hover:not(:disabled) {
    background-color: var(--brand-soft);
    color: var(--brand-strong-hover);
}
.btn.btn-outline-primary i { color: var(--brand-strong); }

/* Suave: fondo tenue, texto oscuro legible */
.btn.btn-light-primary { background-color: var(--brand-soft); border: 1px solid transparent; color: var(--brand-strong); }
.btn.btn-light-primary i { color: var(--brand-strong); }
.btn.btn-light-primary:hover:not(.btn-active):not(:disabled) { background-color: var(--brand-soft-strong); color: var(--brand-strong-hover); }
.btn.btn-light-primary:hover:not(.btn-active):not(:disabled) i { color: var(--brand-strong-hover); }
.btn.btn-light-success { background-color: var(--status-success-bg); color: var(--status-success-fg); }
.btn.btn-light-success i { color: var(--status-success-fg); }
.btn.btn-light-danger { background-color: var(--status-danger-bg); color: var(--status-danger-fg); }
.btn.btn-light-danger i { color: var(--status-danger-fg); }
.btn.btn-light-warning { background-color: var(--status-warning-bg); color: var(--status-warning-fg); }
.btn.btn-light-warning i { color: var(--status-warning-fg); }
.btn.btn-light-info { background-color: var(--status-info-bg); color: var(--status-info-fg); }
.btn.btn-light-info i { color: var(--status-info-fg); }

/* Peligro / éxito / aviso sólidos */
.btn.btn-danger { background-color: var(--status-danger-solid); border: 1px solid var(--status-danger-solid); color: #fff; }
.btn.btn-danger:hover:not(:disabled) { background-color: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn.btn-success { background-color: var(--status-success-solid); border: 1px solid var(--status-success-solid); color: #fff; }
.btn.btn-success:hover:not(:disabled) { background-color: #166534; border-color: #166534; color: #fff; }
.btn.btn-warning { background-color: var(--status-warning-solid); border: 1px solid var(--status-warning-solid); color: #fff; }
.btn.btn-warning:hover:not(:disabled) { background-color: #92400e; border-color: #92400e; color: #fff; }
.btn.btn-info { background-color: var(--status-info-solid); border: 1px solid var(--status-info-solid); color: #fff; }
.btn.btn-danger i, .btn.btn-success i, .btn.btn-warning i, .btn.btn-info i { color: #fff; }

/* Fantasma */
.btn.btn-ghost,
.btn.btn-active-color-primary:not(.active) {
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--text-body);
}
.btn.btn-ghost:hover:not(:disabled) { background-color: var(--bg-subtle); color: var(--text-strong); }

.btn:disabled, .btn.disabled { opacity: .55; }

/* --------------------------------------------------------------------------
   3. SWEETALERT — red de seguridad
   _helpers.js ya pone buttonsStyling:false y las clases .btn; esto cubre las
   llamadas que fuerzan el estilo propio de SweetAlert.
   -------------------------------------------------------------------------- */
.swal2-actions .btn {
    min-width: 112px;
    margin: 0 !important;
}
.swal2-actions .swal2-confirm.swal2-styled {
    background-color: var(--brand-fill) !important;
    color: #fff !important;
    border-radius: var(--radius-md) !important;
}
.swal2-actions .swal2-cancel.swal2-styled,
.swal2-actions .swal2-deny.swal2-styled {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-strong) !important;
    border-radius: var(--radius-md) !important;
}
.swal2-actions .swal2-styled:focus-visible,
.swal2-actions .btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}
.swal2-popup .swal2-title { font-size: var(--fs-lg) !important; }
.swal2-popup .swal2-html-container { font-size: var(--fs-base) !important; color: var(--text-body) !important; }
.swal2-popup.swal2-toast .swal2-title { font-size: var(--fs-base) !important; }
.swal2-timer-progress-bar { background: var(--brand) !important; }
/* Cancelar = botón secundario (antes gris claro que parecía deshabilitado) */
.swal2-actions .swal2-cancel.btn-light,
.swal2-actions .swal2-deny.btn-light {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-strong) !important;
}
.swal2-actions .swal2-cancel.btn-light:hover,
.swal2-actions .swal2-deny.btn-light:hover {
    background-color: var(--bg-subtle) !important;
}
/* El banner de cookies (z-index 99999) tapaba los campos de los modales en
   móvil: queda por encima de la barra lateral y la inferior, por debajo del
   modal. */
#cookie-banner { z-index: 1052 !important; }
/* Enlace «Saltar al contenido»: blanco sobre turquesa claro no se leía */
.skip-link { background: var(--brand-strong) !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   4. BADGES — una sola forma (22px, píldora, 11px/600, sin mayúsculas)
   Todas las variantes (badge-status-*, badge-light-*, badge-facilitame,
   b-amber, badge-blue, badge-sm…) leen la misma tabla de --status-*.
   -------------------------------------------------------------------------- */
.badge,
#facilita-app .badge-status,
.request-page .badge-status,
.logs-page .badge-status,
.badge-facilitame,
.b-amber,
.badge-blue {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs) !important;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none !important;
    white-space: nowrap;
    vertical-align: middle;
}
.badge.badge-sm { min-height: 22px; padding: 3px 8px; font-size: var(--fs-xs) !important; }
.badge.badge-circle,
.badge.badge-square {
    min-height: 0;
    padding: 0;
    justify-content: center;
}
.badge i { font-size: 1em; color: inherit; }

/* Tabla única de estados */
.badge-light-primary, .badge-status-primary, .badge-facilitame,
#facilita-app .badge-light-primary, #facilita-app .badge-status-primary,
.request-page .badge-status-primary {
    background-color: var(--status-primary-bg) !important; color: var(--status-primary-fg) !important;
}
.badge-light-info, .badge-status-info, .badge-blue,
#facilita-app .badge-light-info, #facilita-app .badge-status-info,
.request-page .badge-status-info {
    background-color: var(--status-info-bg) !important; color: var(--status-info-fg) !important;
}
.badge-light-success, .badge-status-success, .badge-active-yes,
#facilita-app .badge-light-success, #facilita-app .badge-status-success,
.request-page .badge-status-success {
    background-color: var(--status-success-bg) !important; color: var(--status-success-fg) !important;
}
.badge-light-warning, .badge-status-warning, .b-amber, .badge-warning-facilitame,
#facilita-app .badge-light-warning, #facilita-app .badge-status-warning,
.request-page .badge-status-warning {
    background-color: var(--status-warning-bg) !important; color: var(--status-warning-fg) !important;
}
.badge-light-danger, .badge-status-danger, .badge-active-no,
#facilita-app .badge-light-danger, #facilita-app .badge-status-danger,
.request-page .badge-status-danger {
    background-color: var(--status-danger-bg) !important; color: var(--status-danger-fg) !important;
}
.badge-neutral, .badge-light, .badge-light-secondary, .badge-light-dark,
.badge-status-neutral, .badge-status-muted, .badge-status-light, .badge-status-secondary,
#facilita-app .badge-status-neutral, #facilita-app .badge-status-muted,
.request-page .badge-status-muted {
    background-color: var(--status-neutral-bg) !important; color: var(--status-neutral-fg) !important;
}
/* Badges sólidos (contadores, avisos): mismos tonos en versión rellena */
.badge.badge-primary { background-color: var(--brand-fill); color: #fff; }
.badge.badge-success { background-color: var(--status-success-solid); color: #fff; }
.badge.badge-warning { background-color: var(--status-warning-solid); color: #fff; }
.badge.badge-danger { background-color: var(--status-danger-solid); color: #fff; }
.badge.badge-info { background-color: var(--status-info-solid); color: #fff; }
.badge.badge-dark, .badge.badge-secondary { background-color: var(--status-neutral-bg); color: var(--status-neutral-fg); }
/* Los badges de estado de una fila (get_badge_html) van en suave */
td .badge.badge-primary, .list-card .badge.badge-primary, .request-page .badge.badge-primary { background-color: var(--status-primary-bg); color: var(--status-primary-fg); }
td .badge.badge-success, .list-card .badge.badge-success, .request-page .badge.badge-success { background-color: var(--status-success-bg); color: var(--status-success-fg); }
td .badge.badge-warning, .list-card .badge.badge-warning, .request-page .badge.badge-warning { background-color: var(--status-warning-bg); color: var(--status-warning-fg); }
td .badge.badge-danger, .list-card .badge.badge-danger, .request-page .badge.badge-danger { background-color: var(--status-danger-bg); color: var(--status-danger-fg); }
td .badge.badge-info, .list-card .badge.badge-info, .request-page .badge.badge-info { background-color: var(--status-info-bg); color: var(--status-info-fg); }

/* --------------------------------------------------------------------------
   5. TARJETAS, TÍTULOS Y TABLAS
   -------------------------------------------------------------------------- */
#facilita-app .card,
#facilita-app .card.card-flush,
#facilita-app .card.shadow-sm,
.request-page .card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm) !important;
}
#facilita-app .card.border-0 { border: 1px solid var(--border) !important; }
#facilita-app .card-header { padding-left: var(--card-pad); padding-right: var(--card-pad); }
#facilita-app .card-title,
#facilita-app .card-title h2,
#facilita-app .card-title h3,
#facilita-app .card-header h3,
#facilita-app .card-header .card-label {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-strong);
}
#facilita-app .card-title i { color: var(--brand-strong); font-size: var(--icon-md); }
/* Sin tarjeta dentro de tarjeta: la interior pierde marco */
#facilita-app .card .card .card {
    border: 0;
    box-shadow: none !important;
}

#facilita-app .table > thead > tr > th,
#facilita-app table.dataTable > thead > tr > th {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}
#facilita-app .table > tbody > tr > td {
    font-size: var(--fs-base);
    color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   6. KPI — una sola tarjeta de indicador
   Icono de contorno de 20px en caja de 40px con fondo suave, valor fluido
   alineado a la izquierda, etiqueta en minúscula y sin alto mínimo en móvil.
   -------------------------------------------------------------------------- */
#facilita-app .kpi-card,
#facilita-app .metric-card,
#facilita-app .stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: left;
}
#facilita-app .kpi-card:hover { transform: none; }
#facilita-app .kpi-card-content {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    text-align: left;
}
#facilita-app .kpi-icon,
#facilita-app .metric-card .metric-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#facilita-app .kpi-icon i,
#facilita-app .kpi-icon .ki-outline,
#facilita-app .metric-card .metric-icon i {
    font-size: var(--icon-md) !important;
}
#facilita-app .kpi-card-primary .kpi-icon { background: var(--status-primary-bg); }
#facilita-app .kpi-card-primary .kpi-icon i { color: var(--status-primary-fg); }
#facilita-app .kpi-card-success .kpi-icon { background: var(--status-success-bg); }
#facilita-app .kpi-card-success .kpi-icon i { color: var(--status-success-fg); }
#facilita-app .kpi-card-warning .kpi-icon { background: var(--status-warning-bg); }
#facilita-app .kpi-card-warning .kpi-icon i { color: var(--status-warning-fg); }
#facilita-app .kpi-card-danger .kpi-icon { background: var(--status-danger-bg); }
#facilita-app .kpi-card-danger .kpi-icon i { color: var(--status-danger-fg); }
#facilita-app .kpi-card-info .kpi-icon { background: var(--status-info-bg); }
#facilita-app .kpi-card-info .kpi-icon i { color: var(--status-info-fg); }
#facilita-app .kpi-label,
#facilita-app .metric-card .metric-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}
#facilita-app .kpi-value,
#facilita-app .metric-card .metric-value,
#facilita-app .stat-card .stat-value {
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-strong);
}
#facilita-app .kpi-footer,
#facilita-app .kpi-footer-text {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}
#facilita-app .kpi-footer:empty { display: none; }
@media (max-width: 767.98px) {
    #facilita-app .kpi-card,
    #facilita-app .metric-card { min-height: 0 !important; height: auto; }
}

/* --------------------------------------------------------------------------
   7. PAGINACIÓN — «‹ 1 / N ›»
   -------------------------------------------------------------------------- */
#facilita-app .btn-pagination,
#facilita-app .pagination-btn,
#facilita-app .pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-body);
    font-size: var(--fs-base);
    font-weight: 500;
}
#facilita-app .btn-pagination:hover:not(:disabled),
#facilita-app .pagination-btn:hover:not(:disabled),
#facilita-app .pagination .page-link:hover {
    border-color: var(--brand);
    color: var(--brand-strong);
    background: var(--brand-soft);
}
#facilita-app .pagination .page-item.active .page-link {
    background: var(--brand-fill);
    border-color: var(--brand-fill);
    color: #fff;
}
#facilita-app .btn-pagination:disabled,
#facilita-app .pagination-btn:disabled { opacity: .4; }
#facilita-app .pagination-info,
#facilita-app .pagination-current {
    font-size: 13px;
    color: var(--text-muted);
}
@media (max-width: 767.98px) {
    #facilita-app .btn-pagination,
    #facilita-app .pagination-btn,
    #facilita-app .pagination .page-link { min-width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   8. BOTONES DE ICONO — uno solo: 36px (44px en móvil), radio 8, suaves
   -------------------------------------------------------------------------- */
.btn-icon,
.btn.btn-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-icon i, .btn.btn-icon i { font-size: var(--icon-sm); }
.btn-icon.btn-icon-sm, .btn.btn-icon.btn-sm { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
.btn-icon.btn-icon-lg { width: 44px; height: 44px; min-width: 44px; }
.btn-icon-primary, .btn.btn-icon.btn-light-primary { background: var(--brand-soft); color: var(--brand-strong); }
.btn-icon-primary i, .btn.btn-icon.btn-light-primary i { color: var(--brand-strong); }
.btn-icon-success { background: var(--status-success-bg); color: var(--status-success-fg); }
.btn-icon-success i { color: var(--status-success-fg); }
.btn-icon-danger { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.btn-icon-danger i { color: var(--status-danger-fg); }
.btn-icon-warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.btn-icon-warning i { color: var(--status-warning-fg); }
.btn-icon-info { background: var(--status-info-bg); color: var(--status-info-fg); }
.btn-icon-info i { color: var(--status-info-fg); }
@media (max-width: 767.98px) {
    .btn-icon, .btn.btn-icon,
    .header-icon-btn {
        width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    }
}

/* --------------------------------------------------------------------------
   9. ICONOS
   -------------------------------------------------------------------------- */
.ki-outline.icon-sm { font-size: var(--icon-sm); }
.ki-outline.icon-md { font-size: var(--icon-md); }
.ki-outline.icon-lg { font-size: var(--icon-lg); }
button:disabled > i, .btn.disabled > i, .btn:disabled > i { opacity: .4; }
.list-card-meta i, .list-card-meta .ki-outline { color: var(--text-muted); }

/* Etiquetas en mayúsculas → frase normal */
#facilita-app .customer-stat-label,
#facilita-app .customer-detail-row dt,
#facilita-app .details-item dt,
#facilita-app .details-section-title,
#facilita-app .profile-info-label,
#facilita-app .commission-amount-label,
#facilita-app .detail-box-label,
.card-toolbar .form-label {
    text-transform: none;
    letter-spacing: 0;
}

/* «Salir» del pie de la barra lateral: radio y alto del sistema */
#logout-btn.btn-footer {
    border-radius: var(--radius-md);
    min-height: var(--ctl-h);
    height: var(--ctl-h);
}

/* --------------------------------------------------------------------------
   10. MAQUETACIÓN
   -------------------------------------------------------------------------- */
/* Un solo contenedor de página: 24px (16px en móvil). Antes el px-3 del
   contenedor se sumaba al padding de 19.5px de cada *-page. */
#facilita-app.container-fluid {
    padding: var(--page-pad) !important;
}
#facilita-app > [class$="-page"],
#facilita-app > [class*="-page "],
#facilita-app > .customers-page,
#facilita-app > .logs-page,
#facilita-app > .invoices-page,
#facilita-app > .advisories-page,
#facilita-app > .profile-page {
    padding: 0 !important;
    margin-top: 0 !important;
}
#facilita-app > [class*="-page"] > .d-flex > .app-content > .container-fluid,
#facilita-app > [class*="-page"] > .d-flex > #kt_app_content > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}
/* Las rejillas de tarjetas usan el mismo hueco */
#facilita-app .row.g-5, #facilita-app .row.g-6, #facilita-app .row.g-xl-8 {
    --bs-gutter-x: var(--grid-gap);
    --bs-gutter-y: var(--grid-gap);
}

/* Barra de página (descripción + acción), sustituye a las franjas punteadas */
#facilita-app .page-toolbar { padding: 0; background: none; border: 0; }

/* Barra lateral: enlaces y desplegables con la misma sangría e icono de 20px */
.app-sidebar:not(.collapsed) .menu-link,
.app-sidebar:not(.collapsed) .menu-accordion-toggle {
    padding-left: 12px;
    padding-right: 12px;
    gap: 12px;
    border-radius: var(--radius-md);
}
.app-sidebar:not(.collapsed) .menu-accordion-sub .menu-link {
    padding-left: 44px !important;
}
.app-sidebar .menu-link > .menu-icon,
.app-sidebar .menu-accordion-toggle > .menu-icon {
    width: 20px;
    min-width: 20px;
    font-size: var(--icon-md) !important;
    margin: 0 !important;
    text-align: center;
}
.app-sidebar .menu-accordion-sub .menu-link > .menu-icon {
    font-size: var(--icon-sm) !important;
}
/* Logo de la asesoría (marca blanca): caja blanca centrada */
.sidebar-logo-asesoria {
    display: block;
    background: #fff;
    border-radius: var(--radius-md);
    padding: 4px 8px;
    max-height: 40px;
    max-width: 160px;
    width: auto !important;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}
.app-sidebar.collapsed .sidebar-logo-asesoria.sidebar-logo-mini {
    max-width: 48px;
    padding: 2px;
}

/* Banner de cookies: compacto en móvil y por encima de la barra inferior */
#cookie-banner {
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.5;
}
#cookie-banner p { text-align: left; font-size: inherit; color: inherit; }
#cookie-banner a { color: #5eead4; }
#cookie-banner .btn {
    min-height: 40px;
    height: 40px;
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--fs-base) !important;
    padding: 0 12px !important;
}
#cookie-banner .btn-secondary {
    background: transparent;
    border: 1px solid #94a3b8;
    color: #f1f5f9;
}
#cookie-banner .d-flex { flex-wrap: nowrap !important; }
@media (max-width: 991.98px) {
    #cookie-banner {
        left: 8px;
        right: 8px;
        bottom: 8px;
        padding: 12px 14px;
        font-size: var(--fs-sm);
    }
    #cookie-banner p { margin-bottom: 10px; }
    body:has(.bottom-nav) #cookie-banner { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* --------------------------------------------------------------------------
   11. ACCESIBILIDAD
   -------------------------------------------------------------------------- */
/* Zonas táctiles de 44px en móvil */
@media (max-width: 767.98px) {
    #facilita-app .tk-status,
    #facilita-app select.form-select-sm,
    #facilita-app .accordion-button,
    #facilita-app [data-bs-toggle="collapse"]:not(.menu-link),
    .facilitame-header button,
    .facilitame-header .btn {
        min-height: 44px;
    }
    #facilita-app .list-card a:not(.btn),
    #facilita-app .card-body > a:not(.btn) {
        padding-block: 10px;
        display: inline-block;
    }
}
/* Textos sobre turquesa: el blanco no llega a 4,5:1, se oscurece el texto
   de las insignias y códigos que iban en #00c2cb */
#facilita-app .code-input,
#facilita-app .advisory-code-badge,
#facilita-app .badge-code {
    color: var(--brand-strong);
}

/* --------------------------------------------------------------------------
   12. MARCA — turquesa oscuro para rellenos con texto blanco
   Aprobado por Erlantz el 26/10: la marca pasa a ser el turquesa oscuro
   #007c84 (hover #00666d). El blanco sobre el antiguo #00c2cb daba 2,2:1
   (botones), 2,05:1 (barra lateral) y 1,4:1 (títulos de sección); con
   #007c84 pasa de 4,5:1. El #00c2cb solo queda en los fondos suaves (rgba).
   -------------------------------------------------------------------------- */
.app-sidebar,
#app_sidebar,
.app-sidebar.collapsed .menu-accordion-sub {
    background: linear-gradient(180deg, #007c84 0%, #00666d 100%) !important;
}
.app-sidebar .menu-section-text,
#app_sidebar .menu-section-text {
    color: rgba(255, 255, 255, .95);
}
.app-sidebar .menu-item.active .menu-link,
.app-sidebar .menu-item.here .menu-link {
    background: rgba(255, 255, 255, .18) !important;
    border-color: rgba(255, 255, 255, .5) !important;
}
.app-sidebar .menu-link,
.app-sidebar .menu-accordion-toggle,
.app-sidebar .menu-icon {
    color: #fff !important;
}
.btn-footer,
.btn-footer i {
    color: var(--brand-strong) !important;
}
.sidebar-toggle-btn:hover {
    background: var(--brand-strong);
    border-color: var(--brand-strong);
}
/* La F negra del logo plegado apenas se ve sobre el turquesa oscuro: en blanco */
.app-sidebar .sidebar-logo-mini:not(.sidebar-logo-asesoria) {
    filter: brightness(0) invert(1);
}

/* Los avisos (Swal) siempre por delante de los modales: #modal_series va a
   z-index 1065 y el aviso de error salía detrás, sin verse, y los dos se
   peleaban el foco («pestañazos», Erlantz 22/10). */
.swal2-container { z-index: 2000 !important; }