[x-cloak] { display: none !important; } /* Scrollbars en modo oscuro: los thumbs claros (#dbdad9 / #e2e8f0) definidos en los layouts se ven "en modo claro" sobre fondos oscuros. Estas reglas, con mayor especificidad (.dark .custom-scrollbar...), los sobreescriben cuando el tema actual es oscuro (clase .dark en ). */ .dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #475569; border-radius: 10px; } .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #64748b; } /* Firefox: `scrollbar-color` sigue al sistema, no a la clase .dark, así que se fija explícitamente por tema. */ .custom-scrollbar { scrollbar-color: #dbdad9 transparent; } .dark .custom-scrollbar { scrollbar-color: #475569 transparent; } /* Sidebar y sub-tabs: son controles de navegación, no texto. Se desactiva la selección de texto y el arrastre (nativo de imágenes/enlaces) para evitar que se vean "draggeables" o que se seleccionen al hacer clic. */ #main-sidebar, #secondary-nav { user-select: none; -webkit-user-select: none; } #main-sidebar *, #secondary-nav * { -webkit-user-drag: none; -webkit-touch-callout: none; } /* ========================================================================== UI COMPONENTES GLOBALES (unificación de elementos básicos) Punto único de estilo para botones, campos y controles. Los componentes Cotton (c-actions.button, c-forms.select, c-forms.input, ...) referencian estas clases; un cambio aquí se propaga a toda la app. Se usan SOLO tokens semánticos del tema (--color-*) que ya adaptan a modo oscuro. ========================================================================== */ /* ---- Botones: base, tamaños y variantes ---- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .75rem; /* rounded-xl: átomos 12px */ border: 1px solid transparent; background: transparent; font-family: inherit; font-weight: 700; font-size: .875rem; line-height: 1.25rem; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, filter .15s ease; } .btn:hover { text-decoration: none; } .btn:active { transform: scale(.97); } .btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; } .btn-sm { padding: .375rem .75rem; } /* 6px 12px */ .btn-md { padding: .625rem 1.25rem; } /* 10px 20px */ .btn-lg { padding: .75rem 1.5rem; font-size: 1rem; line-height: 1.5rem; } .btn-block { width: 100%; } .btn-primary { background: var(--color-primary); color: #fff; } .btn-primary:hover { background: var(--color-primary-hover); } .btn-secondary { background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-primary) 18%, transparent); } .btn-outline { background: var(--color-surface); border-color: var(--color-border-subtle); color: var(--color-secondary); } .btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); } .btn-ghost { color: var(--color-muted); } .btn-ghost:hover { background: var(--color-surface-input); color: var(--color-secondary); } .btn-danger { background: color-mix(in srgb, var(--color-danger) 8%, transparent); border-color: color-mix(in srgb, var(--color-danger) 20%, transparent); color: var(--color-danger); } .btn-danger:hover { background: color-mix(in srgb, var(--color-danger) 16%, transparent); } .btn-gradient { background-image: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); color: #fff; } .btn-gradient:hover { filter: brightness(1.06); } /* ---- Botón de ícono (acciones por fila) ---- */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: .5rem; border-radius: .5rem; font-size: .75rem; font-weight: 700; line-height: 1; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .icon-btn:active { transform: scale(.95); } .icon-btn-ghost { color: var(--color-muted); } .icon-btn-ghost:hover { color: var(--color-secondary); background: var(--color-surface-input); } .icon-btn-primary { background: var(--color-primary); color: #fff; } .icon-btn-primary:hover { background: var(--color-primary-hover); } .icon-btn-secondary { background: var(--color-surface-input); color: var(--color-secondary); } .icon-btn-secondary:hover { background: var(--color-border-subtle); } .icon-btn-outline { border: 1px solid var(--color-border-subtle); color: var(--color-muted); } .icon-btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); } .icon-btn-danger { color: var(--color-danger); } .icon-btn-danger:hover { background: color-mix(in srgb, var(--color-danger) 10%, transparent); color: var(--color-danger); } /* ---- Campos: inputs y selects ---- */ .field { width: 100%; border: 1px solid transparent; border-radius: 6px; background: var(--color-surface-input); color: var(--color-secondary); font-family: inherit; font-size: .875rem; font-weight: 500; padding: 0.5rem 0.5rem; /* 12px 16px */ outline: none; transition: background-color .15s ease, border-color .15s ease; } .field::placeholder { color: var(--color-subtle); } .field:focus { background: var(--color-surface); border-color: var(--color-primary); } .field:disabled { opacity: .5; cursor: not-allowed; } .field-sm { padding: 0.4rem 0.4rem; font-size: .875rem; } .field-error { background: color-mix(in srgb, var(--color-danger) 8%, transparent); border-color: color-mix(in srgb, var(--color-danger) 20%, transparent); } .field-error:focus { border-color: var(--color-danger); } .field-success { border-color: color-mix(in srgb, var(--color-success) 30%, transparent); } .field-success:focus { border-color: var(--color-success); } .field-select { /* Chevron nativo del navegador: NO se oculta el appearance para que el indicador clásico de ) se vean bien en modo oscuro en vez de quedar con el estilo claro del sistema operativo. */ html.dark { color-scheme: dark; } html:not(.dark) { color-scheme: light; } /* View Transitions entre documentos deshabilitadas: la app es una SPA con HTMX; al optar por `navigation: auto` el motor captura y compone la página completa (sidebar + 126 sub-tabs) en cada navegación, provocando micro-congelaciones del render. Las reglas ::view-transition-old/new quedaron obsoletas. */ /* Asterisco automático para campos obligatorios en formularios armados a mano (sin crispy-forms ni los componentes c-forms.input/select, que ya muestran el asterisco por su cuenta). Cubre el patrón