/* =============================================================================
SITER — Stylesheet principal
Archivo único por convención (CHECKLIST §3.4)
Paleta consistente con documentos comerciales (CHECKLIST §4)
========================================================================== */
/* -- Tipografía self-hosted: Inter Variable (premium Apple-like) ----------
Un solo archivo cubre todos los pesos 100-900. Apple users ven SF Pro
nativo via la stack font-family (más cerca aún del look real macOS).
*/
@font-face {
font-family: 'Inter Variable';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/assets/fonts/inter-variable.woff2') format('woff2-variations'),
url('/assets/fonts/inter-variable.woff2') format('woff2');
font-feature-settings: "ss01", "cv11", "cv02";
}
/* Fallback fixed-weight para navegadores sin variable fonts (raro). */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/inter-latin-700-normal.woff2') format('woff2');
}
/* -- Variables ------------------------------------------------------------- */
:root {
/* Paleta institucional */
--navy: #1F3864;
--navy-med: #2E4B80;
--navy-dark: #152749;
--navy-light: #C8D8F0;
--navy-ultra: #EEF3FA;
/* Tokens legacy de acento ahora derivan del color configurable en
/config/apariencia (brand.color_acento). Antes hardcoded a naranja. */
--accent: var(--ap-brand-accent, #2A4F8B);
--accent-dark: var(--ap-brand-primary, #1F3864);
--accent-soft: var(--ap-navy-50, #EEF1F8);
/* Neutros (escala 0-900 al estilo Tailwind/Radix — permite matizado fino) */
--white: #FFFFFF;
--neutral-50: #FAFAFA;
--neutral-100: #F4F4F5;
--neutral-200: #E4E4E7;
--neutral-300: #D4D4D8;
--neutral-400: #A1A1AA;
--neutral-500: #71717A;
--neutral-600: #52525B;
--neutral-700: #3F3F46;
--neutral-800: #27272A;
--neutral-900: #18181B;
/* Aliases legacy (mantienen compatibilidad con clases ya escritas) */
--gray-bg: var(--neutral-100);
--gray-line: var(--neutral-200);
--gray-med: var(--neutral-500);
--gray-text: var(--neutral-800);
/* Superficies */
--bg-app: var(--neutral-50);
--bg-elev-1: var(--white);
--bg-elev-2: var(--neutral-100);
--bg-sidebar: var(--navy-dark);
--bg-header: var(--navy-dark);
--border-subtle: var(--neutral-200);
--border-strong: var(--neutral-300);
/* Estado (con tonos suaves para backgrounds de tags/alerts) */
--success: #15803D;
--success-bg: #DCFCE7;
--success-fg: #166534;
--warning: #C2410C;
--warning-bg: #FFEDD5;
--warning-fg: #9A3412;
--danger: #B91C1C;
--danger-bg: #FEE2E2;
--danger-fg: #991B1B;
--info: var(--navy-med);
--info-bg: var(--navy-ultra);
--info-fg: var(--navy);
/* Tipografía */
--font-main: 'Inter', 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
/* Escala tipográfica (ratio 1.125 / Major Second) */
--fs-xs: 0.75rem; /* 12px */
--fs-sm: 0.875rem; /* 14px */
--fs-base: 0.9375rem; /* 15px — un pelo más legible que 14 con Inter */
--fs-md: 1rem; /* 16px */
--fs-lg: 1.125rem; /* 18px */
--fs-xl: 1.25rem; /* 20px */
--fs-2xl: 1.5rem; /* 24px */
--fs-3xl: 1.875rem; /* 30px */
--fs-4xl: 2.25rem; /* 36px */
/* Escala de espaciado (4px base) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
/* Radios */
--radius-sm: 4px;
--radius: 8px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--radius-full: 9999px;
/* Sombras multi-capa (estilo Material + Tailwind) */
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05);
--shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
--shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.06);
--shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
--shadow-inner: inset 0 2px 4px rgba(15, 23, 42, 0.05);
/* Focus ring accesible */
--ring-color: rgba(31, 56, 100, 0.30);
--ring-offset: 2px;
/* Layout */
--header-h: 60px;
--sidebar-w: 248px;
--sidebar-w-collapsed: 64px;
--footer-h: 40px;
--container-max: 1440px;
/* Transiciones */
--t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
--t-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
--t-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);
--transition: var(--t-base); /* legacy alias */
/* =========================================================================
APPLE-TUNED TOKENS (--ap-*)
Sistema de diseño nuevo, calibrado al look & feel de Apple. Coexiste
con los tokens legacy de arriba para no romper vistas viejas. Las
pantallas rediseñadas usan estos.
========================================================================= */
/* Neutros — base de todo (Apple grays) */
--ap-gray-50: #FBFBFD;
--ap-gray-100: #F5F5F7;
--ap-gray-150: #EBEBEF;
--ap-gray-200: #D2D2D7;
--ap-gray-300: #B5B5BD;
--ap-gray-500: #86868B;
--ap-gray-700: #424245;
--ap-gray-900: #1D1D1F;
/* Marca — overrides desde branding (set por main.php). */
--ap-brand-primary: #1F3864;
--ap-brand-accent: #2A4F8B;
/* Escala derivada de marca */
--ap-navy-50: #EEF1F8;
--ap-navy-100: #DCE3EE;
--ap-navy-200: #B3C0DA;
--ap-navy-400: #4A6BA0;
--ap-navy-600: var(--ap-brand-primary);
--ap-navy-700: #15264A;
/* Estados Apple-system */
--ap-green: #30D158;
--ap-orange: #FF9F0A;
--ap-red: #FF3B30;
--ap-blue: #0A84FF;
/* Glass */
--ap-glass-light: rgba(251, 251, 253, 0.72);
--ap-glass-dark: rgba(10, 20, 40, 0.72);
/* Tipografía Apple-tuned */
--ap-font: 'Inter Variable', -apple-system, BlinkMacSystemFont,
'SF Pro Text', 'SF Pro Display', 'Inter', 'Segoe UI',
system-ui, sans-serif;
/* Escala (ratio 1.2, alineada a Apple HIG) */
--ap-text-caption: 12px;
--ap-text-footer: 13px;
--ap-text-body: 15px;
--ap-text-callout: 16px;
--ap-text-title-3: 20px;
--ap-text-title-2: 24px;
--ap-text-title-1: 32px;
--ap-text-large: 44px;
--ap-text-display: 56px;
--ap-tracking-tight: -0.022em;
--ap-tracking-base: -0.011em;
--ap-tracking-wide: 0.06em;
/* Radios Apple */
--ap-radius-sm: 6px;
--ap-radius-md: 10px;
--ap-radius-lg: 14px;
--ap-radius-xl: 20px;
--ap-radius-2xl: 28px;
--ap-radius-pill: 999px;
/* Sombras multilayer Apple-style */
--ap-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
--ap-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05),
0 1px 2px rgba(0, 0, 0, 0.03);
--ap-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.06),
0 2px 6px -2px rgba(0, 0, 0, 0.04);
--ap-shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.10),
0 6px 16px -8px rgba(0, 0, 0, 0.06);
--ap-shadow-xl: 0 32px 64px -16px rgba(0, 0, 0, 0.16),
0 12px 24px -12px rgba(0, 0, 0, 0.08);
--ap-shadow-focus: 0 0 0 4px rgba(31, 56, 100, 0.18);
--ap-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.08);
/* Easings Apple */
--ap-ease-apple: cubic-bezier(0.42, 0, 0.58, 1);
--ap-ease-snap: cubic-bezier(0.32, 0.72, 0, 1);
--ap-ease-out: cubic-bezier(0, 0, 0.2, 1);
--ap-duration-fast: 140ms;
--ap-duration-base: 220ms;
--ap-duration-medium: 320ms;
--ap-duration-slow: 480ms;
/* Blur (glass effect) */
--ap-blur-sm: blur(8px) saturate(150%);
--ap-blur-md: blur(20px) saturate(180%);
--ap-blur-lg: blur(40px) saturate(200%);
}
/* Dark mode — Apple-tuned overrides (sólo nuevos tokens --ap-*) */
html[data-theme="dark"] {
/* gray-50 = bg principal del main. Está MÁS CLARO que el sidebar
(#1C1C1E fijo) para crear jerarquía invertida tipo macOS Mail
en dark mode. La diferencia visible es lo que separa las dos
superficies. */
--ap-gray-50: #2A2A2D;
--ap-gray-100: #36363A;
--ap-gray-150: #44444A;
--ap-gray-200: #525258;
--ap-gray-300: #6B6B72;
--ap-gray-500: #A0A0A8;
--ap-gray-700: #D0D0D6;
--ap-gray-900: #F5F5F7;
--ap-navy-50: rgba(74, 107, 160, 0.16);
--ap-navy-100: rgba(74, 107, 160, 0.32);
--ap-navy-200: #4A6BA0;
--ap-navy-400: #6889C4;
--ap-navy-600: #6889C4;
--ap-navy-700: #8DA9D8;
--ap-glass-light: rgba(28, 28, 30, 0.72);
--ap-glass-dark: rgba(10, 14, 26, 0.85);
--ap-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
--ap-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25),
0 1px 2px rgba(0, 0, 0, 0.15);
--ap-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.30),
0 2px 6px -2px rgba(0, 0, 0, 0.20);
--ap-shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.45),
0 6px 16px -8px rgba(0, 0, 0, 0.30);
--ap-shadow-xl: 0 32px 64px -16px rgba(0, 0, 0, 0.55),
0 12px 24px -12px rgba(0, 0, 0, 0.35);
--ap-shadow-focus: 0 0 0 4px rgba(104, 137, 196, 0.32);
}
/* -- Dark mode ------------------------------------------------------------
Se activa por:
- html[data-theme="dark"] (override explícito del usuario)
- html[data-theme="auto"] + prefers-dark (respeta el sistema)
Si no hay data-theme (primer visit), se asume "auto".
*/
html[data-theme="dark"],
html:not([data-theme="light"]) {
color-scheme: light;
}
html[data-theme="dark"] {
color-scheme: dark;
}
:where(html[data-theme="dark"], html[data-theme="auto"]:not([data-theme="dark"]) body) {
/* fallback holder para el selector combinado */
}
/* Aplicamos el tema oscuro explícito */
html[data-theme="dark"] {
--bg-app: #0B1120;
--bg-elev-1: #111827;
--bg-elev-2: #1F2937;
--bg-sidebar: #0B1120;
--bg-header: #0B1120;
--border-subtle: #1F2937;
--border-strong: #374151;
--neutral-50: #1F2937;
--neutral-100: #1F2937;
--neutral-200: #374151;
--neutral-300: #4B5563;
--neutral-400: #6B7280;
--neutral-500: #9CA3AF;
--neutral-600: #D1D5DB;
--neutral-700: #E5E7EB;
--neutral-800: #F3F4F6;
--neutral-900: #F9FAFB;
--gray-bg: #1F2937;
--gray-line: #374151;
--gray-med: #9CA3AF;
--gray-text: #F3F4F6;
--white: #111827;
/* Navy sigue siendo azul, pero un poco más brillante para leerse en fondo oscuro */
--navy: #93C5FD;
--navy-med: #BFDBFE;
--navy-dark: #60A5FA;
--navy-light: #1E3A8A;
--navy-ultra: #0F1E38;
/* Accent un tono más cálido para contraste */
--accent: #FB923C;
--accent-dark: #FDBA74;
--accent-soft: #7C2D12;
/* Estados con bgs oscuros y fgs claros */
--success-bg: #052E16;
--success-fg: #4ADE80;
--warning-bg: #451A03;
--warning-fg: #FBBF24;
--danger-bg: #450A0A;
--danger-fg: #FCA5A5;
--info-bg: #0F1E38;
--info-fg: #93C5FD;
--ring-color: rgba(147, 197, 253, 0.35);
}
/* Auto: si el usuario no eligió tema, respetamos el sistema */
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] {
--bg-app: #0B1120;
--bg-elev-1: #111827;
--bg-elev-2: #1F2937;
--bg-sidebar: #0B1120;
--bg-header: #0B1120;
--border-subtle: #1F2937;
--border-strong: #374151;
--neutral-50: #1F2937;
--neutral-100: #1F2937;
--neutral-200: #374151;
--neutral-300: #4B5563;
--neutral-400: #6B7280;
--neutral-500: #9CA3AF;
--neutral-600: #D1D5DB;
--neutral-700: #E5E7EB;
--neutral-800: #F3F4F6;
--neutral-900: #F9FAFB;
--gray-bg: #1F2937;
--gray-line: #374151;
--gray-med: #9CA3AF;
--gray-text: #F3F4F6;
--white: #111827;
--navy: #93C5FD;
--navy-med: #BFDBFE;
--navy-dark: #60A5FA;
--navy-light: #1E3A8A;
--navy-ultra: #0F1E38;
--accent: #FB923C;
--accent-dark: #FDBA74;
--accent-soft: #7C2D12;
--success-bg: #052E16;
--success-fg: #4ADE80;
--warning-bg: #451A03;
--warning-fg: #FBBF24;
--danger-bg: #450A0A;
--danger-fg: #FCA5A5;
--info-bg: #0F1E38;
--info-fg: #93C5FD;
--ring-color: rgba(147, 197, 253, 0.35);
}
}
/* Fixes específicos para dark mode donde los gradientes / colores hardcoded
no se beneficiarían sólo con el override de variables. */
html[data-theme="dark"] .panel-hero,
html[data-theme="auto"] .panel-hero {
/* gradiente del hero en dark: más profundo */
background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
}
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] .panel-hero {
background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
}
}
/* Inputs de tipo file en dark */
html[data-theme="dark"] input[type="file"] { color: var(--gray-text); }
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] input[type="file"] { color: var(--gray-text); }
}
/* Scrollbar thumb en dark */
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #374151; border-color: var(--bg-app); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4B5563; }
/* En dark, el contenido principal también es oscuro: la sombra hacia la
derecha del sidebar y hacia abajo del header se vuelve invisible. La
sustituimos por un borde sutil con white translúcido para preservar la
separación visual. */
html[data-theme="dark"] .app-sidebar {
box-shadow: none;
border-right: 1px solid rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .app-header {
box-shadow: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
@media (prefers-color-scheme: dark) {
html[data-theme="auto"] .app-sidebar {
box-shadow: none;
border-right: 1px solid rgba(255, 255, 255, 0.06);
}
html[data-theme="auto"] .app-header {
box-shadow: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
}
/* -- Reset ligero ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
html, body {
margin: 0;
padding: 0;
font-family: var(--font-main);
font-size: var(--fs-base);
line-height: 1.55;
color: var(--gray-text);
background: var(--bg-app);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "cv11", "ss01", "ss03"; /* Inter: alternates legibles */
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 var(--space-3);
color: var(--navy);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.015em;
}
h1 { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p { margin: 0 0 var(--space-4); }
a {
color: var(--navy-med);
text-decoration: none;
transition: color var(--t-fast);
}
a:hover { color: var(--accent); }
a:focus-visible {
outline: 2px solid var(--ring-color);
outline-offset: var(--ring-offset);
border-radius: var(--radius-sm);
}
code {
font-family: var(--font-mono);
background: var(--navy-ultra);
color: var(--navy);
padding: 2px 6px;
border-radius: var(--radius-sm);
font-size: 0.875em;
font-variant-ligatures: none;
}
/* Scrollbar sutil (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--neutral-300);
border-radius: var(--radius-full);
border: 2px solid var(--bg-app);
}
::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); }
/* Selección */
::selection { background: var(--accent-soft); color: var(--navy); }
/* -- Iconografía SVG inline (helper icon() del core) --------------------- */
.icon {
display: inline-block;
width: 16px;
height: 16px;
flex-shrink: 0;
vertical-align: -0.15em;
stroke: currentColor;
}
.icon--sm { width: 14px; height: 14px; }
.icon--lg { width: 22px; height: 22px; }
.icon--xl { width: 28px; height: 28px; }
/* -- Temas (aplicados via body.theme-*) ---------------------------------- */
/* Institucional es el default (variables en :root). */
body.theme-moderno {
--navy: #2563EB;
--navy-med: #3B82F6;
--navy-dark: #1E40AF;
--navy-light: #BFDBFE;
--navy-ultra: #EFF6FF;
--accent: #EA580C;
--accent-dark: #C2410C;
--accent-soft: #FED7AA;
--bg-app: #F8FAFC;
}
body.theme-contraste {
--navy: #000000;
--navy-med: #1F2937;
--navy-dark: #000000;
--navy-light: #D1D5DB;
--navy-ultra: #F3F4F6;
--accent: #DC2626;
--accent-dark: #991B1B;
--accent-soft: #FECACA;
--bg-app: #FFFFFF;
--border-subtle: #9CA3AF;
--border-strong: #4B5563;
}
body.theme-contraste .app-header { border-bottom-width: 2px; }
body.theme-contraste .card,
body.theme-contraste .kpi-card { border-width: 2px; }
/* -- Apariencia: brand-preview + theme-grid ------------------------------ */
.brand-preview {
width: 100%;
min-height: 90px;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
background: var(--neutral-50);
border: 1px dashed var(--border-strong);
border-radius: var(--radius);
}
.brand-preview--small { min-height: 60px; }
.brand-preview__img { max-height: 60px; max-width: 100%; object-fit: contain; display: block; }
.brand-preview__empty {
color: var(--neutral-500);
font-size: var(--fs-xs);
text-align: center;
line-height: 1.4;
}
.brand-preview__empty.small { font-size: var(--fs-xs); }
.theme-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-3);
margin: var(--space-3) 0 var(--space-4);
}
.theme-card {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
border: 2px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-elev-1);
cursor: pointer;
transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
position: relative;
}
.theme-card:hover {
border-color: var(--neutral-400);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.theme-card--active {
border-color: var(--accent);
box-shadow: var(--shadow-md), 0 0 0 4px var(--accent-soft);
}
.theme-card--active::after {
content: "";
position: absolute;
top: 10px; right: 10px;
width: 14px; height: 14px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--accent);
}
.theme-card__input { position: absolute; opacity: 0; pointer-events: none; }
.theme-card__swatches {
display: flex;
gap: 4px;
height: 36px;
}
.theme-card__swatch {
flex: 1;
border-radius: var(--radius-sm);
}
.theme-card__label {
font-weight: 600;
font-size: var(--fs-sm);
color: var(--navy);
margin-top: var(--space-1);
}
.theme-card__desc {
font-size: var(--fs-xs);
color: var(--neutral-500);
line-height: 1.4;
}
.theme-card--institucional .theme-card__swatch--1 { background: #1F3864; }
.theme-card--institucional .theme-card__swatch--2 { background: #2E4B80; }
.theme-card--institucional .theme-card__swatch--3 { background: #C5701A; }
.theme-card--institucional .theme-card__swatch--4 { background: #EEF3FA; }
.theme-card--moderno .theme-card__swatch--1 { background: #2563EB; }
.theme-card--moderno .theme-card__swatch--2 { background: #3B82F6; }
.theme-card--moderno .theme-card__swatch--3 { background: #EA580C; }
.theme-card--moderno .theme-card__swatch--4 { background: #EFF6FF; }
.theme-card--contraste .theme-card__swatch--1 { background: #000000; }
.theme-card--contraste .theme-card__swatch--2 { background: #1F2937; }
.theme-card--contraste .theme-card__swatch--3 { background: #DC2626; }
.theme-card--contraste .theme-card__swatch--4 { background: #F3F4F6; }
/* =============================================================================
LAYOUT DE AUTENTICACIÓN — REDISEÑO APPLE-PREMIUM
Pantalla de login 2-col con imagen lateral configurable + card flotante.
========================================================================== */
.auth-body {
min-height: 100vh;
margin: 0;
background: var(--ap-gray-50);
color: var(--ap-gray-900);
font-family: var(--ap-font);
font-feature-settings: "ss01", "cv11", "cv02";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.auth-shell {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr;
overflow: hidden;
}
@media (min-width: 1024px) {
.auth-shell { grid-template-columns: 7fr 5fr; }
}
/* Pane izquierdo: imagen / fallback decorativo */
.auth-pane {
position: relative;
display: none;
overflow: hidden;
background: linear-gradient(135deg, var(--ap-navy-700) 0%, var(--ap-brand-primary) 60%, var(--ap-navy-400) 100%);
}
@media (min-width: 1024px) { .auth-pane { display: block; } }
.auth-pane__image {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: scale(1.05);
opacity: 0;
animation: apFadeScale 480ms var(--ap-ease-snap) forwards;
}
.auth-pane__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(10, 14, 26, 0.05) 0%,
rgba(10, 14, 26, 0.45) 100%);
}
/* Pane lateral: contiene únicamente el logo del cliente, grande y blanco.
Sin texto, sin wordmark SITER, para no competir con la quote del fondo. */
.auth-pane__brand {
position: absolute;
top: 40px;
left: 40px;
right: 40px;
z-index: 2;
}
.auth-pane__cliente-logo {
height: var(--ap-cliente-logo-size, 96px);
width: auto;
max-width: 100%;
object-fit: contain;
display: block;
/* Convierte el logo a blanco puro para integrarlo al gradiente navy.
Si el cliente sube versión ya blanca/transparente, el filtro no rompe. */
filter: brightness(0) invert(1);
opacity: 0.95;
}
.auth-pane__quote {
position: absolute;
bottom: 48px;
left: 48px;
right: 48px;
color: rgba(255, 255, 255, 0.92);
font-size: var(--ap-text-title-3);
line-height: 1.45;
font-weight: 400;
letter-spacing: var(--ap-tracking-tight);
max-width: 520px;
z-index: 2;
opacity: 0;
animation: apFadeUp 480ms var(--ap-ease-snap) 320ms forwards;
}
.auth-pane__quote-attr {
margin-top: 16px;
font-size: var(--ap-text-footer);
color: rgba(255, 255, 255, 0.65);
font-weight: 500;
letter-spacing: var(--ap-tracking-base);
}
/* Fallback SVG arquitectónico (cuando no hay imagen subida).
Render en CSS sin dependencias. */
.auth-pane--fallback {
background:
radial-gradient(1200px 800px at 30% 20%, rgba(255,255,255,0.10), transparent 60%),
radial-gradient(900px 600px at 80% 80%, rgba(255,255,255,0.06), transparent 60%),
linear-gradient(135deg, var(--ap-navy-700) 0%, var(--ap-brand-primary) 60%, var(--ap-navy-400) 100%);
}
.auth-pane--fallback::before,
.auth-pane--fallback::after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.auth-pane--fallback::before {
width: 480px; height: 480px;
bottom: -120px; right: -120px;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 60%);
filter: blur(20px);
}
.auth-pane--fallback::after {
width: 320px; height: 320px;
top: -80px; left: -80px;
background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%);
filter: blur(40px);
}
/* Pane derecho: forma */
.auth-form-pane {
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
background: var(--ap-gray-50);
position: relative;
}
.auth-card {
width: 100%;
max-width: 420px;
background: #FFFFFF;
color: var(--ap-gray-900);
border-radius: var(--ap-radius-2xl);
padding: 48px 44px 36px;
box-shadow: var(--ap-shadow-xl);
opacity: 0;
transform: translateY(16px);
animation: apFadeUp 320ms var(--ap-ease-snap) 80ms forwards;
}
html[data-theme="dark"] .auth-card {
background: var(--ap-gray-100);
color: var(--ap-gray-900);
}
.auth-card__logo {
width: 56px; height: 56px;
border-radius: var(--ap-radius-md);
background: var(--ap-brand-primary);
color: #fff;
display: grid; place-items: center;
font-size: 28px;
font-weight: 600;
margin-bottom: 28px;
letter-spacing: 1px;
overflow: hidden;
}
.auth-card__logo:has(img) {
/* Cuando hay imagen subida, dejamos que ella defina su propio fondo. */
background: transparent;
}
.auth-card__logo img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: var(--ap-radius-md);
display: block;
}
/* Wordmark horizontal SITER (versión claro) sobre la card blanca. */
.auth-card__wordmark {
margin-bottom: 28px;
display: flex;
align-items: center;
height: var(--ap-logo-light-size, 44px);
}
.auth-card__wordmark img {
max-height: var(--ap-logo-light-size, 44px);
width: auto;
max-width: 240px;
object-fit: contain;
display: block;
}
.auth-card__title {
font-size: var(--ap-text-title-1);
font-weight: 500;
line-height: 1.2;
letter-spacing: var(--ap-tracking-tight);
color: var(--ap-gray-900);
margin: 0 0 8px;
}
.auth-card__subtitle {
font-size: var(--ap-text-body);
color: var(--ap-gray-500);
margin: 0 0 32px;
letter-spacing: var(--ap-tracking-base);
line-height: 1.5;
}
.auth-card__form { display: flex; flex-direction: column; gap: 18px; }
/* Inputs flotantes Apple-style */
.auth-field {
position: relative;
}
.auth-field__input {
width: 100%;
padding: 22px 16px 10px;
background: var(--ap-gray-100);
border: 1px solid transparent;
border-radius: var(--ap-radius-md);
font-family: inherit;
font-size: var(--ap-text-body);
color: var(--ap-gray-900);
transition: border-color var(--ap-duration-fast) var(--ap-ease-apple),
background var(--ap-duration-fast) var(--ap-ease-apple),
box-shadow var(--ap-duration-fast) var(--ap-ease-apple);
line-height: 1.4;
letter-spacing: var(--ap-tracking-base);
}
html[data-theme="dark"] .auth-field__input {
background: var(--ap-gray-150);
color: var(--ap-gray-900);
}
.auth-field__input:hover { background: var(--ap-gray-150); }
.auth-field__input:focus {
outline: none;
background: #FFFFFF;
border-color: var(--ap-brand-primary);
box-shadow: var(--ap-shadow-focus);
}
html[data-theme="dark"] .auth-field__input:focus {
background: var(--ap-gray-200);
}
.auth-field__label {
position: absolute;
top: 50%;
left: 16px;
transform: translateY(-50%);
color: var(--ap-gray-500);
font-size: var(--ap-text-body);
pointer-events: none;
transition: top var(--ap-duration-fast) var(--ap-ease-apple),
font-size var(--ap-duration-fast) var(--ap-ease-apple),
color var(--ap-duration-fast) var(--ap-ease-apple),
transform var(--ap-duration-fast) var(--ap-ease-apple);
letter-spacing: var(--ap-tracking-base);
}
.auth-field__input:focus + .auth-field__label,
.auth-field__input:not(:placeholder-shown) + .auth-field__label {
top: 14px;
transform: translateY(-50%);
font-size: var(--ap-text-caption);
color: var(--ap-brand-primary);
font-weight: 500;
letter-spacing: var(--ap-tracking-wide);
text-transform: uppercase;
}
.auth-card__cta {
width: 100%;
padding: 14px 20px;
background: var(--ap-brand-primary);
color: #FFFFFF;
border: none;
border-radius: var(--ap-radius-md);
font-family: inherit;
font-size: var(--ap-text-callout);
font-weight: 500;
letter-spacing: var(--ap-tracking-base);
cursor: pointer;
transition: background var(--ap-duration-fast) var(--ap-ease-apple),
transform var(--ap-duration-fast) var(--ap-ease-apple),
box-shadow var(--ap-duration-fast) var(--ap-ease-apple);
margin-top: 4px;
box-shadow: var(--ap-shadow-sm);
}
.auth-card__cta:hover {
background: var(--ap-navy-700);
box-shadow: var(--ap-shadow-md);
transform: translateY(-1px);
}
.auth-card__cta:active { transform: translateY(0); }
.auth-card__cta:focus-visible {
outline: none;
box-shadow: var(--ap-shadow-focus);
}
.auth-card__cta[disabled] {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.auth-card__alert {
padding: 12px 14px;
border-radius: var(--ap-radius-md);
font-size: var(--ap-text-footer);
line-height: 1.5;
margin-bottom: 18px;
border: 1px solid transparent;
letter-spacing: var(--ap-tracking-base);
}
.auth-card__alert--danger {
background: rgba(255, 59, 48, 0.08);
color: #C62828;
border-color: rgba(255, 59, 48, 0.20);
}
html[data-theme="dark"] .auth-card__alert--danger {
background: rgba(255, 59, 48, 0.16);
color: #FF6961;
}
.auth-card__alert--info {
background: var(--ap-navy-50);
color: var(--ap-navy-700);
border-color: var(--ap-navy-100);
}
.auth-card__footer {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--ap-gray-150);
font-size: var(--ap-text-footer);
color: var(--ap-gray-500);
text-align: center;
line-height: 1.6;
letter-spacing: var(--ap-tracking-base);
}
.auth-card__footer a {
color: var(--ap-brand-accent);
text-decoration: none;
font-weight: 500;
transition: color var(--ap-duration-fast) var(--ap-ease-apple);
}
.auth-card__footer a:hover { color: var(--ap-brand-primary); text-decoration: underline; }
/* Theme toggle en login (esquina superior derecha) */
.auth-theme-toggle {
position: absolute;
top: 24px; right: 24px;
width: 36px; height: 36px;
border-radius: var(--ap-radius-pill);
background: rgba(255, 255, 255, 0.7);
backdrop-filter: var(--ap-blur-sm);
-webkit-backdrop-filter: var(--ap-blur-sm);
border: 1px solid var(--ap-gray-150);
color: var(--ap-gray-700);
display: grid; place-items: center;
cursor: pointer;
transition: all var(--ap-duration-fast) var(--ap-ease-apple);
z-index: 10;
}
html[data-theme="dark"] .auth-theme-toggle {
background: rgba(28, 28, 30, 0.7);
color: var(--ap-gray-700);
border-color: var(--ap-gray-200);
}
.auth-theme-toggle:hover { transform: scale(1.05); box-shadow: var(--ap-shadow-md); }
.auth-theme-toggle svg { width: 18px; height: 18px; }
/* Animaciones (Apple-style entry) */
@keyframes apFadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes apFadeScale {
from { opacity: 0; transform: scale(1.06); }
to { opacity: 1; transform: scale(1.0); }
}
@media (prefers-reduced-motion: reduce) {
.auth-card,
.auth-pane__image,
.auth-pane__quote {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* Mobile: stack vertical sin imagen */
@media (max-width: 1023px) {
.auth-form-pane { padding: 24px 20px; }
.auth-card {
padding: 36px 28px 28px;
border-radius: var(--ap-radius-xl);
}
.auth-card__title { font-size: var(--ap-text-title-2); }
}
/* Helpers compatibilidad legacy (para no romper otras vistas que usen .error-path) */
.error-path {
text-align: center;
color: var(--ap-gray-500);
margin: 20px 0 24px;
font-size: var(--ap-text-footer);
}
/* =============================================================================
FORMULARIOS
========================================================================== */
.form-group {
margin-bottom: 18px;
}
.form-label {
display: block;
margin-bottom: 6px;
font-weight: 600;
color: var(--gray-text);
font-size: 0.9rem;
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border-strong);
border-radius: var(--radius);
font-family: inherit;
font-size: var(--fs-sm);
color: var(--gray-text);
background: var(--white);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
box-shadow: var(--shadow-xs);
}
.form-input::placeholder { color: var(--neutral-400); }
.form-input:hover,
.form-select:hover,
.form-textarea:hover {
border-color: var(--neutral-400);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--navy-med);
box-shadow: 0 0 0 4px var(--ring-color);
}
.form-input--error,
.form-select--error {
border-color: var(--danger);
background: var(--danger-bg);
}
/* =============================================================================
BOTONES
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 8px 14px;
border: 1px solid transparent;
border-radius: var(--radius);
font-family: inherit;
font-size: var(--fs-sm);
font-weight: 500;
text-align: center;
cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast),
box-shadow var(--t-fast), transform var(--t-fast);
text-decoration: none;
line-height: 1.2;
white-space: nowrap;
user-select: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
outline: 2px solid var(--ring-color);
outline-offset: 2px;
}
.btn[disabled], .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn .icon { width: 16px; height: 16px; flex-shrink: 0; }
.btn--primary {
background: var(--navy);
color: var(--white);
border-color: var(--navy);
box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.btn--primary:hover {
background: var(--navy-med);
border-color: var(--navy-med);
color: var(--white);
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn--accent {
background: var(--accent);
color: var(--white);
border-color: var(--accent);
box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn--accent:hover {
background: var(--accent-dark);
border-color: var(--accent-dark);
color: var(--white);
box-shadow: var(--shadow-sm);
}
.btn--secondary {
background: var(--white);
color: var(--navy);
border-color: var(--border-strong);
box-shadow: var(--shadow-xs);
}
.btn--secondary:hover {
background: var(--neutral-50);
color: var(--navy);
border-color: var(--navy-light);
}
.btn--ghost {
background: transparent;
color: var(--white);
border-color: rgba(255, 255, 255, 0.3);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.10); color: var(--white); }
.btn--danger {
background: var(--danger);
color: var(--white);
border-color: var(--danger);
box-shadow: var(--shadow-xs);
}
.btn--danger:hover { background: var(--danger-fg); border-color: var(--danger-fg); color: var(--white); }
.btn--small { padding: 5px 10px; font-size: var(--fs-xs); gap: 6px; }
.btn--small .icon { width: 14px; height: 14px; }
.btn--block { display: flex; width: 100%; }
/* =============================================================================
ALERTAS
========================================================================== */
.alert {
padding: 12px 16px;
border-radius: var(--radius);
margin-bottom: var(--space-4);
border: 1px solid transparent;
border-left: 4px solid;
font-size: var(--fs-sm);
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.alert .icon {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 1px;
}
.alert--success { background: var(--success-bg); border-left-color: var(--success); color: var(--success-fg); border-color: var(--success-bg); }
.alert--info { background: var(--info-bg); border-left-color: var(--info); color: var(--info-fg); border-color: var(--info-bg); }
.alert--warning { background: var(--warning-bg); border-left-color: var(--warning); color: var(--warning-fg); border-color: var(--warning-bg); }
.alert--danger { background: var(--danger-bg); border-left-color: var(--danger); color: var(--danger-fg); border-color: var(--danger-bg); }
/* Animación de entrada para alerts dentro del main */
.app-main > .alert {
animation: alert-slide-in 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes alert-slide-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Botón en estado "cargando" (clase agregada por JS cuando se envía el form) */
.btn.is-loading {
position: relative;
color: transparent !important;
pointer-events: none;
opacity: 0.85;
}
.btn.is-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
color: var(--white);
animation: btn-spin 600ms linear infinite;
}
.btn--secondary.is-loading::after,
.btn--muted.is-loading::after { color: var(--navy); }
@keyframes btn-spin {
to { transform: rotate(360deg); }
}
/* =============================================================================
SHELL DE LA APLICACIÓN AUTENTICADA
========================================================================== */
.app-body {
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--bg-app);
}
/* -- HEADER --------------------------------------------------------------- */
.app-header {
height: var(--header-h);
background: var(--bg-header);
color: var(--white);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--space-6);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.25);
position: sticky;
top: 0;
z-index: 50;
}
.app-header__left {
display: flex;
align-items: center;
gap: var(--space-4);
}
.app-header__toggle,
.app-header__theme {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid transparent;
border-radius: var(--radius);
background: transparent;
color: rgba(255, 255, 255, 0.85);
cursor: pointer;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
position: relative;
}
.app-header__toggle:hover,
.app-header__theme:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.15); color: var(--white); }
.app-header__toggle:focus-visible,
.app-header__theme:focus-visible { outline: 2px solid var(--ring-color); outline-offset: 2px; }
.app-header__toggle .icon,
.app-header__theme .icon { width: 22px; height: 22px; }
/* Menú desplegable del toggle de tema */
.theme-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 180px;
background: var(--bg-elev-1);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 6px;
display: none;
z-index: 200;
animation: visor-pop-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.theme-menu--open { display: block; }
.theme-menu__item {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
padding: 8px 10px;
background: transparent;
border: 0;
border-radius: var(--radius-sm);
color: var(--gray-text);
font-family: inherit;
font-size: var(--fs-sm);
font-weight: 500;
text-align: left;
cursor: pointer;
transition: background var(--t-fast);
}
.theme-menu__item:hover { background: var(--neutral-100); }
.theme-menu__item .icon { width: 16px; height: 16px; color: var(--navy-med); }
.theme-menu__item--active {
background: var(--navy-ultra);
color: var(--navy);
font-weight: 600;
}
.theme-menu__item--active::after {
content: "";
width: 6px;
height: 6px;
margin-left: auto;
border-radius: 50%;
background: var(--accent);
}
.app-header__brand {
display: flex;
align-items: center;
gap: var(--space-4);
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
}
.app-header__logo {
color: var(--white);
font-weight: 700;
font-size: var(--fs-lg);
letter-spacing: -0.02em;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--space-2);
line-height: 1;
flex: 0 0 auto;
/* Sin max-width aquí — la imagen dentro define su propio tamaño máximo */
}
.app-header__logo:hover { color: var(--white); text-decoration: none; }
.app-header__logo-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong, var(--accent)) 100%);
color: var(--white);
border-radius: var(--radius);
font-weight: 700;
font-size: var(--fs-sm);
letter-spacing: 0;
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.18);
flex-shrink: 0;
}
.app-header__logo-img {
height: 36px;
width: auto;
max-width: 180px;
object-fit: contain;
display: block;
flex-shrink: 0;
/* El header es navy: forzamos el logo monocromo a blanco. Si en algún
momento se sube un logo policromático, esto romperá los colores;
cambiar a un chip blanco con padding o subir variante clara. */
filter: brightness(0) invert(1);
}
.app-header__subtitle {
color: rgba(255, 255, 255, 0.65);
font-size: var(--fs-xs);
font-weight: 500;
letter-spacing: 0;
padding-left: var(--space-4);
border-left: 1px solid rgba(255, 255, 255, 0.18);
line-height: 1.2;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Si la pantalla es muy angosta, oculta el subtítulo para que el logo respire */
@media (max-width: 900px) {
.app-header__subtitle { display: none; }
}
.app-header__user {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--fs-sm);
}
.app-header__userinfo {
display: flex;
flex-direction: column;
align-items: flex-end;
line-height: 1.2;
gap: 2px;
}
.app-header__username { color: var(--white); font-weight: 600; }
.app-header__role { color: rgba(255, 255, 255, 0.65); font-size: var(--fs-xs); font-weight: 500; }
.app-header__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong, var(--accent)) 100%);
color: var(--white);
font-weight: 600;
font-size: var(--fs-sm);
letter-spacing: 0;
box-shadow: var(--shadow-sm);
flex-shrink: 0;
}
.app-header__logout { margin: 0; }
/* Botón "ghost" en el header lee blanco sobre el navy del header */
.app-header .btn--ghost {
color: rgba(255, 255, 255, 0.85);
border-color: rgba(255, 255, 255, 0.2);
background: transparent;
}
.app-header .btn--ghost:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--white);
border-color: rgba(255, 255, 255, 0.3);
}
/* -- SHELL ---------------------------------------------------------------- */
.app-shell {
flex: 1;
display: flex;
min-height: calc(100vh - var(--header-h) - var(--footer-h));
}
/* -- SIDEBAR -------------------------------------------------------------- */
.app-sidebar {
width: var(--sidebar-w);
background: var(--bg-sidebar);
border-right: 0;
padding: var(--space-4) 0;
flex-shrink: 0;
transition: width var(--t-base);
position: sticky;
top: var(--header-h);
height: calc(100vh - var(--header-h) - var(--footer-h));
overflow-y: auto;
overflow-x: hidden;
box-shadow: 6px 0 18px -8px rgba(15, 23, 42, 0.25);
color: rgba(255, 255, 255, 0.85);
}
.sidebar-nav { padding: 0 var(--space-3); }
.sidebar-nav__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.sidebar-nav__item { margin: 0; }
.sidebar-nav__link {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 9px 12px;
color: rgba(255, 255, 255, 0.78);
font-weight: 500;
font-size: var(--fs-sm);
border-radius: var(--radius);
white-space: nowrap;
transition: background var(--t-fast), color var(--t-fast);
position: relative;
}
.sidebar-nav__link .icon {
width: 18px;
height: 18px;
flex-shrink: 0;
color: rgba(255, 255, 255, 0.6);
transition: color var(--t-fast);
}
.sidebar-nav__label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity var(--t-fast);
}
.sidebar-nav__link:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--white);
text-decoration: none;
}
.sidebar-nav__link:hover .icon { color: var(--white); }
.sidebar-nav__item--active .sidebar-nav__link {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 100%);
color: var(--white);
font-weight: 600;
box-shadow: inset 3px 0 0 var(--accent);
}
.sidebar-nav__item--active .sidebar-nav__link .icon { color: var(--accent); }
.sidebar-nav__item--disabled .sidebar-nav__link {
color: rgba(255, 255, 255, 0.35);
cursor: not-allowed;
}
.sidebar-nav__item--disabled .sidebar-nav__link:hover {
background: transparent;
color: rgba(255, 255, 255, 0.35);
}
.sidebar-nav__item--disabled .icon { color: rgba(255, 255, 255, 0.25); }
.sidebar-nav__item--disabled .sidebar-nav__link:hover .icon { color: rgba(255, 255, 255, 0.25); }
.sidebar-nav__badge {
font-size: 0.65rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.12);
padding: 2px 7px;
border-radius: var(--radius-full);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-left: auto;
}
/* Separador y sub-heading dentro del sidebar */
.sidebar-nav__section-title {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.5);
font-weight: 600;
padding: var(--space-4) 12px var(--space-2);
}
/* --- SIDEBAR COLAPSADO (desktop, body.sidebar-collapsed) --- */
body.sidebar-collapsed .app-sidebar { width: var(--sidebar-w-collapsed); }
body.sidebar-collapsed .sidebar-nav__label,
body.sidebar-collapsed .sidebar-nav__badge,
body.sidebar-collapsed .sidebar-nav__section-title { display: none; }
body.sidebar-collapsed .sidebar-nav__link {
justify-content: center;
padding: 10px 8px;
}
body.sidebar-collapsed .sidebar-nav__link .icon { width: 20px; height: 20px; }
/* Tooltip accesible cuando está colapsado */
body.sidebar-collapsed .sidebar-nav__link[data-title]:hover::after {
content: attr(data-title);
position: absolute;
left: calc(100% + 8px);
top: 50%;
transform: translateY(-50%);
background: var(--white);
color: var(--navy);
padding: 6px 10px;
border-radius: var(--radius-sm);
font-size: var(--fs-xs);
font-weight: 600;
white-space: nowrap;
box-shadow: var(--shadow-md);
z-index: 200;
pointer-events: none;
}
/* --- SIDEBAR OVERLAY (mobile, body.sidebar-open) --- */
.app-sidebar__scrim {
display: none;
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.5);
backdrop-filter: blur(2px);
z-index: 80;
opacity: 0;
transition: opacity var(--t-base);
}
@media (max-width: 1023px) {
.app-sidebar {
position: fixed;
top: var(--header-h);
left: 0;
height: calc(100vh - var(--header-h));
transform: translateX(-100%);
z-index: 90;
box-shadow: var(--shadow-lg);
}
body.sidebar-open .app-sidebar { transform: translateX(0); }
body.sidebar-open .app-sidebar__scrim { display: block; opacity: 1; }
body.sidebar-collapsed .app-sidebar { width: var(--sidebar-w); } /* en mobile ignora colapsado */
body.sidebar-collapsed .sidebar-nav__label,
body.sidebar-collapsed .sidebar-nav__badge { display: inline; }
}
/* -- MAIN ----------------------------------------------------------------- */
.app-main {
flex: 1;
padding: var(--space-8) var(--space-8);
min-width: 0;
max-width: var(--container-max);
margin: 0 auto;
width: 100%;
}
@media (max-width: 768px) {
.app-main { padding: var(--space-5) var(--space-4); }
}
/* -- FOOTER --------------------------------------------------------------- */
.app-footer {
height: var(--footer-h);
background: var(--white);
border-top: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--space-6);
font-size: var(--fs-xs);
color: var(--neutral-500);
}
/* =============================================================================
PÁGINAS Y COMPONENTES
========================================================================== */
.page-section { max-width: 1240px; }
.page-header {
margin-bottom: var(--space-6);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--border-subtle);
}
.page-title { margin: 0 0 var(--space-1); font-size: var(--fs-2xl); }
.page-subtitle {
color: var(--neutral-500);
margin: 0;
font-size: var(--fs-sm);
font-weight: 400;
}
.card {
background: var(--bg-elev-1);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: var(--space-5) var(--space-6);
margin-bottom: var(--space-5);
box-shadow: var(--shadow-xs);
transition: border-color var(--t-fast);
}
.card:hover { border-color: var(--border-strong); }
.card--muted {
background: var(--navy-ultra);
border-color: var(--navy-light);
}
.card--muted:hover { border-color: var(--navy-light); }
.card__title {
margin: 0 0 var(--space-4);
font-size: var(--fs-md);
font-weight: 600;
color: var(--navy);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--border-subtle);
display: flex;
align-items: center;
gap: var(--space-2);
}
.card__body { margin: 0; color: var(--gray-text); }
.definition-list {
display: grid;
grid-template-columns: max-content 1fr;
gap: var(--space-2) var(--space-6);
margin: var(--space-4) 0 0;
}
.definition-list dt {
font-weight: 500;
color: var(--neutral-500);
font-size: var(--fs-sm);
}
.definition-list dd {
margin: 0;
color: var(--gray-text);
font-size: var(--fs-sm);
}
.roadmap {
margin: 0;
padding-left: 20px;
color: var(--gray-text);
}
.roadmap li { margin-bottom: 4px; }
.roadmap strong { color: var(--navy); }
/* =============================================================================
RESPONSIVE
========================================================================== */
/* Responsive mobile (el sidebar usa overlay, gestionado en la sección SHELL). */
@media (max-width: 768px) {
.app-main { padding: var(--space-4); }
.app-header { padding: 0 var(--space-4); }
.app-header__subtitle { display: none; }
.auth-card { padding: 28px 22px 20px; }
}
/* =============================================================================
FASE 1 — CSS adicional
Tablas de datos, filtros, tags, matriz de permisos, form rows, grid de cards
========================================================================== */
/* -- Page headers en fila (título + acción) -------------------------------- */
.page-header--row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.page-header__actions { display: flex; gap: 8px; align-items: center; }
.page-section--narrow { max-width: 900px; }
/* -- Filter bar ----------------------------------------------------------- */
.filter-bar {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
}
.filter-bar__input { flex: 1 1 240px; max-width: 360px; }
.filter-bar__select { flex: 0 0 auto; min-width: 160px; }
/* -- Data tables ---------------------------------------------------------- */
.table-wrap {
overflow-x: auto;
background: var(--bg-elev-1);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xs);
margin-bottom: var(--space-4);
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
}
.data-table thead th {
background: var(--neutral-50);
color: var(--neutral-600);
text-align: left;
padding: 11px 14px;
font-weight: 600;
letter-spacing: 0.04em;
font-size: 0.72rem;
text-transform: uppercase;
border-bottom: 1px solid var(--border-subtle);
white-space: nowrap;
position: sticky;
top: 0;
z-index: 1;
}
.data-table thead th[aria-sort] { cursor: pointer; user-select: none; }
.data-table thead th[aria-sort]:hover { color: var(--navy); background: var(--neutral-100); }
.data-table thead th[aria-sort="ascending"]::after { content: " ↑"; color: var(--accent); }
.data-table thead th[aria-sort="descending"]::after { content: " ↓"; color: var(--accent); }
.data-table tbody td {
padding: 12px 14px;
border-bottom: 1px solid var(--border-subtle);
vertical-align: middle;
color: var(--gray-text);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background var(--t-fast); }
.data-table tbody tr:hover td { background: var(--neutral-50); }
.data-table tbody tr:hover .link-strong { color: var(--accent); }
/* Zebra sutil (opcional via clase en tabla) */
.data-table--zebra tbody tr:nth-child(even) td { background: var(--neutral-50); }
.data-table--zebra tbody tr:nth-child(even):hover td { background: var(--navy-ultra); }
.data-table__actions {
white-space: nowrap;
display: flex;
gap: var(--space-1);
justify-content: flex-end;
}
/* Matrix variant (roles × permisos) */
.data-table--matrix th.matrix-role,
.data-table--matrix td.matrix-cell {
text-align: center;
width: 90px;
}
.matrix-check { color: var(--success); font-weight: 700; font-size: 1.1rem; }
.matrix-dash { color: var(--gray-med); }
.permiso-desc {
display: block;
font-size: 0.8rem;
color: var(--gray-med);
font-weight: 400;
margin-top: 2px;
}
/* -- Tags ----------------------------------------------------------------- */
.tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: var(--radius-full);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.4;
background: var(--neutral-100);
color: var(--neutral-600);
border: 1px solid transparent;
white-space: nowrap;
}
.tag .icon { width: 10px; height: 10px; }
.tag--success { background: var(--success-bg); color: var(--success-fg); }
.tag--muted { background: var(--neutral-100); color: var(--neutral-500); }
.tag--danger { background: var(--danger-bg); color: var(--danger-fg); }
.tag--warning { background: var(--warning-bg); color: var(--warning-fg); }
.tag--accent { background: var(--accent-soft); color: var(--accent-dark); }
.tag--info { background: var(--info-bg); color: var(--info-fg); }
/* -- Filter chips (filtros activos en listados) -------------------------- */
.filter-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: 0 0 var(--space-4);
align-items: center;
}
.filter-chips__label {
font-size: var(--fs-xs);
color: var(--neutral-500);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
margin-right: var(--space-2);
}
.filter-chip {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 4px 8px 4px 10px;
background: var(--navy-ultra);
color: var(--navy);
border: 1px solid var(--navy-light);
border-radius: var(--radius-full);
font-size: var(--fs-xs);
font-weight: 500;
text-decoration: none;
transition: background var(--t-fast), border-color var(--t-fast);
}
.filter-chip:hover {
background: var(--navy-light);
color: var(--navy);
text-decoration: none;
}
.filter-chip__key {
color: var(--neutral-500);
font-weight: 600;
text-transform: uppercase;
font-size: 0.65rem;
letter-spacing: 0.04em;
}
.filter-chip__val { color: var(--navy); }
.filter-chip__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: var(--radius-full);
background: transparent;
transition: background var(--t-fast);
margin-left: 2px;
}
.filter-chip__close .icon { width: 10px; height: 10px; }
.filter-chip:hover .filter-chip__close { background: rgba(31, 56, 100, 0.15); }
.filter-chips__clear {
color: var(--neutral-500);
font-size: var(--fs-xs);
font-weight: 500;
text-decoration: none;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-full);
padding: 4px 10px;
}
.filter-chips__clear:hover { color: var(--danger); border-color: var(--danger-bg); background: var(--danger-bg); }
/* -- Pagination ----------------------------------------------------------- */
.pagination {
display: flex;
gap: var(--space-4);
align-items: center;
justify-content: center;
margin-top: var(--space-5);
font-size: var(--fs-sm);
}
.pagination__link { color: var(--navy-med); }
.pagination__info { color: var(--gray-med); }
/* -- Forms extendidos ----------------------------------------------------- */
.form { padding: 22px 24px; }
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px 20px;
margin-bottom: 14px;
}
.form-row .form-group { margin-bottom: 0; }
.form-group--checkbox { display: flex; flex-direction: column; gap: 4px; }
.form-check {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-weight: 500;
}
.form-check input[type="checkbox"] {
width: 16px; height: 16px;
accent-color: var(--navy);
margin: 0;
}
.form-help {
font-size: 0.8rem;
color: var(--gray-med);
margin: 4px 0 0;
}
.form-error {
font-size: 0.82rem;
color: var(--danger);
margin: 4px 0 0;
font-weight: 500;
}
.form-input--error {
border-color: var(--danger) !important;
background: #FFF5F5;
}
.form-textarea { min-height: 80px; resize: vertical; }
.form-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--gray-line);
}
.actions-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
}
/* -- Grid de cards de navegación (config index) --------------------------- */
.grid-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
}
.card-link {
display: block;
position: relative;
background: var(--white);
border: 1px solid var(--gray-line);
border-left: 4px solid var(--accent);
border-radius: var(--radius);
padding: 18px 22px;
text-decoration: none;
color: var(--gray-text);
transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
box-shadow: var(--shadow-sm);
}
.card-link:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
text-decoration: none;
border-left-color: var(--navy);
}
.card-link__title { margin: 0 0 4px; color: var(--navy); font-size: 1rem; font-weight: 600; }
.card-link__desc { margin: 0; color: var(--gray-med); font-size: 0.88rem; }
.card-link__arrow {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
color: var(--accent);
font-size: 1.2rem;
}
/* -- Card title con subtítulo --------------------------------------------- */
.card__subtitle {
color: var(--gray-med);
font-weight: 400;
font-size: 0.85rem;
margin-left: 6px;
}
/* -- Bloque de código (para passwords temporales) ------------------------- */
.code-block {
background: var(--gray-bg);
border: 1px solid var(--gray-line);
border-radius: var(--radius-sm);
padding: 10px 12px;
font-family: 'Menlo', 'Consolas', monospace;
font-size: 0.88rem;
white-space: pre-wrap;
word-break: break-all;
margin: 10px 0;
color: var(--gray-text);
}
.alert__hint {
font-size: 0.82rem;
color: var(--gray-med);
margin: 6px 0 0;
font-style: italic;
}
/* -- btn-link (para submit que parece enlace) ----------------------------- */
.btn-link {
background: none;
border: none;
padding: 0;
color: var(--navy-med);
cursor: pointer;
text-decoration: underline;
font-family: inherit;
font-size: inherit;
}
/* -- helpers tipográficos y de tabla usados en módulos SOL ----------------- */
.small { font-size: 0.82rem; }
.muted { color: var(--gray-med); }
.link-strong { font-weight: 600; color: var(--navy); text-decoration: none; }
.link-strong:hover { text-decoration: underline; }
.data-table th.num,
.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.btn--muted { background: var(--gray-bg); color: var(--gray-text); border: 1px solid var(--gray-bg); }
.btn--muted:hover { background: #E2E6EA; }
.btn--warning { background: #FFE0B2; color: #E65100; border: 1px solid #FFCC80; }
.btn--warning:hover { background: #FFCC80; color: #BF360C; }
.filter-bar__check { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; white-space: nowrap; }
/* -- form helpers adicionales --------------------------------------------- */
.form-section-title {
margin: 16px 0 4px;
font-size: 0.95rem;
color: var(--navy);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
border-bottom: 1px solid var(--navy-light);
padding-bottom: 4px;
}
.inline-form { display: inline-flex; margin: 0; }
/* Stack vertical usado dentro de actions-grid para agrupar inputs de un form */
.form-inline-stack {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px;
border: 1px solid var(--navy-light);
border-radius: 6px;
background: var(--navy-ultra);
}
.form-inline-stack .form-section-title { margin-top: 0; }
/* -- Empty state (listados vacíos) --------------------------------------- */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: var(--space-12) var(--space-6);
background: var(--bg-elev-1);
border: 1px dashed var(--border-strong);
border-radius: var(--radius-lg);
text-align: center;
margin: var(--space-4) 0;
}
.empty-state__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-radius: var(--radius-full);
background: var(--navy-ultra);
color: var(--navy-med);
margin-bottom: var(--space-1);
}
.empty-state__icon .icon { width: 32px; height: 32px; }
.empty-state__title {
margin: 0;
color: var(--navy);
font-size: var(--fs-lg);
font-weight: 600;
}
.empty-state__message {
max-width: 480px;
margin: 0;
color: var(--neutral-500);
font-size: var(--fs-sm);
line-height: 1.5;
}
.empty-state__action {
margin-top: var(--space-2);
}
/* -- panel (dashboard real) ---------------------------------------------- */
.panel-hero {
/* Hero ESTÁTICO: usa colores fijos en ambos temas (light y dark) para
que su look premium no varíe con el toggle. Gradient navy oscuro
+ texto blanco + glow accent es la combinación definitiva. */
background: linear-gradient(135deg, #15264A 0%, #1F3864 60%, #2A4F8B 100%);
color: #FFFFFF;
padding: var(--space-8) var(--space-8);
border-radius: var(--ap-radius-xl);
margin-bottom: var(--space-6);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
box-shadow: var(--ap-shadow-md);
position: relative;
overflow: hidden;
}
.panel-hero::before {
/* Glow decorativo del color de acento configurable. */
content: "";
position: absolute;
top: -50%;
right: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, var(--ap-brand-accent, #2A4F8B) 0%, transparent 60%);
opacity: 0.30;
pointer-events: none;
}
.panel-hero > * { position: relative; }
.panel-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-xs);
color: var(--navy-light);
margin: 0 0 var(--space-2);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.panel-hero__title {
color: var(--white);
font-size: var(--fs-3xl);
font-weight: 700;
letter-spacing: -0.02em;
margin: 0 0 var(--space-2);
}
.panel-hero__subtitle {
color: rgba(255, 255, 255, 0.85);
margin: 0;
font-size: var(--fs-md);
}
.panel-hero__meta,
.app-main .panel-hero__meta {
display: flex;
align-items: center;
gap: var(--space-3);
background: rgba(255, 255, 255, 0.12);
padding: var(--space-3) var(--space-4);
border-radius: var(--ap-radius-md);
font-size: var(--ap-text-footer);
color: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Selectores con specificity alta para ganarle a .app-main .muted del
override Apple (que pondría gris-500 sobre el meta box). El meta box
debe verse igual en light y dark: blanco translúcido siempre. */
.app-main .panel-hero__meta strong,
html[data-theme="dark"] .app-main .panel-hero__meta strong { color: #FFFFFF; }
.app-main .panel-hero__meta .icon,
html[data-theme="dark"] .app-main .panel-hero__meta .icon {
width: 20px; height: 20px;
color: rgba(255, 255, 255, 0.85);
}
.app-main .panel-hero__meta .muted,
html[data-theme="dark"] .app-main .panel-hero__meta .muted,
.app-main .panel-hero__meta .small,
.app-main .panel-hero .muted {
color: rgba(255, 255, 255, 0.70);
font-size: var(--ap-text-caption);
letter-spacing: var(--ap-tracking-base);
}
@media (max-width: 768px) {
.panel-hero { flex-direction: column; align-items: flex-start; padding: var(--space-6); }
.panel-hero__title { font-size: var(--fs-2xl); }
}
.section-heading {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-md);
color: var(--navy);
margin: var(--space-6) 0 var(--space-3);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--border-subtle);
}
.section-heading .icon { color: var(--accent); }
.section-heading__link {
margin-left: auto;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--neutral-500);
display: inline-flex;
align-items: center;
gap: 2px;
}
.section-heading__link:hover { color: var(--navy); }
.panel-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
margin-top: var(--space-4);
}
@media (max-width: 1100px) {
.panel-grid { grid-template-columns: 1fr; }
}
.panel-grid__col { min-width: 0; }
/* Shortcuts */
.shortcut-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-3);
}
.shortcut-card {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
background: var(--bg-elev-1);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
color: var(--gray-text);
text-decoration: none;
box-shadow: var(--shadow-xs);
transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.shortcut-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--navy-light);
text-decoration: none;
}
.shortcut-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
background: var(--navy-ultra);
color: var(--navy);
border-radius: var(--radius);
flex-shrink: 0;
}
.shortcut-card__icon .icon { width: 20px; height: 20px; }
.shortcut-card__label {
flex: 1;
font-weight: 500;
color: var(--navy);
font-size: var(--fs-sm);
}
.shortcut-card__arrow {
color: var(--neutral-400);
transition: transform var(--t-fast), color var(--t-fast);
}
.shortcut-card:hover .shortcut-card__arrow {
transform: translateX(3px);
color: var(--accent);
}
/* Event list */
.event-list { list-style: none; margin: 0; padding: 0; }
.event-list__item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border-subtle);
transition: background var(--t-fast);
}
.event-list__item:last-child { border-bottom: none; }
.event-list__item:hover { background: var(--neutral-50); }
.event-list__meta {
display: flex;
flex-direction: column;
gap: 2px;
flex-shrink: 0;
min-width: 80px;
}
.event-list__mod { text-transform: uppercase; font-size: 0.65rem !important; }
.event-list__body { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.event-list__link {
color: var(--neutral-400);
transition: color var(--t-fast), transform var(--t-fast);
}
.event-list__link:hover { color: var(--accent); transform: translateX(2px); }
/* -- dashboard embed ------------------------------------------------------ */
.page-section--wide { max-width: 1600px; }
/* Modo embed: ocupa el máximo de ancho/alto posible; paddings mínimos. */
.page-section--embed { max-width: none; margin: 0; }
.app-main:has(.page-section--embed) {
padding: var(--space-2) var(--space-3);
max-width: none;
}
.page-section--embed .page-header { margin-top: var(--space-4); }
.dashboard-embed {
width: 100%;
height: calc(100vh - 240px);
min-height: 560px;
background: var(--navy-ultra);
border: 1px solid var(--navy-light);
border-radius: 8px;
overflow: hidden;
margin: 0;
position: relative;
}
.dashboard-embed iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* Modo escalado: iframe queda en tamaño nativo y JS aplica transform:scale.
El alto del contenedor lo fija el JS en función del ancho disponible. */
.dashboard-embed--scaled {
height: auto;
min-height: 0;
}
.dashboard-embed--scaled iframe {
width: auto;
height: auto;
}
/* -- progress-bar (expediente ER — avance por dependencia) --------------- */
.progress-bar {
width: 100%;
max-width: 160px;
height: 10px;
background: var(--gray-bg);
border-radius: 5px;
overflow: hidden;
border: 1px solid var(--navy-light);
}
.progress-bar__fill {
height: 100%;
background: linear-gradient(90deg, var(--navy-med), var(--accent));
transition: width 300ms ease;
}
/* -- diff panel (bitácora: antes / después) ------------------------------- */
.diff-panel {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.diff-col { min-width: 0; }
.diff-col pre.code-block {
max-height: 480px;
overflow: auto;
white-space: pre;
font-size: 0.78rem;
line-height: 1.4;
}
@media (max-width: 800px) {
.diff-panel { grid-template-columns: 1fr; }
}
/* -- kpi-strip (cards de indicadores en encabezado de listados) ---------- */
.kpi-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-4);
margin: var(--space-2) 0 var(--space-6);
}
.kpi-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-5);
background: var(--bg-elev-1);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
color: var(--gray-text);
text-decoration: none;
box-shadow: var(--shadow-xs);
transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
overflow: hidden;
isolation: isolate;
}
.kpi-card::before {
/* Barra superior de acento */
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--navy);
opacity: 0.85;
}
.kpi-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--border-strong);
text-decoration: none;
}
.kpi-card__header {
display: flex;
align-items: center;
gap: var(--space-2);
justify-content: space-between;
}
.kpi-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border-radius: var(--radius);
background: var(--navy-ultra);
color: var(--navy);
}
.kpi-card__icon .icon { width: 20px; height: 20px; }
.kpi-card__label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--neutral-500);
font-weight: 600;
}
.kpi-card__value {
font-size: var(--fs-3xl);
font-weight: 700;
color: var(--navy);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
line-height: 1.1;
}
.kpi-card__meta {
font-size: var(--fs-xs);
color: var(--neutral-500);
display: inline-flex;
align-items: center;
gap: 4px;
}
.kpi-card__meta .icon { width: 12px; height: 12px; }
.kpi-card__meta--up { color: var(--success); }
.kpi-card__meta--down { color: var(--danger); }
/* Variantes de color (acento en barra superior y en valor) */
.kpi-card--accent::before { background: var(--accent); }
.kpi-card--accent .kpi-card__value { color: var(--accent-dark); }
.kpi-card--accent .kpi-card__icon { background: var(--accent-soft); color: var(--accent-dark); }
.kpi-card--success::before { background: var(--success); }
.kpi-card--success .kpi-card__value { color: var(--success); }
.kpi-card--success .kpi-card__icon { background: var(--success-bg); color: var(--success-fg); }
.kpi-card--danger::before { background: var(--danger); }
.kpi-card--danger .kpi-card__value { color: var(--danger-fg); }
.kpi-card--danger .kpi-card__icon { background: var(--danger-bg); color: var(--danger-fg); }
.kpi-card--warning::before { background: var(--warning); }
.kpi-card--warning .kpi-card__value { color: var(--warning-fg); }
.kpi-card--warning .kpi-card__icon { background: var(--warning-bg); color: var(--warning-fg); }
.kpi-card--info::before { background: var(--navy-med); }
.kpi-card--info .kpi-card__icon { background: var(--navy-ultra); color: var(--navy); }
.kpi-card--muted::before { background: var(--neutral-400); }
.kpi-card--muted .kpi-card__value { color: var(--neutral-600); }
.kpi-card--muted .kpi-card__icon { background: var(--neutral-100); color: var(--neutral-500); }
/* -- sub-tabs (pestañas dentro de una página) ----------------------------- */
.sub-tabs {
display: flex;
gap: 4px;
margin: 18px 0 14px;
border-bottom: 2px solid var(--navy-light);
}
.sub-tabs__link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
color: var(--gray-med);
text-decoration: none;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
font-weight: 500;
}
.sub-tabs__link:hover { color: var(--navy); }
.sub-tabs__link--active {
color: var(--navy);
border-bottom-color: var(--accent);
font-weight: 600;
}
.sub-tabs__badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
background: var(--navy-light);
color: var(--navy);
font-size: 0.75rem;
font-weight: 600;
}
/* -- visor inline (lightbox para documentos) ----------------------------- */
.visor-overlay {
position: fixed;
inset: 0;
background: rgba(15, 25, 45, 0.78);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
padding: 24px;
animation: visor-fade-in 200ms ease-out both;
}
.visor-panel {
background: var(--white);
border-radius: var(--radius-lg);
max-width: 1100px;
width: 100%;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: var(--shadow-xl);
animation: visor-pop-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes visor-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes visor-pop-in {
from { opacity: 0; transform: scale(0.96) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.visor-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border-bottom: 1px solid var(--navy-light);
background: var(--navy-ultra);
}
.visor-title {
margin: 0;
font-size: 1rem;
color: var(--navy);
font-weight: 600;
word-break: break-word;
flex: 1;
}
.visor-actions { display: flex; gap: 6px; align-items: center; }
.visor-body {
flex: 1;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
background: #1A1A1A;
padding: 0;
}
.visor-image { max-width: 100%; max-height: 100%; object-fit: contain; background: #1A1A1A; }
.visor-iframe { width: 100%; height: 100%; border: 0; min-height: 70vh; background: var(--white); }
.visor-notice {
color: var(--white);
padding: 40px;
text-align: center;
font-size: 1.05rem;
}
/* -- timeline (historial de estados en detalle de observación) ------------ */
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--navy-light); }
.timeline__item { padding: 10px 0 14px 14px; position: relative; }
.timeline__item:not(:last-child) { border-bottom: 1px dashed var(--gray-bg); }
.timeline__item::before {
content: "";
position: absolute;
left: -6px;
top: 16px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--navy);
}
.timeline__head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.timeline__arrow { color: var(--gray-med); font-weight: 600; }
.timeline__meta { margin-top: 4px; }
.timeline__comment { margin: 6px 0 0; color: var(--gray-text); }
/* =============================================================================
MANUALES — prose styles para markdown renderizado y card grid del listado
========================================================================== */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-4);
}
.page-section--prose .card { max-width: 880px; margin: 0 auto; }
.prose {
color: var(--gray-text);
line-height: 1.65;
font-size: 0.95rem;
}
.prose h1 {
font-size: 1.5rem;
color: var(--navy);
margin: 1.5em 0 0.4em;
font-weight: 700;
}
.prose h2 {
font-size: 1.2rem;
color: var(--navy);
margin: 1.4em 0 0.4em;
font-weight: 700;
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 4px;
}
.prose h3 {
font-size: 1.05rem;
color: var(--navy-med);
margin: 1.2em 0 0.3em;
font-weight: 600;
}
.prose p { margin: 0.6em 0; }
.prose ul, .prose ol { margin: 0.6em 0; padding-left: 24px; }
.prose li { margin: 0.25em 0; }
.prose code {
background: var(--bg-elev-2);
border: 1px solid var(--border-subtle);
padding: 1px 5px;
border-radius: var(--radius-sm);
font-size: 0.85em;
color: var(--navy);
}
.prose pre {
background: var(--bg-elev-2);
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
padding: 12px 14px;
overflow-x: auto;
font-size: 0.83em;
line-height: 1.5;
}
.prose pre code { background: transparent; border: 0; padding: 0; }
.prose strong { color: var(--gray-text); font-weight: 700; }
.prose a { color: var(--navy-med); text-decoration: underline; }
.prose a:hover { color: var(--navy); }
.prose table { margin: 1em 0; }
/* =============================================================================
APPLE SHELL OVERRIDES (Fase 2 del rediseño)
Sobrescriben las clases legacy .app-shell/.app-sidebar/.app-header/.app-main
con la estética Apple: sidebar light gris, topbar glass, breadcrumb,
user footer con menú desplegable, toasts top-right.
========================================================================== */
/* Body en gray-50 Apple */
body.app-body { background: var(--ap-gray-50); color: var(--ap-gray-900); font-family: var(--ap-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01","cv11","cv02"; }
/* SHELL: sidebar | (header + main) */
.app-shell {
min-height: 100vh;
display: flex;
flex-direction: row;
align-items: stretch;
}
.app-main-wrap {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
/* ============ SIDEBAR (charcoal oscuro Pro app — Linear/Logic Pro look) ============ */
:root {
/* Sidebar charcoal: tokens aislados que NO siguen el switch light/dark
general — el sidebar siempre es oscuro para crear contraste con el main. */
--ap-sidebar-bg: #1C1C1E;
--ap-sidebar-bg-elev: #2C2C2E;
--ap-sidebar-border: #2C2C2E;
--ap-sidebar-text: rgba(245, 245, 247, 0.85);
--ap-sidebar-text-mute: rgba(245, 245, 247, 0.55);
--ap-sidebar-text-strong: #FFFFFF;
--ap-sidebar-icon: rgba(245, 245, 247, 0.50);
--ap-sidebar-hover-bg: rgba(255, 255, 255, 0.06);
--ap-sidebar-active-bg: rgba(255, 255, 255, 0.10);
--ap-sidebar-active-accent: var(--ap-brand-accent);
}
/* Sidebar fijo en ambos temas: el sidebar SIEMPRE es charcoal oscuro
#1C1C1E, no cambia entre light/dark. El contraste con el main lo
damos manipulando el color del main, no el del sidebar. Esto evita
que el logo (que está hecho para fondo oscuro) tenga que rotar
entre versiones según el tema. */
.app-sidebar {
width: 240px;
background: var(--ap-sidebar-bg);
color: var(--ap-sidebar-text);
border-right: 1px solid var(--ap-sidebar-border);
box-shadow: none;
padding: 0;
display: flex;
flex-direction: column;
transition: width 220ms var(--ap-ease-snap);
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
flex-shrink: 0;
z-index: 50;
}
.app-sidebar__brand {
/* padding-left 24px = mismo que el icono de items (12 nav + 12 link)
para que logo y items compartan línea vertical imaginaria.
padding-top 36px da más respiro arriba (era 20px, sentía denso). */
padding: 36px 24px 18px;
border-bottom: 1px solid transparent;
}
.app-sidebar__brand-link {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
color: var(--ap-sidebar-text-strong);
text-decoration: none;
font-weight: 600;
font-size: var(--ap-text-callout);
letter-spacing: 0.02em;
}
.app-sidebar__brand-subtitle {
font-size: 11px;
line-height: 1.35;
color: var(--ap-sidebar-text-mute);
font-weight: 400;
letter-spacing: var(--ap-tracking-base);
max-width: 100%;
transition: opacity 160ms var(--ap-ease-apple);
}
.app-sidebar__brand-link:hover { color: var(--ap-sidebar-text-strong); text-decoration: none; }
/* Wordmark SITER (versión fondo oscuro) — visible cuando el sidebar
está expandido. SIEMPRE muestra el archivo de brand.logo_path
(versión fondo oscuro). NO cambia con el toggle light/dark porque
el sidebar es estructuralmente oscuro en ambos modos. */
/* Wordmark renderizado como background-image (no como ![]()
) para que
sea 100% inmune a cualquier color-scheme/auto-darkening del navegador.
Los background-images CSS NO son afectados por dark mode automático
ni por forced-color-adjust del documento. */
.app-sidebar__brand-wordmark {
display: block;
height: var(--ap-logo-dark-size, 28px);
width: 100%;
max-width: 200px;
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
/* Defensiva: bloquear cualquier filter/opacity heredado. */
isolation: isolate;
mix-blend-mode: normal !important;
filter: none !important;
opacity: 1 !important;
transition: none !important;
-webkit-filter: none !important;
forced-color-adjust: none;
-ms-high-contrast-adjust: none;
}
/* color-scheme del sidebar fijo en light (no en dark) para que ningún
navegador altere el SVG/img cargado adentro. El sidebar mantiene su
fondo charcoal por su propio CSS, independiente del color-scheme. */
.app-sidebar {
color-scheme: light;
transition: width 220ms var(--ap-ease-snap);
}
.app-sidebar,
.app-sidebar__brand,
.app-sidebar__brand-link {
transition: width 220ms var(--ap-ease-snap);
}
/* App-icon cuadrado — visible solo cuando el sidebar está colapsado. */
.app-sidebar__brand-mark-collapsed {
width: 32px; height: 32px;
border-radius: var(--ap-radius-md);
object-fit: contain;
display: none;
flex-shrink: 0;
}
/* Fallback sin wordmark cargado: texto SITER blanco grande. */
.app-sidebar__brand-text-fallback {
color: var(--ap-sidebar-text-strong);
font-weight: 600;
font-size: var(--ap-text-title-3);
letter-spacing: 0.06em;
}
/* NAV scroll central — overlay scrollbar Apple-style: invisible en reposo,
aparece al hover del nav o cuando el usuario hace scroll. Mantiene la
funcionalidad sin contaminar visualmente el sidebar cuando no se necesita. */
.sidebar-nav {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 6px 12px;
scrollbar-width: thin; /* Firefox: thin overlay */
scrollbar-color: transparent transparent;
transition: scrollbar-color 200ms var(--ap-ease-apple);
}
.sidebar-nav:hover,
.sidebar-nav:focus-within {
scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 999px;
transition: background 200ms var(--ap-ease-apple);
}
.sidebar-nav:hover::-webkit-scrollbar-thumb,
.sidebar-nav:focus-within::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.14);
}
.sidebar-nav:hover::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.24);
}
.sidebar-nav__list { gap: 1px; padding: 0; margin: 0 0 4px; list-style: none; display: flex; flex-direction: column; }
/* Section title (Apple tuned) — separa grupos de items en el sidebar.
Padding compacto para que quepan más items sin scroll en pantallas
medianas. */
.app-sidebar .sidebar-nav__section-title {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.10em;
color: var(--ap-sidebar-text-mute);
font-weight: 600;
padding: 10px 12px 4px;
margin: 0;
line-height: 1.2;
}
.app-sidebar .sidebar-nav__list:first-child + .sidebar-nav__section-title { padding-top: 4px; }
.sidebar-nav__link {
display: flex; align-items: center; gap: 12px;
padding: 7px 12px;
border-radius: var(--ap-radius-md);
color: var(--ap-sidebar-text);
font-size: var(--ap-text-body);
font-weight: 400;
letter-spacing: var(--ap-tracking-base);
text-decoration: none;
transition: background 140ms var(--ap-ease-apple), color 140ms var(--ap-ease-apple);
position: relative;
white-space: nowrap;
box-shadow: none;
}
.sidebar-nav__link .icon {
width: 18px; height: 18px;
color: var(--ap-sidebar-icon);
flex-shrink: 0;
transition: color 140ms var(--ap-ease-apple);
}
.sidebar-nav__label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity 160ms var(--ap-ease-apple);
}
.sidebar-nav__link:hover {
background: var(--ap-sidebar-hover-bg);
color: var(--ap-sidebar-text-strong);
}
.sidebar-nav__link:hover .icon { color: var(--ap-sidebar-text-strong); }
.sidebar-nav__item--active .sidebar-nav__link {
background: var(--ap-sidebar-active-bg);
color: var(--ap-sidebar-text-strong);
font-weight: 500;
box-shadow: inset 2px 0 0 var(--ap-sidebar-active-accent);
}
.sidebar-nav__item--active .sidebar-nav__link .icon { color: var(--ap-sidebar-text-strong); }
/* FOOTER del sidebar */
.app-sidebar__footer {
border-top: 1px solid var(--ap-sidebar-border);
padding: 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.app-sidebar__user { position: relative; }
.app-sidebar__user > summary { list-style: none; }
.app-sidebar__user > summary::-webkit-details-marker { display: none; }
.app-sidebar__user-summary {
display: flex; align-items: center; gap: 10px;
padding: 8px;
border-radius: var(--ap-radius-md);
cursor: pointer;
transition: background 140ms var(--ap-ease-apple);
user-select: none;
}
.app-sidebar__user-summary:hover { background: var(--ap-sidebar-hover-bg); }
.app-sidebar__avatar {
width: 32px; height: 32px;
border-radius: var(--ap-radius-pill);
background: var(--ap-brand-primary);
color: #fff;
display: grid; place-items: center;
font-size: 13px;
font-weight: 600;
flex-shrink: 0;
box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}
.app-sidebar__user-info {
flex: 1; min-width: 0;
display: flex; flex-direction: column;
overflow: hidden;
transition: opacity 160ms var(--ap-ease-apple);
}
.app-sidebar__user-name {
font-size: var(--ap-text-footer);
font-weight: 500;
color: var(--ap-sidebar-text-strong);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
line-height: 1.3;
}
.app-sidebar__user-email {
font-size: 11px;
color: var(--ap-sidebar-text-mute);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
line-height: 1.3;
}
.app-sidebar__user-caret {
width: 14px; height: 14px;
color: var(--ap-sidebar-text-mute);
transition: transform 160ms var(--ap-ease-apple);
flex-shrink: 0;
}
.app-sidebar__user[open] .app-sidebar__user-caret { transform: rotate(180deg); }
.app-sidebar__user-menu {
position: absolute;
bottom: calc(100% + 6px);
left: 4px; right: 4px;
background: var(--ap-sidebar-bg-elev);
border: 1px solid var(--ap-sidebar-border);
border-radius: var(--ap-radius-md);
box-shadow: var(--ap-shadow-lg);
padding: 6px;
display: flex; flex-direction: column;
gap: 2px;
z-index: 60;
animation: apFadeUp 200ms var(--ap-ease-snap) forwards;
}
.app-sidebar__user-menu-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
background: none; border: none;
border-radius: 6px;
font-family: inherit;
font-size: var(--ap-text-footer);
color: var(--ap-sidebar-text);
text-decoration: none;
text-align: left;
cursor: pointer;
width: 100%;
transition: background 120ms var(--ap-ease-apple), color 120ms var(--ap-ease-apple);
}
.app-sidebar__user-menu-item:hover { background: var(--ap-sidebar-hover-bg); color: var(--ap-sidebar-text-strong); text-decoration: none; }
.app-sidebar__user-menu-item .icon { width: 16px; height: 16px; color: var(--ap-sidebar-icon); }
.app-sidebar__user-menu-item:hover .icon { color: var(--ap-sidebar-text-strong); }
.app-sidebar__user-menu-item--danger { color: #FF6B6B; }
.app-sidebar__user-menu-item--danger .icon { color: #FF6B6B; }
.app-sidebar__user-menu-item--danger:hover { background: rgba(255, 107, 107, 0.12); color: #FF8888; }
.app-sidebar__user-menu-item--danger:hover .icon { color: #FF8888; }
.app-sidebar__user-menu-form { margin: 0; }
/* Toggle de colapso al fondo del sidebar */
.app-sidebar__collapse-toggle {
display: flex; align-items: center; justify-content: center;
height: 32px;
background: none; border: none;
color: var(--ap-sidebar-text-mute);
border-radius: var(--ap-radius-md);
cursor: pointer;
transition: background 140ms var(--ap-ease-apple), color 140ms var(--ap-ease-apple);
}
.app-sidebar__collapse-toggle:hover { background: var(--ap-sidebar-hover-bg); color: var(--ap-sidebar-text-strong); }
.app-sidebar__collapse-icon {
width: 18px; height: 18px;
transition: transform 220ms var(--ap-ease-snap);
}
/* ============ SIDEBAR COLAPSADO ============ */
body.sidebar-collapsed .app-sidebar { width: 64px; }
body.sidebar-collapsed .app-sidebar__brand { padding: 28px 12px 16px; justify-content: center; }
body.sidebar-collapsed .app-sidebar__brand-link {
flex-direction: row;
align-items: center;
justify-content: center;
}
body.sidebar-collapsed .app-sidebar__brand-wordmark,
body.sidebar-collapsed .app-sidebar__brand-text-fallback,
body.sidebar-collapsed .app-sidebar__brand-subtitle { display: none; }
body.sidebar-collapsed .app-sidebar__brand-mark-collapsed { display: block; }
body.sidebar-collapsed .app-sidebar__brand-text,
body.sidebar-collapsed .sidebar-nav__label,
body.sidebar-collapsed .sidebar-nav__badge,
body.sidebar-collapsed .sidebar-nav__section-title,
body.sidebar-collapsed .app-sidebar__user-info,
body.sidebar-collapsed .app-sidebar__user-caret { opacity: 0; pointer-events: none; }
body.sidebar-collapsed .sidebar-nav__link { justify-content: center; padding: 9px 8px; }
body.sidebar-collapsed .app-sidebar__user-summary { justify-content: center; padding: 8px 4px; }
body.sidebar-collapsed .app-sidebar__user[open] .app-sidebar__user-menu { display: none; }
body.sidebar-collapsed .app-sidebar__collapse-icon { transform: rotate(180deg); }
/* Tooltip cuando está colapsado */
body.sidebar-collapsed .sidebar-nav__link[data-title]:hover::after {
content: attr(data-title);
position: absolute;
left: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
background: var(--ap-gray-900);
color: #fff;
padding: 6px 10px;
border-radius: 6px;
font-size: var(--ap-text-footer);
font-weight: 500;
white-space: nowrap;
box-shadow: var(--ap-shadow-md);
z-index: 200;
pointer-events: none;
}
/* Mobile: sidebar overlay */
@media (max-width: 1023px) {
.app-sidebar {
position: fixed;
top: 0; left: 0;
height: 100vh;
transform: translateX(-100%);
transition: transform 280ms var(--ap-ease-snap);
box-shadow: var(--ap-shadow-lg);
}
body.sidebar-open .app-sidebar { transform: translateX(0); }
body.sidebar-open .app-sidebar__scrim {
display: block;
opacity: 1;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
}
.app-sidebar__scrim {
position: fixed; inset: 0;
z-index: 40;
opacity: 0;
transition: opacity 220ms var(--ap-ease-apple);
pointer-events: none;
}
body.sidebar-open .app-sidebar__scrim { pointer-events: auto; }
body.sidebar-collapsed .app-sidebar__scrim { display: none; }
}
/* ============ TOPBAR (glass) ============ */
.app-header {
position: sticky;
top: 0;
height: 56px;
background: var(--ap-glass-light);
backdrop-filter: var(--ap-blur-md);
-webkit-backdrop-filter: var(--ap-blur-md);
border-bottom: 1px solid var(--ap-gray-150);
box-shadow: none;
padding: 0 24px;
display: flex; align-items: center; justify-content: space-between;
z-index: 30;
color: var(--ap-gray-900);
transition: box-shadow 200ms var(--ap-ease-apple);
}
html[data-theme="dark"] .app-header { background: var(--ap-glass-dark); border-bottom-color: var(--ap-gray-200); color: var(--ap-gray-900); }
.app-header.is-scrolled { box-shadow: var(--ap-shadow-xs); }
.app-header__left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.app-header__user { display: flex; align-items: center; gap: 8px; }
.app-header__toggle {
display: none;
width: 36px; height: 36px;
background: none; border: none;
color: var(--ap-gray-700);
border-radius: var(--ap-radius-md);
cursor: pointer;
transition: background 140ms var(--ap-ease-apple);
align-items: center; justify-content: center;
}
.app-header__toggle:hover { background: var(--ap-gray-100); color: var(--ap-gray-900); }
.app-header__toggle .icon { width: 20px; height: 20px; }
@media (max-width: 1023px) { .app-header__toggle { display: flex; } }
.app-header__theme {
width: 36px; height: 36px;
background: none; border: none;
color: var(--ap-gray-700);
border-radius: var(--ap-radius-md);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 140ms var(--ap-ease-apple), color 140ms var(--ap-ease-apple);
}
.app-header__theme:hover { background: var(--ap-gray-100); color: var(--ap-gray-900); }
.app-header__theme .icon { width: 18px; height: 18px; }
.app-header__theme:focus-visible { outline: none; box-shadow: var(--ap-shadow-focus); }
/* Breadcrumb */
.app-header__breadcrumb { min-width: 0; overflow: hidden; }
.app-breadcrumb {
list-style: none; padding: 0; margin: 0;
display: flex; align-items: center; gap: 6px;
overflow: hidden;
}
.app-breadcrumb__item {
display: flex; align-items: center; gap: 6px;
min-width: 0;
}
.app-breadcrumb__link {
color: var(--ap-gray-500);
font-size: var(--ap-text-body);
text-decoration: none;
padding: 4px 8px;
border-radius: 6px;
transition: background 120ms var(--ap-ease-apple), color 120ms var(--ap-ease-apple);
letter-spacing: var(--ap-tracking-base);
white-space: nowrap;
}
.app-breadcrumb__link:hover { background: var(--ap-gray-100); color: var(--ap-gray-900); text-decoration: none; }
.app-breadcrumb__current {
color: var(--ap-gray-900);
font-size: var(--ap-text-body);
font-weight: 500;
padding: 4px 8px;
letter-spacing: var(--ap-tracking-base);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-breadcrumb__sep {
width: 14px; height: 14px;
color: var(--ap-gray-300);
flex-shrink: 0;
}
/* ============ MAIN ============ */
.app-main {
flex: 1;
background: var(--ap-gray-50);
padding: 32px 40px;
min-width: 0;
}
@media (max-width: 767px) {
.app-main { padding: 20px; }
.app-header { padding: 0 16px; }
}
/* ============ TOASTS top-right ============ */
.ap-toast-stack {
position: fixed;
top: 16px;
right: 16px;
display: flex; flex-direction: column;
gap: 10px;
z-index: 1000;
max-width: calc(100vw - 32px);
width: 380px;
}
@media (max-width: 480px) {
.ap-toast-stack { left: 16px; width: auto; }
}
.ap-toast {
display: flex; align-items: flex-start; gap: 10px;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: var(--ap-blur-md);
-webkit-backdrop-filter: var(--ap-blur-md);
color: var(--ap-gray-900);
border: 1px solid var(--ap-gray-150);
border-radius: var(--ap-radius-lg);
box-shadow: var(--ap-shadow-lg);
font-size: var(--ap-text-footer);
line-height: 1.4;
position: relative;
overflow: hidden;
animation: apToastIn 280ms var(--ap-ease-snap) forwards;
opacity: 0;
transform: translateX(20px);
}
html[data-theme="dark"] .ap-toast { background: rgba(28, 28, 30, 0.92); border-color: var(--ap-gray-200); color: var(--ap-gray-900); }
.ap-toast.is-leaving { animation: apToastOut 220ms var(--ap-ease-apple) forwards; }
.ap-toast__icon {
flex-shrink: 0;
width: 20px; height: 20px;
display: grid; place-items: center;
}
.ap-toast__icon .icon { width: 18px; height: 18px; }
.ap-toast--success .ap-toast__icon { color: var(--ap-green); }
.ap-toast--danger .ap-toast__icon { color: var(--ap-red); }
.ap-toast--warning .ap-toast__icon { color: var(--ap-orange); }
.ap-toast--info .ap-toast__icon { color: var(--ap-blue); }
.ap-toast__msg { flex: 1; padding-top: 1px; }
.ap-toast__close {
background: none; border: none;
width: 22px; height: 22px;
border-radius: 50%;
color: var(--ap-gray-500);
cursor: pointer;
font-size: 18px;
line-height: 1;
display: grid; place-items: center;
transition: background 120ms var(--ap-ease-apple), color 120ms var(--ap-ease-apple);
flex-shrink: 0;
}
.ap-toast__close:hover { background: var(--ap-gray-100); color: var(--ap-gray-900); }
.ap-toast__progress {
position: absolute;
bottom: 0; left: 0;
height: 2px;
background: var(--ap-gray-200);
width: 100%;
transform-origin: left center;
animation: apToastProgress 5000ms linear forwards;
}
.ap-toast--success .ap-toast__progress { background: var(--ap-green); }
.ap-toast--danger .ap-toast__progress { background: var(--ap-red); }
.ap-toast--warning .ap-toast__progress { background: var(--ap-orange); }
.ap-toast--info .ap-toast__progress { background: var(--ap-blue); }
.ap-toast:hover .ap-toast__progress { animation-play-state: paused; }
@keyframes apToastIn {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes apToastOut {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(20px); }
}
@keyframes apToastProgress {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
.ap-toast { animation: none !important; opacity: 1 !important; transform: none !important; }
.ap-toast__progress { animation: none !important; }
}
/* =============================================================================
APPLE CONTENT OVERRIDES (Fase 3 del rediseño)
Sobrescriben las clases legacy del contenido (cards, KPI strips, tablas,
forms, botones, tags, alerts, definition lists) con la estética Apple.
El shell ya quedó en la Fase 2; este bloque homologa lo que vive dentro
del .
========================================================================== */
/* ============ PAGE HEADER ============ */
.app-main .page-header {
margin-bottom: var(--space-8);
padding-bottom: 0;
border-bottom: none;
}
.app-main .page-header--row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-6);
flex-wrap: wrap;
}
.app-main .page-title {
font-size: var(--ap-text-title-1);
font-weight: 500;
line-height: 1.18;
letter-spacing: var(--ap-tracking-tight);
color: var(--ap-gray-900);
margin: 0 0 6px;
}
.app-main .page-subtitle {
font-size: var(--ap-text-body);
color: var(--ap-gray-500);
line-height: 1.5;
letter-spacing: var(--ap-tracking-base);
margin: 0;
max-width: 720px;
}
.app-main .page-header__actions {
display: flex; gap: 8px; align-items: center;
flex-shrink: 0;
}
/* ============ CARDS ============ */
.app-main .card {
background: #FFFFFF;
border: 1px solid var(--ap-gray-150);
border-radius: var(--ap-radius-xl);
padding: var(--space-6);
box-shadow: var(--ap-shadow-sm);
margin-bottom: var(--space-6);
transition: box-shadow 220ms var(--ap-ease-apple), border-color 220ms var(--ap-ease-apple);
}
html[data-theme="dark"] .app-main .card {
background: var(--ap-gray-100);
border-color: var(--ap-gray-150);
}
.app-main .card:hover { border-color: var(--ap-gray-200); }
.app-main .card--muted {
background: var(--ap-gray-100);
border-color: var(--ap-gray-150);
}
.app-main .card__title {
font-size: var(--ap-text-title-3);
font-weight: 500;
color: var(--ap-gray-900);
margin: 0 0 var(--space-4);
letter-spacing: var(--ap-tracking-tight);
line-height: 1.3;
}
.app-main .card__body { color: var(--ap-gray-900); line-height: 1.55; font-size: var(--ap-text-body); }
/* ============ KPI STRIP (patrón A: card unificada con divisores) ============
Refinamiento premium Apple/Stripe-grade:
- Gradiente sutil de fondo en la card unificada (más viva que blanco plano).
- Cada celda con padding generoso, número hero con gradiente de texto,
label caption uppercase con tracking ancho.
- Hover: glow lateral del color brand y leve scale del número.
- Soporte CSS para elementos opcionales: .kpi-card__icon (icono arriba),
.kpi-card__delta (trend ↑/↓), .kpi-card__hint (sublabel debajo).
============================================================================== */
.app-main .kpi-strip {
background:
linear-gradient(135deg, rgba(31, 56, 100, 0.018) 0%, rgba(31, 56, 100, 0) 60%),
#FFFFFF;
border: 1px solid var(--ap-gray-150);
border-radius: var(--ap-radius-2xl);
box-shadow: var(--ap-shadow-sm);
margin-bottom: var(--space-6);
display: flex;
align-items: stretch;
overflow: hidden;
position: relative;
/* sin gap — los hijos se pegan y separan por border-left */
}
html[data-theme="dark"] .app-main .kpi-strip {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 60%),
var(--ap-gray-100);
border-color: var(--ap-gray-150);
}
.app-main .kpi-strip > .kpi-card {
flex: 1 1 0;
min-width: 0;
margin: 0;
padding: var(--space-6) var(--space-5);
background: transparent;
border: 0;
border-left: 1px solid var(--ap-gray-150);
border-radius: 0;
box-shadow: none;
display: flex; flex-direction: column;
align-items: flex-start;
gap: 8px;
transition: background 220ms var(--ap-ease-apple),
box-shadow 220ms var(--ap-ease-apple);
position: relative;
overflow: hidden;
}
.app-main .kpi-strip > .kpi-card:first-child { border-left: 0; }
/* Glow sutil al hover: tinte del brand-primary en la esquina superior */
.app-main .kpi-strip > .kpi-card::before {
content: "";
position: absolute;
top: -50%;
left: 50%;
width: 120%;
height: 90%;
background: radial-gradient(ellipse at center, rgba(31, 56, 100, 0.10) 0%, transparent 60%);
transform: translateX(-50%);
opacity: 0;
transition: opacity 320ms var(--ap-ease-apple);
pointer-events: none;
filter: blur(10px);
}
.app-main .kpi-strip > .kpi-card:hover {
background: var(--ap-gray-50);
box-shadow: inset 0 -2px 0 var(--ap-brand-accent);
}
.app-main .kpi-strip > .kpi-card:hover::before { opacity: 1; }
html[data-theme="dark"] .app-main .kpi-strip > .kpi-card:hover {
background: rgba(255, 255, 255, 0.03);
}
/* Icono opcional arriba (si la vista lo incluye con .kpi-card__icon) */
.app-main .kpi-card__icon {
width: 32px; height: 32px;
border-radius: var(--ap-radius-md);
background: var(--ap-navy-50);
color: var(--ap-brand-primary);
display: grid; place-items: center;
margin-bottom: 4px;
flex-shrink: 0;
}
.app-main .kpi-card__icon .icon { width: 18px; height: 18px; }
.app-main .kpi-card__label {
font-size: 11px;
color: var(--ap-gray-500);
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
line-height: 1.2;
margin-bottom: 4px;
}
.app-main .kpi-card__value {
font-size: 36px;
font-weight: 500;
color: var(--ap-gray-900);
letter-spacing: -0.022em;
line-height: 1;
font-variant-numeric: tabular-nums;
font-feature-settings: "ss01", "cv11", "tnum";
transition: transform 220ms var(--ap-ease-apple);
margin: 2px 0;
background: linear-gradient(135deg, var(--ap-gray-900) 0%, #424245 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
html[data-theme="dark"] .app-main .kpi-card__value {
background: linear-gradient(135deg, #FFFFFF 0%, #C7C7CC 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.app-main .kpi-strip > .kpi-card:hover .kpi-card__value {
transform: scale(1.015);
}
/* Delta opcional (trend ↑/↓) — pill compacto bajo el número */
.app-main .kpi-card__delta {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: var(--ap-radius-pill);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
background: var(--ap-gray-100);
color: var(--ap-gray-700);
}
.app-main .kpi-card__delta--up { background: rgba(48, 209, 88, 0.12); color: #1A7F3A; }
.app-main .kpi-card__delta--down { background: rgba(255, 59, 48, 0.10); color: #B91C1C; }
.app-main .kpi-card__delta--flat { background: var(--ap-gray-100); color: var(--ap-gray-500); }
/* Hint opcional al fondo (sublabel) */
.app-main .kpi-card__hint {
font-size: 12px;
color: var(--ap-gray-500);
line-height: 1.4;
letter-spacing: var(--ap-tracking-base);
margin-top: 2px;
}
/* Variante hero: cuando hay un solo KPI dominante, ocupa más aire */
.app-main .kpi-strip--hero > .kpi-card {
padding: var(--space-10) var(--space-8);
align-items: center;
text-align: center;
}
.app-main .kpi-strip--hero .kpi-card__value { font-size: 56px; }
/* Mobile: stack vertical, divisores horizontales */
@media (max-width: 767px) {
.app-main .kpi-strip { flex-direction: column; }
.app-main .kpi-strip > .kpi-card {
border-left: 0;
border-top: 1px solid var(--ap-gray-150);
padding: var(--space-5);
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.app-main .kpi-strip > .kpi-card:first-child { border-top: 0; }
.app-main .kpi-card__label { margin-bottom: 0; flex: 1; }
.app-main .kpi-card__value { margin: 0; }
}
/* ============ TABLAS ============ */
.app-main .data-table {
width: 100%;
border-collapse: collapse;
font-size: var(--ap-text-footer);
color: var(--ap-gray-900);
}
.app-main .data-table thead th {
text-align: left;
padding: 10px var(--space-4);
background: transparent;
border-bottom: 1px solid var(--ap-gray-200);
color: var(--ap-gray-500);
font-weight: 500;
font-size: var(--ap-text-caption);
text-transform: uppercase;
letter-spacing: var(--ap-tracking-wide);
white-space: nowrap;
}
.app-main .data-table thead th[aria-sort] { cursor: pointer; user-select: none; transition: color 120ms; }
.app-main .data-table thead th[aria-sort]:hover { color: var(--ap-gray-900); background: transparent; }
.app-main .data-table thead th[aria-sort="ascending"]::after { content: " ↑"; color: var(--ap-brand-primary); }
.app-main .data-table thead th[aria-sort="descending"]::after { content: " ↓"; color: var(--ap-brand-primary); }
.app-main .data-table tbody td {
padding: 12px var(--space-4);
border-bottom: 1px solid var(--ap-gray-150);
color: var(--ap-gray-900);
line-height: 1.5;
vertical-align: middle;
}
.app-main .data-table tbody tr {
transition: background 120ms var(--ap-ease-apple);
}
.app-main .data-table tbody tr:hover { background: var(--ap-gray-50); }
.app-main .data-table tbody tr:last-child td { border-bottom: 0; }
/* Tabla dentro de card: sin padding doble */
.app-main .card > .data-table { margin: 0 calc(var(--space-6) * -1); width: calc(100% + var(--space-6) * 2); }
.app-main .card > .data-table thead th:first-child,
.app-main .card > .data-table tbody td:first-child { padding-left: var(--space-6); }
.app-main .card > .data-table thead th:last-child,
.app-main .card > .data-table tbody td:last-child { padding-right: var(--space-6); }
/* ============ BOTONES ============ */
.app-main .btn,
.app-main .button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 14px;
font-family: inherit;
font-size: var(--ap-text-footer);
font-weight: 500;
letter-spacing: var(--ap-tracking-base);
border-radius: var(--ap-radius-md);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
line-height: 1.2;
transition: background 140ms var(--ap-ease-apple), color 140ms var(--ap-ease-apple),
border-color 140ms var(--ap-ease-apple), transform 100ms var(--ap-ease-apple),
box-shadow 140ms var(--ap-ease-apple);
white-space: nowrap;
box-shadow: none;
}
.app-main .btn:hover,
.app-main .button:hover { text-decoration: none; }
.app-main .btn:active,
.app-main .button:active { transform: translateY(0.5px); }
.app-main .btn:focus-visible,
.app-main .button:focus-visible { outline: none; box-shadow: var(--ap-shadow-focus); }
.app-main .btn[disabled],
.app-main .btn:disabled,
.app-main .button[disabled],
.app-main .button:disabled { opacity: 0.5; cursor: not-allowed; }
.app-main .btn .icon,
.app-main .button .icon { width: 14px; height: 14px; flex-shrink: 0; }
.app-main .btn--primary {
background: var(--ap-brand-primary);
color: #FFFFFF;
border-color: transparent;
box-shadow: var(--ap-shadow-xs);
}
.app-main .btn--primary:hover { background: var(--ap-navy-700); box-shadow: var(--ap-shadow-sm); transform: translateY(-1px); color: #fff; }
.app-main .btn--primary:active { transform: translateY(0); }
.app-main .btn--accent {
background: var(--ap-brand-accent);
color: #FFFFFF;
}
.app-main .btn--accent:hover { background: var(--ap-brand-primary); color: #fff; }
.app-main .btn--secondary {
background: var(--ap-gray-100);
color: var(--ap-gray-900);
border-color: transparent;
}
.app-main .btn--secondary:hover { background: var(--ap-gray-150); color: var(--ap-gray-900); }
.app-main .btn--ghost {
background: transparent;
color: var(--ap-gray-700);
border-color: transparent;
}
.app-main .btn--ghost:hover { background: var(--ap-gray-100); color: var(--ap-gray-900); border-color: transparent; }
.app-main .btn--muted {
background: transparent;
color: var(--ap-gray-500);
border: 1px solid var(--ap-gray-200);
}
.app-main .btn--muted:hover { background: var(--ap-gray-100); color: var(--ap-gray-900); border-color: var(--ap-gray-300); }
.app-main .btn--danger {
background: var(--ap-red);
color: #FFFFFF;
}
.app-main .btn--danger:hover { background: #E62E25; color: #fff; }
.app-main .btn--small,
.app-main .button--small { padding: 5px 10px; font-size: var(--ap-text-caption); gap: 5px; border-radius: 8px; }
.app-main .btn--small .icon,
.app-main .button--small .icon { width: 13px; height: 13px; }
.app-main .btn--block { display: flex; width: 100%; }
/* ============ FORMS ============ */
.app-main .form-group { margin-bottom: var(--space-5); }
.app-main .form-row {
display: flex; gap: var(--space-4); flex-wrap: wrap;
}
.app-main .form-row > .form-group { flex: 1; min-width: 200px; margin-bottom: 0; }
.app-main .form-label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: var(--ap-gray-700);
font-size: var(--ap-text-footer);
letter-spacing: var(--ap-tracking-base);
}
.app-main .form-input,
.app-main .form-select,
.app-main .form-textarea {
width: 100%;
padding: 9px 12px;
background: var(--ap-gray-100);
border: 1px solid transparent;
border-radius: var(--ap-radius-md);
font-family: inherit;
font-size: var(--ap-text-body);
color: var(--ap-gray-900);
line-height: 1.4;
letter-spacing: var(--ap-tracking-base);
transition: background 140ms var(--ap-ease-apple), border-color 140ms var(--ap-ease-apple),
box-shadow 140ms var(--ap-ease-apple);
box-shadow: none;
}
html[data-theme="dark"] .app-main .form-input,
html[data-theme="dark"] .app-main .form-select,
html[data-theme="dark"] .app-main .form-textarea {
background: var(--ap-gray-150);
color: var(--ap-gray-900);
}
.app-main .form-input::placeholder { color: var(--ap-gray-500); }
.app-main .form-input:hover,
.app-main .form-select:hover,
.app-main .form-textarea:hover { background: var(--ap-gray-150); }
.app-main .form-input:focus,
.app-main .form-select:focus,
.app-main .form-textarea:focus {
outline: none;
background: #FFFFFF;
border-color: var(--ap-brand-primary);
box-shadow: var(--ap-shadow-focus);
}
html[data-theme="dark"] .app-main .form-input:focus,
html[data-theme="dark"] .app-main .form-select:focus,
html[data-theme="dark"] .app-main .form-textarea:focus {
background: var(--ap-gray-200);
}
.app-main .form-input--error,
.app-main .form-select--error {
border-color: var(--ap-red);
background: rgba(255, 59, 48, 0.04);
}
.app-main .form-error {
color: var(--ap-red);
font-size: var(--ap-text-caption);
margin: 6px 0 0;
line-height: 1.4;
}
.app-main .form-help {
color: var(--ap-gray-500);
font-size: var(--ap-text-caption);
margin: 6px 0 0;
line-height: 1.4;
letter-spacing: var(--ap-tracking-base);
}
.app-main .form-section-title {
font-size: var(--ap-text-title-3);
font-weight: 500;
color: var(--ap-gray-900);
margin: var(--space-8) 0 var(--space-4);
letter-spacing: var(--ap-tracking-tight);
padding-top: var(--space-4);
border-top: 1px solid var(--ap-gray-150);
}
.app-main .form-actions {
margin-top: var(--space-6);
padding-top: var(--space-5);
border-top: 1px solid var(--ap-gray-150);
display: flex; gap: 8px; justify-content: flex-end;
}
/* ============ TAGS / PILLS ============ */
.app-main .tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: var(--ap-radius-pill);
font-size: var(--ap-text-caption);
font-weight: 500;
letter-spacing: var(--ap-tracking-base);
line-height: 1.4;
background: var(--ap-gray-100);
color: var(--ap-gray-700);
border: 0;
text-transform: none;
}
.app-main .tag--success { background: rgba(48, 209, 88, 0.12); color: #1A7F3A; }
.app-main .tag--warning { background: rgba(255, 159, 10, 0.14); color: #B4530B; }
.app-main .tag--danger { background: rgba(255, 59, 48, 0.10); color: #B91C1C; }
.app-main .tag--info { background: var(--ap-navy-50); color: var(--ap-navy-700); }
.app-main .tag--accent { background: var(--ap-navy-50); color: var(--ap-brand-primary); }
.app-main .tag--muted { background: var(--ap-gray-100); color: var(--ap-gray-500); }
html[data-theme="dark"] .app-main .tag--success { color: #4ADE80; }
html[data-theme="dark"] .app-main .tag--warning { color: #FBBF24; }
html[data-theme="dark"] .app-main .tag--danger { color: #FCA5A5; }
/* ============ ALERTS inline ============ */
.app-main .alert {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
border-radius: var(--ap-radius-md);
border: 0;
border-left: 0;
font-size: var(--ap-text-footer);
line-height: 1.5;
margin-bottom: var(--space-4);
letter-spacing: var(--ap-tracking-base);
}
.app-main .alert .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.app-main .alert--success { background: rgba(48, 209, 88, 0.10); color: #166534; }
.app-main .alert--info { background: var(--ap-navy-50); color: var(--ap-navy-700); }
.app-main .alert--warning { background: rgba(255, 159, 10, 0.12); color: #92400E; }
.app-main .alert--danger { background: rgba(255, 59, 48, 0.08); color: #991B1B; }
html[data-theme="dark"] .app-main .alert--success { color: #4ADE80; }
html[data-theme="dark"] .app-main .alert--warning { color: #FBBF24; }
html[data-theme="dark"] .app-main .alert--danger { color: #FCA5A5; }
html[data-theme="dark"] .app-main .alert--info { color: var(--ap-navy-700); }
/* ============ DEFINITION LIST ============ */
.app-main .definition-list {
display: grid;
grid-template-columns: max-content 1fr;
gap: 8px var(--space-6);
margin: 0;
}
.app-main .definition-list dt {
color: var(--ap-gray-500);
font-size: var(--ap-text-caption);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--ap-tracking-wide);
padding: 6px 0;
margin: 0;
}
.app-main .definition-list dd {
color: var(--ap-gray-900);
font-size: var(--ap-text-body);
margin: 0;
padding: 6px 0;
letter-spacing: var(--ap-tracking-base);
}
/* ============ MUTED + EMPTY STATES ============ */
.app-main .muted {
color: var(--ap-gray-500);
font-size: var(--ap-text-footer);
letter-spacing: var(--ap-tracking-base);
}
.app-main .empty-state {
text-align: center;
padding: var(--space-10) var(--space-4);
color: var(--ap-gray-500);
}
.app-main .empty-state__icon {
width: 48px; height: 48px;
margin: 0 auto var(--space-4);
color: var(--ap-gray-300);
stroke-width: 1.5;
}
.app-main .empty-state__title {
font-size: var(--ap-text-callout);
color: var(--ap-gray-700);
font-weight: 500;
margin: 0 0 6px;
}
.app-main .empty-state__desc {
font-size: var(--ap-text-footer);
color: var(--ap-gray-500);
margin: 0 0 var(--space-4);
max-width: 360px;
margin-left: auto;
margin-right: auto;
line-height: 1.5;
}
/* ============ GRID DE CARDS LINK (panel /er, /config, etc.) ============ */
.app-main .grid-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-4);
}
.app-main .card-link {
display: block;
padding: var(--space-6);
background: #FFFFFF;
border: 1px solid var(--ap-gray-150);
border-radius: var(--ap-radius-xl);
box-shadow: var(--ap-shadow-xs);
text-decoration: none;
color: var(--ap-gray-900);
transition: box-shadow 220ms var(--ap-ease-apple), transform 220ms var(--ap-ease-apple), border-color 220ms var(--ap-ease-apple);
position: relative;
}
html[data-theme="dark"] .app-main .card-link {
background: var(--ap-gray-100);
border-color: var(--ap-gray-150);
}
.app-main .card-link:hover {
box-shadow: var(--ap-shadow-md);
transform: translateY(-2px);
text-decoration: none;
border-color: var(--ap-gray-200);
}
.app-main .card-link__title {
font-size: var(--ap-text-callout);
font-weight: 500;
color: var(--ap-gray-900);
margin: 0 0 6px;
letter-spacing: var(--ap-tracking-tight);
}
.app-main .card-link__desc {
font-size: var(--ap-text-footer);
color: var(--ap-gray-500);
line-height: 1.5;
margin: 0;
}
.app-main .card-link__meta {
font-size: var(--ap-text-caption);
color: var(--ap-gray-500);
line-height: 1.4;
margin: 8px 0 0;
letter-spacing: var(--ap-tracking-base);
}
.app-main .card-link__arrow {
position: absolute;
top: var(--space-6); right: var(--space-6);
color: var(--ap-gray-300);
font-size: 20px;
line-height: 1;
transition: transform 220ms var(--ap-ease-apple), color 220ms var(--ap-ease-apple);
}
.app-main .card-link:hover .card-link__arrow {
color: var(--ap-brand-primary);
transform: translateX(2px);
}
/* ============ PAGE SECTION ============ */
.app-main .page-section { max-width: 1280px; margin: 0 auto; }
.app-main .page-section--narrow { max-width: 840px; }
/* ============ PALETTE PICKER (config/apariencia) ============ */
.palette-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-3);
margin: 0 0 var(--space-6);
}
.palette-card {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
background: #FFFFFF;
border: 1px solid var(--ap-gray-150);
border-radius: var(--ap-radius-md);
cursor: pointer;
text-align: left;
font-family: inherit;
transition: border-color 140ms var(--ap-ease-apple), background 140ms var(--ap-ease-apple),
box-shadow 140ms var(--ap-ease-apple), transform 100ms var(--ap-ease-apple);
position: relative;
}
html[data-theme="dark"] .palette-card { background: var(--ap-gray-100); border-color: var(--ap-gray-150); }
.palette-card:hover {
border-color: var(--ap-gray-300);
box-shadow: var(--ap-shadow-sm);
transform: translateY(-1px);
}
.palette-card:active { transform: translateY(0); }
.palette-card--active {
border-color: var(--ap-brand-primary);
box-shadow: 0 0 0 1px var(--ap-brand-primary), var(--ap-shadow-sm);
}
.palette-card__preview {
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--ap-gray-150);
flex-shrink: 0;
width: 36px;
height: 36px;
}
.palette-card__swatch {
flex: 1;
display: block;
}
.palette-card__body {
display: flex; flex-direction: column;
gap: 2px;
flex: 1; min-width: 0;
}
.palette-card__name {
font-size: var(--ap-text-footer);
font-weight: 500;
color: var(--ap-gray-900);
letter-spacing: var(--ap-tracking-base);
}
.palette-card__desc {
font-size: var(--ap-text-caption);
color: var(--ap-gray-500);
line-height: 1.4;
}
.palette-card__check {
width: 22px; height: 22px;
border-radius: 50%;
background: var(--ap-brand-primary);
color: #fff;
display: grid; place-items: center;
flex-shrink: 0;
}
.palette-card__check svg { width: 14px; height: 14px; }
/* =============================================================================
APPLE DARK MODE OVERRIDES (Fase 3 fix)
Las clases legacy (panel-hero, section-heading, kpi-card__header, etc.)
asumen tokens legacy --white/--navy que en dark mode se invierten. Aquí
forzamos colores fijos para que se vean correctas en ambos modos.
========================================================================== */
/* Panel hero (saludo del dashboard): gradiente navy fijo, texto blanco fijo */
html[data-theme="dark"] .app-main .panel-hero {
background: linear-gradient(135deg, #1F3864 0%, #2A4F8B 100%);
color: #FFFFFF;
box-shadow: var(--ap-shadow-md);
}
html[data-theme="dark"] .app-main .panel-hero__title {
color: #FFFFFF;
-webkit-text-fill-color: #FFFFFF;
background: none;
}
html[data-theme="dark"] .app-main .panel-hero__subtitle {
color: rgba(255, 255, 255, 0.85);
}
html[data-theme="dark"] .app-main .panel-hero__eyebrow {
color: rgba(255, 255, 255, 0.75);
}
html[data-theme="dark"] .app-main .panel-hero__eyebrow .icon {
color: rgba(255, 255, 255, 0.75);
}
html[data-theme="dark"] .app-main .panel-hero__meta {
background: rgba(255, 255, 255, 0.10);
color: #FFFFFF;
border-color: rgba(255, 255, 255, 0.18);
}
html[data-theme="dark"] .app-main .panel-hero__meta .icon { color: rgba(255, 255, 255, 0.85); }
html[data-theme="dark"] .app-main .panel-hero__meta strong { color: #FFFFFF; }
html[data-theme="dark"] .app-main .panel-hero__meta .muted { color: rgba(255, 255, 255, 0.65); }
/* Light mode también: texto blanco fijo en el hero (era frágil con --white legacy) */
html[data-theme="light"] .app-main .panel-hero__title,
.app-main .panel-hero__title {
color: #FFFFFF;
-webkit-text-fill-color: #FFFFFF;
background: none;
}
.app-main .panel-hero__subtitle { color: rgba(255, 255, 255, 0.90); }
.app-main .panel-hero__eyebrow { color: rgba(255, 255, 255, 0.78); }
.app-main .panel-hero__eyebrow .icon { color: rgba(255, 255, 255, 0.78); }
/* Section heading: que se vea bien en dark */
html[data-theme="dark"] .app-main .section-heading {
color: var(--ap-gray-900);
border-bottom-color: var(--ap-gray-200);
}
html[data-theme="dark"] .app-main .section-heading .icon {
color: var(--ap-brand-accent);
}
html[data-theme="dark"] .app-main .section-heading__link {
color: var(--ap-gray-500);
}
html[data-theme="dark"] .app-main .section-heading__link:hover {
color: var(--ap-gray-900);
}
/* KPI cards del panel (estructura distinta a las KPIs apple-tuned).
Tienen header con icono+label, value abajo, variantes --accent/--success/etc. */
html[data-theme="dark"] .app-main .kpi-card__header {
color: var(--ap-gray-700);
}
html[data-theme="dark"] .app-main .kpi-card__icon {
background: var(--ap-navy-100);
color: var(--ap-gray-700);
}
html[data-theme="dark"] .app-main .kpi-card__label {
color: var(--ap-gray-500);
}
html[data-theme="dark"] .app-main .kpi-card__value {
color: var(--ap-gray-900);
-webkit-text-fill-color: var(--ap-gray-900);
}
/* Variantes de color del panel KPIs en dark */
html[data-theme="dark"] .app-main .kpi-card--accent .kpi-card__icon { background: rgba(74,107,160,0.20); color: #8DA9D8; }
html[data-theme="dark"] .app-main .kpi-card--accent .kpi-card__value { color: #8DA9D8; -webkit-text-fill-color: #8DA9D8; }
html[data-theme="dark"] .app-main .kpi-card--success .kpi-card__icon { background: rgba(48,209,88,0.18); color: #4ADE80; }
html[data-theme="dark"] .app-main .kpi-card--success .kpi-card__value { color: #4ADE80; -webkit-text-fill-color: #4ADE80; }
html[data-theme="dark"] .app-main .kpi-card--danger .kpi-card__icon { background: rgba(255,59,48,0.18); color: #FCA5A5; }
html[data-theme="dark"] .app-main .kpi-card--danger .kpi-card__value { color: #FCA5A5; -webkit-text-fill-color: #FCA5A5; }
html[data-theme="dark"] .app-main .kpi-card--warning .kpi-card__icon { background: rgba(255,159,10,0.18); color: #FBBF24; }
html[data-theme="dark"] .app-main .kpi-card--warning .kpi-card__value { color: #FBBF24; -webkit-text-fill-color: #FBBF24; }
html[data-theme="dark"] .app-main .kpi-card--info .kpi-card__icon { background: rgba(10,132,255,0.18); color: #93C5FD; }
html[data-theme="dark"] .app-main .kpi-card--info .kpi-card__value { color: #93C5FD; -webkit-text-fill-color: #93C5FD; }
/* Topbar dark: distinguirla del sidebar dark */
html[data-theme="dark"] .app-header {
background: rgba(29, 29, 31, 0.78);
border-bottom-color: var(--ap-gray-200);
}
html[data-theme="dark"] .app-header__theme,
html[data-theme="dark"] .app-header__toggle {
color: var(--ap-gray-700);
}
html[data-theme="dark"] .app-header__theme:hover,
html[data-theme="dark"] .app-header__toggle:hover {
background: var(--ap-gray-150);
color: var(--ap-gray-900);
}
html[data-theme="dark"] .app-breadcrumb__link { color: var(--ap-gray-500); }
html[data-theme="dark"] .app-breadcrumb__link:hover { background: var(--ap-gray-150); color: var(--ap-gray-900); }
html[data-theme="dark"] .app-breadcrumb__current { color: var(--ap-gray-900); }
html[data-theme="dark"] .app-breadcrumb__sep { color: var(--ap-gray-300); }
/* Page title del main en dark mode (sin gradient de texto que quedaba opaco) */
html[data-theme="dark"] .app-main .kpi-card__value {
background: linear-gradient(135deg, #FFFFFF 0%, #C7C7CC 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Excepción: si la cifra ya tiene un color sólido inline (status), no aplicar
gradiente. APLICA EN AMBOS TEMAS — el gradient text-fill default del
kpi-card__value (gris-negro) sobrescribe el color de la variante en light
mode también, perdiendo la semántica de status (verde/rojo/etc). */
.app-main .kpi-card--accent .kpi-card__value,
.app-main .kpi-card--success .kpi-card__value,
.app-main .kpi-card--danger .kpi-card__value,
.app-main .kpi-card--warning .kpi-card__value,
.app-main .kpi-card--info .kpi-card__value {
background: none;
-webkit-background-clip: initial;
background-clip: initial;
-webkit-text-fill-color: initial;
}
/* Light mode: colores de status con paleta legacy (--success/--danger/etc.) */
html[data-theme="light"] .app-main .kpi-card--accent .kpi-card__value,
.app-main .kpi-card--accent .kpi-card__value { color: var(--ap-brand-primary); -webkit-text-fill-color: var(--ap-brand-primary); }
html[data-theme="light"] .app-main .kpi-card--success .kpi-card__value,
.app-main .kpi-card--success .kpi-card__value { color: #1A7F3A; -webkit-text-fill-color: #1A7F3A; }
html[data-theme="light"] .app-main .kpi-card--danger .kpi-card__value,
.app-main .kpi-card--danger .kpi-card__value { color: #B91C1C; -webkit-text-fill-color: #B91C1C; }
html[data-theme="light"] .app-main .kpi-card--warning .kpi-card__value,
.app-main .kpi-card--warning .kpi-card__value { color: #B4530B; -webkit-text-fill-color: #B4530B; }
html[data-theme="light"] .app-main .kpi-card--info .kpi-card__value,
.app-main .kpi-card--info .kpi-card__value { color: var(--ap-brand-accent); -webkit-text-fill-color: var(--ap-brand-accent); }
/* Dark mode: tonos más claros para contrastar con el bg charcoal */
html[data-theme="dark"] .app-main .kpi-card--accent .kpi-card__value { color: #8DA9D8; -webkit-text-fill-color: #8DA9D8; }
html[data-theme="dark"] .app-main .kpi-card--success .kpi-card__value { color: #4ADE80; -webkit-text-fill-color: #4ADE80; }
html[data-theme="dark"] .app-main .kpi-card--danger .kpi-card__value { color: #FCA5A5; -webkit-text-fill-color: #FCA5A5; }
html[data-theme="dark"] .app-main .kpi-card--warning .kpi-card__value { color: #FBBF24; -webkit-text-fill-color: #FBBF24; }
html[data-theme="dark"] .app-main .kpi-card--info .kpi-card__value { color: #93C5FD; -webkit-text-fill-color: #93C5FD; }
/* Iconos de las variantes en light mode (en dark ya están bien definidos arriba) */
html[data-theme="light"] .app-main .kpi-card--accent .kpi-card__icon,
.app-main .kpi-card--accent .kpi-card__icon { background: var(--ap-navy-50); color: var(--ap-brand-primary); }
html[data-theme="light"] .app-main .kpi-card--success .kpi-card__icon,
.app-main .kpi-card--success .kpi-card__icon { background: rgba(48,209,88,0.12); color: #1A7F3A; }
html[data-theme="light"] .app-main .kpi-card--danger .kpi-card__icon,
.app-main .kpi-card--danger .kpi-card__icon { background: rgba(255,59,48,0.10); color: #B91C1C; }
html[data-theme="light"] .app-main .kpi-card--warning .kpi-card__icon,
.app-main .kpi-card--warning .kpi-card__icon { background: rgba(255,159,10,0.14); color: #B4530B; }
html[data-theme="light"] .app-main .kpi-card--info .kpi-card__icon,
.app-main .kpi-card--info .kpi-card__icon { background: var(--ap-navy-50); color: var(--ap-brand-accent); }