/* ============================================================================= Taller Industrial - Estilos base (layout + componentes) ============================================================================= Construido sobre los tokens semanticos definidos en tokens.css + paletas. ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-sans); font-size: var(--font-size-md); line-height: var(--line-height-normal); color: var(--color-fg); background: var(--color-bg); transition: background var(--transition-base), color var(--transition-base); } a { color: var(--color-link); text-decoration: none; } a:hover { color: var(--color-link-hover); text-decoration: underline; } h1, h2, h3, h4 { color: var(--color-fg); margin: 0 0 var(--space-3); line-height: var(--line-height-tight); } h1 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); } h2 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); } h3 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); } /* ---------------- Layout shell ---------------- */ .app-shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; grid-template-rows: var(--topbar-height) 1fr; grid-template-areas: "sidebar topbar" "sidebar main"; /* Alto ACOTADO (no min-height): así la fila "main" (1fr) queda de alto definido y SOLO .app-main scrollea internamente (tiene overflow-y:auto). El topbar y el sidebar quedan FIJOS al scrollear en vez de irse con el . El sidebar, al ser más alto que la pantalla, scrollea por su cuenta (también overflow-y:auto). height:100dvh va después para descontar el chrome dinámico del navegador móvil (barras que aparecen/desaparecen); navegadores sin dvh usan el 100vh de arriba. */ height: 100vh; height: 100dvh; } .app-sidebar { grid-area: sidebar; background: var(--color-sidebar-bg); color: var(--color-sidebar-fg); /* Densidad vertical moderada: con el rol admin (el menú más largo, ~23 ítems) el sidebar entra sin scroll a 1440×900 en densidad compacta (el default). */ padding: var(--space-2) 0; overflow-y: auto; border-right: 1px solid var(--color-border); } .app-topbar { grid-area: topbar; background: var(--color-topbar-bg); color: var(--color-topbar-fg); border-bottom: 1px solid var(--color-topbar-border); display: flex; align-items: center; padding: 0 var(--space-6); gap: var(--space-4); } .app-main { grid-area: main; padding: var(--space-6); overflow-y: auto; scrollbar-gutter: stable; } /* Scroll-lock del fondo cuando hay un modal abierto (la clase la togglea base.html). El scroll INTERNO del modal (.card__body con overflow) sigue funcionando: es un contenedor aparte, no se ve afectado por bloquear el fondo. */ html.has-modal, html.has-modal body { overflow: hidden; } html.has-modal .app-main, html.has-modal .app-sidebar { overflow: hidden; } /* Evitar que el scroll interno del modal se "encadene" al fondo al llegar al borde. */ .modal-backdrop .card__body { overscroll-behavior: contain; } /* ---------------- Botón flotante «↑ ir arriba» (global) ---------------- Vive UNA vez en base.html (singleton). Aparece cuando .app-main está scrolleado (lo togglea app.js con la clase .is-shown) y al click lleva .app-main al tope. z-index por DEBAJO de los modales (que arrancan en 1000, ver modal-stack.js) para que un modal lo tape; además se esconde con html.has-modal. Como está oculto por defecto (visibility:hidden) no captura clics ni tapa controles hasta que aparece. */ .scroll-top { position: fixed; right: var(--space-6); bottom: var(--space-6); width: 44px; height: 44px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-primary); color: var(--color-primary-fg); font-size: 1.25rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-lg); display: inline-flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base); z-index: 990; } .scroll-top.is-shown { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-top:hover { background: var(--color-primary-strong); } .scroll-top:focus-visible { outline: 2px solid var(--color-primary-fg); outline-offset: 2px; } /* Con un modal abierto: fuera (que el modal mande). */ html.has-modal .scroll-top { display: none; } @media (prefers-reduced-motion: reduce) { .scroll-top { transition: opacity var(--transition-base); transform: none; } .scroll-top.is-shown { transform: none; } } @media print { .scroll-top { display: none !important; } } /* ---------------- Sidebar ---------------- */ .brand { /* boton-link sin estilo nativo de boton */ width: 100%; padding: var(--space-2) var(--space-5) var(--space-3); border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: var(--space-2); background: transparent; color: inherit; text-align: left; cursor: pointer; display: flex; align-items: center; gap: var(--space-3); transition: background var(--transition-fast); } .brand:hover { background: var(--color-sidebar-bg-active); } .brand__texts { flex: 1; min-width: 0; } .brand__title { color: var(--color-sidebar-fg-active); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand__subtitle { font-size: var(--font-size-xs); color: var(--color-fg-muted); margin-top: var(--space-1); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand__caret { color: var(--color-sidebar-fg); font-size: var(--font-size-md); flex-shrink: 0; transition: transform var(--transition-base); } /* ---- Estado colapsado ---- */ .app-shell[data-sidebar="collapsed"] { grid-template-columns: var(--sidebar-width-collapsed) 1fr; } .app-shell[data-sidebar="collapsed"] .app-sidebar { overflow-x: hidden; } .app-shell[data-sidebar="collapsed"] .brand__texts, .app-shell[data-sidebar="collapsed"] .brand__caret, .app-shell[data-sidebar="collapsed"] .nav-section, .app-shell[data-sidebar="collapsed"] .nav-item__label { display: none; } .app-shell[data-sidebar="collapsed"] .brand { padding: var(--space-3) 0; justify-content: center; } .app-shell[data-sidebar="collapsed"] .nav-item { justify-content: center; padding: var(--space-3) 0; gap: 0; } .app-shell[data-sidebar="collapsed"] .nav-item__icon { width: 22px; height: 22px; font-size: 1.1rem; } .nav-section { padding: var(--space-1) var(--space-5); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; color: var(--color-fg-subtle); margin-top: var(--space-2); } .nav-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-5); color: var(--color-sidebar-fg); border-left: 3px solid transparent; transition: background var(--transition-fast), color var(--transition-fast); white-space: nowrap; overflow: hidden; } .nav-item:hover { background: var(--color-sidebar-bg-active); color: var(--color-sidebar-fg-active); text-decoration: none; } .nav-item--active { background: var(--color-sidebar-bg-active); color: var(--color-sidebar-fg-active); border-left-color: var(--color-primary); } .nav-item__icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .nav-item__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* ---------------- Topbar ---------------- */ .topbar__title { font-weight: var(--font-weight-semibold); } .topbar__spacer { flex: 1; } .topbar__actions { display: flex; gap: var(--space-3); align-items: center; } .icon-btn { width: 36px; height: 36px; border-radius: var(--radius-md); background: transparent; border: 1px solid transparent; color: var(--color-fg-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--transition-fast), color var(--transition-fast); position: relative; } .icon-btn:hover { background: var(--color-surface-2); color: var(--color-fg); } .icon-btn__badge { position: absolute; top: 4px; right: 4px; background: var(--color-danger); color: #fff; font-size: 10px; font-weight: var(--font-weight-bold); border-radius: var(--radius-full); min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; } /* ---------------- Cards / panels ---------------- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; } .card__header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); background: var(--color-surface); display: flex; align-items: center; justify-content: space-between; } .card__title { margin: 0; font-size: var(--font-size-lg); } .card__body { padding: var(--space-5); } /* ---------------- Buttons ---------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--density-button-h); padding: 0 var(--density-padding-x); border-radius: var(--radius-md); border: 1px solid transparent; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); text-decoration: none; line-height: 1; } .btn--primary { background: var(--color-primary); color: var(--color-primary-fg); } .btn--primary:hover { background: var(--color-primary-strong); color: var(--color-primary-fg); text-decoration: none; } .btn--secondary { background: var(--color-surface-2); color: var(--color-fg); border-color: var(--color-border); } .btn--secondary:hover { background: var(--color-surface-elevated); text-decoration: none; } .btn--ghost { background: transparent; color: var(--color-fg); border-color: transparent; } .btn--ghost:hover { background: var(--color-surface-2); text-decoration: none; } .btn--danger { background: var(--color-danger); color: #fff; } .btn--danger:hover { background: #b91c1c; text-decoration: none; } .btn--success { background: var(--color-success); color: #fff; } .btn--success:hover { background: #15803d; text-decoration: none; } .btn--warning { background: var(--color-warning); color: #fff; } .btn--warning:hover { filter: brightness(0.9); text-decoration: none; } /* Variantes de tamaño */ .btn--sm { height: 28px; padding: 0 var(--space-3); font-size: var(--font-size-xs); } .btn--lg { height: 48px; padding: 0 var(--space-6); font-size: var(--font-size-md); } /* Disabled */ .btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ---------------- Forms ---------------- */ .form-group { margin-bottom: var(--space-4); } .form-label { display: block; margin-bottom: var(--space-1); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-fg); } .form-input, .form-select, .form-textarea, .input, select.input, textarea.input, input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="url"], input[type="tel"], select, textarea { width: 100%; height: var(--density-input-h); padding: 0 var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-fg); font-size: var(--font-size-sm); font-family: var(--font-sans); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } textarea, .form-textarea { height: auto; min-height: 80px; padding: var(--space-2) var(--space-3); } .input--sm, select.input--sm, input.input--sm { height: 28px; padding: 0 var(--space-2); font-size: var(--font-size-xs); } /* Inputs no deben heredar width:100% en flex containers chicos. Permitir override por estilo inline. */ input[type="checkbox"], input[type="radio"] { width: auto; height: auto; padding: 0; background: transparent; border: none; } .form-textarea { height: auto; padding: var(--space-2) var(--space-3); min-height: 80px; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); } .form-help { font-size: var(--font-size-xs); color: var(--color-fg-muted); margin-top: var(--space-1); } .form-error { color: var(--color-danger); font-size: var(--font-size-xs); margin-top: var(--space-1); } /* ---------------- Tables ---------------- */ .table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .table th { text-align: left; padding: var(--space-3); background: var(--color-surface-2); border-bottom: 1px solid var(--color-border-strong); font-weight: var(--font-weight-semibold); color: var(--color-fg); } .table td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); color: var(--color-fg); height: var(--density-row-h); } .table tbody tr:hover { background: var(--color-surface-2); } /* ---------------- Badges ---------------- */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); background: var(--color-surface-2); color: var(--color-fg); } .badge--success { background: var(--color-success-bg); color: var(--color-success); } .badge--warning { background: var(--color-warning-bg); color: var(--color-warning); } .badge--danger { background: var(--color-danger-bg); color: var(--color-danger); } .badge--info { background: var(--color-info-bg); color: var(--color-info); } .badge--secondary { background: var(--color-surface-2); color: var(--color-fg-muted); border: 1px solid var(--color-border); } .badge--primary { background: var(--color-primary-soft); color: var(--color-primary-strong); } /* ---------------- Alerts / messages ---------------- */ .alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-4); border: 1px solid transparent; } .alert--success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success); } .alert--warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning); } .alert--danger { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger); } .alert--info { background: var(--color-info-bg); color: var(--color-info); border-color: var(--color-info); } /* ---------------- Help tip (? con tooltip) ---------------- */ .help-tip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-fg-muted); font-size: 11px; font-weight: 700; line-height: 1; cursor: help; position: relative; vertical-align: middle; user-select: none; margin-left: 4px; } .help-tip:hover, .help-tip:focus-visible { color: var(--color-fg); border-color: var(--color-fg-muted); outline: none; } .help-tip__bub { position: absolute; z-index: 2000; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 260px; background: var(--color-surface); color: var(--color-fg); border: 1px solid var(--color-border-strong); border-radius: 8px; padding: 8px 10px; font-size: 12px; font-weight: 400; line-height: 1.45; text-align: left; box-shadow: 0 6px 24px rgba(0, 0, 0, .28); opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none; white-space: normal; } .help-tip:hover .help-tip__bub, .help-tip:focus-visible .help-tip__bub { opacity: 1; visibility: visible; } /* ---------------- Breadcrumb ---------------- */ .breadcrumb { height: var(--breadcrumb-height); display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-6); border-bottom: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--font-size-sm); color: var(--color-fg-muted); } .breadcrumb a { color: var(--color-fg-muted); } .breadcrumb__sep { color: var(--color-fg-subtle); } .breadcrumb__current { color: var(--color-fg); font-weight: var(--font-weight-medium); } /* ---------------- Login page (no shell) ---------------- */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: var(--color-bg); } .login-card { width: 100%; max-width: 420px; } /* ---------------- Theme switcher popover ---------------- */ .theme-popover { position: absolute; right: var(--space-6); top: calc(var(--topbar-height) + var(--space-2)); width: 300px; background: var(--color-surface-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-4); z-index: var(--z-dropdown); } .theme-popover__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); } .theme-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); } .theme-option { height: 44px; border-radius: var(--radius-md); border: 2px solid var(--color-border); background: var(--color-surface-2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); text-transform: capitalize; color: var(--color-fg); } .theme-option--active { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-strong); font-weight: var(--font-weight-semibold); } /* Paleta como swatches: cada boton muestra su color; "Libre" abre el picker. */ .theme-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); } .theme-swatch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; } .theme-swatch__dot { width: 100%; height: 30px; border-radius: var(--radius-md); background: var(--sw); border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); display: flex; align-items: center; justify-content: center; } .theme-swatch__name { font-size: 0.7rem; color: var(--color-fg-muted); } .theme-swatch.is-active .theme-swatch__dot { border-color: var(--color-fg); } .theme-swatch.is-active .theme-swatch__name { color: var(--color-fg); font-weight: var(--font-weight-semibold); } .theme-swatch__edit { color: #fff; font-size: 12px; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } .theme-swatch__picker { position: absolute; top: 0; left: 0; width: 100%; height: 30px; opacity: 0; pointer-events: none; border: none; padding: 0; } /* ---------------- Responsive ---------------- */ @media (max-width: 900px) { .app-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; } .app-sidebar { display: none; } .app-sidebar--open { display: block; position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-width); z-index: var(--z-fixed); } }