/* Appointsly Web — estilos globales */ /* Bootstrap eliminado. El sistema de diseño usa Tailwind CSS (CDN) con el tema Luminous Azure. */ html, body { margin: 0; padding: 0; } /* ── Sidebar de la app (_LayoutApp) ────────────────────────────────────────── En móvil (<1024px) el sidebar es un drawer off-canvas (Tailwind: -translate-x-full + lg:translate-x-0) que se abre con la hamburguesa. En escritorio se puede minimizar: el JS del layout pone la clase "sidebar-collapsed" en (persistida en localStorage) y estas reglas ocultan el aside y devuelven el margen al contenido. ─────────────────────────────────────────────────────────────────────────── */ #sidebar-expand { display: none; } @media (min-width: 1024px) { html.sidebar-collapsed #app-sidebar { transform: translateX(-100%); } html.sidebar-collapsed #app-main { margin-left: 0; } html.sidebar-collapsed #sidebar-expand { display: flex; } } /* ── Custom Select (cs-group) ──────────────────────────────────────────────── Dropdowns accesibles que reemplazan los normal: wwwroot/js/select-enhance.js construye el markup anterior al cargar la página. Es la opción por defecto para selects de solo texto. Los colores salen de la gama de marca de tailwind.config.js (azul del logo): primary #011B2A, primary-container #0E4A6B, outline-variant #CBD5DD. ─────────────────────────────────────────────────────────────────────────── */ .cs-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } .cs-group { position: relative; display: flex; flex-direction: column; gap: 6px; } .cs-label { font-size: 11px; font-weight: 700; color: #4B5563; text-transform: uppercase; letter-spacing: .06em; } .cs-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #F4F7F9; border: 1.5px solid #CBD5DD; border-radius: 14px; padding: 10px 12px; font-family: inherit; cursor: pointer; text-align: left; transition: border-color .2s, box-shadow .2s, background .15s; } .cs-trigger:hover { border-color: #0E4A6B; background: white; } .cs-trigger:focus { outline: none; border-color: #011B2A; background: white; box-shadow: 0 0 0 3px rgba(14,74,107,.14); } .cs-trigger.open { border-color: #011B2A; background: white; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .cs-chevron { flex-shrink: 0; color: #4B5563; font-size: 20px !important; transition: transform .2s; } .cs-trigger.open .cs-chevron { transform: rotate(180deg); } /* Estado deshabilitado: el enhancer copia el disabled del original sigue en el DOM tras la mejora visual: es el que viaja en el formulario. Se vuelve invisible con opacity, NO con display:none ni reduciéndolo a 1px, porque un