:root {
    --brand: #0fd3ff;
    --brand2: #09add2;
    --sidebar-w: 260px;
    --navbar-h: 60px;

    /* Paleta gray-light para sidebar */
    --sb-bg: #f1f3f5;
    /* gris claro */
    --sb-border: #e9ecef;
    /* borde sutil */
    --sb-link: #495057;
    /* texto/link */
    --sb-link-hover: #212529;
    /* hover más oscuro */
    --sb-link-bg: #e9ecef;
    /* hover bg */
}

html,
body {
    height: 100%;
}

body.app-surface {
    padding-top: var(--navbar-h);
    background: #f6f7fb;
}

.bg-brand {
    background: linear-gradient(90deg, var(--brand), var(--brand2));
}
 
/* Sidebar/Layout */
/* Backdrop del sidebar móvil */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
    z-index: 1028;
    /* justo debajo del sidebar (que está en 1029) */
}

.sidebar-mobile-open .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
}

/* Desktop (sin cambios de comportamiento) */
.app-sidebar {
    position: fixed;
    inset: var(--navbar-h) auto 0 0;
    width: var(--sidebar-w);
    background: var(--sb-bg);
    color: var(--sb-link);
    border-right: 1px solid var(--sb-border);
    transform: translateX(0);
    transition: transform .25s ease;
    z-index: 1029;
    overflow-y: auto;
        /* habilita scroll vertical */
        overscroll-behavior: contain;
        /* evita "arrastrar" el body al llegar al borde */
        -webkit-overflow-scrolling: touch;
}

/* Colapsado en desktop (push layout) */
.sidebar-collapsed .app-sidebar {
    transform: translateX(-100%);
}

.sidebar-collapsed .app-main {
    margin-left: 0;
}

.sidebar-nav .sidebar-link {
    display: block;
    padding: .55rem .7rem;
    color: var(--sb-link);
    text-decoration: none;
    border-radius: .5rem;
}

.sidebar-nav .sidebar-link:hover {
    background: var(--sb-link-bg);
    color: var(--sb-link-hover);
}

/* Sidebar: items deshabilitados por WIP */
.sidebar-nav .sidebar-link.disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
    /* evita clicks */
    background: transparent !important;
}

/* Activo (controlador actual) */
.sidebar-nav .sidebar-link.active {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .03) inset, 0 2px 6px rgba(0, 0, 0, .06);
}

/* Ícono dentro del activo */
.sidebar-nav .sidebar-link.active i {
    color: #fff;
}

/* Hover del activo (ligero oscurecido) */
.sidebar-nav .sidebar-link.active:hover {
    background: var(--brand2);
    color: #fff;
}

/* Accesibilidad: enfoque por teclado consistente con activo */
.sidebar-nav .sidebar-link:focus-visible {
    outline: 2px solid var(--brand2);
    outline-offset: 2px;
    text-decoration: none;
}

.app-main {
    margin-left: var(--sidebar-w);
    width: auto;
}

/* --- COMPORTAMIENTO MÓVIL (overlay) --- */
@media (max-width: 991.98px) {

    /* En móvil el main NUNCA se empuja */
    .app-main {
        margin-left: 0;
    }

    /* El sidebar arranca escondido y actúa como drawer */
    .app-sidebar {
        width: 86vw;
        max-width: 320px;
        transform: translateX(-100%);
        /* oculto por defecto en móvil */
        box-shadow: 0 0 25px rgba(0, 0, 0, .24);
        overflow-y: auto;
            /* asegura scroll dentro del drawer */
            max-height: calc(100dvh - var(--navbar-h));
    }

    /* Abierto en móvil: aparece sobre el contenido */
    .sidebar-mobile-open .app-sidebar {
        transform: translateX(0);
    }

    /* Ignora el estado 'sidebar-collapsed' en móvil (el drawer manda) */
    .sidebar-collapsed .app-main {
        margin-left: 0;
    }

    /* redundante, por claridad */
}


/* Tiles */
.tile-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    padding: 18px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    transition: .15s;
}

.tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
}

.tile-icon {
    font-size: 28px;
    margin-bottom: 10px;
}

.tile-text {
    font-size: 15px;
    text-align: center;
}

/* .tile-primary {
    background: #0d6efd;
}

.tile-danger {
    background: #dc3545;
} */

/* Topbar/footer */
.app-footer {
    position: sticky;
    top: 100%;
    background: #fff;
    border-top: 1px solid #e9ecef;
    padding: .75rem 0;
}

.btn-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
}

/* Navbar con gradiente de marca */
.bg-brand {
    background: linear-gradient(90deg, var(--brand), var(--brand2));
}

/* Botón de marca reutilizable (útil en 404 y en cualquier CTA) */
.btn-brand {
    background: linear-gradient(90deg, var(--brand), var(--brand2));
    border: 0;
    color: #0b1b21;
    /* buen contraste sobre cyan claro */
}

.btn-brand:hover {
    filter: brightness(.95);
}

/* Preloader */
.app-preloader {
    position: fixed;
    inset: 0;
    background: #0b0c10;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    transition: opacity .2s ease;
}

.app-preloader.hide {
    opacity: 0;
    pointer-events: none;
}

/* Scroll-to-top */
.to-top {
    position: fixed;
    right: 16px;
    bottom: 20px;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: none;
}

.to-top.show {
    display: block;
    z-index: 999;
}

.toast .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: .8;
}

.toast.toast-success {
    background: var(--bs-success);
    color: #fff;
}

.toast.toast-info {
    background: var(--bs-info);
    color: #fff;
}

.toast.toast-warning {
    background: var(--bs-warning);
    color: #111;
}

.toast.toast-danger {
    background: var(--bs-danger);
    color: #fff;
}

/* DataTables + Bootstrap: compacto y limpio */
.table.dataTable {
    font-size: .95rem;
}

.table.dataTable>thead>tr>th {
    white-space: nowrap;
}

.table.dataTable>tbody>tr>* {
    vertical-align: middle;
}

.dataTables_wrapper .dataTables_info {
    font-size: .875rem;
    padding-top: .25rem;
}

.dataTables_wrapper .dataTables_paginate .pagination {
    margin: .25rem 0 0;
}

.dataTables_wrapper .dataTables_paginate .page-link {
    padding: .2rem .5rem;
    font-size: .875rem;
}

/* Si no quieres mostrar el selector «Mostrar N registros» nunca */
.dataTables_length {
    display: none !important;
}

/* app.css */
.modal {
    z-index: 1060;
}

.modal-backdrop {
    z-index: 1055;
}

/* Permitir wraps en celdas de tablas (aplica donde uses la clase .dt-wrap) */
.table.dt-wrap td {
    white-space: normal !important;
    /* multilínea */
    overflow-wrap: anywhere;
    /* partir palabras largas/urls */
    word-break: break-word;
    /* compat extra */
}

/* Envoltorio reutilizable para Select2 múltiple con wraps */
.s2-wrap .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .25rem;
    white-space: normal !important;
}

/* Limita altura y permite scroll cuando hay muchas etiquetas */
.s2-wrap .select2-selection--multiple {
    min-height: calc(2.375rem + 2px);
    /* altura bs5 aprox */
    max-height: 120px;
    /* ajusta a gusto */
    overflow-y: auto;
}

/* ===== Solo filas IMPARES con banda gris ===== */
.table.dt-oddshadow {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    /* separación vertical */
    font-size: .95rem;
}

.table.dt-oddshadow thead th {
    border-bottom: none;
}

/* Banda gris SOLO en impares */
.table.dt-oddshadow tbody tr:nth-of-type(odd)>* {
    background-color: #f3f4f6 !important;
    border: none;
    vertical-align: middle;
}

/* Bordes redondeados SOLO en impares */
.table.dt-oddshadow tbody tr:nth-of-type(odd)>*:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.table.dt-oddshadow tbody tr:nth-of-type(odd)>*:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Pastilla blanca con sombra SOLO en impares (celda Acciones) */
.table.dt-oddshadow tbody tr:nth-of-type(odd)>td.actions-cell {
    background: #fff !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
}

/* Hover (suave) sobre la impar */
.table.dt-oddshadow tbody tr:nth-of-type(odd):hover>* {
    background-color: #eef0f2 !important;
}

.table.dt-oddshadow tbody tr:nth-of-type(odd):hover>td.actions-cell {
    box-shadow: 0 14px 26px rgba(0, 0, 0, .16);
}

/* Botones limpios dentro de la pastilla */
.table.dt-oddshadow .btn {
    background-color: transparent;
    box-shadow: none;
}

.table.dt-oddshadow .btn:hover,
.table.dt-oddshadow .btn:focus {
    background-color: rgba(0, 0, 0, .04);
    border-color: rgba(0, 0, 0, .15);
}

/* ===== Marco de thumbnail reutilizable =====
   - Mismo tamaño visual para todas
   - Sin distorsión (object-fit: contain)
   - Fallback si no hay imagen
*/ 
.thumb-frame {
    width: 75px;
    /* ajusta a tu gusto: 72/80/92/104 */
    aspect-ratio: 1 / 1;
    /* cuadrado; usa 4/3 o 16/9 si prefieres */
    border-radius: .65rem;
    background: transparent;
    /* sin fondo visible en el marco */
    border: 1px solid #e9ecef;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.thumb-frame img {
    width: 100%;
    height: 100%; 
    /* ocupa el máximo SIN distorsión ni recorte */
    display: block;
    object-fit: cover;
}

.thumb-frame.is-clickable {
    cursor: zoom-in;
}

/* Variante compacta */
.thumb-frame.sm {
    width: 72px;
}

/* Placeholder cuando no hay imagen */
.thumb-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #adb5bd;
    background:
        repeating-linear-gradient(45deg,
            #f8f9fa 0, #f8f9fa 8px,
            #f1f3f5 8px, #f1f3f5 16px);
}

.thumb-placeholder i {
    font-size: 22px;
}

/* ==== Lightbox transparente ==== */
.lightbox-modal .modal-content {
    background: transparent !important;
    /* sin fondo */
    border: 0;
    box-shadow: none;
}

.lightbox-modal .modal-body {
    padding: 0;
    display: grid;
    place-items: center;
    min-height: 100vh;
    /* centrar vertical/pleno alto */
}

.lightbox-img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    /* sin distorsión */
    display: block;
}

/* Botón cerrar flotante */
.lightbox-close {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2;
    border-radius: 999px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    border: 0;
}

.lightbox-close:hover {
    background: rgba(0, 0, 0, .7);
}



/* Inputs/textarea */
.modal .form-control::placeholder {
    opacity: .55;
    color: #6c757d;
}

/* Select2 placeholder */
.select2-container .select2-selection__placeholder {
    opacity: .55;
    color: #6c757d;
}

/* “ghost” look también cuando no hay valor */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered:empty::after {
    content: attr(data-placeholder);
    opacity: .55;
    color: #6c757d;
}

.modal .form-control::placeholder {
    opacity: .55;
    color: #6c757d;
}

.select2-container .select2-selection__placeholder {
    opacity: .55;
    color: #6c757d;
}

/* utilidades si no las tienes ya */
.object-fit-cover {
    object-fit: cover;
}

.object-position-center {
    object-position: center;
}

/* Ya usas la clase is-clickable */
.is-clickable {
    cursor: pointer;
}

/* Efecto hover/focus para las cards clicables */
.card.is-clickable {
    transition: transform .15s ease, box-shadow .15s ease;
}

.card.is-clickable:hover,
.card.is-clickable:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

/* ===== Tiles modernos ===== */
:root {
    --tile-radius: 16px;
    --tile-shadow: 0 8px 24px rgba(17, 24, 39, .12);
    --tile-shadow-lg: 0 12px 32px rgba(17, 24, 39, .18);
    --tile-blur: blur(6px);
    --tile-border: rgba(255, 255, 255, .24);
    --tile-sheen: linear-gradient(120deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 40%);
    --tile-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
    /* Colores base */
    --tile-primary-1: #3b82f6;
    --tile-primary-2: #2563eb;
    --tile-danger-1: #ef4444;
    --tile-danger-2: #dc2626;
}

/* grid igual; solo afinamos gap en xs */
@media (max-width: 480px) {
    .tile-grid {
        gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* Base */
.tile {
    position: relative;
    border-radius: var(--tile-radius);
    min-height: 118px;
    padding: 20px 18px 18px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: var(--tile-shadow);
    overflow: hidden;
    isolation: isolate;
    /* para que los pseudo no escapen */
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* glass + brillo */
.tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--tile-sheen);
    mix-blend-mode: screen;
    opacity: .8;
    transform: translateX(-30%);
    transition: transform .35s ease;
}

.tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--tile-noise);
    pointer-events: none;
}

/* variantes */
.tile-primary {
    background: linear-gradient(135deg, var(--tile-primary-1), var(--tile-primary-2));
    border: 1px solid rgba(59, 130, 246, .25);
    backdrop-filter: var(--tile-blur);
}

.tile-danger {
    background: linear-gradient(135deg, var(--tile-danger-1), var(--tile-danger-2));
    border: 1px solid rgba(239, 68, 68, .2);
    backdrop-filter: var(--tile-blur);
}

/* icon & text */
.tile-icon {
    font-size: 30px;
    margin-bottom: 10px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .25));
}

.tile-text {
    letter-spacing: .2px;
}

/* Hover/focus accesible */
.tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--tile-shadow-lg);
}

.tile:hover::before {
    transform: translateX(10%);
}

.tile:focus-visible {
    outline: 0;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, .8),
        0 0 0 6px rgba(59, 130, 246, .45),
        var(--tile-shadow-lg);
}

/* Estado "En construcción" */
.tile .wip-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, .2);
    border: 1px solid var(--tile-border);
    backdrop-filter: blur(6px);
    color: #fff;
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 700;
    font-size: .75rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Deshabilitado (para no masters) */
.tile--disabled {
    filter: grayscale(.3) brightness(.9);
    cursor: not-allowed;
    box-shadow: none;
}

.tile--disabled:hover {
    transform: none;
    box-shadow: none;
}

.tile--disabled .tile-icon {
    opacity: .85;
}

/* Preferencia de usuario: reduce motion */
@media (prefers-reduced-motion: reduce) {

    .tile,
    .tile::before {
        transition: none !important;
    }
}