/* ============================================================
   Identidad visual — Sistema de Barberías
   Dirección: High-contrast Mono con acento cálido. Negro carbón para
   navegación (sidebar), blanco cálido de fondo, dorado/caramelo como
   único acento (aparece solo en la acción principal de cada vista y
   en el indicador de sección activa). Semántica de estado (éxito/
   peligro/advertencia/info) usa los colores clásicos, nunca el dorado.

   Bootstrap 5.3 se carga sin build step (CDN) — algunos componentes
   (botones, alertas) consumen variables CSS locales que Bootstrap fija
   en su hoja de estilos compilada, no la variable raíz --bs-primary.
   Por eso acá hay dos capas: (1) variables raíz, que alcanzan a la
   mayoría de las utilidades (.text-primary, .bg-primary, etc.), y
   (2) overrides puntuales por componente para lo que no las hereda.
   ============================================================ */

:root {
    /* Paleta de marca */
    --barber-carbon: #111111;
    --barber-carbon-raised: #1B1B1B;
    --barber-blanco: #F7F7F5;
    --barber-superficie: #FFFFFF;
    --barber-gris-claro: #E5E5E5;
    --barber-dorado: #C28B4E;
    --barber-dorado-hover: #AD7A42;
    --barber-dorado-active: #96692F;
    /* Variantes "texto" — mismo tono, oscurecido para pasar 4.5:1 sobre
       fondos claros. --barber-dorado(-hover/-active) son para SUPERFICIES
       (fondo de botón, borde, indicador) con texto carbón encima, no para
       texto dorado sobre fondo claro (eso es lo que hay acá). Verificado
       con cálculo WCAG real, no estimado. */
    --barber-dorado-texto: #8F6435;
    --barber-dorado-texto-hover: #6D4A27;

    --barber-texto: #1C1B19;
    --barber-texto-muted: #5C5850;
    --barber-borde-sutil: #E5E5E5;
    --barber-borde-fuerte: #847E74;

    /* Colores de apoyo (estado) — clásicos, independientes de la marca */
    --barber-exito: #1E7B34;
    --barber-exito-bg: #E7F3E9;
    --barber-error: #C1272D;
    --barber-error-bg: #FBE9E9;
    --barber-advertencia: #8A5D0D;
    --barber-advertencia-bg: #FBF0D6;
    --barber-info: #1D5FA8;
    --barber-info-bg: #E4EEFB;

    /* --- Color de ACCIÓN (no de marca) ------------------------------
       Sistema semántico para botones: azul = acción primaria (crear,
       guardar, confirmar, agregar); verde = positiva (completar,
       aprobar, activar, marcar pago realizado); rojo = destructiva
       (eliminar, cancelar, desactivar); ámbar = advertencia/atención;
       gris = secundaria (editar, volver, cerrar). El dorado de marca
       (sidebar, footer, filete de página) queda aparte, sin mezclarse
       con estos — identifica "Trimly", no una acción. */
    --barber-azul: #2563EB;
    --barber-azul-hover: #1D4ED8;
    --barber-azul-active: #1E3A8A;

    /* Violeta — funciones especiales (IA, automatizaciones, Premium).
       Sin uso todavía en el sistema, token listo para cuando aparezca
       la primera función de este tipo. */
    --barber-violeta: #7C3AED;
    --barber-violeta-hover: #6D28D9;
    --barber-violeta-active: #5B21B6;

    /* Tipografía */
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Geometría — un solo criterio en todo el sistema */
    --barber-radius: 6px;
    --barber-radius-sm: 4px;

    /* Remapeo de variables raíz de Bootstrap */
    --bs-primary: var(--barber-dorado);
    --bs-primary-rgb: 194, 139, 78;
    --bs-secondary: var(--barber-carbon);
    --bs-secondary-rgb: 17, 17, 17;
    --bs-dark: var(--barber-carbon);
    --bs-dark-rgb: 17, 17, 17;
    --bs-success: var(--barber-exito);
    --bs-success-rgb: 30, 123, 52;
    --bs-danger: var(--barber-error);
    --bs-danger-rgb: 193, 39, 45;
    --bs-warning: var(--barber-advertencia);
    --bs-warning-rgb: 138, 93, 13;
    --bs-info: var(--barber-info);
    --bs-info-rgb: 29, 95, 168;

    --bs-body-bg: var(--barber-blanco);
    --bs-body-bg-rgb: 247, 247, 245;
    --bs-body-color: var(--barber-texto);
    --bs-body-font-family: var(--font-body);
    --bs-border-color: var(--barber-borde-fuerte);
    --bs-border-radius: var(--barber-radius);
    --bs-border-radius-sm: var(--barber-radius-sm);
    --bs-border-radius-lg: var(--barber-radius);
    --bs-link-color: var(--barber-dorado-texto);
    --bs-link-color-rgb: 143, 100, 53;
    --bs-link-hover-color: var(--barber-dorado-texto-hover);
    --bs-link-hover-color-rgb: 109, 74, 39;
    --bs-card-bg: var(--barber-superficie);
    --bs-card-border-color: var(--barber-borde-sutil);
}

body {
    background-color: var(--barber-blanco);
    color: var(--barber-texto);
    font-family: var(--font-body);
}

h1, .display-title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: 1.75rem;
}

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

/* Subtítulo pequeño en mayúsculas, usado como encabezado de sección
   dentro de una card (ej. grupos de accesos rápidos del dashboard). */
.eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--barber-texto-muted);
}

/* --- Botones -----------------------------------------------------
   Sistema semántico (ver comentario de tokens arriba): azul = acción
   primaria, verde = positiva, rojo = destructiva, ámbar = advertencia,
   gris = secundaria. Todos con texto blanco — los 5 tonos son lo
   bastante oscuros para pasar 4.5:1 con blanco (verificado). */
.btn {
    --bs-btn-border-radius: var(--barber-radius);
    font-weight: 500;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--barber-azul);
    --bs-btn-border-color: var(--barber-azul);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--barber-azul-hover);
    --bs-btn-hover-border-color: var(--barber-azul-hover);
    --bs-btn-focus-shadow-rgb: 37, 99, 235;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--barber-azul-active);
    --bs-btn-active-border-color: var(--barber-azul-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--barber-azul);
    --bs-btn-disabled-border-color: var(--barber-azul);
}

.btn-outline-primary {
    --bs-btn-color: var(--barber-azul-hover);
    --bs-btn-border-color: var(--barber-azul);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--barber-azul);
    --bs-btn-hover-border-color: var(--barber-azul);
    --bs-btn-focus-shadow-rgb: 37, 99, 235;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--barber-azul);
    --bs-btn-active-border-color: var(--barber-azul);
    --bs-btn-disabled-color: var(--barber-azul);
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--barber-exito);
    --bs-btn-border-color: var(--barber-exito);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #175E28;
    --bs-btn-hover-border-color: #175E28;
    --bs-btn-focus-shadow-rgb: 30, 123, 52;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #124A20;
    --bs-btn-active-border-color: #124A20;
}

.btn-outline-success {
    --bs-btn-color: var(--barber-exito);
    --bs-btn-border-color: var(--barber-exito);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--barber-exito);
    --bs-btn-hover-border-color: var(--barber-exito);
    --bs-btn-focus-shadow-rgb: 30, 123, 52;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--barber-exito);
    --bs-btn-active-border-color: var(--barber-exito);
}

.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--barber-advertencia);
    --bs-btn-border-color: var(--barber-advertencia);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6E4A0A;
    --bs-btn-hover-border-color: #6E4A0A;
    --bs-btn-focus-shadow-rgb: 138, 93, 13;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5C3D08;
    --bs-btn-active-border-color: #5C3D08;
}

.btn-outline-warning {
    --bs-btn-color: var(--barber-advertencia);
    --bs-btn-border-color: var(--barber-advertencia);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--barber-advertencia);
    --bs-btn-hover-border-color: var(--barber-advertencia);
    --bs-btn-focus-shadow-rgb: 138, 93, 13;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--barber-advertencia);
    --bs-btn-active-border-color: var(--barber-advertencia);
}

/* Violeta — funciones especiales (IA, automatizaciones, Premium). No
   hay ninguna función de este tipo todavía; clase lista para usar el
   día que aparezca (ej. "Sugerir horario con IA", badge "Premium"). */
.btn-premium {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--barber-violeta);
    --bs-btn-border-color: var(--barber-violeta);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--barber-violeta-hover);
    --bs-btn-hover-border-color: var(--barber-violeta-hover);
    --bs-btn-focus-shadow-rgb: 124, 58, 237;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--barber-violeta-active);
    --bs-btn-active-border-color: var(--barber-violeta-active);
}

.btn-outline-premium {
    --bs-btn-color: var(--barber-violeta);
    --bs-btn-border-color: var(--barber-violeta);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--barber-violeta);
    --bs-btn-hover-border-color: var(--barber-violeta);
    --bs-btn-focus-shadow-rgb: 124, 58, 237;
}

.text-bg-premium {
    background-color: var(--barber-violeta) !important;
    color: #fff !important;
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--barber-carbon);
    --bs-btn-border-color: var(--barber-carbon);
    --bs-btn-hover-bg: var(--barber-carbon-raised);
    --bs-btn-hover-border-color: var(--barber-carbon-raised);
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
}

.btn-outline-secondary {
    /* Relleno tenue en reposo (no transparente) — un botón "outline"
       puramente blanco sobre fondo blanco es la causa #1 de que el
       sistema se sienta "todo blanco"; con --barber-gris-claro de fondo
       se lo distingue sin competir con los botones dorados/rojos. */
    --bs-btn-color: var(--barber-texto);
    --bs-btn-bg: var(--barber-gris-claro);
    --bs-btn-border-color: var(--barber-borde-fuerte);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--barber-carbon);
    --bs-btn-hover-border-color: var(--barber-carbon);
    --bs-btn-active-bg: var(--barber-carbon);
    --bs-btn-active-border-color: var(--barber-carbon);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--barber-error);
    --bs-btn-border-color: var(--barber-error);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #9E1F24;
    --bs-btn-hover-border-color: #9E1F24;
    --bs-btn-focus-shadow-rgb: 193, 39, 45;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #7E191D;
    --bs-btn-active-border-color: #7E191D;
}

.btn-outline-danger {
    --bs-btn-color: var(--barber-error);
    --bs-btn-border-color: var(--barber-error);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--barber-error);
    --bs-btn-hover-border-color: var(--barber-error);
    --bs-btn-focus-shadow-rgb: 193, 39, 45;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--barber-error);
    --bs-btn-active-border-color: var(--barber-error);
}

/* --- Pestañas (nav-pills): mismo criterio de contraste que los botones
   primarios — texto carbón sobre el dorado activo, no blanco. --- */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--barber-dorado);
    --bs-nav-pills-border-radius: var(--barber-radius);
}
.nav-pills .nav-link {
    color: var(--barber-texto);
}
.nav-pills .nav-link.active {
    color: var(--barber-carbon);
    font-weight: 600;
}

/* --- Formularios: foco dorado en vez del azul por defecto --- */
.form-control,
.form-select {
    border-radius: var(--barber-radius);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--barber-dorado);
    box-shadow: 0 0 0 0.25rem rgba(194, 139, 78, 0.25);
}

.form-check-input:checked {
    /* dorado-active (no dorado): el tono base sólo da 2.76:1 contra el
       fondo claro, por debajo del 3:1 que pide WCAG para el estado de
       un control de UI. */
    background-color: var(--barber-dorado-active);
    border-color: var(--barber-dorado-active);
}

.form-check-input:focus {
    border-color: var(--barber-dorado);
    box-shadow: 0 0 0 0.25rem rgba(194, 139, 78, 0.25);
}

/* Foco visible reforzado sobre cualquier superficie clara u oscura */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible {
    outline: 2px solid var(--barber-dorado-active);
    outline-offset: 2px;
}

/* --- Salta el foco visualmente al link de skip-to-content solo cuando
   recibe foco por teclado (accesibilidad, no estorba en mouse/touch). --- */
.skip-link {
    position: absolute;
    top: -3rem;
    left: 0.5rem;
    z-index: 1090;
    padding: 0.5rem 1rem;
    background-color: var(--barber-dorado);
    color: var(--barber-carbon);
    border-radius: var(--barber-radius-sm);
}

.skip-link:focus {
    top: 0.5rem;
    outline: 2px solid var(--barber-carbon);
    outline-offset: 2px;
}

/* ============================================================
   Layout: sidebar + topbar
   ============================================================ */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* --- Sidebar (desktop, ≥lg) --- */
.sidebar {
    width: 260px;
    flex-shrink: 0;
    background-color: var(--barber-carbon);
    color: #fff;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    transition: width .2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar {
        transition: none;
    }
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.1rem 1rem;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-brand:hover,
.sidebar-brand:focus-visible {
    color: var(--barber-dorado);
}

.sidebar-nav {
    padding: 0.75rem 0 1rem;
}

.sidebar-group + .sidebar-group {
    margin-top: 0.5rem;
}

.sidebar-group-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
    padding: 0.5rem 1rem 0.35rem;
    margin: 0;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    padding: 0.6rem 1rem;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    border-left: 3px solid transparent;
    font-size: 0.925rem;
    white-space: nowrap;
}

.sidebar-link .bi {
    flex-shrink: 0;
    font-size: 1rem;
    width: 1.1rem;
    text-align: center;
}

.sidebar-link:hover,
.sidebar-link:focus-visible {
    color: #fff;
    background-color: var(--barber-carbon-raised);
    outline: none;
}

.sidebar-link:focus-visible {
    outline: 2px solid var(--barber-dorado);
    outline-offset: -2px;
}

.sidebar-link.active {
    color: var(--barber-dorado);
    background-color: var(--barber-carbon-raised);
    border-left-color: var(--barber-dorado);
    font-weight: 600;
}

/* Colapsado a solo-íconos (persistido en localStorage vía JS) */
.sidebar.sidebar-collapsed {
    width: 72px;
}

.sidebar.sidebar-collapsed .sidebar-link-text,
.sidebar.sidebar-collapsed .sidebar-brand-text,
.sidebar.sidebar-collapsed .sidebar-group-title {
    display: none;
}

.sidebar.sidebar-collapsed .sidebar-link,
.sidebar.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

#sidebarCollapseBtn {
    margin-top: auto;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    min-height: 44px;
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    font-size: 0.85rem;
}

#sidebarCollapseBtn:hover,
#sidebarCollapseBtn:focus-visible {
    color: #fff;
    background-color: var(--barber-carbon-raised);
}

/* --- Offcanvas (mobile) reutiliza el mismo _sidebar_nav.html --- */
.offcanvas.sidebar-offcanvas {
    background-color: var(--barber-carbon);
    color: #fff;
    width: 280px;
}

.offcanvas.sidebar-offcanvas .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.offcanvas.sidebar-offcanvas .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}

/* --- Topbar --- */
.topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--barber-superficie);
    border-bottom: 1px solid var(--barber-borde-sutil);
    padding: 0.6rem 1rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.topbar-toggle {
    border: 1px solid var(--barber-borde-fuerte);
    border-radius: var(--barber-radius);
    background: transparent;
    color: var(--barber-texto);
    min-width: 44px;
    min-height: 44px;
    line-height: 1;
}

.topbar-spacer {
    flex: 1 1 auto;
}

.topbar .dropdown-toggle::after {
    margin-left: 0.5rem;
}

.topbar-notif-badge {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
}

.topbar-icon-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--barber-radius);
    color: var(--barber-texto);
    text-decoration: none;
}

.topbar-icon-link:hover,
.topbar-icon-link:focus-visible {
    background-color: var(--barber-gris-claro);
    color: var(--barber-texto);
}

/* Marca mostrada en el topbar para visitantes no autenticados
   (sin sidebar propio en ese caso). */
.topbar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--barber-texto);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
}

.topbar-brand:hover,
.topbar-brand:focus-visible {
    color: var(--barber-dorado-texto-hover);
}

/* Isotipo de Trimly (topbar, sidebar y footer) — el archivo ya trae su
   propio fondo (blanco/negro) a juego con dónde se lo usa. */
.topbar-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
}

/* ============================================================
   Contenido
   ============================================================ */

/* --- Tarjetas --- */
.card {
    background-color: var(--barber-superficie);
    border-color: var(--barber-borde-sutil);
    border-radius: var(--barber-radius);
}

/* Filete superior de color — para diferenciar categorías de cards sin
   agregar otro criterio de superficie (sigue siendo borde, no sombra).
   Variantes: dorado (default/marca), info, éxito, avertencia. */
.card-accent {
    border-top: 3px solid var(--barber-dorado);
}
.card-accent-info { border-top-color: var(--barber-info); }
.card-accent-success { border-top-color: var(--barber-exito); }
.card-accent-warning { border-top-color: var(--barber-advertencia); }

/* --- Tablas: encabezado con fondo tenue en vez de blanco plano --- */
.table > thead {
    background-color: var(--barber-gris-claro);
}
.table > thead > tr > th {
    border-bottom-width: 1px;
    color: var(--barber-texto);
}

/* --- Panel de contenido: envuelve {% block content %} en base.html.
   Separación por borde, sin sombra decorativa (criterio único de
   geometría del sistema: borde + superficie, no sombra difusa). Filete
   dorado arriba — mismo acento que el footer, aparece en TODAS las
   pantallas sin que el fondo deje de ser predominantemente claro. --- */
.content-panel {
    background-color: var(--barber-superficie);
    border: 1px solid var(--barber-borde-sutil);
    border-top: 3px solid var(--barber-dorado);
    border-radius: var(--barber-radius);
    padding: 1.5rem;
}

.content-panel .card {
    background-color: var(--barber-blanco);
}

@media (max-width: 575.98px) {
    .content-panel {
        padding: 1rem;
    }
}

/* --- Encabezado de página: título + volver + acciones --- */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.page-header h1 {
    margin-bottom: 0.15rem;
}

.page-header-back {
    margin-bottom: 0.5rem;
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* --- Footer: acento dorado, sigue la paleta del sidebar --- */
.site-footer {
    background-color: var(--barber-superficie);
    border-top: 3px solid var(--barber-dorado);
    color: var(--barber-texto);
}
.site-footer-contact {
    color: var(--barber-texto-muted);
}
.site-footer-contact a {
    color: var(--barber-texto-muted);
    text-decoration: none;
}
.site-footer-contact a:hover,
.site-footer-contact a:focus-visible {
    color: var(--barber-dorado-texto);
}
.site-footer-contact .bi {
    color: var(--barber-dorado-texto);
}

/* --- Badges / pills de estado, con texto de buen contraste --- */
.text-bg-primary {
    background-color: var(--barber-azul) !important;
    color: #fff !important;
}
.text-bg-secondary {
    background-color: var(--barber-carbon) !important;
    color: #fff !important;
}
.text-bg-success {
    background-color: var(--barber-exito) !important;
    color: #fff !important;
}
.text-bg-danger {
    background-color: var(--barber-error) !important;
    color: #fff !important;
}
.text-bg-warning {
    background-color: var(--barber-advertencia) !important;
    color: #fff !important;
}
.text-bg-info {
    background-color: var(--barber-info) !important;
    color: #fff !important;
}
/* Estado "neutro/pendiente" — un solo criterio en todo el sistema
   (reemplaza la mezcla previa de text-bg-light/text-bg-secondary). */
.text-bg-neutral {
    background-color: var(--barber-gris-claro) !important;
    color: var(--barber-texto) !important;
    border: 1px solid var(--barber-borde-fuerte);
}

/* --- Alertas (mensajes de Django: success/danger/warning/info) --- */
.alert {
    border-radius: var(--barber-radius);
}
.alert-success {
    --bs-alert-color: #17401f;
    --bs-alert-bg: var(--barber-exito-bg);
    --bs-alert-border-color: #bfe0c2;
}
.alert-danger {
    --bs-alert-color: #6e1418;
    --bs-alert-bg: var(--barber-error-bg);
    --bs-alert-border-color: #f1bcbc;
}
.alert-warning {
    --bs-alert-color: var(--barber-advertencia);
    --bs-alert-bg: var(--barber-advertencia-bg);
    --bs-alert-border-color: #f0dca3;
}
.alert-info {
    --bs-alert-color: #123a63;
    --bs-alert-bg: var(--barber-info-bg);
    --bs-alert-border-color: #b6d2f2;
}

/* --- Links --- */
a {
    color: var(--barber-dorado-texto);
}
a:hover {
    color: var(--barber-dorado-texto-hover);
}

/* ============================================================
   Componentes reutilizables (partials nuevos)
   ============================================================ */

/* --- Celdas de la grilla de calendario (agenda/_grilla_calendario.html) --- */
.cell-ocupado {
    background-color: var(--barber-gris-claro);
}

.cell-fuera-horario {
    background-color: var(--barber-blanco);
}

/* --- Logo de empresa (selector.html, home.html) --- */
.empresa-logo,
.empresa-logo-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
}

.empresa-logo {
    object-fit: cover;
    border: 1px solid var(--barber-borde-sutil);
}

.empresa-logo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--barber-dorado-texto);
    background-color: rgba(194, 139, 78, 0.14);
}

.empresa-logo-lg,
.empresa-logo-placeholder-lg {
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
}

.empresa-meta {
    color: var(--barber-texto-muted);
    font-size: 0.85rem;
}

.empresa-meta .bi {
    color: var(--barber-dorado-texto);
    width: 1rem;
}

.logo-preview {
    max-height: 120px;
    border: 1px solid var(--barber-borde-sutil);
    border-radius: var(--barber-radius);
    padding: 0.5rem;
    background-color: var(--barber-superficie);
}

/* --- Estado vacío / sin resultados --- */
.empty-state {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: var(--barber-texto-muted);
}

.empty-state .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    font-size: 1.4rem;
    color: var(--barber-dorado-texto);
    background-color: rgba(194, 139, 78, 0.12);
    border-radius: 50%;
    margin-bottom: 0.75rem;
}

.empty-state-title {
    color: var(--barber-texto);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* --- Tarjeta KPI (resúmenes de caja) --- */
.kpi-card {
    background-color: var(--barber-superficie);
    border: 1px solid var(--barber-borde-sutil);
    border-radius: var(--barber-radius);
    border-left: 3px solid var(--barber-borde-fuerte);
    padding: 1rem 1.25rem;
    height: 100%;
}

.kpi-card-label {
    font-size: 0.8rem;
    color: var(--barber-texto-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

.kpi-card-value {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.kpi-card.kpi-success { border-left-color: var(--barber-exito); }
.kpi-card.kpi-success .kpi-card-value { color: var(--barber-exito); }
.kpi-card.kpi-danger { border-left-color: var(--barber-error); }
.kpi-card.kpi-danger .kpi-card-value { color: var(--barber-error); }
.kpi-card.kpi-neutral { border-left-color: var(--barber-dorado); }

/* --- Indicador de carga htmx --- */
.htmx-indicator {
    display: none;
    align-items: center;
    gap: 0.4rem;
    color: var(--barber-texto-muted);
    font-size: 0.85rem;
}
.htmx-request.htmx-indicator,
.htmx-request .htmx-indicator {
    display: inline-flex;
}

.spinner-dot {
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid var(--barber-borde-fuerte);
    border-top-color: var(--barber-dorado);
    border-radius: 50%;
    animation: spinner-rotate 0.7s linear infinite;
}

@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .spinner-dot {
        animation-duration: 1.6s;
    }
}

/* --- Notificación no leída (notificaciones/notificacion_list.html) --- */
.notificacion-no-leida {
    background-color: rgba(194, 139, 78, 0.08);
    border-left: 3px solid var(--barber-dorado);
}

/* --- Página de confirmación destructiva --- */
.confirm-page-icon {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--barber-error-bg);
    color: var(--barber-error);
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
}

/* ============================================================
   Landing pública (Trimly) — sólo "/" para visitantes sin sesión.
   Marca y estilo acotados a esta página (ver base.html: topbar,
   <main> y footer condicionales); el resto del sistema no cambia.
   Reusa los tokens de marca ya definidos arriba (dorado, carbon,
   azul de acción) — no se inventa paleta nueva.
   ============================================================ */

.landing-main {
    background-color: var(--barber-blanco);
}

.landing-nav {
    gap: 1.5rem;
    margin-left: 2rem;
}
.landing-nav a {
    color: var(--barber-texto);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}
.landing-nav a:hover,
.landing-nav a:focus-visible {
    color: var(--barber-dorado-texto);
}

.topbar.is-scrolled {
    box-shadow: 0 2px 12px rgba(17, 17, 17, 0.08);
}

/* --- Secciones: banda full-bleed, contenido centrado por padding
   calculado (evita un wrapper extra sólo para centrar). --- */
.landing-hero,
.landing-section,
.landing-cta-banner {
    padding: 4rem 1.5rem;
}
@media (min-width: 1240px) {
    .landing-hero,
    .landing-section,
    .landing-cta-banner {
        padding-inline: calc(50% - 570px);
    }
}
.landing-section-alt {
    background-color: var(--barber-superficie);
    border-top: 1px solid var(--barber-borde-sutil);
    border-bottom: 1px solid var(--barber-borde-sutil);
}
.landing-section-header {
    max-width: 46rem;
    margin-bottom: 2.5rem;
}
.landing-section-header h2 {
    margin-bottom: 0.75rem;
}

/* --- Hero --- */
.landing-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    padding-top: 5rem;
    padding-bottom: 5rem;
    position: relative;
}
@media (min-width: 992px) {
    .landing-hero {
        grid-template-columns: 1fr 1fr;
    }
}
.landing-hero-title {
    font-size: 2.25rem;
    line-height: 1.15;
    margin-bottom: 1rem;
}
@media (min-width: 768px) {
    .landing-hero-title {
        font-size: 3rem;
    }
}
.landing-hero-subtitle {
    font-size: 1.1rem;
    color: var(--barber-texto-muted);
    max-width: 38rem;
}

.landing-hero-visual {
    position: relative;
}

.landing-mockup {
    background-color: var(--barber-superficie);
    border: 1px solid var(--barber-borde-sutil);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(17, 17, 17, 0.12);
    overflow: hidden;
}
.landing-mockup-chrome {
    display: flex;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    background-color: var(--barber-blanco);
    border-bottom: 1px solid var(--barber-borde-sutil);
}
.landing-mockup-chrome span {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: var(--barber-gris-claro);
    border: 1px solid var(--barber-borde-sutil);
}
.landing-mockup-body {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
    padding: 1.25rem;
}
@media (max-width: 480px) {
    .landing-mockup-body {
        grid-template-columns: 1fr;
    }
}
.landing-mockup-agenda-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}
.landing-mockup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--barber-borde-sutil);
}
.landing-mockup-row:first-of-type {
    border-top: none;
}
.landing-mockup-side {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.landing-mockup-side .kpi-card {
    padding: 0.6rem 0.85rem;
}
.landing-mockup-team {
    background-color: var(--barber-blanco);
    border: 1px solid var(--barber-borde-sutil);
    border-radius: var(--barber-radius);
    padding: 0.6rem 0.85rem;
}
.landing-mockup-avatar-row {
    display: flex;
    gap: 0.4rem;
}
.landing-mockup-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--barber-carbon);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.landing-float-badge {
    position: absolute;
    display: none;
    align-items: center;
    gap: 0.4rem;
    background-color: var(--barber-superficie);
    border: 1px solid var(--barber-borde-sutil);
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(17, 17, 17, 0.1);
    white-space: nowrap;
}
.landing-float-badge .bi {
    color: var(--barber-dorado-texto);
}
@media (min-width: 1240px) {
    .landing-float-badge {
        display: inline-flex;
    }
    .landing-float-1 { top: -1.25rem; left: -1.5rem; }
    .landing-float-2 { bottom: -1.25rem; left: -1.5rem; }
    .landing-float-3 { top: 2rem; right: -2.25rem; }
    .landing-float-4 { bottom: 3.5rem; right: -2.25rem; }
}

/* --- Problema --- */
.landing-problem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}
.landing-problem-card {
    padding: 1.5rem;
    border: 1px solid var(--barber-borde-sutil);
    border-radius: var(--barber-radius);
    background-color: var(--barber-superficie);
}
.landing-problem-card .bi {
    font-size: 1.5rem;
    color: var(--barber-dorado-texto);
    margin-bottom: 0.75rem;
    display: block;
}

/* --- Por qué elegir Trimly (feature cards) --- */
.landing-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}
.landing-feature-card {
    padding: 1.5rem;
    border: 1px solid var(--barber-borde-sutil);
    border-radius: var(--barber-radius);
    background-color: var(--barber-superficie);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.landing-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(17, 17, 17, 0.08);
}
@media (prefers-reduced-motion: reduce) {
    .landing-feature-card {
        transition: none;
    }
    .landing-feature-card:hover {
        transform: none;
    }
}
.landing-feature-card .bi {
    font-size: 1.5rem;
    color: var(--barber-dorado-texto);
    margin-bottom: 0.75rem;
    display: block;
}

/* --- Funcionalidades principales (showcase alterna) --- */
.landing-showcase {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.landing-showcase-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
}
@media (min-width: 768px) {
    .landing-showcase-item {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
    .landing-showcase-reverse .landing-showcase-text {
        order: 2;
    }
    .landing-showcase-reverse .landing-showcase-visual {
        order: 1;
    }
}
.landing-showcase-visual {
    background-color: var(--barber-gris-claro);
    border-radius: 12px;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.landing-showcase-visual .bi {
    font-size: 3.5rem;
    color: var(--barber-dorado-texto);
}

/* --- Conocé Trimly por dentro (galería, layout "bento") ---
   Un módulo destacado (2x2) + tres más chicos alrededor, en vez de una
   grilla plana — más dinámico sin depender de imágenes superpuestas con
   position:absolute (ese patrón ya rompió responsive una vez, ver el
   bug de los .landing-float-badge). En mobile se apila todo en 1 columna. */
.landing-gallery-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(150px, auto);
    grid-auto-flow: dense;
    gap: 1.25rem;
}
.landing-gallery-item-featured {
    grid-column: span 2;
    grid-row: span 2;
}
.landing-gallery-item-featured .landing-gallery-preview {
    height: 100%;
}
@media (max-width: 767.98px) {
    .landing-gallery-bento {
        grid-template-columns: 1fr;
    }
    .landing-gallery-item-featured {
        grid-column: auto;
        grid-row: auto;
    }
}
.landing-gallery-item {
    background-color: var(--barber-blanco);
    border: 1px solid var(--barber-borde-sutil);
    border-radius: var(--barber-radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}
.landing-gallery-preview {
    background-color: var(--barber-superficie);
    border: 1px solid var(--barber-borde-sutil);
    border-radius: var(--barber-radius-sm);
    padding: 0.75rem;
    margin-bottom: 1rem;
}
.landing-gallery-preview-kpi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.landing-gallery-number {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--barber-dorado-texto);
    margin-bottom: 0.25rem;
}

/* --- Cómo funciona (steps) --- */
.landing-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    position: relative;
}
@media (min-width: 992px) {
    .landing-steps::before {
        content: "";
        position: absolute;
        top: 1.1rem;
        left: 5%;
        right: 5%;
        height: 2px;
        background-color: var(--barber-borde-sutil);
        z-index: 0;
    }
}
.landing-step {
    position: relative;
    z-index: 1;
}
.landing-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--barber-carbon);
    color: var(--barber-dorado);
    font-family: var(--font-display);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* --- Para quién es Trimly --- */
.landing-audience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}
.landing-audience-card {
    text-align: center;
    padding: 2rem 1.5rem;
    border: 1px solid var(--barber-borde-sutil);
    border-radius: var(--barber-radius);
    background-color: var(--barber-superficie);
}
.landing-audience-card .bi {
    font-size: 2rem;
    color: var(--barber-dorado-texto);
    margin-bottom: 1rem;
    display: block;
}

/* --- Seguridad y simplicidad --- */
.landing-trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}
.landing-trust-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.landing-trust-item .bi {
    font-size: 1.4rem;
    color: var(--barber-dorado-texto);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* --- Próximamente en Trimly (roadmap) --- */
.landing-roadmap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}
.landing-roadmap-card {
    padding: 1.5rem;
    border: 1px dashed var(--barber-borde-fuerte);
    border-radius: var(--barber-radius);
    background-color: var(--barber-blanco);
}
.landing-roadmap-icon {
    font-size: 1.4rem;
    color: var(--barber-texto-muted);
    display: block;
    margin-bottom: 0.5rem;
}

/* --- Planes --- */
.landing-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}
.landing-pricing-card {
    padding: 2rem 1.5rem;
    border: 1px solid var(--barber-borde-sutil);
    border-radius: var(--barber-radius);
    background-color: var(--barber-superficie);
    /* Reset explícito: la sección de Planes (.landing-section-dark) fija
       color blanco para su propio texto, pero esta card es una isla
       clara — sin este reset, sus títulos heredan blanco sobre blanco. */
    color: var(--barber-texto);
    text-align: center;
}
.landing-pricing-featured {
    border-color: var(--barber-azul);
    border-width: 2px;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
}
.landing-pricing-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0.5rem 0 1rem;
}

/* --- Sección oscura (Planes) — rompe el ritmo blanco/crema del resto
   de la página, los planes (tarjetas claras) quedan en primer plano. --- */
.landing-section-dark {
    background-color: var(--barber-carbon);
    color: rgba(255, 255, 255, 0.85);
}
.landing-section-dark .landing-section-header h2 {
    color: #fff;
}
.landing-section-dark .landing-section-header p {
    color: rgba(255, 255, 255, 0.7);
}
.landing-section-dark-note {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
}

/* --- FAQ --- */
.landing-faq .accordion-button {
    font-weight: 600;
}
.landing-faq .accordion-button:not(.collapsed) {
    color: var(--barber-texto);
    background-color: var(--barber-blanco);
    box-shadow: none;
}
.landing-faq .accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(194, 139, 78, 0.25);
}

/* --- CTA final --- */
.landing-cta-banner {
    background-color: var(--barber-carbon);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.landing-cta-banner h2 {
    color: #fff;
    position: relative;
}
.landing-cta-banner p {
    color: rgba(255, 255, 255, 0.75);
    max-width: 34rem;
    margin-inline: auto;
    position: relative;
}
.landing-cta-icon {
    display: block;
    font-size: 2.25rem;
    color: var(--barber-dorado);
    margin-bottom: 1rem;
}
.landing-cta-logo {
    display: block;
    width: 180px;
    max-width: 60%;
    height: auto;
    margin: 0 auto 1.5rem;
    border-radius: var(--barber-radius);
}

/* --- Footer de landing (sólo home pública, ver base.html) --- */
.landing-footer {
    background-color: var(--barber-carbon);
    color: rgba(255, 255, 255, 0.7);
    padding: 3rem 1.5rem 1.5rem;
}
@media (min-width: 1240px) {
    .landing-footer {
        padding-inline: calc(50% - 570px);
    }
}
.landing-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}
.landing-footer h3 {
    color: #fff;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    font-family: var(--font-body);
}
.landing-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.landing-footer a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
}
.landing-footer a:hover,
.landing-footer a:focus-visible {
    color: var(--barber-dorado);
}
.landing-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}
.landing-footer-contact .bi {
    color: var(--barber-dorado);
    margin-top: 0.15rem;
    flex-shrink: 0;
}
.landing-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 1.5rem;
    font-size: 0.85rem;
    text-align: center;
}