/* ============================================================================ INFORWEB — SISTEMA DE DISEÑO (02-sep-2026) ============================================================================ Tokens de color/tipografía/sombra + retematizado de Bootstrap. Se carga AL FINAL de todas las hojas de estilo (después de app.css/gral.css/ pdfButton.css/xlsButton.css) para que, a especificidad igual, este archivo gane — así no hace falta editar esas hojas ni ninguna página individual. Solo modo claro (04-sep-2026): se probó un modo oscuro alternable y no convenció, así que se retiró toda esa lógica (tokens oscuros, botón de alternar en MenuLayout/MenuLayoutSC/GrupoPage/LoginPage, theme.js). Este archivo define un único juego de colores, sin ninguna forma de cambiarlo. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS DE COLOR/TIPOGRAFÍA/SOMBRA -------------------------------------------------------------------------- */ :root { --ink: #1A1B1F; --ink-soft: #585B63; --ink-faint: #898D96; --surface: #FFFFFF; --surface-alt: #F1F2F4; --surface-sunken: #F8F9FA; --border: #E5E7EA; --border-strong: #CFD2D7; --brand-primary: #3B2356; --brand-primary-soft: #F1EBF6; --brand-primary-line: #D8C9E6; --brand-secondary: #8B2929; --brand-secondary-soft: #FBECEC; --brand-accent: #007CA3; --brand-accent-soft: #E3F3F8; --brand-accent-light: #85CAE4; --success: #1F8A5F; --success-soft: #E7F5EE; --warning: #B7791F; --warning-soft: #FBF1E1; --danger: #C0392B; --danger-soft: #FBEAE8; --shadow-sm: 0 1px 2px rgba(59, 35, 86, 0.06); --shadow-md: 0 4px 16px rgba(59, 35, 86, 0.10); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* -------------------------------------------------------------------------- 2. TIPOGRAFÍA — una sola familia para toda la app, nunca cambia tamaños -------------------------------------------------------------------------- */ html, body { font-family: var(--font-display); } /* 🛡️ (04-sep-2026) Complemento del viewport en index.html (maximum-scale=1/user-scalable=no): "manipulation" le dice al navegador táctil "no esperes a ver si viene un segundo tap para decidir si es zoom" — elimina el retraso de ~300ms del tap y cualquier interpretación de doble-tap como gesto de zoom a nivel de motor de renderizado, no solo por la restricción del viewport. Sin esto, varias páginas que usan @@ondblclick para abrir un detalle (igual que el doble clic en desktop) podían no recibir el evento en móvil. */ html { touch-action: manipulation; } /* 🛡️ (04-sep-2026) ESCALADO REAL EN CELULARES ANGOSTOS — Bootstrap mide botones, selects, inputs, badges y paddings en "rem", que se calcula sobre el font-size de (16px por default) y NUNCA se reduce solo por el ancho de pantalla. Por eso en un celular esos controles se ven exactamente igual de grandes que en una PC: se reposicionan (por los media queries de cada página) pero no se proporcionan al tamaño real del dispositivo, y terminan ocupando mucha más pantalla relativa de la que deberían. Bajar el font-size de solo por debajo de 480px de ancho (celulares en vertical) hace que TODO lo medido en rem —controles de Bootstrap, spacing utilities (p-2, mb-3...), tamaños de letra de encabezados— se achique en la misma proporción, sin tocar nada medido en px (íconos, anchos fijos) ni afectar tablets/1366×768/1920×1080, que quedan fuera de este media query. clamp() lo hace gradual: a 576px de ancho ya da 16px (igual que el default), así que no hay salto brusco en el borde del breakpoint. */ @media (max-width: 480px) { html { font-size: clamp(13px, 3.6vw, 16px); } } /* -------------------------------------------------------------------------- 3. RETEMATIZADO DE BOOTSTRAP — "primary" pasa de azul de plantilla al morado de marca en TODA la app (btn-primary, text-primary, border-primary, bg-primary, links) sin tocar una sola página. -------------------------------------------------------------------------- */ :root { --bs-primary: var(--brand-primary); --bs-primary-rgb: 59, 35, 86; --bs-link-color: var(--brand-primary); --bs-link-color-rgb: 59, 35, 86; --bs-link-hover-color: var(--brand-secondary); } /* app.css (plantilla default de Blazor) deja .btn-primary en el azul viejo #1b6ec2 sin !important — como este archivo se carga después, esta regla gana a especificidad igual y usa ya el morado de marca. */ .btn-primary { color: #fff; background-color: var(--brand-primary); border-color: var(--brand-primary); } .btn-primary:hover, .btn-primary:focus { background-color: var(--brand-secondary); border-color: var(--brand-secondary); } a, .btn-link { color: var(--brand-primary); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: 0 0 0 0.2rem var(--brand-accent-soft) !important; border-color: var(--brand-accent) !important; } /* -------------------------------------------------------------------------- 4. PULIDO DE COMPONENTES COMPARTIDOS -------------------------------------------------------------------------- */ .btn { border-radius: var(--radius-sm); transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease; } .card, .modal-content { border-radius: var(--radius-md); } .badge { font-weight: 600; letter-spacing: 0.01em; } /* Scrollbar discreto, mismo criterio en toda la app */ .custom-scrollbar::-webkit-scrollbar, ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--border-strong); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background-color: var(--ink-faint); }