/*
* ============================================================
* OZONO DESIGN SYSTEM — NIVEL 1: TOKENS PRIMITIVOS
* ============================================================
* Estos tokens son los valores brutos del sistema.
* REGLA: Nunca referenciarlos directamente en componentes.
* Solo los consume ozono-tokens.css (Nivel 2).
* Los white-label.css de clientes nunca los tocan.
* ============================================================
*/
/* ── FUENTE WEB ─────────────────────────────────────────────
Inter se carga via en _Layout.cshtml (no @import)
para evitar bloqueo de render en redes lentas.
─────────────────────────────────────────────────────────── */
:root {
/* ── PALETA APPTIVIDAD DESIGN SYSTEM (DS oficial 2026) ── */
--primitive-ds-blue: #0011EE; /* Electric Blue — primario */
--primitive-ds-navy: #000555; /* Deep Navy — hover / body text */
--primitive-ds-ink: #000222; /* Near-Black — texto alto contraste / sidebar */
--primitive-ds-paper: #EEF5F5; /* Off-White — fondo de página */
--primitive-ds-lime: #DDFF55; /* Electric Lime — acento */
--primitive-ds-blue-08: rgba(0, 17, 238, 0.08); /* fill sutil en claro */
--primitive-ds-blue-12: rgba(0, 17, 238, 0.12); /* focus ring */
--primitive-ds-blue-20: rgba(0, 17, 238, 0.20); /* active fill en sidebar oscuro */
--primitive-ds-navy-08: rgba(0, 5, 85, 0.08); /* border cards */
--primitive-ds-navy-12: rgba(0, 5, 85, 0.12); /* border default */
--primitive-ds-navy-24: rgba(0, 5, 85, 0.24); /* border strong */
--primitive-ds-fg-3: #4a527a; /* texto terciario */
--primitive-ds-fg-muted: #8a91ac; /* placeholder / muted */
/* ── PALETA NAVY (legacy — referencia interna) ──────── */
--primitive-navy-950: #03102B;
--primitive-navy-900: #0A1F44;
--primitive-navy-800: #0F2A5E; /* Primario base Apptividad */
--primitive-navy-700: #1A3A7A;
--primitive-navy-600: #2351A0;
--primitive-navy-500: #3066C0;
--primitive-navy-400: #5486D8;
--primitive-navy-300: #85ADEA;
--primitive-navy-200: #B8CFF3;
--primitive-navy-100: #DDEAF9;
--primitive-navy-50: #F0F5FD;
/* ── PALETA TEAL ───────────────────────────────────────── */
--primitive-teal-950: #042B33;
--primitive-teal-900: #0C4A56;
--primitive-teal-800: #155E75;
--primitive-teal-700: #0E7490;
--primitive-teal-600: #0891B2;
--primitive-teal-500: #06B6D4; /* Acento base Apptividad */
--primitive-teal-400: #22D3EE;
--primitive-teal-300: #67E8F9;
--primitive-teal-200: #A5F3FC;
--primitive-teal-100: #CFFAFE;
--primitive-teal-50: #ECFEFF;
/* ── PALETA GREEN (éxito / heredado de marca) ──────────── */
--primitive-green-700: #4D7A0A;
--primitive-green-600: #65A30D;
--primitive-green-500: #84CC16; /* Evolución del #9FCC26 original */
--primitive-green-400: #A3E635;
--primitive-green-300: #BEF264;
--primitive-green-100: #ECFCCB;
--primitive-green-50: #F7FEE7;
/* ── PALETA SLATE (neutros) ────────────────────────────── */
--primitive-slate-950: #0A0F1A;
--primitive-slate-900: #111827;
--primitive-slate-800: #1F2937;
--primitive-slate-700: #374151;
--primitive-slate-600: #4B5563;
--primitive-slate-500: #6B7280; /* ~= #636e7b actual */
--primitive-slate-400: #9CA3AF; /* ~= #ADB7C2 actual */
--primitive-slate-300: #D1D5DB;
--primitive-slate-200: #E5E7EB;
--primitive-slate-100: #F3F4F6; /* ~= #F4F5F7 actual */
--primitive-slate-50: #F9FAFB;
--primitive-white: #FFFFFF;
/* ── PALETA STATUS ─────────────────────────────────────── */
--primitive-red-700: #B91C1C;
--primitive-red-600: #DC2626;
--primitive-red-500: #EF4444;
--primitive-red-100: #FEE2E2;
--primitive-red-50: #FEF2F2;
--primitive-amber-700: #B45309;
--primitive-amber-500: #F59E0B;
--primitive-amber-100: #FEF3C7;
--primitive-amber-50: #FFFBEB;
--primitive-blue-700: #1D4ED8;
--primitive-blue-500: #3B82F6;
--primitive-blue-100: #DBEAFE;
--primitive-blue-50: #EFF6FF;
/* ── ESCALA DE ESPACIADO (base 4px) ────────────────────── */
--primitive-space-0: 0;
--primitive-space-1: 4px;
--primitive-space-2: 8px;
--primitive-space-3: 12px;
--primitive-space-4: 16px;
--primitive-space-5: 20px;
--primitive-space-6: 24px;
--primitive-space-7: 32px;
--primitive-space-8: 40px;
--primitive-space-9: 48px;
--primitive-space-10: 64px;
--primitive-space-11: 80px;
--primitive-space-12: 96px;
/* ── ESCALA TIPOGRÁFICA ────────────────────────────────── */
--primitive-font-size-11: 11px;
--primitive-font-size-12: 12px;
--primitive-font-size-13: 13px;
--primitive-font-size-14: 14px;
--primitive-font-size-15: 15px;
--primitive-font-size-16: 16px;
--primitive-font-size-18: 18px;
--primitive-font-size-20: 20px;
--primitive-font-size-24: 24px;
--primitive-font-size-28: 28px;
--primitive-font-size-32: 32px;
/* ── PESOS TIPOGRÁFICOS ────────────────────────────────── */
--primitive-font-weight-400: 400;
--primitive-font-weight-500: 500;
--primitive-font-weight-600: 600;
--primitive-font-weight-700: 700;
/* ── BORDER RADIUS ─────────────────────────────────────── */
--primitive-radius-2: 2px;
--primitive-radius-4: 4px;
--primitive-radius-6: 6px;
--primitive-radius-8: 8px;
--primitive-radius-10: 10px;
--primitive-radius-12: 12px;
--primitive-radius-16: 16px;
--primitive-radius-20: 20px;
--primitive-radius-full: 9999px;
/* ── DURACIÓN DE ANIMACIONES ───────────────────────────── */
--primitive-duration-50: 50ms;
--primitive-duration-150: 150ms;
--primitive-duration-200: 200ms;
--primitive-duration-300: 300ms;
--primitive-duration-400: 400ms;
}
/*
* ============================================================
* OZONO DESIGN SYSTEM — NIVEL 2: TOKENS SEMÁNTICOS
* ============================================================
* Estos tokens dan significado a los primitivos.
* REGLA: Son los únicos tokens que consumen los componentes.
* Los white-label.css de clientes solo sobreescriben
* tokens de este archivo, nunca primitivos.
*
* Dependencia: Requiere ozono-primitives.css cargado antes.
* ============================================================
*/
/* ────────────────────────────────────────────────────────────
MODO CLARO (por defecto)
──────────────────────────────────────────────────────────── */
:root {
/* ── TIPOGRAFÍA — Apptividad DS ────────────────────────── */
--font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
--font-display: 'Bebas Neue', 'Anton', Impact, sans-serif; /* headlines / ALL CAPS */
--font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
--font-size-xs: var(--primitive-font-size-11); /* labels secundarios */
--font-size-sm: var(--primitive-font-size-12); /* captions, badges */
--font-size-base: var(--primitive-font-size-14); /* cuerpo principal */
--font-size-md: var(--primitive-font-size-15); /* cuerpo destacado */
--font-size-lg: var(--primitive-font-size-16); /* subtítulos */
--font-size-xl: var(--primitive-font-size-18); /* títulos de sección */
--font-size-2xl: var(--primitive-font-size-20); /* H3 de página */
--font-size-3xl: var(--primitive-font-size-24); /* H2 de página */
--font-size-4xl: var(--primitive-font-size-32); /* H1 / display */
--font-weight-normal: var(--primitive-font-weight-400);
--font-weight-medium: var(--primitive-font-weight-500);
--font-weight-semibold: var(--primitive-font-weight-600);
--font-weight-bold: var(--primitive-font-weight-700);
--line-height-tight: 1.25; /* headings */
--line-height-snug: 1.375; /* subheadings */
--line-height-normal: 1.5; /* body */
--line-height-relaxed: 1.625; /* descripiones largas */
--letter-spacing-tight: -0.02em; /* display / headings grandes */
--letter-spacing-normal: 0em;
--letter-spacing-wide: 0.06em; /* labels ALL-CAPS, badges */
/* ── COLORES DE MARCA — Apptividad DS oficial ─────────── */
--color-brand-primary: var(--primitive-ds-blue); /* #0011EE Electric Blue */
--color-brand-primary-hover: var(--primitive-ds-navy); /* #000555 Deep Navy */
--color-brand-primary-active: var(--primitive-ds-ink); /* #000222 Near-Black */
--color-brand-primary-subtle: var(--primitive-ds-blue-08); /* fill sutil en claro */
--color-brand-on-primary: var(--primitive-white);
--color-brand-accent: var(--primitive-ds-lime); /* #DDFF55 Electric Lime */
--color-brand-accent-hover: #C8E84D; /* lime dims 5% */
--color-brand-accent-subtle: rgba(221, 255, 85, 0.18);
--color-brand-on-accent: var(--primitive-ds-ink); /* texto oscuro sobre lime */
/* ── SUPERFICIES ───────────────────────────────────────── */
--color-surface: var(--primitive-white); /* cards, modales */
--color-surface-raised: var(--primitive-white);
--color-surface-overlay: var(--primitive-white);
--color-surface-sunken: var(--primitive-ds-paper); /* #EEF5F5 fondo de página */
--color-surface-neutral: #E4ECEC; /* paper ligeramente más oscuro */
--color-surface-inverse: var(--primitive-ds-ink); /* #000222 sidebar oscuro */
/* ── TEXTO ─────────────────────────────────────────────── */
--color-text-primary: var(--primitive-ds-ink); /* #000222 máximo contraste */
--color-text-secondary: var(--primitive-ds-navy); /* #000555 body text */
--color-text-tertiary: var(--primitive-ds-fg-3); /* #4a527a secundario */
--color-text-disabled: #767676; /* 4.5:1 WCAG AA sobre blanco — #8a91ac era 3.12:1 (fail) */
--color-text-inverse: var(--primitive-white);
--color-text-link: var(--primitive-ds-blue); /* #0011EE links */
--color-text-link-hover: var(--primitive-ds-navy); /* #000555 hover */
--color-text-on-accent: var(--primitive-ds-ink); /* texto oscuro sobre lime */
/* ── BORDES ────────────────────────────────────────────── */
--color-border: var(--primitive-ds-navy-12); /* rgba(0,5,85,0.12) */
--color-border-subtle: var(--primitive-ds-navy-08); /* rgba(0,5,85,0.08) */
--color-border-strong: var(--primitive-ds-navy-24); /* rgba(0,5,85,0.24) */
--color-border-focus: var(--primitive-ds-blue); /* #0011EE focus ring */
/* ── ESTADOS DE STATUS ─────────────────────────────────── */
--color-success: var(--primitive-green-500);
--color-success-text: var(--primitive-green-700);
--color-success-surface: var(--primitive-green-50);
--color-success-border: var(--primitive-green-300);
--color-warning: var(--primitive-amber-500);
--color-warning-text: var(--primitive-amber-700);
--color-warning-surface: var(--primitive-amber-50);
--color-warning-border: var(--primitive-amber-100);
--color-error: var(--primitive-red-500);
--color-error-text: var(--primitive-red-700);
--color-error-surface: var(--primitive-red-50);
--color-error-border: var(--primitive-red-100);
--color-info: var(--primitive-blue-500);
--color-info-text: var(--primitive-blue-700);
--color-info-surface: var(--primitive-blue-50);
--color-info-border: var(--primitive-blue-100);
/* ── BACKDROP / OVERLAY ────────────────────────────────── */
--color-backdrop: rgba(10, 31, 68, 0.45); /* sobre navy-900 */
/* ── ESPACIADO ─────────────────────────────────────────── */
--space-0: var(--primitive-space-0);
--space-1: var(--primitive-space-1); /* 4px */
--space-2: var(--primitive-space-2); /* 8px */
--space-3: var(--primitive-space-3); /* 12px */
--space-4: var(--primitive-space-4); /* 16px */
--space-5: var(--primitive-space-5); /* 20px */
--space-6: var(--primitive-space-6); /* 24px */
--space-7: var(--primitive-space-7); /* 32px */
--space-8: var(--primitive-space-8); /* 40px */
--space-9: var(--primitive-space-9); /* 48px */
--space-10: var(--primitive-space-10); /* 64px */
--space-11: var(--primitive-space-11); /* 80px */
--space-12: var(--primitive-space-12); /* 96px */
/* ── BORDER RADIUS ─────────────────────────────────────── */
/* Radios — Apptividad DS */
--radius-sm: var(--primitive-radius-4); /* chips, badges pequeños */
--radius-input: var(--primitive-radius-6); /* inputs, selects */
--radius-md: var(--primitive-radius-12); /* botones, form fields, list items */
--radius-lg: var(--primitive-radius-20); /* cards, modales, panels */
--radius-xl: var(--primitive-radius-20); /* alias DS --radius-lg */
--radius-btn: var(--primitive-radius-12); /* botones — DS: 12px (no pill) */
--radius-full: var(--primitive-radius-full); /* pills, avatares */
/* ── SOMBRAS (sutiles) ─────────────────────────────────── */
/* Sombras navy-tinted — Apptividad DS */
--shadow-sm: 0 1px 2px var(--primitive-ds-navy-08);
--shadow-md: 0 6px 18px var(--primitive-ds-navy-08);
--shadow-lg: 0 6px 18px var(--primitive-ds-navy-08);
--shadow-xl: 0 16px 40px rgba(0, 5, 85, 0.16);
--shadow-focus: 0 0 0 3px var(--primitive-ds-blue-12); /* blue focus ring */
/* ── LAYOUT ─────────────────────────────────────────────── */
--sidebar-width: 240px;
--sidebar-collapsed-width: 64px;
--topbar-height: 60px;
--max-width-content: 720px;
--max-width-wide: 1200px;
--max-width-page: 1440px;
/* ── KENDO UI ────────────────────────────────────────────── */
--grid-row-height: 44px; /* densidad media — ajustable por cliente */
--grid-cell-padding-x: 16px;
--grid-cell-padding-y: 12px;
/* ── ANIMACIONES ─────────────────────────────────────────── */
--duration-instant: var(--primitive-duration-50);
--duration-fast: var(--primitive-duration-150); /* hovers, tooltips */
--duration-normal: var(--primitive-duration-200); /* estados, dropdowns */
--duration-slow: var(--primitive-duration-300); /* modales, sidebars */
--duration-slower: var(--primitive-duration-400); /* transiciones de página */
--easing-default: ease;
--easing-in: ease-in;
--easing-out: ease-out;
--easing-expo: cubic-bezier(0.22, 1, 0.36, 1); /* DS: fast start, smooth settle */
--easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
/* ── BREAKPOINTS (referencia — usar en media queries) ──── */
--bp-sm: 375px; /* mobile */
--bp-md: 768px; /* tablet */
--bp-lg: 1024px; /* laptop */
--bp-xl: 1280px; /* desktop */
--bp-2xl: 1440px; /* wide */
/* ── WHITE-LABEL: VARIABLES DE BRANDING ────────────────── */
/* Estas variables son el contrato con los clientes.
Cada white-label.css las sobreescribe para aplicar su marca. */
--brand-logo-url: none;
--brand-sidebar-logo-url: none;
--brand-login-hero-image: none;
--brand-login-hero-color: var(--color-brand-primary);
--brand-favicon-url: none;
}
/* ────────────────────────────────────────────────────────────
DARK MODE — ARQUITECTURA LISTA, NO IMPLEMENTADA EN ESTA FASE
Se activa con [data-theme="dark"] en o automáticamente
con prefers-color-scheme cuando sea necesario.
──────────────────────────────────────────────────────────── */
/*
[data-theme="dark"],
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-surface: #111827;
--color-surface-raised: #1F2937;
--color-surface-overlay: #1F2937;
--color-surface-sunken: #0A0F1A;
--color-surface-neutral: #374151;
--color-surface-inverse: #F9FAFB;
--color-text-primary: #F9FAFB;
--color-text-secondary: #D1D5DB;
--color-text-tertiary: #6B7280;
--color-text-disabled: #374151;
--color-text-inverse: #111827;
--color-text-link: var(--primitive-teal-400);
--color-text-link-hover: var(--primitive-teal-300);
--color-border: #374151;
--color-border-subtle: #1F2937;
--color-border-strong: #4B5563;
--color-backdrop: rgba(0, 0, 0, 0.65);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
--shadow-md: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20);
--shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.18);
--shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.28), 0 4px 6px rgba(0, 0, 0, 0.18);
}
}
*/
/* ────────────────────────────────────────────────────────────
RESET BASE + APLICACIÓN DE TOKENS AL DOCUMENTO
──────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
font-family: var(--font-sans) !important; /* gana sobre OzonoTheme: 'Open Sans' !important */
font-size: var(--font-size-base) !important;
font-weight: var(--font-weight-normal) !important;
line-height: var(--line-height-normal) !important;
color: var(--color-text-primary) !important;
background-color: var(--color-surface-sunken) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── SOBRESCRITURA: Alinear Bootstrap 5 con los tokens ──── */
:root {
/* Mapear variables Bootstrap al sistema de tokens */
--bs-primary: var(--color-brand-primary);
--bs-primary-rgb: 0, 17, 238; /* Electric Blue en RGB para Bootstrap */
--bs-body-font-family: var(--font-sans);
--bs-body-font-size: var(--font-size-base);
--bs-body-color: var(--color-text-primary);
--bs-body-bg: var(--color-surface-sunken);
--bs-border-color: var(--color-border);
--bs-border-radius: var(--radius-md);
--bs-border-radius-sm: var(--radius-input);
--bs-border-radius-lg: var(--radius-lg);
--bs-border-radius-pill: var(--radius-btn);
--bs-box-shadow-sm: var(--shadow-sm);
--bs-box-shadow: var(--shadow-md);
--bs-box-shadow-lg: var(--shadow-lg);
--bs-link-color: var(--color-text-link);
--bs-link-hover-color: var(--color-text-link-hover);
}
/* ── FOCUS RING GLOBAL (WCAG AA) ────────────────────────── */
:focus-visible {
outline: 2px solid var(--color-border-focus);
outline-offset: 2px;
box-shadow: var(--shadow-focus);
}
/* ── RESPETO A prefers-reduced-motion ───────────────────── */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/*
* ============================================================
* OZONO DESIGN SYSTEM — LOGIN PAGE
* Dependencia: ozono-tokens.css debe cargarse antes.
* Prefijo de clases: ozl- (Ozono Login) — aislado del resto
* ============================================================
*/
/* ─── CORRIGE EL DOBLE RENDER DEL LAYOUT ────────────────────── */
/* El layout renderiza el AuthView dos veces: una como partial visible
y otra vía @RenderBody() dentro de .
Como Bootstrap no está disponible en la página de login,
.hidden no tiene CSS. Esto lo corrige explícitamente. */
.hidden {
display: none !important;
}
/* Issue #1: Ocultar skip link en login — no aplica a esta pantalla */
body.signin .ozono-skip-link {
display: none !important;
}
/* ─── OVERRIDE: quitar padding del layout en la página de login ── */
body.signin {
background: var(--color-surface) !important;
padding: 0 !important;
overflow: hidden;
}
body.signin .wrapper,
body.signin #wrapper,
body.signin .page-wrapper,
body.signin #page-wrapper {
padding: 0 !important;
margin: 0 !important;
}
/* ─── PÁGINA COMPLETA ──────────────────────────────────────── */
.ozl-page {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
background: var(--color-surface);
font-family: var(--font-sans);
}
/* ─── HEADER MÓVIL (visible solo < 768px) ─────────────────── */
.ozl-mobile-header {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4) var(--space-5);
background: var(--brand-login-hero-color, var(--color-brand-primary));
min-height: 68px;
flex-shrink: 0;
}
.ozl-mobile-logo {
max-height: 38px;
max-width: 180px;
width: auto;
object-fit: contain;
filter: brightness(0) invert(1); /* logo blanco sobre fondo oscuro */
}
/* ─── PANEL IZQUIERDO: MARCA ───────────────────────────────── */
.ozl-brand {
display: none; /* oculto en mobile */
position: relative;
overflow: hidden;
background-color: var(--brand-login-hero-color, var(--color-brand-primary));
}
/* Capa de imagen hero */
.ozl-brand__hero {
position: absolute;
inset: 0;
background-image: var(--brand-login-hero-image, none);
background-size: cover;
background-position: center;
opacity: 0.12;
transition: opacity var(--duration-slow) var(--easing-default);
}
/* Degradado de profundidad para legibilidad del texto */
.ozl-brand__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
170deg,
rgba(3, 16, 43, 0.10) 0%,
rgba(3, 16, 43, 0.60) 100%
);
}
/* Patrón geométrico decorativo (fallback sutil cuando no hay hero image) */
.ozl-brand::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
}
/* Círculo decorativo: elemento visual de profundidad */
.ozl-brand::after {
content: '';
position: absolute;
bottom: -120px;
right: -120px;
width: 360px;
height: 360px;
border-radius: var(--radius-full);
background: var(--color-brand-primary, #0011EE);
opacity: 0.08;
pointer-events: none;
}
/* Contenido interior del panel */
.ozl-brand__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding: var(--space-10) var(--space-9);
}
.ozl-brand__logo {
margin-bottom: var(--space-9);
}
.ozl-brand__logo img {
max-height: 44px;
max-width: 200px;
width: auto;
object-fit: contain;
filter: brightness(0) invert(1);
}
.ozl-brand__headline h2 {
font-family: var(--font-sans);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
color: var(--color-text-inverse);
margin: 0 0 var(--space-3);
}
.ozl-brand__headline p {
font-family: var(--font-sans);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-relaxed);
color: rgba(255, 255, 255, 0.72);
margin: 0;
}
/* Acento decorativo: línea de color debajo del headline */
.ozl-brand__accent-line {
width: 48px;
height: 3px;
background: var(--color-brand-primary, #0011EE);
border-radius: var(--radius-full);
margin-top: var(--space-6);
opacity: 0.85;
}
/* Footer del panel de marca */
.ozl-brand__footer {
position: absolute;
bottom: var(--space-6);
left: var(--space-9);
right: var(--space-9);
z-index: 1;
}
.ozl-brand__footer p {
font-size: var(--font-size-xs);
color: rgba(255, 255, 255, 0.40);
margin: 0;
}
/* ─── PANEL DERECHO: FORMULARIO ────────────────────────────── */
.ozl-panel {
flex: 1;
display: flex;
flex-direction: column;
/* Issue #2: align-items: center heredado de OzonoTheme colapsa el panel body a
width-of-content en lugar de fill. Forzar stretch para que ocupe el 100%. */
align-items: stretch !important;
background: var(--color-surface);
overflow-y: auto;
}
.ozl-panel__body {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-7) var(--space-5);
}
/* ─── TARJETA DE LOGIN ─────────────────────────────────────── */
.ozl-card {
width: 100%;
max-width: 420px;
}
/* Animación de entrada — el panel derecho desliza suavemente */
@keyframes ozl-enter {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.ozl-card {
animation: ozl-enter var(--duration-slow) var(--easing-out) both;
}
@media (prefers-reduced-motion: reduce) {
.ozl-card { animation: none; }
}
/* ─── ENCABEZADO DE TARJETA ────────────────────────────────── */
.ozl-card__header {
margin-bottom: var(--space-7);
}
.ozl-card__title {
font-family: var(--font-sans);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
color: var(--color-text-primary);
margin: 0 0 var(--space-2);
}
.ozl-card__subtitle {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
margin: 0;
line-height: var(--line-height-normal);
}
/* ─── ALERTA DE ERROR ──────────────────────────────────────── */
.ozl-alert {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-input);
margin-bottom: var(--space-6);
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
}
.ozl-alert svg {
flex-shrink: 0;
margin-top: 1px;
}
.ozl-alert--error {
background: var(--color-error-surface);
border: 1px solid var(--color-error-border);
color: var(--color-error-text);
}
.ozl-alert--warning {
background: var(--color-warning-surface);
border: 1px solid var(--color-warning-border);
color: var(--color-warning-text);
}
/* Validation summary de MVC */
.validation-summary-errors,
.validation-summary-errors ul {
background: var(--color-error-surface);
border: 1px solid var(--color-error-border);
color: var(--color-error-text);
border-radius: var(--radius-input);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-6);
font-size: var(--font-size-sm);
list-style: none;
}
.validation-summary-errors ul { border: none; padding: 0; margin: 0; }
/* ─── AVISO DE BROWSER NO SOPORTADO ───────────────────────── */
.ozl-browser-warning {
padding: var(--space-5);
background: var(--color-warning-surface);
border: 1px solid var(--color-warning-border);
border-radius: var(--radius-md);
margin-bottom: var(--space-6);
}
.ozl-browser-warning h4 {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
color: var(--color-warning-text);
margin: 0 0 var(--space-2);
}
.ozl-browser-warning p {
font-size: var(--font-size-sm);
color: var(--color-warning-text);
margin: 0;
line-height: var(--line-height-normal);
}
/* ─── CAMPOS DE FORMULARIO ─────────────────────────────────── */
.ozl-field {
margin-bottom: var(--space-5);
}
.ozl-label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
margin-bottom: var(--space-2);
line-height: 1;
}
.ozl-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
/* Ícono prefijo */
.ozl-input-icon {
position: absolute;
left: var(--space-3);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-tertiary);
pointer-events: none;
z-index: 1;
transition: color var(--duration-fast) var(--easing-default);
}
.ozl-input-wrapper:focus-within .ozl-input-icon {
color: var(--color-border-focus);
}
/* Input base */
.ozl-input {
width: 100%;
height: 46px;
padding: 0 var(--space-4) 0 42px;
font-family: var(--font-sans) !important;
font-size: var(--font-size-base) !important;
font-weight: var(--font-weight-normal);
color: var(--color-text-primary) !important;
background: var(--color-surface) !important;
border: 1.5px solid var(--color-border) !important;
border-radius: var(--radius-input) !important;
box-shadow: none !important;
outline: none !important;
transition:
border-color var(--duration-fast) var(--easing-default),
box-shadow var(--duration-fast) var(--easing-default);
-webkit-appearance: none;
}
.ozl-input::placeholder {
color: var(--color-text-tertiary) !important;
}
.ozl-input:hover {
border-color: var(--color-border-strong) !important;
}
.ozl-input:focus {
border-color: var(--color-border-focus) !important;
box-shadow: var(--shadow-focus) !important;
}
/* Input de contraseña: espacio para el botón toggle */
.ozl-input--password {
padding-right: 48px;
}
/* Botón mostrar/ocultar contraseña */
.ozl-toggle-password {
position: absolute;
right: var(--space-2);
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
background: none;
border: none;
border-radius: var(--radius-sm);
color: var(--color-text-tertiary);
cursor: pointer;
transition:
color var(--duration-fast) var(--easing-default),
background var(--duration-fast) var(--easing-default);
z-index: 1;
}
.ozl-toggle-password:hover {
color: var(--color-text-secondary);
background: var(--color-surface-neutral);
}
.ozl-toggle-password:focus-visible {
outline: 2px solid var(--color-border-focus);
outline-offset: 1px;
box-shadow: none;
}
/* Mensajes de validación */
.ozl-validation-msg {
display: block;
font-size: var(--font-size-xs);
color: var(--color-error-text);
margin-top: var(--space-1);
line-height: var(--line-height-normal);
}
/* ─── RECAPTCHA ────────────────────────────────────────────── */
.ozl-recaptcha {
margin: var(--space-5) 0 var(--space-2);
}
/* ─── ACCIONES: RECUÉRDAME + BOTÓN ────────────────────────── */
.ozl-form-actions {
display: flex;
align-items: center;
gap: var(--space-4);
margin-top: var(--space-6);
}
/* ─── CHECKBOX PERSONALIZADO ───────────────────────────────── */
.ozl-checkbox-label {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
cursor: pointer;
user-select: none;
white-space: nowrap;
flex-shrink: 0;
}
/* Ocultar checkbox nativo */
.ozl-checkbox-label input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.ozl-checkbox-mark {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 18px;
height: 18px;
border: 1.5px solid var(--color-border-strong);
border-radius: 4px;
background: var(--color-surface);
transition:
background var(--duration-fast) var(--easing-default),
border-color var(--duration-fast) var(--easing-default);
}
.ozl-checkbox-label input:checked ~ .ozl-checkbox-mark {
background: var(--color-brand-primary);
border-color: var(--color-brand-primary);
}
/* Checkmark SVG via clip-path */
.ozl-checkbox-label input:checked ~ .ozl-checkbox-mark::after {
content: '';
display: block;
width: 5px;
height: 9px;
border: 2px solid white;
border-top: none;
border-left: none;
transform: rotate(45deg) translateY(-1px);
}
.ozl-checkbox-label input:focus-visible ~ .ozl-checkbox-mark {
box-shadow: var(--shadow-focus);
}
/* ─── BOTÓN PRIMARIO ───────────────────────────────────────── */
.ozl-btn-primary {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: 46px;
padding: 0 var(--space-6);
font-family: var(--font-sans);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--color-brand-on-primary);
background: var(--color-brand-primary);
border: none;
border-radius: var(--radius-btn);
cursor: pointer;
white-space: nowrap;
transition:
background var(--duration-fast) var(--easing-default),
box-shadow var(--duration-fast) var(--easing-default),
transform var(--duration-fast) var(--easing-default);
}
.ozl-btn-primary:hover:not(:disabled) {
background: var(--color-brand-primary-hover);
box-shadow: var(--shadow-md);
}
.ozl-btn-primary:active:not(:disabled) {
background: var(--color-brand-primary-active);
transform: translateY(1px);
box-shadow: none;
}
.ozl-btn-primary:disabled,
.ozl-btn-primary.is-loading {
opacity: 0.72;
cursor: not-allowed;
pointer-events: none;
}
/* Texto del botón */
.ozl-btn-text {
transition: opacity var(--duration-fast) var(--easing-default);
}
.ozl-btn-primary.is-loading .ozl-btn-text {
opacity: 0.6;
}
/* Spinner de carga */
.ozl-spinner {
display: none;
flex-shrink: 0;
width: 15px;
height: 15px;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: white;
border-radius: var(--radius-full);
animation: ozl-spin 0.65s linear infinite;
}
.ozl-btn-primary.is-loading .ozl-spinner {
display: block;
}
/* ─── BOTÓN SECUNDARIO (outline) ──────────────────────────── */
.ozl-btn-secondary {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: 46px;
padding: 0 var(--space-6);
font-family: var(--font-sans);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--color-brand-primary);
background: transparent;
border: 2px solid var(--color-brand-primary);
border-radius: var(--radius-btn);
cursor: pointer;
white-space: nowrap;
transition:
background var(--duration-fast) var(--easing-default),
color var(--duration-fast) var(--easing-default),
box-shadow var(--duration-fast) var(--easing-default),
transform var(--duration-fast) var(--easing-default);
}
.ozl-btn-secondary:hover:not(:disabled) {
background: var(--color-brand-primary);
color: var(--color-brand-on-primary);
box-shadow: var(--shadow-md);
}
.ozl-btn-secondary:active:not(:disabled) {
background: var(--color-brand-primary-active);
color: var(--color-brand-on-primary);
transform: translateY(1px);
box-shadow: none;
}
.ozl-btn-secondary:disabled {
opacity: 0.72;
cursor: not-allowed;
pointer-events: none;
}
@keyframes ozl-spin {
to { transform: rotate(360deg); }
}
/* ─── BOTÓN SECUNDARIO ─────────────────────────────────────── */
.ozl-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
width: 100%;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border) !important;
border-radius: var(--radius-input);
background: var(--color-surface) !important;
color: var(--color-text-primary) !important;
font-family: var(--font-sans);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
cursor: pointer;
text-decoration: none;
transition:
background var(--duration-fast) var(--easing-default),
border-color var(--duration-fast) var(--easing-default),
color var(--duration-fast) var(--easing-default);
}
.ozl-btn-secondary:hover:not(:disabled) {
border-color: var(--color-brand-primary) !important;
color: var(--color-brand-primary) !important;
background: var(--color-surface) !important;
}
.ozl-btn-secondary:disabled,
.ozl-btn-secondary.is-loading {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* ─── LINK OLVIDÉ CONTRASEÑA ───────────────────────────────── */
.ozl-forgot-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--color-text-link);
text-decoration: none;
margin-top: var(--space-5);
transition: color var(--duration-fast) var(--easing-default);
}
.ozl-forgot-link:hover,
.ozl-forgot-link:focus {
color: var(--color-text-link-hover);
text-decoration: underline;
}
/* ─── LINK DE REGISTRO / ACCESO ────────────────────────────── */
.ozl-access-request {
margin-top: var(--space-3);
font-size: var(--font-size-sm);
}
.ozl-access-request a {
color: var(--color-text-link);
text-decoration: none;
}
.ozl-access-request a:hover {
text-decoration: underline;
}
/* ─── SECCIÓN SSO ──────────────────────────────────────────── */
.ozl-sso-section {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: var(--line-height-normal);
}
.ozl-sso-section a {
color: var(--color-text-link);
}
/* ─── FOOTER DEL PANEL ─────────────────────────────────────── */
.ozl-panel__footer {
padding: var(--space-4) var(--space-5);
text-align: center;
border-top: 1px solid var(--color-border-subtle);
flex-shrink: 0;
}
.ozl-panel__footer p {
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
margin: 0;
line-height: var(--line-height-normal);
}
.ozl-panel__footer a {
color: var(--color-text-link);
text-decoration: none;
}
.ozl-panel__footer a:hover {
color: var(--color-text-link-hover);
text-decoration: underline;
}
/* ─── OVERLAY DE REDIRECCIÓN POST-LOGIN (Issue #3) ─────────── */
.ozl-redirect-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: var(--color-brand-primary);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
animation: ozl-overlay-enter 0.25s var(--easing-out) both;
}
@keyframes ozl-overlay-enter {
from { opacity: 0; }
to { opacity: 1; }
}
.ozl-redirect-spinner {
width: 36px;
height: 36px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: var(--radius-full);
animation: ozl-spin 0.65s linear infinite;
}
.ozl-redirect-text {
color: rgba(255, 255, 255, 0.85);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
margin: 0;
letter-spacing: 0.01em;
}
/* ─── RESPONSIVE: TABLET ( ≥ 768px ) ──────────────────────── */
@media (min-width: 768px) {
.ozl-page {
flex-direction: row;
height: 100vh;
overflow: hidden;
}
.ozl-mobile-header {
display: none;
}
.ozl-brand {
display: flex;
flex-direction: column;
flex: 0 0 42%;
height: 100vh;
position: sticky;
top: 0;
}
.ozl-panel {
height: 100vh;
overflow-y: auto;
}
.ozl-panel__body {
padding: var(--space-10) var(--space-7);
}
.ozl-card {
max-width: 440px;
}
}
/* ─── RESPONSIVE: LAPTOP ( ≥ 1024px ) ─────────────────────── */
@media (min-width: 1024px) {
.ozl-brand {
flex: 0 0 44%;
}
.ozl-brand__inner {
padding: var(--space-10) var(--space-10);
}
.ozl-panel__body {
padding: var(--space-10) var(--space-9);
}
}
/* ─── RESPONSIVE: DESKTOP ( ≥ 1280px ) ────────────────────── */
@media (min-width: 1280px) {
.ozl-brand {
flex: 0 0 45%;
}
.ozl-brand__headline h2 {
font-size: clamp(28px, 2.5vw, 38px);
}
.ozl-card {
max-width: 460px;
}
}
#gritter-notice-wrapper{position:fixed;top:20px;right:20px;width:301px;z-index:9999}.gritter-item-wrapper{position:relative;margin:0 0 10px 0;background:#000;background:rgba(0,0,0,.75);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}.growl-primary{background:rgba(66,139,202,.8)}.growl-success{background:rgba(28,175,154,.8)}.growl-warning{background:rgba(240,173,78,.8)}.growl-danger{background:rgba(217,83,79,.8)}.growl-info{background:rgba(91,192,222,.8)}.gritter-item{display:block;color:#eee;padding:15px;font-size:11px}.gritter-item p{padding:0;margin:0;word-wrap:break-word;line-height:18px;font-size:13px;opacity:.75}.gritter-close{display:none;position:absolute;top:10px;right:10px;background:url(../Images/close-white.png) no-repeat center center;cursor:pointer;width:10px;height:11px;text-indent:-9999em;opacity:.5}.gritter-title{font-size:14px;padding:0 0 7px 0;display:block;font-family:'LatoBold'}.gritter-image{width:48px;height:48px;float:left}.gritter-with-image,.gritter-without-image{padding:0}.gritter-with-image{width:220px;float:right;padding-left:10px}.gritter-light .gritter-item{background:#fff;background:rgba(255,255,255,.75);color:#666}
/*
* ============================================================
* OZONO DESIGN SYSTEM — COMPONENTE GROWL / TOAST
* ============================================================
* Override DS del componente jquery.gritter (notificaciones).
* Extraído de ozono-components.css para poder
* incluirlo también en el bundle de login/páginas no autenticadas,
* donde ozono-components.css NO se carga.
*
* Incluido en: ~/bundles/ozono-ds, ~/bundles/ozono-login,
* ~/bundles/ozono-deeplink
* Dependencia: ozono-primitives.css + ozono-tokens.css (tokens :root)
* Debe cargarse DESPUÉS de jquery.gritter.min.css.
* ============================================================
*/
/* ─── Growl / Toast (jquery.gritter override) ───────────── */
#gritter-notice-wrapper {
/* Fallback 0px: en login no se carga ozono-header.css (--hdr-height indefinido) */
top: calc(var(--hdr-height, 0px) + var(--space-3)) !important;
right: var(--space-5) !important;
/* Por encima de KendoWindow (z-index dinámico 10001+) para que el growl
no quede detrás de modales como "Agregar/Editar regla". */
z-index: 100000 !important;
}
.gritter-item-wrapper {
border-radius: var(--radius-md) !important;
box-shadow: var(--shadow-lg) !important;
overflow: hidden;
border: 1px solid var(--color-border) !important;
background: var(--color-surface-raised) !important;
}
/* Layout flex — elimina el hueco que generaba el float + imagen de 48px */
.gritter-item {
display: flex !important;
align-items: flex-start !important;
gap: var(--space-3) !important;
background: transparent !important;
padding: var(--space-4) var(--space-5) !important;
font-family: var(--font-sans) !important;
color: var(--color-text-secondary) !important;
}
/* Imagen genérica (screen.png) no aporta semánticamente — se oculta */
.gritter-image {
display: none !important;
}
/* Neutralizar los floats del vendor para que flex tome el control */
.gritter-with-image,
.gritter-without-image {
float: none !important;
width: auto !important;
padding-left: 0 !important;
flex: 1 !important;
min-width: 0 !important;
}
.gritter-title {
font-family: var(--font-sans) !important;
font-size: var(--font-size-sm) !important;
font-weight: var(--font-weight-semibold) !important;
color: var(--color-text-primary) !important;
margin-bottom: var(--space-1);
}
.gritter-item p {
color: var(--color-text-secondary) !important;
opacity: 1 !important;
font-family: var(--font-sans) !important;
font-size: var(--font-size-base) !important;
}
/* El vendor pinta la "x" con un PNG blanco fijo (close-white.png) — invisible
sobre las tarjetas claras del DS. Se reemplaza por un SVG vía mask,
coloreado con el token de texto terciario. */
.gritter-close {
background-image: none !important;
background-color: var(--color-text-tertiary) !important;
width: 12px !important;
height: 12px !important;
opacity: 0.7 !important;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='4' y1='4' x2='20' y2='20'/%3E%3Cline x1='20' y1='4' x2='4' y2='20'/%3E%3C/svg%3E") !important;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='4' y1='4' x2='20' y2='20'/%3E%3Cline x1='20' y1='4' x2='4' y2='20'/%3E%3C/svg%3E") !important;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.gritter-close:hover {
opacity: 1 !important;
}
/* Variantes semánticas tintadas por tipo */
.gritter-item-wrapper.growl-success {
background: var(--color-success-surface) !important;
border-color: var(--color-success-border) !important;
border-left: 4px solid var(--color-success) !important;
}
.gritter-item-wrapper.growl-success .gritter-title {
color: var(--color-success-text) !important;
}
.gritter-item-wrapper.growl-danger {
background: var(--color-error-surface) !important;
border-color: var(--color-error-border) !important;
border-left: 4px solid var(--color-error) !important;
}
.gritter-item-wrapper.growl-danger .gritter-title {
color: var(--color-error-text) !important;
}
.gritter-item-wrapper.growl-warning {
background: var(--color-warning-surface) !important;
border-color: var(--color-warning-border) !important;
border-left: 4px solid var(--color-warning) !important;
}
.gritter-item-wrapper.growl-warning .gritter-title {
color: var(--color-warning-text) !important;
}
.gritter-item-wrapper.growl-info {
background: var(--color-info-surface) !important;
border-color: var(--color-info-border) !important;
border-left: 4px solid var(--color-info) !important;
}
.gritter-item-wrapper.growl-info .gritter-title {
color: var(--color-info-text) !important;
}