/* =====================================================================
   Sistema de Gestión de Ventas — tema claro / oscuro
   Paleta basada en la guía de datavisualización validada del proyecto
   (contraste y separación CVD verificados en ambos modos). El tema activo
   lo controla el atributo data-bs-theme en <html> (ver includes/header.php
   y assets/js/app.js: Claro / Oscuro / Predeterminado del sistema).
   ===================================================================== */

:root {
    --font-principal: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Superficies (modo claro, por defecto) */
    --plano-pagina: #f4f6fa;
    --superficie-1: #ffffff;
    --superficie-2: #f1f3f8;
    --borde-sutil: rgba(15, 23, 42, 0.09);
    --borde-medio: rgba(15, 23, 42, 0.16);
    --topbar-bg: rgba(255, 255, 255, 0.85);

    /* Tinta (modo claro) */
    --tinta-primaria: #0f172a;
    --tinta-secundaria: #475569;
    --tinta-muted: #8b95a5;

    /* Marca / categórico (paleta validada — misma en ambos modos) */
    --color-azul: #3987e5;
    --color-naranja: #d95926;
    --color-aqua: #199e70;
    --color-amarillo: #c98500;
    --color-magenta: #d55181;
    --color-violeta: #9085e9;

    /* Estado (fijo, no temático) */
    --estado-bien: #0ca30c;
    --estado-alerta: #fab219;
    --estado-serio: #ec835a;
    --estado-critico: #d03b3b;

    --radio-tarjeta: 1rem;
    --sombra-tarjeta: 0 10px 24px rgba(15, 23, 42, 0.08);
    --tabla-rayado-bg: rgba(15, 23, 42, 0.025);
    --tabla-hover-bg: rgba(57, 135, 229, 0.10);
    --scroll-thumb: rgba(15, 23, 42, 0.30);
    --scroll-thumb-hover: rgba(15, 23, 42, 0.48);

    /* Marca / estado también expuestos como variables de Bootstrap, iguales
       en ambos modos (los colores de estado no se tematizan). */
    --bs-primary: var(--color-azul);
    --bs-primary-rgb: 57, 135, 229;
    --bs-link-color: var(--color-azul);
    --bs-link-hover-color: #2f6fc4;

    --bs-success: var(--estado-bien);
    --bs-success-rgb: 12, 163, 12;

    --bs-warning: var(--estado-alerta);
    --bs-warning-rgb: 250, 178, 25;

    --bs-danger: var(--estado-critico);
    --bs-danger-rgb: 208, 59, 59;

    --bs-info: var(--color-aqua);
    --bs-info-rgb: 25, 158, 112;

    --bs-secondary: #64748b;
    --bs-secondary-rgb: 100, 116, 139;
}

/* ---------------------------------------------------------------------
   Modo oscuro: data-bs-theme="dark" en <html> activa el modo oscuro nativo
   de Bootstrap 5.3; aquí solo reemplazamos los tokens de superficie/tinta
   (la marca y los colores de estado no cambian entre modos).
   --------------------------------------------------------------------- */
[data-bs-theme="dark"] {
    --plano-pagina: #0b0e13;
    --superficie-1: #12161d;
    --superficie-2: #171c25;
    --borde-sutil: rgba(255, 255, 255, 0.08);
    --borde-medio: rgba(255, 255, 255, 0.14);
    --topbar-bg: rgba(18, 22, 29, 0.85);

    --tinta-primaria: #eef1f5;
    --tinta-secundaria: #aab4c4;
    --tinta-muted: #7c8798;

    --sombra-tarjeta: 0 10px 30px rgba(0, 0, 0, 0.35);
    --tabla-rayado-bg: rgba(255, 255, 255, 0.025);
    --tabla-hover-bg: rgba(57, 135, 229, 0.16);
    --scroll-thumb: rgba(255, 255, 255, 0.24);
    --scroll-thumb-hover: rgba(255, 255, 255, 0.4);

    --bs-body-bg: var(--plano-pagina);
    --bs-body-color: var(--tinta-primaria);
    --bs-border-color: var(--borde-sutil);
    --bs-secondary-bg: var(--superficie-2);
    --bs-tertiary-bg: var(--superficie-1);
    --bs-emphasis-color: #ffffff;
    --bs-link-hover-color: #5aa0ee;

    --bs-light: #cbd5e1;
    --bs-light-rgb: 203, 213, 225;
}

body {
    font-family: var(--font-principal);
    background-color: var(--plano-pagina);
    background-image:
        radial-gradient(ellipse 900px 500px at 15% -10%, rgba(57, 135, 229, 0.10), transparent),
        radial-gradient(ellipse 700px 500px at 100% 10%, rgba(144, 133, 233, 0.08), transparent);
    background-attachment: fixed;
    transition: background-color 0.15s ease-in-out;
}

/* ---------------------------------------------------------------------
   Barra superior
   --------------------------------------------------------------------- */
.topbar {
    background-color: var(--topbar-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borde-sutil);
    height: 60px;
    position: sticky;
    top: 0;
    z-index: 1040;
}

#btnToggleSidebar {
    color: var(--tinta-secundaria);
}

#btnToggleSidebar:hover {
    color: var(--tinta-primaria);
}

.breadcrumb-chip {
    --bs-breadcrumb-divider-color: var(--tinta-muted);
    font-size: 0.85rem;
    background: var(--superficie-2);
    border: 1px solid var(--borde-sutil);
    border-radius: 2rem;
    padding: 0.4rem 0.9rem;
}

.breadcrumb-chip .breadcrumb-item.active {
    color: var(--tinta-secundaria);
}

.breadcrumb-chip .breadcrumb-item a {
    color: var(--tinta-primaria);
    text-decoration: none;
}

.breadcrumb-chip .breadcrumb-item a:hover {
    color: var(--color-azul);
}

.input-group-buscar-menu .input-group-text {
    background: var(--superficie-2);
    border-color: var(--borde-sutil);
    color: var(--tinta-muted);
    border-radius: 2rem 0 0 2rem;
}

.input-group-buscar-menu .form-control {
    background: var(--superficie-2);
    border-color: var(--borde-sutil);
    border-radius: 0 2rem 2rem 0;
}

.input-group-buscar-menu .form-control:focus {
    box-shadow: none;
}

.user-chip {
    gap: 0.6rem;
    padding: 0.25rem 0.6rem 0.25rem 0.25rem;
    border-radius: 2rem;
    background: var(--superficie-2);
    border: 1px solid var(--borde-sutil);
    appearance: none;
    cursor: pointer;
}

.user-chip:hover {
    border-color: var(--borde-medio);
}

.user-chip-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.user-chip-nombre {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tinta-primaria);
}

.user-chip-rol {
    font-size: 0.72rem;
    color: var(--tinta-muted);
}

.avatar-circle {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: #fff;
    background: linear-gradient(135deg, var(--color-azul), var(--color-violeta));
}

.btn-salir {
    color: var(--tinta-secundaria);
    background: var(--superficie-2);
    border: 1px solid var(--borde-sutil);
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
}

.btn-salir:hover {
    color: #fff;
    background: var(--estado-critico);
    border-color: var(--estado-critico);
}

/* ---------------------------------------------------------------------
   Menú lateral
   --------------------------------------------------------------------- */
.app-body {
    min-height: 100vh;
}

.content-columna {
    min-width: 0;
}

@media (min-width: 768px) {
    /* El sidebar es position:fixed en escritorio (ver más abajo), así que
       queda fuera del flujo normal: el contenido necesita este margen para
       no quedar tapado debajo de él. Se ajusta según el ancho actual del
       sidebar (264px normal / 68px colapsado). */
    .content-columna {
        margin-left: 264px;
        transition: margin-left 0.2s ease-in-out;
    }

    .sidebar.colapsada ~ .content-columna {
        margin-left: 68px;
    }
}

.sidebar {
    width: 264px;
    min-width: 264px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--superficie-1);
    border-right: 1px solid var(--borde-sutil);
    overflow-x: hidden;
    z-index: 1030;
    transition: width 0.2s ease-in-out, min-width 0.2s ease-in-out;
}

@media (min-width: 768px) {
    .sidebar {
        /* position:fixed (no sticky): así el sidebar queda pegado al
           viewport de forma incondicional, sin depender de que ningún
           ancestro tenga la combinación exacta de overflow/altura que
           sticky necesita. El logo (arriba) y la tarjeta de perfil (abajo)
           quedan siempre fijos y visibles pase lo que pase con el scroll de
           la página; solo el menú de en medio (.sidebar-nav) se desplaza
           internamente cuando no caben todos los ítems. */
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
    }
}

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--borde-sutil);
    white-space: nowrap;
}

.sidebar-brand button {
    color: var(--tinta-secundaria);
}

.sidebar-brand button:hover {
    color: var(--tinta-primaria);
}

.sidebar-brand-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.sidebar-brand-logo {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-azul), var(--color-violeta));
    color: #fff;
    font-size: 1.1rem;
}

/* Sin el marco/fondo azul (Configuración > General): útil cuando el ícono
   subido ya se ve bien por su cuenta y el marco de color sobra. Si no hay
   ícono subido, el bi-shop de respaldo se pinta con la tinta normal del
   tema en vez de blanco (que quedaría invisible sin el fondo azul detrás). */
.sidebar-brand-logo--sin-marco {
    background: none;
    color: var(--tinta-primaria);
}

.sidebar-brand-logo img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.sidebar-brand-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    overflow: hidden;
}

.sidebar-brand-texto strong {
    font-size: 0.85rem;
    color: var(--tinta-primaria);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-brand-texto small {
    font-size: 0.7rem;
    color: var(--tinta-muted);
}

.sidebar-nav {
    flex-grow: 1;
    overflow-x: hidden;
    /* Sin min-height: 0 un hijo flex no se encoge más allá del alto de su
       contenido, y con más ítems de los que caben en pantalla el menú se
       saldría del sidebar (de alto fijo) en vez de mostrar su propio scroll. */
    min-height: 0;
    overflow-y: auto;
    /* La clase de Bootstrap ".nav" trae flex-wrap: wrap (pensado para navs
       horizontales). Combinado con flex-direction: column (".flex-column")
       y una altura limitada, eso hace que los ítems que no caben pasen a una
       SEGUNDA COLUMNA invisible (recortada por overflow-x: hidden) en vez de
       generar scroll vertical. Forzar una sola columna es lo que hace que el
       scroll vertical realmente aparezca. */
    flex-wrap: nowrap;

    /* Scroll delgado y temático. */
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}

.sidebar-nav::-webkit-scrollbar {
    width: 8px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: var(--scroll-thumb-hover);
    background-clip: padding-box;
}

.sidebar-grupo-titulo {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta-muted);
    padding: 1rem 1.25rem 0.4rem;
    white-space: nowrap;
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    color: var(--tinta-primaria);
    padding: 0.55rem 1.25rem;
    margin: 0.05rem 0.6rem;
    border-radius: 0.6rem;
    white-space: nowrap;
    font-size: 0.9rem;
}

.sidebar .nav-link i {
    width: 1.3rem;
    flex-shrink: 0;
    text-align: center;
    font-size: 1.05rem;
}

.sidebar .nav-link .menu-texto {
    margin-left: 0.65rem;
}

.sidebar .nav-link:hover {
    background-color: var(--superficie-2);
    color: var(--tinta-primaria);
}

.sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(57, 135, 229, 0.18), rgba(144, 133, 233, 0.08));
    color: var(--color-azul);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--color-azul);
}

.sidebar .nav-link.active i {
    color: var(--color-azul);
}

.content {
    min-width: 0;
}

/* ---------------------------------------------------------------------
   Colapsado (escritorio): franja de solo íconos, seleccionables, con
   tooltip mostrando el nombre de cada sección.
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
    .sidebar.colapsada {
        width: 68px;
        min-width: 68px;
    }

    .sidebar.colapsada .nav-link {
        justify-content: center;
        margin-left: 0.4rem;
        margin-right: 0.4rem;
    }

    .sidebar.colapsada .menu-texto,
    .sidebar.colapsada .sidebar-grupo-titulo,
    .sidebar.colapsada .sidebar-brand-texto,
    .sidebar.colapsada .sidebar-brand-logo {
        display: none;
    }

    .sidebar.colapsada .sidebar-brand {
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .sidebar {
        position: fixed;
        z-index: 1030;
        top: 60px;
        /* Alto explícito (no "bottom: 0") para que el flex hijo con
           overflow interno (.sidebar-nav) tenga una altura de referencia
           inequívoca y pueda encogerse/hacer scroll correctamente. */
        height: calc(100vh - 60px);
        left: -280px;
        width: 264px;
        min-width: 264px;
        transition: left 0.2s ease-in-out;
    }
    .sidebar.mostrar {
        left: 0;
    }
}

/* ---------------------------------------------------------------------
   Login (invitado) — panel de marca a la izquierda + tarjeta de acceso
   a la derecha, sobre un fondo con degradados suaves de marca.
   --------------------------------------------------------------------- */
.content-guest {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background:
        url('../img/login-fondo.svg') repeat,
        radial-gradient(ellipse 900px 650px at 10% 0%, rgba(57, 135, 229, 0.16), transparent),
        radial-gradient(ellipse 800px 650px at 95% 15%, rgba(144, 133, 233, 0.16), transparent),
        radial-gradient(ellipse 700px 550px at 20% 100%, rgba(25, 158, 112, 0.12), transparent),
        var(--plano-pagina);
}

.login-tema-toggle {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 5;
}

.login-panel {
    flex: 1 1 480px;
    padding: 3rem 4rem;
}

.login-titulo {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--tinta-primaria);
}

.login-titulo-degradado {
    background: linear-gradient(90deg, var(--color-aqua), var(--color-violeta));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.login-caracteristica {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1.25rem;
}

.login-caracteristica strong {
    color: var(--tinta-primaria);
    font-size: 0.95rem;
}

.login-badge {
    background: var(--superficie-1);
    border: 1px solid var(--borde-sutil);
    color: var(--tinta-secundaria);
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    border-radius: 2rem;
}

.login-formulario {
    flex: 1 1 420px;
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background-color: var(--superficie-1);
    border: 1px solid var(--borde-sutil);
    box-shadow: var(--sombra-tarjeta);
}

.login-btn-entrar {
    background: linear-gradient(90deg, var(--color-aqua), var(--color-violeta));
    border: none;
}

.login-btn-entrar:hover, .login-btn-entrar:focus {
    background: linear-gradient(90deg, var(--color-aqua), var(--color-violeta));
    filter: brightness(1.05);
    box-shadow: 0 6px 18px rgba(57, 135, 229, 0.3);
}

@media (max-width: 991.98px) {
    .login-panel {
        padding: 3rem 1.75rem 1rem;
    }
    .login-titulo {
        font-size: 2rem;
    }
}

/* ---------------------------------------------------------------------
   Tarjetas
   --------------------------------------------------------------------- */
.card {
    background-color: var(--superficie-1);
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-tarjeta);
}

/* Panel resaltado dentro de una tarjeta (ej. datos del cliente elegido en el
   POS): antes usaba la utilidad "bg-light" de Bootstrap, que en modo oscuro
   queda gris claro con texto claro encima (ilegible). Con los tokens de
   superficie del tema se ve bien en claro y en oscuro. */
.panel-resaltado {
    background-color: var(--superficie-2);
    border-color: var(--borde-medio) !important;
}

.card-kpi {
    border: 1px solid var(--borde-sutil);
    border-radius: var(--radio-tarjeta);
    background: linear-gradient(160deg, var(--superficie-2), var(--superficie-1));
    box-shadow: var(--sombra-tarjeta);
    transition: transform 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.card-kpi:hover {
    transform: translateY(-2px);
    border-color: var(--borde-medio);
}

/* Tarjetas KPI que llevan a otra pantalla (ej. "Ventas de hoy" -> historial
   filtrado). Se comportan como .card-kpi pero además marcan que son
   clicables: sombra más notoria al pasar el mouse y una flechita que solo
   aparece en hover, como pista visual sin ensuciar la tarjeta en reposo. */
.card-kpi-link {
    display: block;
    cursor: pointer;
}

.card-kpi-link:hover {
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
    border-color: var(--color-azul);
}

.card-kpi-link .card-body {
    position: relative;
}

.card-kpi-link .kpi-flecha {
    position: absolute;
    right: 1.1rem;
    bottom: 1rem;
    color: var(--tinta-muted);
    font-size: 0.9rem;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.card-kpi-link:hover .kpi-flecha {
    opacity: 1;
    transform: translateX(0);
    color: var(--color-azul);
}

.kpi-icono {
    width: 44px;
    height: 44px;
    border-radius: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.kpi-icono.kpi-azul     { background: rgba(57, 135, 229, 0.16); color: var(--color-azul); }
.kpi-icono.kpi-violeta  { background: rgba(144, 133, 233, 0.16); color: var(--color-violeta); }
.kpi-icono.kpi-amarillo { background: rgba(201, 133, 0, 0.18); color: var(--color-amarillo); }
.kpi-icono.kpi-critico  { background: rgba(208, 59, 59, 0.18); color: var(--estado-critico); }

.kpi-tendencia {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 2rem;
}

.kpi-tendencia.subio {
    color: var(--estado-bien);
    background: rgba(12, 163, 12, 0.14);
}

.kpi-tendencia.bajo {
    color: var(--estado-critico);
    background: rgba(208, 59, 59, 0.14);
}

.kpi-tendencia.neutro {
    color: var(--tinta-muted);
    background: rgba(255, 255, 255, 0.06);
}

.tabla-acciones a {
    margin-right: 0.35rem;
}

.leyenda-punto {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    margin-right: 0.4rem;
}

/* ---------------------------------------------------------------------
   Tablas
   --------------------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--tinta-primaria);
    --bs-table-border-color: var(--borde-sutil);
    --bs-table-striped-bg: var(--tabla-rayado-bg);
    --bs-table-hover-bg: var(--tabla-hover-bg);
}

.table thead th {
    color: var(--tinta-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    border-bottom-width: 1px;
}

.table.table-hover > tbody > tr {
    transition: background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}

.table.table-hover > tbody > tr:hover > *:first-child {
    box-shadow: inset 3px 0 0 var(--color-azul);
}

/* ---------------------------------------------------------------------
   Formularios — bordes bien redondeados, valores en negrita, etiqueta
   pequeña arriba (inspirado en el patrón de tarjetas/inputs compartido).
   --------------------------------------------------------------------- */
.form-label {
    color: var(--tinta-secundaria);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.form-control, .form-select {
    background-color: transparent;
    border: 1.5px solid var(--borde-medio);
    border-radius: 0.9rem;
    color: var(--tinta-primaria);
    font-weight: 500;
    padding: 0.6rem 1rem;
}

/* .form-select necesita más espacio a la derecha que .form-control: ahí
   vive la flechita del <select> (imagen de fondo de Bootstrap), y con el
   mismo padding parejo de arriba el texto corto (ej. "10") queda pegado o
   tapado por el ícono. */
.form-select {
    padding-right: 2.25rem;
}

.form-control-sm, .form-select-sm {
    border-radius: 0.7rem;
    padding: 0.35rem 0.75rem;
}

.form-select-sm {
    padding-right: 2rem;
}

.form-control:focus, .form-select:focus {
    background-color: transparent;
    color: var(--tinta-primaria);
    border-color: var(--color-azul);
    box-shadow: 0 0 0 0.2rem rgba(57, 135, 229, 0.2);
}

.form-control::placeholder {
    color: var(--tinta-muted);
    font-weight: 400;
    opacity: 1;
}

.form-control:disabled, .form-select:disabled {
    background-color: var(--superficie-2);
    color: var(--tinta-muted);
}

textarea.form-control {
    border-radius: 1.1rem;
}

.input-group-text {
    background-color: transparent;
    border: 1.5px solid var(--borde-medio);
    color: var(--tinta-secundaria);
}

/* Un solo borde compartido entre elementos adyacentes del input-group, sin
   importar el orden (ícono antes del campo, ej. buscador; o símbolo después
   del campo, ej. "18.00 | %"): cada elemento que no sea el primero pierde su
   borde izquierdo, así el borde derecho del elemento anterior es el que se ve
   como línea divisoria en ambos casos. */
.input-group > :not(:first-child) {
    border-left: none;
}

.form-check-input {
    width: 1.15em;
    height: 1.15em;
    border-radius: 0.35em;
    border: 1.5px solid var(--borde-medio);
    background-color: transparent;
}

/* ---------------------------------------------------------------------
   Select2 (buscadores con filtro tipo "escribir para buscar", ej. Cliente
   y Producto en el Punto de Venta): se retema para que combine con
   .form-control y respete el modo claro/oscuro usando las mismas variables
   de superficie/tinta del resto del sistema, en vez del tema por defecto
   de la librería (pensado para un sitio genérico en claro).
   --------------------------------------------------------------------- */
.select2-container--default .select2-selection--single {
    height: calc(1.5em + 1.2rem + 3px);
    display: flex;
    align-items: center;
    background-color: transparent;
    border: 1.5px solid var(--borde-medio);
    border-radius: 0.9rem;
    padding: 0 1rem;
}

.select2-container--open .select2-selection--single {
    border-color: var(--color-azul);
    box-shadow: 0 0 0 0.2rem rgba(57, 135, 229, 0.2);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: normal;
    color: var(--tinta-primaria);
    font-weight: 500;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--tinta-muted);
    font-weight: 400;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 0.5rem;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--tinta-muted);
    margin-right: 0.5rem;
}

.select2-dropdown {
    background-color: var(--superficie-1);
    border: 1.5px solid var(--borde-medio);
    border-radius: 0.9rem;
    overflow: hidden;
    box-shadow: var(--sombra-tarjeta);
}

.select2-search--dropdown {
    padding: 0.6rem;
    background-color: var(--superficie-1);
}

.select2-search--dropdown .select2-search__field {
    background-color: transparent;
    border: 1.5px solid var(--borde-medio);
    border-radius: 0.7rem;
    color: var(--tinta-primaria);
    padding: 0.4rem 0.75rem;
}

.select2-results__options {
    background-color: var(--superficie-1);
}

.select2-results__option {
    color: var(--tinta-primaria);
    padding: 0.55rem 0.9rem;
}

/* "Seleccionado" (gris) y "resaltado con teclado/mouse" (azul) pueden
   coincidir en el mismo elemento (ej. al abrir el desplegable, la opción ya
   elegida aparece resaltada para la navegación con teclado): la regla de
   "resaltado" va al final para que gane tanto el fondo azul como el texto
   blanco sobre el fondo gris de "seleccionado" cuando ambas aplican. */
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--superficie-2);
    color: var(--tinta-primaria);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-azul);
    color: #fff;
}

.select2-results__option .text-muted,
.select2-results__option--highlighted .text-muted {
    color: inherit !important;
    opacity: 0.75;
}

.form-check-input:checked {
    background-color: var(--color-azul);
    border-color: var(--color-azul);
}

.form-switch .form-check-input {
    border-radius: 2rem;
    width: 2.5em;
    height: 1.4em;
    cursor: pointer;
}

.permiso-fila {
    padding: 0.6rem 0.25rem;
    border-bottom: 1px solid var(--borde-sutil);
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--tinta-primaria);
}

.permiso-fila:last-child {
    border-bottom: none;
}

.permiso-fila:hover {
    color: var(--color-azul);
}

/* Roles y Permisos: cada acción es un switch + su etiqueta. Bootstrap por
   defecto solo separa el switch de su texto con el padding-left exacto del
   ancho del switch (sin aire extra), así que quedan pegados. Se le agrega
   un poco de espacio real entre el interruptor y la letra. */
.permiso-accion .form-check-label {
    margin-left: 0.5rem;
}

/* ---------------------------------------------------------------------
   Botones — forma de píldora, más presencia (peso y relleno).
   --------------------------------------------------------------------- */
.btn {
    border-radius: 2rem;
    font-weight: 600;
    padding: 0.5rem 1.3rem;
}

.btn-sm {
    border-radius: 1.4rem;
    padding: 0.3rem 0.9rem;
}

.btn-lg {
    padding: 0.7rem 1.7rem;
}

.btn-outline-secondary {
    color: var(--tinta-secundaria);
    border-width: 1.5px;
    border-color: var(--borde-medio);
}

.btn-outline-secondary:hover {
    background-color: var(--superficie-2);
    color: var(--tinta-primaria);
    border-color: var(--borde-medio);
}

.btn-outline-primary, .btn-outline-danger, .btn-outline-success, .btn-outline-warning, .btn-outline-info {
    border-width: 1.5px;
}

/* Botones circulares (toggle de menú, tema, etc.) conservan forma redonda completa */
.btn-salir, #btnToggleSidebar {
    border-radius: 50%;
    padding: 0;
}

/* ---------------------------------------------------------------------
   Botón flotante "Volver arriba": oculto hasta hacer scroll hacia abajo
   (ver assets/js/app.js), aparece con una transición suave en la esquina
   inferior derecha, por encima del contenido pero sin taparlo en reposo.
   --------------------------------------------------------------------- */
.btn-scroll-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1030;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: none;
    background-color: var(--color-azul);
    color: #ffffff;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s;
}

.btn-scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.btn-scroll-top:hover {
    background-color: #2f6fc4;
}

/* ---------------------------------------------------------------------
   Logo institucional en "Acerca de" (acerca.php): muchos logos (ej. el de
   INFOTEP) vienen con fondo blanco sólido, así que se envuelven en un
   panel blanco propio para que se vean bien tanto en modo claro como en
   modo oscuro, en vez de flotar directamente sobre la tarjeta oscura.
   --------------------------------------------------------------------- */
.acerca-logo-wrap {
    display: inline-block;
    background-color: #ffffff;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}

.acerca-logo {
    display: block;
    max-height: 80px;
    max-width: 100%;
    width: auto;
}