/* PreinscripcionMVP – UI Refresh (Bootstrap 5.3.x) - Tipografía: Outfit (Google Fonts) - Sistema de tokens (CSS variables) - Overrides suaves de Bootstrap (sin romper layouts) */ /* ------------------------------ Design tokens -------------------------------- */ :root { /* Fonts */ --font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Radii */ --radius-sm: .75rem; --radius-md: 1rem; --radius-lg: 1.25rem; /* Shadows */ --shadow-xs: 0 1px 2px rgba(2, 6, 23, .06); --shadow-sm: 0 10px 22px rgba(2, 6, 23, .07); --shadow-md: 0 18px 52px rgba(2, 6, 23, .12); /* Base palette (light) */ --bg: #f5f7fb; --surface: #ffffff; --surface-2: #f0f5ff; --text: #0b1220; --muted: #566074; --muted-2: #7a8396; --border: rgba(15, 23, 42, .10); /* Brand */ --primary: #1d4ed8; /* blue-700 */ --primary-800: #1e40af; /* blue-800 */ --primary-50: #eff6ff; --accent: #16a34a; /* green-600 */ --accent-700: #15803d; --accent-50: #ecfdf5; --warning: #f59e0b; --warning-50: #fffbeb; --danger: #ef4444; --danger-50: #fff1f2; /* Sidebar */ --sidebar-bg: #071733; --sidebar-bg-2: #041127; --sidebar-border: rgba(255, 255, 255, .10); --sidebar-text: rgba(255, 255, 255, .92); --sidebar-muted: rgba(255, 255, 255, .72); --sidebar-hover: rgba(255, 255, 255, .06); --sidebar-active: rgba(29, 78, 216, .26); --sidebar-active-border: rgba(147, 197, 253, .30); /* Map to Bootstrap variables */ --bs-body-font-family: var(--font-sans); --bs-font-sans-serif: var(--font-sans); --bs-font-monospace: var(--font-mono); /* “Grande pero estable”: 1.03rem ~ 16.5px */ --bs-body-font-size: 1.03rem; --bs-body-line-height: 1.55; --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-border-color: var(--border); --bs-primary: var(--primary); --bs-primary-rgb: 29, 78, 216; --bs-success: var(--accent); --bs-success-rgb: 22, 163, 74; --bs-warning: var(--warning); --bs-warning-rgb: 245, 158, 11; --bs-danger: var(--danger); --bs-danger-rgb: 239, 68, 68; --bs-link-color: var(--primary); --bs-link-hover-color: var(--primary-800); --bs-border-radius: var(--radius-sm); --bs-border-radius-sm: calc(var(--radius-sm) - .2rem); --bs-border-radius-lg: var(--radius-md); --bs-focus-ring-color: rgba(29, 78, 216, .25); } /* Dark mode (opcional): activar con class="dark" en */ body.dark { --bg: #0b1220; --surface: #0f1a30; --surface-2: #0c1730; --text: #e5e7eb; --muted: rgba(229, 231, 235, .75); --muted-2: rgba(229, 231, 235, .60); --border: rgba(229, 231, 235, .14); --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-border-color: var(--border); --bs-link-color: #93c5fd; --bs-link-hover-color: #bfdbfe; --bs-focus-ring-color: rgba(147, 197, 253, .28); } /* ------------------------------ Base -------------------------------- */ html, body { height: 100%; } body { background: var(--bs-body-bg); color: var(--bs-body-color); font-family: var(--bs-body-font-family); font-size: var(--bs-body-font-size); line-height: var(--bs-body-line-height); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: rgba(29, 78, 216, .18); color: var(--text); } /* Enlaces: un poco menos “subrayado por defecto”, pero sin perder accesibilidad */ a { text-decoration-thickness: 2px; text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } /* Focus visible – consistente (teclado) */ :where(a, button, input, select, textarea, .btn, [tabindex]):focus-visible { outline: none; box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); border-radius: .5rem; } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } } /* ------------------------------ Bootstrap overrides (suaves) -------------------------------- */ /* Cards más modernas y consistentes */ .card { border: 1px solid var(--bs-border-color); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-xs); } .card:hover { box-shadow: var(--shadow-sm); } .card-header { background: linear-gradient(180deg, var(--surface-2) 0%, rgba(255,255,255,0) 100%); border-bottom: 1px solid var(--bs-border-color); padding: 1rem 1.25rem; font-weight: 700; color: var(--text); } /* Botones: un poco más “punchy” sin cambiar markup */ .btn { border-radius: .9rem; font-weight: 650; letter-spacing: .01em; } .btn-sm { border-radius: .75rem; } .btn-outline-primary, .btn-outline-secondary { background: transparent; } /* Formularios: tamaños y focus */ .form-control, .form-select { border-radius: .85rem; border-color: var(--bs-border-color); padding-top: .55rem; padding-bottom: .55rem; } .form-control:focus, .form-select:focus { border-color: rgba(29, 78, 216, .55); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); } /* Tablas: legibilidad */ .table { font-size: 1rem; } .table thead th { font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: rgba(15, 23, 42, .03); border-bottom: 1px solid var(--bs-border-color); } .table tbody tr:hover { background: rgba(15, 23, 42, .03); } /* Badges suaves */ .badge { border-radius: 999px; font-weight: 700; } .badge.bg-warning { color: #1f2937 !important; } /* Code utility */ .db-code { font-family: var(--font-mono); font-size: .85rem; color: var(--primary); background: var(--primary-50); padding: 2px 10px; border-radius: .6rem; font-weight: 650; } /* Subtle date */ .db-date { font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; } /* ── Override global del user-agent: quitar subrayado de TODOS los ── */ a, a:link, a:visited, a:hover, a:active, a:focus, a:focus-visible { text-decoration: none !important; -webkit-text-decoration: none !important; text-decoration-line: none !important; color: inherit; } /* -------------------------------- Encabezados coloridos (según contexto) --------------------------------- */ .card-header.card-header--primary { background: linear-gradient(135deg, rgba(29,78,216,.18) 0%, rgba(29,78,216,.06) 55%, rgba(255,255,255,.0) 100%); border-left: 6px solid rgba(29,78,216,.65); color: var(--primary-800); } .card-header.card-header--success { background: linear-gradient(135deg, rgba(22,163,74,.18) 0%, rgba(22,163,74,.06) 55%, rgba(255,255,255,.0) 100%); border-left: 6px solid rgba(22,163,74,.60); color: var(--accent-700); } .card-header.card-header--warning { background: linear-gradient(135deg, rgba(245,158,11,.22) 0%, rgba(245,158,11,.08) 55%, rgba(255,255,255,.0) 100%); border-left: 6px solid rgba(245,158,11,.62); color: #7c4a03; } .card-header.card-header--danger { background: linear-gradient(135deg, rgba(239,68,68,.20) 0%, rgba(239,68,68,.07) 55%, rgba(255,255,255,.0) 100%); border-left: 6px solid rgba(239,68,68,.62); color: #7f1d1d; } .card-header.card-header--info { background: linear-gradient(135deg, rgba(14,165,233,.18) 0%, rgba(14,165,233,.06) 55%, rgba(255,255,255,.0) 100%); border-left: 6px solid rgba(14,165,233,.58); color: #0c4a6e; } .card-header.card-header--purple { background: linear-gradient(135deg, rgba(139,92,246,.18) 0%, rgba(139,92,246,.06) 55%, rgba(255,255,255,.0) 100%); border-left: 6px solid rgba(139,92,246,.58); color: #4c1d95; }