/* ========================================================================== ACATUDY DESIGN SYSTEM -------------------------------------------------------------------------- Sistema de diseño propio de Acatudy. Sin framework CSS ni build step: tokens (--u-*) + componentes (u-*) servidos tal cual desde public/css. - El COLOR DE MARCA lo fija el tenant via --brand-primary / --brand-* (BrandingService); aquí solo hay fallbacks neutros. - MODO OSCURO elegante por defecto. Modo claro con o prefers-color-scheme en . - Tipografía: stack de sistema (sin fuentes externas). ========================================================================== */ :root { /* Superficies (oscuro por defecto) */ --u-bg: #0b1120; --u-surface: #111a2e; --u-surface-2: #1a2540; --u-line: #24314f; /* Texto */ --u-text: #e6ebf5; --u-text-dim: #93a0b8; /* Marca (el tenant la pisa con --brand-primary) */ --u-primary: var(--brand-primary, #38bdf8); --u-primary-strong: var(--brand-primary-dark, #0ea5e9); --u-primary-soft: rgba(56, 189, 248, 0.14); --u-on-primary: #06121f; /* Estado */ --u-success: #34d399; --u-danger: #f87171; --u-warning: #fbbf24; --u-info: #60a5fa; /* Radios */ --u-radius-sm: 8px; --u-radius: 12px; --u-radius-lg: 18px; /* Sombras */ --u-shadow-sm: 0 1px 3px rgba(2, 6, 23, 0.4); --u-shadow: 0 10px 30px rgba(2, 6, 23, 0.45); --u-shadow-lg: 0 24px 60px rgba(2, 6, 23, 0.55); /* Tipografía (stack de sistema, cero dependencias) */ --u-font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --u-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --u-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Espaciado */ --u-space-1: 4px; --u-space-2: 8px; --u-space-3: 12px; --u-space-4: 16px; --u-space-5: 24px; --u-space-6: 32px; --u-space-7: 48px; --u-space-8: 64px; /* Métricas de layout */ --u-topbar-h: 60px; --u-sidebar-w: 250px; --u-container: 1120px; } /* Modo claro explícito */ html[data-u-theme="light"] { --u-bg: #f4f6fb; --u-surface: #ffffff; --u-surface-2: #eef1f7; --u-line: #dbe1ec; --u-text: #17202f; --u-text-dim: #5a6878; --u-primary-soft: rgba(14, 165, 233, 0.12); --u-on-primary: #ffffff; --u-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08); --u-shadow: 0 10px 24px rgba(15, 23, 42, 0.10); --u-shadow-lg: 0 24px 48px rgba(15, 23, 42, 0.14); } /* Modo claro automático */ @media (prefers-color-scheme: light) { html[data-u-theme="auto"] { --u-bg: #f4f6fb; --u-surface: #ffffff; --u-surface-2: #eef1f7; --u-line: #dbe1ec; --u-text: #17202f; --u-text-dim: #5a6878; --u-primary-soft: rgba(14, 165, 233, 0.12); --u-on-primary: #ffffff; --u-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08); --u-shadow: 0 10px 24px rgba(15, 23, 42, 0.10); --u-shadow-lg: 0 24px 48px rgba(15, 23, 42, 0.14); } } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } .u-body { margin: 0; background: var(--u-bg); color: var(--u-text); font-family: var(--u-font-body); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; } .u-body h1, .u-body h2, .u-body h3, .u-body h4 { font-family: var(--u-font-display); letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 var(--u-space-3); } .u-body a { color: var(--u-primary); text-decoration: none; } .u-body a:hover { text-decoration: underline; } .u-body img { max-width: 100%; } .u-container { max-width: var(--u-container); margin: 0 auto; padding: 0 var(--u-space-5); } .u-container-sm { max-width: 460px; margin: 0 auto; padding: 0 var(--u-space-5); } .u-text-dim { color: var(--u-text-dim); } .u-text-center { text-align: center; } .u-mt-4 { margin-top: var(--u-space-4); } .u-mt-5 { margin-top: var(--u-space-5); } .u-mt-6 { margin-top: var(--u-space-6); } .u-mb-4 { margin-bottom: var(--u-space-4); } .u-mb-5 { margin-bottom: var(--u-space-5); } /* Grid de tarjetas responsiva */ .u-grid { display: grid; gap: var(--u-space-5); } .u-grid-2 { grid-template-columns: 1fr; } .u-grid-3 { grid-template-columns: 1fr; } .u-grid-4 { grid-template-columns: 1fr; } @media (min-width: 720px) { .u-grid-2 { grid-template-columns: repeat(2, 1fr); } .u-grid-3 { grid-template-columns: repeat(3, 1fr); } .u-grid-4 { grid-template-columns: repeat(4, 1fr); } } .u-flex { display: flex; align-items: center; gap: var(--u-space-3); } .u-flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--u-space-3); } .u-flex-wrap { flex-wrap: wrap; } /* -------------------------------------------------------------------------- Botones -------------------------------------------------------------------------- */ .u-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--u-space-2); padding: 10px 20px; border-radius: var(--u-radius); border: 1px solid transparent; background: var(--u-surface-2); color: var(--u-text); font-family: var(--u-font-body); font-size: 14px; font-weight: 600; line-height: 1.3; cursor: pointer; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .u-btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--u-shadow-sm); } .u-btn:active { transform: translateY(0); } .u-btn-primary { background: var(--u-primary); color: var(--u-on-primary); } .u-btn-primary:hover { background: var(--u-primary-strong); color: var(--u-on-primary); } .u-btn-outline { background: transparent; border-color: var(--u-line); color: var(--u-text); } .u-btn-outline:hover { border-color: var(--u-text-dim); } .u-btn-ghost { background: transparent; color: var(--u-text-dim); } .u-btn-ghost:hover { color: var(--u-text); box-shadow: none; } .u-btn-danger { background: var(--u-danger); color: #1a0505; } .u-btn-sm { padding: 6px 14px; font-size: 13px; border-radius: var(--u-radius-sm); } .u-btn-lg { padding: 14px 28px; font-size: 16px; } .u-btn-block { width: 100%; } /* -------------------------------------------------------------------------- Tarjetas -------------------------------------------------------------------------- */ .u-card { background: var(--u-surface); border: 1px solid var(--u-line); border-radius: var(--u-radius-lg); padding: var(--u-space-5); box-shadow: var(--u-shadow-sm); } .u-card-hover { transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .u-card-hover:hover { transform: translateY(-2px); box-shadow: var(--u-shadow); border-color: var(--u-primary); } .u-card-highlight { border-color: var(--u-primary); box-shadow: 0 0 0 1px var(--u-primary), var(--u-shadow); } /* -------------------------------------------------------------------------- Formularios -------------------------------------------------------------------------- */ .u-field { margin-bottom: var(--u-space-4); } .u-label { display: block; font-size: 13px; font-weight: 600; color: var(--u-text-dim); margin-bottom: var(--u-space-2); } .u-input, .u-select, .u-textarea { width: 100%; background: var(--u-bg); border: 1px solid var(--u-line); border-radius: var(--u-radius); padding: 11px 14px; color: var(--u-text); font-family: var(--u-font-body); font-size: 14px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .u-input::placeholder, .u-textarea::placeholder { color: var(--u-text-dim); opacity: 0.7; } .u-input:focus, .u-select:focus, .u-textarea:focus { border-color: var(--u-primary); box-shadow: 0 0 0 3px var(--u-primary-soft); } .u-input-group { display: flex; align-items: stretch; } .u-input-group .u-input { border-top-right-radius: 0; border-bottom-right-radius: 0; } .u-input-addon { display: inline-flex; align-items: center; padding: 0 14px; background: var(--u-surface-2); border: 1px solid var(--u-line); border-left: 0; border-top-right-radius: var(--u-radius); border-bottom-right-radius: var(--u-radius); color: var(--u-text-dim); font-size: 13px; white-space: nowrap; } .u-check { display: flex; align-items: center; gap: var(--u-space-2); font-size: 14px; color: var(--u-text-dim); } .u-check input { accent-color: var(--u-primary); width: 16px; height: 16px; } .u-error { color: var(--u-danger); font-size: 12px; margin-top: var(--u-space-1); } /* -------------------------------------------------------------------------- Alertas y badges -------------------------------------------------------------------------- */ .u-alert { border-radius: var(--u-radius); padding: var(--u-space-3) var(--u-space-4); font-size: 14px; border: 1px solid transparent; margin-bottom: var(--u-space-4); } .u-alert ul { margin: 0; padding-left: 18px; } .u-alert-success { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.35); color: var(--u-success); } .u-alert-danger { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.35); color: var(--u-danger); } .u-alert-info { background: rgba(96, 165, 250, 0.12); border-color: rgba(96, 165, 250, 0.35); color: var(--u-info); } .u-alert-warning { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.35); color: var(--u-warning); } .u-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--u-surface-2); color: var(--u-text-dim); border: 1px solid var(--u-line); } .u-badge-primary { background: var(--u-primary-soft); color: var(--u-primary); border-color: transparent; } .u-badge-success { background: rgba(52, 211, 153, 0.15); color: var(--u-success); border-color: transparent; } .u-badge-danger { background: rgba(248, 113, 113, 0.15); color: var(--u-danger); border-color: transparent; } .u-badge-warning { background: rgba(251, 191, 36, 0.15); color: var(--u-warning); border-color: transparent; } /* -------------------------------------------------------------------------- Tablas -------------------------------------------------------------------------- */ .u-table-wrap { overflow-x: auto; border: 1px solid var(--u-line); border-radius: var(--u-radius-lg); background: var(--u-surface); } .u-table { width: 100%; border-collapse: collapse; font-size: 14px; } .u-table th { text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--u-text-dim); padding: var(--u-space-3) var(--u-space-4); border-bottom: 1px solid var(--u-line); background: var(--u-surface-2); } .u-table td { padding: var(--u-space-3) var(--u-space-4); border-bottom: 1px solid var(--u-line); } .u-table tr:last-child td { border-bottom: 0; } .u-table tbody tr:hover { background: var(--u-surface-2); } /* -------------------------------------------------------------------------- Topbar / navegación -------------------------------------------------------------------------- */ .u-topbar { position: sticky; top: 0; z-index: 100; height: var(--u-topbar-h); display: flex; align-items: center; gap: var(--u-space-5); padding: 0 var(--u-space-5); background: var(--u-bg); background: color-mix(in srgb, var(--u-bg) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--u-line); } .u-topbar-brand { display: flex; align-items: center; gap: var(--u-space-3); font-family: var(--u-font-display); font-size: 18px; font-weight: 800; color: var(--u-text); letter-spacing: -0.01em; } .u-topbar-brand:hover { text-decoration: none; } .u-topbar-brand img { max-height: 34px; width: auto; } .u-topbar-spacer { flex: 1; } .u-nav { display: flex; align-items: center; gap: var(--u-space-1); } .u-nav-link { padding: 8px 14px; border-radius: var(--u-radius-sm); color: var(--u-text-dim); font-size: 14px; font-weight: 600; transition: color 0.15s ease, background 0.15s ease; } .u-nav-link:hover { color: var(--u-text); background: var(--u-surface-2); text-decoration: none; } .u-nav-link.active { color: var(--u-primary); background: var(--u-primary-soft); } /* -------------------------------------------------------------------------- Sidebar (admin) -------------------------------------------------------------------------- */ .u-layout { display: flex; min-height: 100vh; } .u-sidebar { width: var(--u-sidebar-w); flex-shrink: 0; background: var(--u-surface); border-right: 1px solid var(--u-line); padding: var(--u-space-5) var(--u-space-4); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .u-sidebar-brand { display: flex; align-items: center; gap: var(--u-space-3); font-weight: 800; font-size: 17px; color: var(--u-text); margin-bottom: var(--u-space-6); padding: 0 var(--u-space-2); } .u-sidebar-brand:hover { text-decoration: none; } .u-sidebar-brand img { max-height: 30px; width: auto; } .u-sidebar-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--u-text-dim); margin: var(--u-space-5) var(--u-space-2) var(--u-space-2); } .u-sidebar-link { display: flex; align-items: center; gap: var(--u-space-3); padding: 9px 12px; border-radius: var(--u-radius-sm); color: var(--u-text-dim); font-size: 14px; font-weight: 500; } .u-sidebar-link:hover { color: var(--u-text); background: var(--u-surface-2); text-decoration: none; } .u-sidebar-link.active { color: var(--u-primary); background: var(--u-primary-soft); font-weight: 600; } .u-sidebar-link svg, .u-sidebar-link i { width: 16px; height: 16px; flex-shrink: 0; } .u-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .u-content { flex: 1; padding: var(--u-space-6); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .u-footer { border-top: 1px solid var(--u-line); padding: var(--u-space-6) var(--u-space-5); color: var(--u-text-dim); font-size: 13px; } .u-footer a { color: var(--u-text-dim); } .u-footer a:hover { color: var(--u-text); } .u-footer-inner { max-width: var(--u-container); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: var(--u-space-4); flex-wrap: wrap; } .u-footer-links { display: flex; gap: var(--u-space-5); } /* -------------------------------------------------------------------------- Auth (guest) -------------------------------------------------------------------------- */ .u-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--u-space-6) var(--u-space-4); position: relative; overflow: hidden; } .u-auth::before { content: ''; position: absolute; width: 60vw; height: 60vw; top: -30vw; background: radial-gradient(circle, var(--u-primary-soft) 0%, transparent 60%); filter: blur(60px); pointer-events: none; } .u-auth-panel { position: relative; width: 100%; max-width: 420px; background: var(--u-surface); border: 1px solid var(--u-line); border-radius: var(--u-radius-lg); padding: var(--u-space-6); box-shadow: var(--u-shadow-lg); } .u-auth-brand { text-align: center; font-family: var(--u-font-display); font-weight: 800; font-size: 20px; margin-bottom: var(--u-space-2); } .u-auth-brand img { max-height: 44px; margin-bottom: var(--u-space-3); } .u-auth-subtitle { text-align: center; color: var(--u-text-dim); font-size: 14px; margin-bottom: var(--u-space-6); } .u-auth-footer { position: relative; margin-top: var(--u-space-6); color: var(--u-text-dim); font-size: 13px; display: flex; gap: var(--u-space-5); } .u-auth-footer a { color: var(--u-text-dim); } /* -------------------------------------------------------------------------- Impersonation banner -------------------------------------------------------------------------- */ .u-banner-impersonation { background: var(--u-warning); color: #3a2a00; text-align: center; font-size: 14px; font-weight: 600; padding: var(--u-space-2) var(--u-space-4); } .u-banner-impersonation a, .u-banner-impersonation button { color: #3a2a00; font-weight: 700; text-decoration: underline; } /* -------------------------------------------------------------------------- Paginación (Paginator::useBootstrapFive genera este markup; aquí se estila con tokens Acatudy para no depender de Bootstrap CSS) -------------------------------------------------------------------------- */ .pagination { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; } .page-link { display: inline-block; padding: 7px 13px; border-radius: var(--u-radius-sm); border: 1px solid var(--u-line); background: var(--u-surface); color: var(--u-text-dim); font-size: 14px; text-decoration: none; } .page-link:hover { color: var(--u-text); border-color: var(--u-text-dim); } .page-item.active .page-link { background: var(--u-primary); border-color: var(--u-primary); color: var(--u-on-primary); } .page-item.disabled .page-link { opacity: 0.45; pointer-events: none; } /* Utilidad: solo visible en pantallas pequeñas / grandes */ .u-only-mobile { display: none; } @media (max-width: 900px) { .u-sidebar { display: none; } .u-only-mobile { display: block; } }