/* Gestor de Guiones · UI layer (v9.5.32) Objetivo: centralizar estilo visual/diagramación sin tocar lógica. Nota: se apoya en Bootstrap 5; este archivo “tema” componentes y layout. */ /* ========================= Theme Tokens (Design System) ========================= */ :root{ /* Tipografía */ --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Paleta (alineada al logo) */ --color-ink: #0b0e14; /* tinta (navbar/contraste fuerte) */ --color-text: #0b0e14; /* texto base */ --color-brand: #0056c7; /* principal */ --color-accent: #ff9705; /* acento */ --color-bg: #f6f7fb; --color-surface: #ffffff; --color-surface-2: #fbfcff; --color-border: #e7eaf3; --color-muted: #64748b; /* Radios */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; /* Sombras */ --shadow-xs: 0 .125rem .5rem rgba(15, 23, 42, .06); --shadow-sm: 0 .25rem 1rem rgba(15, 23, 42, .08); --shadow-md: 0 .65rem 2rem rgba(15, 23, 42, .10); /* Espaciado (escala 4/8/12/16/24/32...) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; } /* Body background follows theme */ .app-body{ background: var(--bs-body-bg); color: var(--bs-body-color); min-height: 100vh; } /* ========================= Dark mode (tokens) - Se activa con: ========================= */ html[data-bs-theme="dark"]{ --color-text: #e7ecf5; --color-bg: #0b0f14; --color-surface: #0f172a; --color-surface-2: #111c33; --color-border: #23344d; --color-muted: #9aa7bd; /* Sombras más sutiles en fondos oscuros */ --shadow-xs: 0 .125rem .5rem rgba(0, 0, 0, .25); --shadow-sm: 0 .25rem 1rem rgba(0, 0, 0, .28); --shadow-md: 0 .65rem 2rem rgba(0, 0, 0, .32); } /* ========================= Bootstrap overrides (sin recompilar) ========================= */ :root{ --bs-body-font-family: var(--font-sans); --bs-body-color: var(--color-text); --bs-body-bg: var(--color-bg); --bs-primary: var(--color-brand); --bs-primary-rgb: 234, 56, 18; --bs-link-color: var(--color-brand); --bs-link-hover-color: #c72f10; --bs-border-color: var(--color-border); --bs-border-radius: var(--radius-md); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); } html[data-bs-theme="dark"]{ --bs-body-color: var(--color-text); --bs-body-bg: var(--color-bg); --bs-border-color: var(--color-border); } /* ========================= Layout base ========================= */ html, body{ height: 100%; } body{ background: var(--color-bg) !important; } main.container{ max-width: 1180px; } /* Navbar con identidad + “barra” de acento */ .app-navbar{ position: relative; background: var(--color-ink) !important; box-shadow: var(--shadow-xs); } .app-navbar::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--color-brand), var(--color-accent)); } .navbar .navbar-brand{ font-weight: 700; letter-spacing: .2px; } .brand-logo{ height: 58px; width: auto; display: block; } .brand-name{ font-weight: 700; letter-spacing: .2px; margin-left: 50px; } /* ========================= Componentes (las 6 palancas) ========================= */ /* A) Cards */ .card{ border: 1px solid var(--color-border); border-radius: var(--radius-md); } .card.shadow-sm{ box-shadow: var(--shadow-sm) !important; } .card-header{ background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .card-body{ background: var(--color-surface); } /* B) Botones y controles (altura/consistencia) */ .btn, .form-control, .form-select{ border-radius: var(--radius-sm); } .btn{ font-weight: 600; } .btn.btn-sm{ border-radius: 10px; } /* C) Tablas */ .table thead th{ background: var(--color-surface); border-bottom: 1px solid var(--color-border); font-weight: 700; font-size: .85rem; letter-spacing: .2px; } .table-hover tbody tr:hover{ background-color: rgba(234, 56, 18, .04); } .table { --bs-table-bg: var(--color-surface); } /* D) Badges */ .badge{ border-radius: 999px; } /* E) Tabs (si se usan) */ .nav-tabs .nav-link{ border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); font-weight: 600; } .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { background-color: var(--color-surface-2); } /* F) Micro-interacciones suaves */ .btn, .card, .form-control, .form-select{ transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease; } .card:hover{ box-shadow: var(--shadow-md); } /* ========================= Autenticación (login/registro) ========================= */ .auth-wrap{ position: relative; min-height: 100vh; display: grid; place-items: center; padding: var(--space-6) var(--space-4); background: radial-gradient(1200px 600px at 15% 10%, rgba(255, 151, 5, .12), transparent 55%), radial-gradient(1000px 500px at 90% 20%, rgba(234, 56, 18, .10), transparent 55%), var(--color-bg); } .auth-theme-toggle{ position: absolute; top: var(--space-4); right: var(--space-4); border-radius: 999px; } .auth-card{ width: 100%; max-width: 420px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; box-shadow: var(--shadow-md); overflow: hidden; } .auth-card .auth-head{ padding: var(--space-5) var(--space-5) var(--space-3); text-align: center; } .auth-logo{ height: 84px; width: auto; margin-bottom: var(--space-2); } .auth-title{ font-size: 1.05rem; font-weight: 800; margin: 0; } .auth-subtitle{ color: var(--color-muted); font-size: .92rem; margin-top: 2px; } .auth-card .auth-body{ padding: var(--space-3) var(--space-5) var(--space-5); } /* ========================= Utilidades existentes ========================= */ .mono{ font-family: var(--font-mono); } .text-truncate-2{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pre-wrap{ white-space: pre-wrap; } .cursor-pointer{ cursor: pointer; } /* Admin: botones compactos con íconos */ .btn-icon{ width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; } .btn-icon i{ font-size: 1.05rem; line-height: 1; } .admin-actions{ gap: .35rem; } /* Alertas y progreso */ .alert{ border-radius: var(--radius-md); } .progress, .progress-bar{ border-radius: 999px; } textarea.form-control { background-color: var(--color-surface); } .rounded { BACKGROUND-COLOR: aliceblue; }