/* Variables de colores base - Paleta moderna y profesional */
:root {
/* Primarios - Azul marino #143765 */
--primary-color: #143765;
--primary-light: #4d7ab0;
--primary-dark: #0e2649;
--primary-hover: #0e2649;
--primary-foreground: #ffffff;
/* Secundarios - Azul vibrante */
--secondary-color: #0098ff;
--secondary-light: #33aeff;
--secondary-dark: #0077cc;
--secondary-foreground: #ffffff;
/* Acentos - Azul vibrante #0098ff */
--accent-color: #0098ff;
--accent-light: #33aeff;
--accent-dark: #0077cc;
--accent-foreground: #ffffff;
/* Estados - Colores semánticos modernos */
--success-color: #10b981;
--success-background: #d1fae5;
--success-foreground: #065f46;
--success-light: #34d399;
--success-dark: #059669;
--warning-color: #f59e0b;
--warning-background: #fef3c7;
--warning-foreground: #78350f;
--warning-light: #fbbf24;
--warning-dark: #d97706;
--danger-color: #ef4444;
--danger-background: #fee2e2;
--danger-foreground: #991b1b;
--danger-light: #f87171;
--danger-dark: #dc2626;
--info-color: #0098ff;
--info-background: #e0f3ff;
--info-foreground: #0e2649;
--info-light: #33aeff;
--info-dark: #0077cc;
/* Texto - Mayor contraste y legibilidad */
--text-color: #071c36;
--text-light: #ffffff;
--text-muted: #6e82a0;
--text-secondary: #4a5f7a;
--error-text: #dc2626;
--success-text: #059669;
/* Fondos - Más limpios y modernos */
--background-color: #f4f6fa;
--secondary-background: #edf0f5;
--surface-color: #ffffff;
--surface-alt-color: #f4f6fa;
--card-bg-color: #ffffff;
--card-category-bg-color: #edf0f5;
--card-category-selected-color: #143765;
--card-aditional-bg-color: #f4f6fa;
--selected-aditional-color: #143765;
--overlay-color: rgba(7, 28, 54, 0.6);
/* Bordes y divisores - Más sutiles */
--border-color: #d0d8e4;
--border-light: #edf0f5;
--divider-color: #d0d8e4;
--focus-color: #143765;
--focus-ring: rgba(20, 55, 101, 0.3);
/* Estados interactivos */
--highlight-color: #143765;
--hover-color: #0e2649;
--hover-background-color: #e8eef7;
--selected-color: #143765;
--active-color: #071c36;
/* Deshabilitado */
--disabled-color: #a8b5c8;
--disabled-background: #edf0f5;
/* Sombra y elevación */
--shadow-xs: 0 1px 2px 0 rgba(7, 28, 54, 0.05);
--shadow-sm: 0 1px 3px 0 rgba(7, 28, 54, 0.1), 0 1px 2px -1px rgba(7, 28, 54, 0.1);
--shadow-md: 0 4px 6px -1px rgba(7, 28, 54, 0.1), 0 2px 4px -2px rgba(7, 28, 54, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(7, 28, 54, 0.1), 0 4px 6px -4px rgba(7, 28, 54, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(7, 28, 54, 0.1), 0 8px 10px -6px rgba(7, 28, 54, 0.1);
--shadow-color: rgba(7, 28, 54, 0.1);
--shadow-glow: 0 12px 32px rgba(0, 152, 255, 0.22);
/* Links y badges */
--link-color: #143765;
--link-hover-color: #0e2649;
--link-hover-text-color: #0e2649;
--badge-color: #ffffff;
--badge-bg: #143765;
--badge-overlay-bg: rgba(7, 28, 54, 0.85);
--badge-overlay-border: rgba(255, 255, 255, 0.1);
/* Tablas */
--table-header-bg: #f4f6fa;
--table-header-text: #071c36;
--table-row-hover: #edf0f5;
--table-border: #d0d8e4;
/* Eventos */
--events-pill-bg: rgba(255, 255, 255, 0.92);
--events-pill-border: rgba(208, 216, 228, 0.8);
--events-pill-shadow: 0 2px 16px rgba(7, 28, 54, 0.10), 0 1px 4px rgba(7, 28, 54, 0.07);
--events-card-accent: var(--primary-color);
--events-card-image-bg: var(--surface-alt-color);
/* Glassmorphism */
--glass-bg: rgba(255, 255, 255, 0.72);
--glass-border: rgba(255, 255, 255, 0.45);
--glass-blur: 16px;
/* Gradientes */
--gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
--gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-light) 100%);
--gradient-surface: linear-gradient(180deg, var(--surface-color) 0%, var(--surface-alt-color) 100%);
/* TopBar premium - frosted glass */
--topbar-bg: rgba(255, 255, 255, 0.88);
--topbar-border: rgba(208, 216, 228, 0.7);
--topbar-shadow: 0 1px 3px rgba(7, 28, 54, 0.06), 0 4px 16px rgba(7, 28, 54, 0.04);
--topbar-accent-gradient: linear-gradient(90deg, #143765 0%, #0098ff 50%, #4d7ab0 100%);
--topbar-height: 64px;
--topbar-nav-link-color: #4a5f7a;
--topbar-nav-link-hover-bg: #edf0f5;
--topbar-nav-link-hover-color: #143765;
--topbar-nav-link-hover-border: #d0d8e4;
--topbar-dropdown-hover-bg: #edf0f5;
/* Sidebar */
--sidebar-header-bg: var(--surface-alt-color);
--sidebar-active-bg: rgba(20, 55, 101, 0.08);
--sidebar-active-border: var(--primary-color);
/* Card */
--card-hover-border: rgba(20, 55, 101, 0.2);
--card-accent-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
/* Texturas */
--texture-dot-color: rgba(20, 55, 101, 0.045);
--texture-line-color: rgba(0, 152, 255, 0.06);
--accent-glow: rgba(0, 152, 255, 0.12);
/* Gold para premios */
--gold-color: #f59e0b;
/* Layouts */
--split-left-bg: linear-gradient(135deg, #143765 0%, #0e2649 50%, #1a4a7a 100%);
--split-right-bg: #ffffff;
--header-bg-banner: linear-gradient(175deg, #143765 0%, #0e2649 50%, #1a4a7a 100%);
/* Filtro de logo */
--filter-color-logo: none;
}
/* Modo oscuro automático */
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--primary-color: #2d6aad;
--primary-light: #4d8ec7;
--primary-dark: #1a4f8a;
--primary-hover: #4d8ec7;
--primary-foreground: #ffffff;
--secondary-color: #33aeff;
--secondary-light: #66c2ff;
--secondary-dark: #0098ff;
--secondary-foreground: #ffffff;
--accent-color: #33aeff;
--accent-light: #66c2ff;
--accent-dark: #0098ff;
--accent-foreground: #ffffff;
--success-color: #34d399;
--success-background: #064e3b;
--success-foreground: #d1fae5;
--success-light: #6ee7b7;
--success-dark: #10b981;
--warning-color: #fbbf24;
--warning-background: #78350f;
--warning-foreground: #fef3c7;
--warning-light: #fcd34d;
--warning-dark: #f59e0b;
--danger-color: #f87171;
--danger-background: #7f1d1d;
--danger-foreground: #fee2e2;
--danger-light: #fca5a5;
--danger-dark: #ef4444;
--info-color: #33aeff;
--info-background: #0a1e35;
--info-foreground: #e0f3ff;
--info-light: #66c2ff;
--info-dark: #0098ff;
/* Texto */
--text-color: #dce8f5;
--text-light: #ffffff;
--text-muted: #7a9bbf;
--text-secondary: #b0c8e0;
--error-text: #fca5a5;
--success-text: #6ee7b7;
/* Fondos — jerarquía de profundidad clara */
--background-color: #05101d;
--secondary-background: #091828;
--surface-color: #0d2240;
--surface-alt-color: #091828;
--card-bg-color: #0d2240;
--card-category-bg-color: #152d54;
--card-category-selected-color: #33aeff;
--card-aditional-bg-color: #0d2240;
--selected-aditional-color: #33aeff;
--overlay-color: rgba(0, 0, 0, 0.75);
/* Bordes — visibles pero no agresivos */
--border-color: #1c3a62;
--border-light: #0d2240;
--divider-color: #1c3a62;
--focus-color: #33aeff;
--focus-ring: rgba(0, 152, 255, 0.3);
/* Estados interactivos */
--highlight-color: #33aeff;
--hover-color: #66c2ff;
--hover-background-color: rgba(0, 152, 255, 0.1);
--selected-color: #33aeff;
--active-color: #0098ff;
--disabled-color: #3a5a7a;
--disabled-background: #0d2240;
/* Sombras */
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.6), 0 1px 2px -1px rgba(0, 0, 0, 0.6);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.6);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.6);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.7);
--shadow-color: rgba(0, 0, 0, 0.6);
--shadow-glow: 0 12px 32px rgba(0, 152, 255, 0.32);
/* Links y badges */
--link-color: #33aeff;
--link-hover-color: #66c2ff;
--link-hover-text-color: #66c2ff;
--badge-color: #ffffff;
--badge-bg: #2d6aad;
--badge-overlay-bg: rgba(5, 16, 29, 0.9);
--badge-overlay-border: rgba(255, 255, 255, 0.12);
/* Tablas */
--table-header-bg: #091828;
--table-header-text: #dce8f5;
--table-row-hover: #1c3a62;
--table-border: #1c3a62;
/* Eventos */
--events-pill-bg: rgba(13, 34, 64, 0.97);
--events-pill-border: rgba(28, 58, 98, 0.8);
--events-pill-shadow: 0 2px 16px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.3);
/* Glass */
--glass-bg: rgba(9, 24, 40, 0.82);
--glass-border: rgba(28, 58, 98, 0.4);
/* Gradientes */
--gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
--gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-light) 100%);
--gradient-surface: linear-gradient(180deg, var(--surface-color) 0%, var(--surface-alt-color) 100%);
/* TopBar */
--topbar-bg: rgba(5, 16, 29, 0.96);
--topbar-border: rgba(28, 58, 98, 0.6);
--topbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
--topbar-accent-gradient: linear-gradient(90deg, #2d6aad 0%, #33aeff 50%, #66c2ff 100%);
--topbar-nav-link-color: #7a9bbf;
--topbar-nav-link-hover-bg: rgba(28, 58, 98, 0.5);
--topbar-nav-link-hover-color: #ffffff;
--topbar-nav-link-hover-border: rgba(28, 58, 98, 0.6);
--topbar-dropdown-hover-bg: #152d54;
/* Texturas */
--texture-dot-color: rgba(255, 255, 255, 0.035);
--texture-line-color: rgba(0, 152, 255, 0.06);
--accent-glow: rgba(0, 152, 255, 0.15);
/* Sidebar */
--sidebar-header-bg: var(--surface-alt-color);
--sidebar-active-bg: rgba(0, 152, 255, 0.12);
--sidebar-active-border: var(--secondary-color);
/* Card */
--card-hover-border: rgba(0, 152, 255, 0.3);
--card-accent-gradient: linear-gradient(135deg, #2d6aad 0%, #33aeff 100%);
/* Misc */
--gold-color: #fbbf24;
--split-left-bg: linear-gradient(135deg, #091828 0%, #05101d 100%);
--split-right-bg: #0d2240;
--header-bg-banner: linear-gradient(175deg, #05101d 0%, #091828 50%, #0d2240 100%);
--filter-color-logo: brightness(0) invert(1);
}
}
/* Override explícito tema dark */
:root[data-theme='dark'] {
--primary-color: #2d6aad;
--primary-light: #4d8ec7;
--primary-dark: #1a4f8a;
--primary-hover: #4d8ec7;
--primary-foreground: #ffffff;
--secondary-color: #33aeff;
--secondary-light: #66c2ff;
--secondary-dark: #0098ff;
--secondary-foreground: #ffffff;
--accent-color: #33aeff;
--accent-light: #66c2ff;
--accent-dark: #0098ff;
--accent-foreground: #ffffff;
--success-color: #34d399;
--success-background: #064e3b;
--success-foreground: #d1fae5;
--warning-color: #fbbf24;
--warning-background: #78350f;
--warning-foreground: #fef3c7;
--danger-color: #f87171;
--danger-background: #7f1d1d;
--danger-foreground: #fee2e2;
--info-color: #33aeff;
--info-background: #0a1e35;
--info-foreground: #e0f3ff;
--text-color: #dce8f5;
--text-light: #ffffff;
--text-muted: #7a9bbf;
--text-secondary: #b0c8e0;
--error-text: #fca5a5;
--success-text: #6ee7b7;
--background-color: #05101d;
--secondary-background: #091828;
--surface-color: #0d2240;
--surface-alt-color: #091828;
--card-bg-color: #0d2240;
--card-category-bg-color: #152d54;
--card-category-selected-color: #33aeff;
--card-aditional-bg-color: #0d2240;
--selected-aditional-color: #33aeff;
--overlay-color: rgba(0, 0, 0, 0.75);
--border-color: #1c3a62;
--border-light: #0d2240;
--divider-color: #1c3a62;
--focus-color: #33aeff;
--focus-ring: rgba(0, 152, 255, 0.3);
--highlight-color: #33aeff;
--hover-color: #66c2ff;
--hover-background-color: rgba(0, 152, 255, 0.1);
--selected-color: #33aeff;
--active-color: #0098ff;
--disabled-color: #3a5a7a;
--disabled-background: #0d2240;
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.6), 0 1px 2px -1px rgba(0, 0, 0, 0.6);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.6);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.6);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 0 8px 10px -6px rgba(0, 0, 0, 0.7);
--shadow-color: rgba(0, 0, 0, 0.6);
--shadow-glow: 0 12px 32px rgba(0, 152, 255, 0.32);
--link-color: #33aeff;
--link-hover-color: #66c2ff;
--link-hover-text-color: #66c2ff;
--badge-color: #ffffff;
--badge-bg: #2d6aad;
--badge-overlay-bg: rgba(5, 16, 29, 0.9);
--badge-overlay-border: rgba(255, 255, 255, 0.12);
--table-header-bg: #091828;
--table-header-text: #dce8f5;
--table-row-hover: #1c3a62;
--table-border: #1c3a62;
--events-pill-bg: rgba(13, 34, 64, 0.97);
--events-pill-border: rgba(28, 58, 98, 0.8);
--glass-bg: rgba(9, 24, 40, 0.82);
--glass-border: rgba(28, 58, 98, 0.4);
--gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
--gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-light) 100%);
--gradient-surface: linear-gradient(180deg, var(--surface-color) 0%, var(--surface-alt-color) 100%);
--topbar-bg: rgba(5, 16, 29, 0.96);
--topbar-border: rgba(28, 58, 98, 0.6);
--topbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
--topbar-accent-gradient: linear-gradient(90deg, #2d6aad 0%, #33aeff 50%, #66c2ff 100%);
--topbar-nav-link-color: #7a9bbf;
--topbar-nav-link-hover-bg: rgba(28, 58, 98, 0.5);
--topbar-nav-link-hover-color: #ffffff;
--topbar-nav-link-hover-border: rgba(28, 58, 98, 0.6);
--topbar-dropdown-hover-bg: #152d54;
--texture-dot-color: rgba(255, 255, 255, 0.035);
--texture-line-color: rgba(0, 152, 255, 0.06);
--accent-glow: rgba(0, 152, 255, 0.15);
--sidebar-header-bg: var(--surface-alt-color);
--sidebar-active-bg: rgba(0, 152, 255, 0.12);
--sidebar-active-border: var(--secondary-color);
--card-hover-border: rgba(0, 152, 255, 0.3);
--card-accent-gradient: linear-gradient(135deg, #2d6aad 0%, #33aeff 100%);
--gold-color: #fbbf24;
--split-left-bg: linear-gradient(135deg, #091828 0%, #05101d 100%);
--split-right-bg: #0d2240;
--header-bg-banner: linear-gradient(175deg, #05101d 0%, #091828 50%, #0d2240 100%);
--filter-color-logo: brightness(0) invert(1);
}
/* Override explícito tema light */
:root[data-theme='light'] {
--primary-color: #143765;
--primary-light: #4d7ab0;
--primary-dark: #0e2649;
--primary-hover: #0e2649;
--primary-foreground: #ffffff;
--secondary-color: #0098ff;
--secondary-light: #33aeff;
--secondary-dark: #0077cc;
--secondary-foreground: #ffffff;
--accent-color: #0098ff;
--accent-light: #33aeff;
--accent-dark: #0077cc;
--accent-foreground: #ffffff;
--success-color: #10b981;
--success-background: #d1fae5;
--success-foreground: #065f46;
--warning-color: #f59e0b;
--warning-background: #fef3c7;
--warning-foreground: #78350f;
--danger-color: #ef4444;
--danger-background: #fee2e2;
--danger-foreground: #991b1b;
--info-color: #0098ff;
--info-background: #e0f3ff;
--info-foreground: #0e2649;
--text-color: #071c36;
--text-light: #ffffff;
--text-muted: #6e82a0;
--text-secondary: #4a5f7a;
--error-text: #dc2626;
--success-text: #059669;
--background-color: #f4f6fa;
--secondary-background: #edf0f5;
--surface-color: #ffffff;
--surface-alt-color: #f4f6fa;
--card-bg-color: #ffffff;
--card-category-bg-color: #edf0f5;
--card-category-selected-color: #143765;
--card-aditional-bg-color: #f4f6fa;
--selected-aditional-color: #143765;
--overlay-color: rgba(7, 28, 54, 0.6);
--border-color: #d0d8e4;
--border-light: #edf0f5;
--divider-color: #d0d8e4;
--focus-color: #143765;
--focus-ring: rgba(20, 55, 101, 0.3);
--highlight-color: #143765;
--hover-color: #0e2649;
--hover-background-color: #e8eef7;
--selected-color: #143765;
--active-color: #071c36;
--disabled-color: #a8b5c8;
--disabled-background: #edf0f5;
--shadow-xs: 0 1px 2px 0 rgba(7, 28, 54, 0.05);
--shadow-sm: 0 1px 3px 0 rgba(7, 28, 54, 0.1), 0 1px 2px -1px rgba(7, 28, 54, 0.1);
--shadow-md: 0 4px 6px -1px rgba(7, 28, 54, 0.1), 0 2px 4px -2px rgba(7, 28, 54, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(7, 28, 54, 0.1), 0 4px 6px -4px rgba(7, 28, 54, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(7, 28, 54, 0.1), 0 8px 10px -6px rgba(7, 28, 54, 0.1);
--shadow-color: rgba(7, 28, 54, 0.1);
--shadow-glow: 0 12px 32px rgba(0, 152, 255, 0.22);
--link-color: #143765;
--link-hover-color: #0e2649;
--link-hover-text-color: #0e2649;
--badge-color: #ffffff;
--badge-bg: #143765;
--table-header-bg: #f4f6fa;
--table-header-text: #071c36;
--table-row-hover: #edf0f5;
--table-border: #d0d8e4;
--events-pill-bg: rgba(255, 255, 255, 0.92);
--events-pill-border: rgba(208, 216, 228, 0.8);
--glass-bg: rgba(255, 255, 255, 0.72);
--glass-border: rgba(255, 255, 255, 0.45);
--topbar-bg: rgba(255, 255, 255, 0.88);
--topbar-border: rgba(208, 216, 228, 0.7);
--topbar-shadow: 0 1px 3px rgba(7, 28, 54, 0.06), 0 4px 16px rgba(7, 28, 54, 0.04);
--topbar-accent-gradient: linear-gradient(90deg, #143765 0%, #0098ff 50%, #4d7ab0 100%);
--topbar-nav-link-color: #4a5f7a;
--topbar-nav-link-hover-bg: #edf0f5;
--topbar-nav-link-hover-color: #143765;
--topbar-dropdown-hover-bg: #edf0f5;
--texture-dot-color: rgba(20, 55, 101, 0.045);
--sidebar-active-bg: rgba(20, 55, 101, 0.08);
--card-hover-border: rgba(20, 55, 101, 0.2);
--gold-color: #f59e0b;
--split-left-bg: linear-gradient(135deg, #143765 0%, #0e2649 50%, #1a4a7a 100%);
--split-right-bg: #ffffff;
--header-bg-banner: linear-gradient(175deg, #143765 0%, #0e2649 50%, #1a4a7a 100%);
--filter-color-logo: none;
}
/* ==============================================
GENERAL - Estilos base modernos
============================================== */
/* === BASE === */
body {
margin: 0;
padding: 0;
font-family: 'Outfit', 'Inter', 'Roboto', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px;
line-height: 1.6;
background-color: var(--background-color);
color: var(--text-color);
min-height: 100vh;
transition: background 0.3s ease, color 0.3s ease;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
flex-direction: column;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 1rem 0;
font-weight: 600;
color: var(--text-color);
line-height: 1.3;
letter-spacing: -0.02em;
}
h1 {
font-size: 2.25rem;
font-weight: 700;
}
h2 {
font-size: 1.875rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.25rem;
}
h5 {
font-size: 1.125rem;
}
h6 {
font-size: 1rem;
}
p {
margin: 0 0 1rem 0;
line-height: 1.6;
color: var(--text-color);
}
a {
color: var(--link-color);
text-decoration: none;
transition: color 0.2s ease;
font-weight: 500;
}
a:hover {
color: var(--link-hover-color);
text-decoration: none;
}
a:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
border-radius: 0.25rem;
}
hr, .divider {
border: none;
border-top: 1px solid var(--divider-color);
margin: 1.5rem 0;
}
/* === LAYOUT === */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
width: 100%;
}
.container--narrow {
max-width: 960px;
}
.container--wide {
max-width: 1536px;
}
.main-layout {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: var(--background-color);
}
.content-area {
flex: 1;
/*padding: 2rem 1rem;*/
overflow-y: auto;
background-color: var(--background-color);
padding-top: 80px;
}
/* === CARDS === */
.card {
background-color: var(--card-bg-color);
border: 1px solid var(--border-color);
border-radius: 0.75rem;
box-shadow: var(--shadow-sm);
padding: 1.5rem;
margin: 1rem 0;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
border-color: var(--border-color);
}
.card--flat {
box-shadow: none;
}
.card--elevated {
box-shadow: var(--shadow-md);
}
/* === BOTONES GENÉRICOS (usar AppButton cuando sea posible) === */
/* Estos estilos son para botones HTML nativos sin componente */
button:not([class*="app-"]):not([class*="btn-"]):not([class*="adr"]):not([class*="theme-toggle"]),
.btn {
background-color: var(--primary-color);
color: var(--primary-foreground);
border: 1px solid transparent;
border-radius: 0.5rem;
padding: 0.625rem 1.25rem;
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-sm);
outline: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
text-decoration: none;
min-height: 2.5rem;
}
button:not([class*="app-"]):not([class*="btn-"]):not([class*="adr"]):not([class*="theme-toggle"]):hover,
.btn:hover {
background-color: var(--primary-hover);
color: var(--primary-foreground);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
button:not([class*="app-"]):not([class*="btn-"]):not([class*="adr"]):not([class*="theme-toggle"]):active,
.btn:active {
transform: translateY(0);
box-shadow: var(--shadow-sm);
}
button:not([class*="app-"]):not([class*="btn-"]):not([class*="adr"]):not([class*="theme-toggle"]):focus-visible,
.btn:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
box-shadow: var(--shadow-md), 0 0 0 3px var(--focus-ring);
}
button:not([class*="app-"]):not([class*="btn-"]):not([class*="adr"]):not([class*="theme-toggle"]):disabled,
.btn:disabled {
background-color: var(--disabled-background);
color: var(--disabled-color);
cursor: not-allowed;
opacity: 0.6;
box-shadow: none;
transform: none;
}
/* Botones secundarios y de estado */
.btn-secondary {
background-color: var(--secondary-color);
color: var(--secondary-foreground);
}
.btn-secondary:hover {
background-color: var(--secondary-dark);
color: var(--secondary-foreground);
}
.btn-success {
background-color: var(--success-color);
color: var(--success-foreground);
}
.btn-success:hover {
background-color: var(--success-light);
color: var(--success-foreground);
}
.btn-danger {
background-color: var(--danger-color);
color: var(--danger-foreground);
}
.btn-danger:hover {
background-color: var(--danger-light);
color: var(--danger-foreground);
}
.btn-warning {
background-color: var(--warning-color);
color: var(--warning-foreground);
}
.btn-warning:hover {
background-color: var(--warning-light);
color: var(--warning-foreground);
}
.btn-outline {
background: transparent;
color: var(--primary-color);
border: 1px solid var(--primary-color);
box-shadow: none;
}
.btn-outline:hover {
background: var(--primary-color);
color: var(--primary-foreground);
box-shadow: var(--shadow-sm);
}
.btn-ghost {
background: transparent;
color: var(--text-color);
border: 1px solid var(--border-color);
box-shadow: none;
}
.btn-ghost:hover {
background: var(--hover-background-color);
color: var(--text-color);
box-shadow: none;
}
/* === FORMULARIOS === */
input:not([class*="app-"]),
select:not([class*="app-"]),
textarea:not([class*="app-"]) {
width: 100%;
padding: 0.625rem 1rem;
border: 1px solid var(--border-color);
border-radius: 0.5rem;
background-color: var(--surface-color);
color: var(--text-color);
font-size: 0.9375rem;
font-family: inherit;
margin: 0.5rem 0;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-xs);
}
input:not([class*="app-"]):focus,
select:not([class*="app-"]):focus,
textarea:not([class*="app-"]):focus {
border-color: var(--focus-color);
outline: none;
box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-sm);
transform: translateY(-1px);
}
input:not([class*="app-"]):hover:not(:disabled):not(:focus),
select:not([class*="app-"]):hover:not(:disabled):not(:focus),
textarea:not([class*="app-"]):hover:not(:disabled):not(:focus) {
border-color: var(--highlight-color);
box-shadow: var(--shadow-sm);
}
input:not([class*="app-"]):disabled,
select:not([class*="app-"]):disabled,
textarea:not([class*="app-"]):disabled {
background-color: var(--disabled-background);
color: var(--disabled-color);
cursor: not-allowed;
opacity: 0.6;
}
label:not([class*="app-"]) {
display: block;
margin-bottom: 0.375rem;
font-weight: 500;
color: var(--text-color);
font-size: 0.875rem;
letter-spacing: 0.01em;
}
/* === TABLAS GENÉRICAS (usar AppTable cuando sea posible) === */
/* REMOVIDOS los estilos de tabla genéricos que causaban conflictos */
/* Las tablas ahora deben usar el componente AppTable */
/* === ALERTAS Y MENSAJES === */
.alert {
padding: 1rem 1.25rem;
margin: 1rem 0;
border-radius: 0.5rem;
font-weight: 500;
border: 1px solid transparent;
display: flex;
align-items: center;
gap: 0.75rem;
box-shadow: var(--shadow-sm);
}
.alert-success {
background-color: var(--success-background);
color: var(--success-text);
border-color: var(--success-color);
}
.alert-error {
background-color: var(--danger-background);
color: var(--error-text);
border-color: var(--danger-color);
}
.alert-warning {
background-color: var(--warning-background);
color: var(--warning-color);
border-color: var(--warning-color);
}
.alert-info {
background-color: var(--info-background);
color: var(--info-color);
border-color: var(--info-color);
}
/* === UTILIDADES DE FONDO === */
.bg-error { background-color: var(--danger-background) !important; }
.bg-warning { background-color: var(--warning-background) !important; }
.bg-success { background-color: var(--success-background) !important; }
.bg-info { background-color: var(--info-background) !important; }
/* === UTILIDADES DE TEXTO === */
.text-small { font-size: 0.8125rem !important; }
.text-medium { font-size: 0.9375rem !important; }
.text-large { font-size: 1.125rem !important; }
.text-xlarge { font-size: 1.5rem !important; }
.text-xxlarge { font-size: 2rem !important; }
.text-bold { font-weight: 700 !important; }
.text-semibold { font-weight: 600 !important; }
.text-medium-weight { font-weight: 500 !important; }
.text-italic { font-style: italic !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.text-justify { text-align: justify !important; }
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-info { color: var(--info-color) !important; }
.text-light { color: var(--text-light) !important; }
.text-dark { color: var(--text-color) !important; }
.text-muted { color: var(--text-muted) !important; }
/* === UTILIDADES DE ESPACIADO === */
/* === PADDING === */
.p-0 {
padding: 0 !important;
}
.p-4 {
padding: 0.25rem !important;
}
.p-8 {
padding: 0.5rem !important;
}
.p-12 {
padding: 0.75rem !important;
}
.p-15 {
padding: 0.9375rem !important;
}
.p-16 {
padding: 1rem !important;
}
.p-24 {
padding: 1.5rem !important;
}
.p-32 {
padding: 2rem !important;
}
/* Padding top */
.pt-0 {
padding-top: 0 !important;
}
.pt-4 {
padding-top: 0.25rem !important;
}
.pt-8 {
padding-top: 0.5rem !important;
}
.pt-12 {
padding-top: 0.75rem !important;
}
.pt-15 {
padding-top: 0.9375rem !important;
}
.pt-16 {
padding-top: 1rem !important;
}
.pt-24 {
padding-top: 1.5rem !important;
}
.pt-32 {
padding-top: 2rem !important;
}
/* Padding bottom */
.pb-0 {
padding-bottom: 0 !important;
}
.pb-4 {
padding-bottom: 0.25rem !important;
}
.pb-8 {
padding-bottom: 0.5rem !important;
}
.pb-12 {
padding-bottom: 0.75rem !important;
}
.pb-15 {
padding-bottom: 0.9375rem !important;
}
.pb-16 {
padding-bottom: 1rem !important;
}
.pb-24 {
padding-bottom: 1.5rem !important;
}
.pb-32 {
padding-bottom: 2rem !important;
}
/* Padding left */
.pl-0 {
padding-left: 0 !important;
}
.pl-4 {
padding-left: 0.25rem !important;
}
.pl-8 {
padding-left: 0.5rem !important;
}
.pl-12 {
padding-left: 0.75rem !important;
}
.pl-15 {
padding-left: 0.9375rem !important;
}
.pl-16 {
padding-left: 1rem !important;
}
.pl-24 {
padding-left: 1.5rem !important;
}
.pl-32 {
padding-left: 2rem !important;
}
/* Padding right */
.pr-0 {
padding-right: 0 !important;
}
.pr-4 {
padding-right: 0.25rem !important;
}
.pr-8 {
padding-right: 0.5rem !important;
}
.pr-12 {
padding-right: 0.75rem !important;
}
.pr-15 {
padding-right: 0.9375rem !important;
}
.pr-16 {
padding-right: 1rem !important;
}
.pr-24 {
padding-right: 1.5rem !important;
}
.pr-32 {
padding-right: 2rem !important;
}
/* Padding eje vertical/horizontal */
.py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.py-4 {
padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important;
}
.py-8 {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
}
.py-12 {
padding-top: 0.75rem !important;
padding-bottom: 0.75rem !important;
}
.py-15 {
padding-top: 0.9375rem !important;
padding-bottom: 0.9375rem !important;
}
.py-16 {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.py-24 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
.py-32 {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
.px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.px-4 {
padding-left: 0.25rem !important;
padding-right: 0.25rem !important;
}
.px-8 {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
.px-12 {
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}
.px-15 {
padding-left: 0.9375rem !important;
padding-right: 0.9375rem !important;
}
.px-16 {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.px-24 {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
.px-32 {
padding-left: 2rem !important;
padding-right: 2rem !important;
}
/* === MARGIN === */
.m-0 {
margin: 0 !important;
}
.m-4 {
margin: 0.25rem !important;
}
.m-8 {
margin: 0.5rem !important;
}
.m-10 {
margin: 0.625rem !important;
}
.m-16 {
margin: 1rem !important;
}
.m-24 {
margin: 1.5rem !important;
}
.m-30 {
margin: 1.875rem !important;
}
/* Margin top */
.mt-0 {
margin-top: 0 !important;
}
.mt-4 {
margin-top: 0.25rem !important;
}
.mt-8 {
margin-top: 0.5rem !important;
}
.mt-10 {
margin-top: 0.625rem !important;
}
.mt-16 {
margin-top: 1rem !important;
}
.mt-24 {
margin-top: 1.5rem !important;
}
.mt-30 {
margin-top: 1.875rem !important;
}
/* Margin bottom */
.mb-0 {
margin-bottom: 0 !important;
}
.mb-4 {
margin-bottom: 0.25rem !important;
}
.mb-8 {
margin-bottom: 0.5rem !important;
}
.mb-10 {
margin-bottom: 0.625rem !important;
}
.mb-16 {
margin-bottom: 1rem !important;
}
.mb-24 {
margin-bottom: 1.5rem !important;
}
.mb-30 {
margin-bottom: 1.875rem !important;
}
/* Margin left */
.ml-0 {
margin-left: 0 !important;
}
.ml-4 {
margin-left: 0.25rem !important;
}
.ml-8 {
margin-left: 0.5rem !important;
}
.ml-10 {
margin-left: 0.625rem !important;
}
.ml-16 {
margin-left: 1rem !important;
}
.ml-24 {
margin-left: 1.5rem !important;
}
.ml-30 {
margin-left: 1.875rem !important;
}
/* Margin right */
.mr-0 {
margin-right: 0 !important;
}
.mr-4 {
margin-right: 0.25rem !important;
}
.mr-8 {
margin-right: 0.5rem !important;
}
.mr-10 {
margin-right: 0.625rem !important;
}
.mr-16 {
margin-right: 1rem !important;
}
.mr-24 {
margin-right: 1.5rem !important;
}
.mr-30 {
margin-right: 1.875rem !important;
}
/* Margin eje vertical/horizontal */
.my-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.my-4 {
margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important;
}
.my-8 {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
.my-10 {
margin-top: 0.625rem !important;
margin-bottom: 0.625rem !important;
}
.my-16 {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
.my-24 {
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important;
}
.my-30 {
margin-top: 1.875rem !important;
margin-bottom: 1.875rem !important;
}
.mx-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.mx-4 {
margin-left: 0.25rem !important;
margin-right: 0.25rem !important;
}
/* === SCROLLBAR === */
::-webkit-scrollbar {
width: 8px;
height: 8px;
background: transparent;
}
::-webkit-scrollbar-track {
background: var(--surface-alt-color);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 4px;
transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
/* === ALINEACIONES FLEX === */
.align-center {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.align-left {
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
}
.align-right {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
}
.align-top {
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
}
.align-bottom {
display: flex !important;
justify-content: center !important;
align-items: flex-end !important;
}
.align-space-between {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
.align-space-around {
display: flex !important;
justify-content: space-around !important;
align-items: center !important;
}
.align-space-evenly {
display: flex !important;
justify-content: space-evenly !important;
align-items: center !important;
}
.justify-start {
justify-content: flex-start !important;
}
.justify-center {
justify-content: center !important;
}
.justify-end {
justify-content: flex-end !important;
}
.justify-between {
justify-content: space-between !important;
}
.justify-around {
justify-content: space-around !important;
}
.justify-evenly {
justify-content: space-evenly !important;
}
.items-start {
align-items: flex-start !important;
}
.items-center {
align-items: center !important;
}
.items-end {
align-items: flex-end !important;
}
.items-stretch {
align-items: stretch !important;
}
.self-start {
align-self: flex-start !important;
}
.self-center {
align-self: center !important;
}
.self-end {
align-self: flex-end !important;
}
.self-stretch {
align-self: stretch !important;
}
.flex-row {
display: flex !important;
flex-direction: row !important;
}
.flex-column {
display: flex !important;
flex-direction: column !important;
}
.flex-wrap {
flex-wrap: wrap !important;
}
.flex-nowrap {
flex-wrap: nowrap !important;
}
.flex-1 {
flex: 1 1 0% !important;
}
.flex-auto {
flex: 1 1 auto !important;
}
.flex-none {
flex: none !important;
}
.gap-4 {
gap: 0.25rem !important;
}
.gap-8 {
gap: 0.5rem !important;
}
.gap-12 {
gap: 0.75rem !important;
}
.gap-15 {
gap: 0.9375rem !important;
}
.gap-16 {
gap: 1rem !important;
}
.gap-24 {
gap: 1.5rem !important;
}
/* === HELPERS === */
.absolute-center {
position: absolute !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.w-full {
width: 100% !important;
}
.h-full {
height: 100% !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden !important;
}
.rounded {
border-radius: 0.5rem !important;
}
.rounded-sm {
border-radius: 0.25rem !important;
}
.rounded-lg {
border-radius: 0.75rem !important;
}
.rounded-full {
border-radius: 9999px !important;
}
.shadow-sm {
box-shadow: var(--shadow-sm) !important;
}
.shadow-md {
box-shadow: var(--shadow-md) !important;
}
.shadow-lg {
box-shadow: var(--shadow-lg) !important;
}
.shadow-none {
box-shadow: none !important;
}
/* === RESPONSIVIDAD === */
@media (max-width: 768px) {
body {
font-size: 14px;
}
h1 {
font-size: 1.875rem;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 1.125rem;
}
h5, h6 {
font-size: 1rem;
}
.card {
padding: 1rem;
}
.container {
padding: 0 1rem;
}
.content-area {
padding: 1.5rem 0.75rem;
padding-top: 70px;
}
}
/* === AJUSTES MODO OSCURO === */
@media (prefers-color-scheme: dark) {
/* Links con mejor contraste */
a:hover {
color: var(--primary-light);
}
}
:root[data-theme='dark'] a:hover {
color: var(--primary-light);
}
/* === ANIMACIÓN DE CARGA === */
.loading-progress {
stroke: var(--primary-color);
}
.loading-progress-text {
font-weight: 700;
fill: var(--primary-color);
}
/* === INTERFAZ DE ERROR === */
#blazor-error-ui {
background-color: var(--danger-color);
color: var(--text-light);
padding: 1rem 1.5rem;
border-radius: 0.5rem 0.5rem 0 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
box-shadow: var(--shadow-lg);
display: none;
z-index: 10000;
}
#blazor-error-ui a.reload {
color: var(--text-light);
text-decoration: underline;
cursor: pointer;
font-weight: 600;
}
#blazor-error-ui .dismiss {
color: var(--text-light);
cursor: pointer;
font-weight: 600;
opacity: 0.9;
}
#blazor-error-ui .dismiss:hover {
opacity: 1;
}
/* === SPINNER DE INICIO === */
.init-spinner {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
/* === ANIMACIONES DE ENTRADA AL HACER SCROLL ===
Mejora progresiva: los elementos [data-reveal] se muestran normales
por defecto. Solo quedan ocultos-pendientes-de-revelar cuando el
módulo scrollReveal.js confirma que se inicializó (clase en <html>),
así nunca hay contenido invisible si el JS no llega a cargar. */
html.js-reveal-ready [data-reveal] {
opacity: 0;
transform: translateY(26px);
transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}
html.js-reveal-ready [data-reveal].is-revealed {
opacity: 1;
transform: translateY(0);
}
[data-reveal-group] > [data-reveal]:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group] > [data-reveal]:nth-child(2) { transition-delay: 90ms; }
[data-reveal-group] > [data-reveal]:nth-child(3) { transition-delay: 180ms; }
[data-reveal-group] > [data-reveal]:nth-child(4) { transition-delay: 270ms; }
[data-reveal-group] > [data-reveal]:nth-child(5) { transition-delay: 360ms; }
[data-reveal-group] > [data-reveal]:nth-child(6) { transition-delay: 450ms; }
@media (prefers-reduced-motion: reduce) {
html.js-reveal-ready [data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
}
/* Reset moderno */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
font-family: 'Outfit', 'Segoe UI', 'Roboto', Arial, sans-serif;
background: var(--background-color, #f5f6fa);
color: var(--text-color, #222);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
button, input, select, textarea {
font: inherit;
background: none;
border: none;
outline: none;
}
a {
color: inherit;
text-decoration: none;
}
ul, ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Outfit', 'Segoe UI', 'Roboto', Arial, sans-serif;
font-weight: 600;
color: var(--text-color);
margin-bottom: 0.5em;
line-height: 1.2;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.25rem;
}
h5 {
font-size: 1rem;
}
h6 {
font-size: 0.875rem;
}
/* Solo aplicar a elementos que NO estén dentro de componentes */
p:not([class*="app-"]):not([class*="btn-"]):not([class*="modal-"]),
li:not([class*="app-"]):not([class*="btn-"]):not([class*="modal-"]),
label:not([class*="app-"]):not([class*="btn-"]):not([class*="modal-"]),
span:not([class*="app-"]):not([class*="btn-"]):not([class*="modal-"]) {
color: var(--text-color);
font-size: 1rem;
line-height: 1.6;
}
/* NO aplicar a spans dentro de botones o componentes */
button span,
.app-button span,
.app-button__text,
.app-button__icon,
[class*="app-"] span,
[class*="btn-"] span {
color: inherit;
}
small, .text-muted {
color: var(--text-muted);
font-size: 0.875rem;
}
/* AdminEventPaymentKeys - Componente de administraci�n de claves de pago */
.admin-event-payment-keys {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* Header */
.admin-event-payment-keys__header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.admin-event-payment-keys__title {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-color);
margin: 0;
}
/* Estados */
.admin-event-payment-keys__loading {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 2rem;
color: var(--text-muted);
}
.admin-event-payment-keys__error {
padding: 1rem;
background: var(--danger-background);
color: var(--danger-color);
border-radius: 0.5rem;
border: 1px solid var(--danger-color);
}
.admin-event-payment-keys__empty {
padding: 2rem;
text-align: center;
color: var(--text-muted);
background: var(--surface-color);
border: 1px dashed var(--border-color);
border-radius: 0.5rem;
}
/* Tabla */
.admin-event-payment-keys__table-wrapper {
width: 100%;
overflow-x: auto;
background: var(--surface-color);
border-radius: 0.5rem;
border: 1px solid var(--border-color);
}
.admin-event-payment-keys__th-center {
text-align: center !important;
}
/* Badges */
.admin-event-payment-keys__badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
font-size: 0.875rem;
font-weight: 500;
white-space: nowrap;
}
.admin-event-payment-keys__badge--prod {
background: var(--warning-background);
color: var(--warning-color);
}
.admin-event-payment-keys__badge--test {
background: var(--info-background);
color: var(--info-color);
}
.admin-event-payment-keys__badge--active {
background: var(--success-background);
color: var(--success-color);
}
.admin-event-payment-keys__badge--inactive {
background: var(--disabled-background);
color: var(--disabled-color);
}
/* Acciones */
.admin-event-payment-keys__actions-cell {
text-align: center;
}
.admin-event-payment-keys__actions {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
}
/* Botones de acci�n con mayor especificidad para evitar sobrescritura */
button.admin-event-payment-keys__action-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 2rem !important;
height: 2rem !important;
min-height: auto !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0.375rem !important;
background: transparent !important;
color: var(--text-color) !important;
border: 1px solid var(--border-color) !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
box-shadow: none !important;
font-size: 1rem !important;
font-weight: 400 !important;
text-decoration: none !important;
transform: none !important;
}
/* Estilos para los SVG dentro de los botones */
button.admin-event-payment-keys__action-btn svg {
width: 18px !important;
height: 18px !important;
stroke: currentColor !important;
fill: none !important;
stroke-width: 2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
display: block !important;
}
button.admin-event-payment-keys__action-btn:hover {
background: var(--primary-background) !important;
color: var(--primary-color) !important;
border-color: var(--primary-color) !important;
transform: translateY(-1px) !important;
box-shadow: var(--shadow-sm) !important;
}
button.admin-event-payment-keys__action-btn:active {
transform: translateY(0) !important;
box-shadow: none !important;
}
button.admin-event-payment-keys__action-btn:focus-visible {
outline: 2px solid var(--primary-color) !important;
outline-offset: 2px !important;
}
button.admin-event-payment-keys__action-btn.admin-event-payment-keys__action-btn--danger:hover {
background: var(--danger-background) !important;
color: var(--danger-color) !important;
border-color: var(--danger-color) !important;
}
button.admin-event-payment-keys__action-btn.admin-event-payment-keys__action-btn--danger:focus-visible {
outline-color: var(--danger-color) !important;
}
button.admin-event-payment-keys__action-btn.admin-event-payment-keys__action-btn--success:hover {
background: var(--success-background) !important;
color: var(--success-color) !important;
border-color: var(--success-color) !important;
}
button.admin-event-payment-keys__action-btn.admin-event-payment-keys__action-btn--success:focus-visible {
outline-color: var(--success-color) !important;
}
/* Paginaci�n */
.admin-event-payment-keys__pagination {
display: flex;
justify-content: center;
padding: 1rem 0;
}
/* Modal - Detalle */
.admin-event-payment-keys__detail {
display: flex;
flex-direction: column;
gap: 1rem;
}
.admin-event-payment-keys__detail-row {
display: grid;
grid-template-columns: 140px 1fr;
gap: 1rem;
padding: 0.75rem;
background: var(--surface-alt-color);
border-radius: 0.375rem;
}
.admin-event-payment-keys__detail-label {
font-weight: 600;
color: var(--text-secondary);
}
.admin-event-payment-keys__detail-value {
color: var(--text-color);
word-break: break-word;
}
.admin-event-payment-keys__detail-value--code {
font-family: 'Courier New', monospace;
font-size: 0.875rem;
background: var(--background-color);
padding: 0.5rem;
border-radius: 0.25rem;
border: 1px solid var(--border-color);
}
/* Modal - Form */
.admin-event-payment-keys__form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.admin-event-payment-keys__row {
display: grid;
gap: 1rem;
}
.admin-event-payment-keys__row--2 {
grid-template-columns: 1fr 1fr;
}
/* Modal Actions */
.admin-event-payment-keys__modal-actions {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border-color);
}
/* Responsive - Tablets */
@media (max-width: 768px) {
.admin-event-payment-keys__header {
flex-direction: column;
align-items: stretch;
}
.admin-event-payment-keys__title {
font-size: 1.25rem;
}
.admin-event-payment-keys__row--2 {
grid-template-columns: 1fr;
}
.admin-event-payment-keys__detail-row {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.admin-event-payment-keys__modal-actions {
flex-direction: column;
}
}
/* Responsive - M�viles */
@media (max-width: 480px) {
.admin-event-payment-keys {
gap: 1rem;
}
.admin-event-payment-keys__title {
font-size: 1.125rem;
}
.admin-event-payment-keys__actions {
flex-wrap: wrap;
}
button.admin-event-payment-keys__action-btn {
width: 1.75rem !important;
height: 1.75rem !important;
}
button.admin-event-payment-keys__action-btn svg {
width: 16px !important;
height: 16px !important;
}
.admin-event-payment-keys__badge {
font-size: 0.75rem;
padding: 0.2rem 0.5rem;
}
}
/* Dark Mode Adjustments */
@media (prefers-color-scheme: dark) {
.admin-event-payment-keys__detail-value--code {
background: var(--surface-color);
}
}
:root[data-theme='dark'] .admin-event-payment-keys__detail-value--code,
.dark .admin-event-payment-keys__detail-value--code {
background: var(--surface-color);
}
/* AppAdminToolbar - Barra superior para p�ginas administrativas */
.app-admin-toolbar {
display: flex;
flex-direction: column;
gap: var(--spacing-md, 1rem);
padding: var(--spacing-md, 1rem);
background-color: var(--surface-color);
border-bottom: 1px solid var(--border-color);
position: sticky;
top: 0;
z-index: 10;
}
.app-admin-toolbar__actions {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm, 0.5rem);
align-items: center;
}
.app-admin-toolbar__btn {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs, 0.25rem);
padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
font-size: var(--font-size-sm, 0.875rem);
font-weight: 500;
border: 1px solid transparent;
border-radius: var(--border-radius-md, 0.375rem);
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.app-admin-toolbar__btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.app-admin-toolbar__btn--primary {
background-color: var(--primary-color);
color: var(--primary-foreground);
border-color: var(--primary-color);
}
.app-admin-toolbar__btn--primary:hover:not(:disabled) {
background-color: var(--primary-hover);
border-color: var(--primary-hover);
color: var(--primary-foreground);
}
.app-admin-toolbar__btn--success {
background-color: var(--success-color);
color: var(--success-foreground);
border-color: var(--success-color);
}
.app-admin-toolbar__btn--success:hover:not(:disabled) {
background-color: var(--success-dark);
border-color: var(--success-dark);
color: var(--success-foreground);
}
.app-admin-toolbar__btn--ghost {
background-color: transparent;
color: var(--text-color);
border-color: var(--border-color);
}
.app-admin-toolbar__btn--ghost:hover:not(:disabled) {
background-color: var(--hover-background-color);
border-color: var(--primary-color);
color: var(--primary-color);
}
.app-admin-toolbar__icon {
width: 1.125rem;
height: 1.125rem;
flex-shrink: 0;
}
.app-admin-toolbar__label {
display: none;
}
.app-admin-toolbar__info {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md, 1rem);
align-items: center;
justify-content: space-between;
font-size: var(--font-size-sm, 0.875rem);
color: var(--text-muted);
}
.app-admin-toolbar__summary {
font-weight: 500;
color: var(--text-color);
}
.app-admin-toolbar__pagination {
display: flex;
align-items: center;
gap: var(--spacing-sm, 0.5rem);
}
.app-admin-toolbar__page-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
background-color: transparent;
color: var(--text-color);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-md, 0.375rem);
cursor: pointer;
transition: all 0.2s ease;
}
.app-admin-toolbar__page-btn:hover:not(:disabled) {
background-color: var(--hover-background-color);
border-color: var(--primary-color);
color: var(--primary-color);
}
.app-admin-toolbar__page-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.app-admin-toolbar__page-btn svg {
width: 1rem;
height: 1rem;
}
.app-admin-toolbar__page-info {
min-width: 4rem;
text-align: center;
font-weight: 500;
color: var(--text-color);
}
.app-admin-toolbar__filters {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs, 0.25rem);
align-items: center;
padding: var(--spacing-sm, 0.5rem);
background-color: var(--background-color);
border-radius: var(--border-radius-md, 0.375rem);
border: 1px solid var(--border-color);
min-height: 2rem;
}
.app-admin-toolbar__filters:empty {
display: none;
}
/* Responsive */
@media (min-width: 640px) {
.app-admin-toolbar {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
.app-admin-toolbar__actions {
flex: 1;
}
.app-admin-toolbar__info {
flex: 0 0 auto;
}
.app-admin-toolbar__filters {
flex-basis: 100%;
}
.app-admin-toolbar__label {
display: inline;
}
}
@media (min-width: 1024px) {
.app-admin-toolbar {
gap: var(--spacing-lg, 1.5rem);
}
}
/* AppFilterBadge - Badge para filtros activos */
.app-filter-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs, 0.25rem);
padding: 0.188rem 0.5rem;
font-size: var(--font-size-xs, 0.75rem);
background-color: var(--primary-color-light, rgba(59, 130, 246, 0.1));
color: var(--primary-color);
border: 1px solid var(--primary-color);
border-radius: var(--border-radius-full, 9999px);
white-space: nowrap;
transition: all 0.2s ease;
animation: badgeFadeIn 0.2s ease;
}
@keyframes badgeFadeIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.app-filter-badge:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.app-filter-badge__label {
font-weight: 600;
color: var(--primary-color);
}
.app-filter-badge__value {
font-weight: 500;
color: var(--primary-color);
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
}
.app-filter-badge__remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 0.875rem;
height: 0.875rem;
padding: 0;
margin-left: var(--spacing-xs, 0.25rem);
background-color: transparent;
border: none;
border-radius: var(--border-radius-full, 9999px);
cursor: pointer;
transition: all 0.15s ease;
color: var(--primary-color);
}
.app-filter-badge__remove:hover {
background-color: var(--primary-color);
color: white;
transform: scale(1.1);
}
.app-filter-badge__remove svg {
width: 0.625rem;
height: 0.625rem;
}
/* AppFilterPanel - Panel lateral derecho para filtros */
.app-filter-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 50;
pointer-events: none;
}
.app-filter-panel--open {
pointer-events: auto;
}
.app-filter-panel__overlay {
position: absolute;
inset: 0;
background-color: var(--overlay-color);
opacity: 0;
transition: opacity 0.15s ease;
}
.app-filter-panel--open .app-filter-panel__overlay {
opacity: 1;
}
.app-filter-panel__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 28rem;
display: flex;
flex-direction: column;
background-color: var(--surface-color);
box-shadow: var(--shadow-xl);
transform: translateX(100%);
transition: transform 0.2s ease;
}
.app-filter-panel--open .app-filter-panel__panel {
transform: translateX(0);
}
.app-filter-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-lg, 1.5rem);
border-bottom: 1px solid var(--border-color);
background-color: var(--surface-color);
}
.app-filter-panel__title {
margin: 0;
font-size: var(--font-size-lg, 1.125rem);
font-weight: 600;
color: var(--text-color);
}
.app-filter-panel__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
background-color: transparent;
border: none;
border-radius: var(--border-radius-md, 0.375rem);
cursor: pointer;
transition: background-color 0.2s ease;
color: var(--text-muted);
}
.app-filter-panel__close:hover {
background-color: var(--hover-background-color);
color: var(--text-color);
}
.app-filter-panel__close svg {
width: 1.25rem;
height: 1.25rem;
}
.app-filter-panel__body {
flex: 1;
overflow-y: auto;
padding: var(--spacing-lg, 1.5rem);
background-color: var(--background-color);
}
.app-filter-panel__footer {
display: flex;
gap: var(--spacing-sm, 0.5rem);
padding: var(--spacing-lg, 1.5rem);
border-top: 1px solid var(--border-color);
background-color: var(--surface-color);
}
.app-filter-panel__btn {
flex: 1;
padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
font-size: var(--font-size-sm, 0.875rem);
font-weight: 500;
border: 1px solid transparent;
border-radius: var(--border-radius-md, 0.375rem);
cursor: pointer;
transition: all 0.2s ease;
}
.app-filter-panel__btn--primary {
background-color: var(--primary-color);
color: var(--primary-foreground);
border-color: var(--primary-color);
}
.app-filter-panel__btn--primary:hover {
background-color: var(--primary-hover);
border-color: var(--primary-hover);
color: var(--primary-foreground);
}
/* Asegurarse que los spans dentro hereden el color */
.app-filter-panel__btn--primary span {
color: var(--primary-foreground) !important;
}
.app-filter-panel__btn--ghost {
background-color: transparent;
color: var(--text-color);
border-color: var(--border-color);
}
.app-filter-panel__btn--ghost:hover {
background-color: var(--hover-background-color);
border-color: var(--border-color);
color: var(--text-color);
}
.app-filter-panel__btn--ghost span {
color: inherit !important;
}
/* Responsive */
@media (max-width: 639px) {
.app-filter-panel__panel {
max-width: 100%;
}
}
/* ========================================================================
AWARDS PAGE - Página de Premios
======================================================================== */
/* Hero */
.award-hero {
}
.award-page {
max-width: 80%;
margin: 0 auto;
padding: 0 1rem 2rem;
}
/* Filtros */
.award-page__filters {
display: flex;
justify-content: center;
margin-bottom: 3rem;
}
/* Paginación */
.award-pagination {
margin-bottom: 2rem;
display: flex;
justify-content: flex-end;
}
.award-pagination .app-pagination {
margin: 0;
}
.award-pagination .app-pagination__summary {
display: none;
}
/* Categorías */
.award-category {
margin-bottom: 4rem;
}
.award-category:last-child {
margin-bottom: 0;
}
.award-category__header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 3px solid var(--border-color);
position: relative;
}
.award-category__header::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 80px;
height: 3px;
background: var(--accent-color);
}
.award-category__icon {
font-size: 2.5rem;
}
.award-category__title {
font-size: 2rem;
font-weight: 700;
color: var(--text-color);
}
/* Timeline */
.award-timeline {
position: relative;
padding-left: 3rem;
}
.award-timeline::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--accent-color) 0%, var(--border-color) 100%);
}
/* Año */
.award-year {
position: relative;
margin-bottom: 3rem;
}
.award-year:last-child {
margin-bottom: 0;
}
.award-year__marker {
position: absolute;
left: -3rem;
top: 0;
width: 60px;
height: 60px;
background: var(--accent-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
font-weight: 700;
color: var(--text-light);
box-shadow: var(--shadow-md);
border: 4px solid var(--background-color);
}
.award-year__content {
background: var(--surface-color);
border-radius: 12px;
padding: 2rem;
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.award-year__content:hover {
box-shadow: var(--shadow-lg);
transform: translateX(4px);
}
.award-year__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-color);
}
.award-year__title {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-color);
}
/* Lista de premios */
.award-year__list {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Item de premio */
.award-item {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.25rem;
padding: 1.25rem;
background: var(--background-color);
border-radius: 10px;
border-left: 4px solid var(--accent-color);
transition: all 0.3s ease;
}
.award-item:hover {
background: var(--surface-color);
border-left-width: 6px;
transform: translateX(4px);
}
.award-item__icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--gold-color), #FFA500);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
box-shadow: var(--shadow-sm);
}
.award-item__content {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.award-item__course {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem !important;
font-weight: 600;
color: var(--accent-color) !important;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.award-item__course svg {
width: 14px;
height: 14px;
}
.award-item__winner {
font-size: 1.125rem;
font-weight: 700;
color: var(--text-color);
line-height: 1.3;
}
.award-item__recognition {
font-size: 0.875rem;
color: var(--text-muted);
font-style: italic;
}
/* Estado vacío */
.award-page__empty {
text-align: center;
padding: 4rem 2rem;
color: var(--text-muted);
}
.award-page__empty svg {
margin: 0 auto 1.5rem;
opacity: 0.5;
}
.award-page__empty-icon {
font-size: 4rem;
margin-bottom: 1.5rem;
opacity: 0.3;
}
.award-page__empty-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 0.5rem;
}
.award-page__empty-text {
font-size: 0.9375rem;
}
/* Stats */
.award-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.award-stats__card {
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 1.5rem;
text-align: center;
box-shadow: var(--shadow-sm);
}
.award-stats__icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.award-stats__number {
font-size: 2rem;
font-weight: 700;
color: var(--accent-color);
margin-bottom: 0.25rem;
}
.award-stats__label {
font-size: 0.875rem;
color: var(--text-muted);
font-weight: 600;
}
/* ========================================================================
RESPONSIVE
======================================================================== */
@media (max-width: 768px) {
.award-hero {
padding: 2.5rem 1.5rem;
}
.award-hero__title {
font-size: 2rem;
}
.award-hero__icon {
font-size: 3rem;
}
.award-timeline {
padding-left: 2rem;
}
.award-year__marker {
left: -2rem;
width: 50px;
height: 50px;
font-size: 1rem;
}
.award-year__content {
padding: 1.5rem;
}
.award-year__header {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.award-item {
grid-template-columns: 1fr;
text-align: center;
}
.award-item__icon {
margin: 0 auto;
}
.award-category__header {
flex-wrap: wrap;
}
}
@media (max-width: 480px) {
.award-page__filters {
flex-direction: column;
}
.award-category__title {
font-size: 1.5rem;
}
.award-year__title {
font-size: 1.5rem;
}
}
/* AppActionsMenu - Botón trigger con soporte Dark/Light Mode */
.app-actions-menu {
position: relative;
display: inline-flex;
}
.app-actions-menu__trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 4px;
background: transparent;
border: 1px solid var(--border-color, #e0e0e0);
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
color: var(--text-secondary, #666);
flex-shrink: 0;
}
@media (prefers-color-scheme: dark) {
.app-actions-menu__trigger {
border-color: var(--border-color, #3a3a3a);
color: var(--text-secondary, #a0a0a0);
}
}
.app-actions-menu__trigger:hover {
background: var(--hover-bg, #f5f5f5);
border-color: var(--primary-color, #007bff);
color: var(--primary-color, #007bff);
}
@media (prefers-color-scheme: dark) {
.app-actions-menu__trigger:hover {
background: var(--hover-bg, #2a2a2a);
border-color: var(--primary-color, #4dabf7);
color: var(--primary-color, #4dabf7);
}
}
.app-actions-menu__trigger:active {
transform: scale(0.95);
}
.app-actions-menu__trigger svg {
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
max-width: 18px;
max-height: 18px;
display: block;
flex-shrink: 0;
}
/* Backdrop para cerrar al hacer clic fuera */
.app-actions-menu__backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9998;
background: transparent;
}
/* Dropdown del menú - POSICIONAMIENTO ABSOLUTO RELATIVO AL CONTENEDOR */
.app-actions-menu__dropdown {
position: absolute;
top: calc(100% + 4px);
right: 0;
z-index: 9999;
min-width: 200px;
max-width: 280px;
background: white;
border: 1px solid var(--border-color, #e0e0e0);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
padding: 4px 0;
animation: menuSlideDown 0.15s ease;
transform-origin: top right;
}
@keyframes menuSlideDown {
from {
opacity: 0;
transform: translateY(-8px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Ajuste para que no se salga de la pantalla */
@media (max-width: 768px) {
.app-actions-menu__dropdown {
right: auto;
left: 50%;
transform: translateX(-50%);
max-width: 90vw;
}
}
.app-actions-menu__list {
list-style: none;
margin: 0;
padding: 0;
}
.app-actions-menu__item {
margin: 0;
padding: 0;
}
.app-actions-menu__btn {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
font-size: 14px;
color: var(--text-primary, #333);
transition: all 0.15s ease;
white-space: nowrap;
}
.app-actions-menu__btn:hover:not(:disabled) {
background: var(--hover-bg, #f5f5f5);
color: var(--primary-color, #007bff);
}
.app-actions-menu__btn:active:not(:disabled) {
background: var(--active-bg, #e8e8e8);
}
.app-actions-menu__btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.app-actions-menu__btn--disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.app-actions-menu__btn--danger {
color: var(--danger-color, #dc3545);
}
.app-actions-menu__btn--danger:hover:not(:disabled) {
background: var(--danger-bg, #fff5f5);
color: var(--danger-hover, #c82333);
}
.app-actions-menu__btn--success {
color: var(--success-color, #28a745);
}
.app-actions-menu__btn--success:hover:not(:disabled) {
background: var(--success-bg, #f0fff4);
color: var(--success-hover, #218838);
}
.app-actions-menu__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.app-actions-menu__icon svg {
width: 18px;
height: 18px;
display: block;
}
.app-actions-menu__text {
flex: 1;
line-height: 1.4;
}
.app-actions-menu__separator {
height: 1px;
background: var(--border-color, #e0e0e0);
margin: 4px 8px;
}
/* Ajuste para tablas: alinear a la derecha automáticamente */
td .app-actions-menu {
justify-content: flex-end;
}
/* AppActionsModal - Modal con soporte Dark/Light Mode */
.app-actions-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.app-actions-modal__backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
/* Dark mode backdrop */
@media (prefers-color-scheme: dark) {
.app-actions-modal__backdrop {
background: rgba(0, 0, 0, 0.75);
}
}
.app-actions-modal__content {
position: relative;
background: var(--surface-color, #ffffff);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 100%;
max-height: 80vh;
overflow: hidden;
animation: slideUp 0.3s ease;
border: 1px solid var(--border-color, #e0e0e0);
}
/* Dark mode content */
@media (prefers-color-scheme: dark) {
.app-actions-modal__content {
background: var(--surface-color, #1e1e1e);
border-color: var(--border-color, #3a3a3a);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.app-actions-modal__header {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px 20px;
border-bottom: 1px solid var(--border-color, #e0e0e0);
}
@media (prefers-color-scheme: dark) {
.app-actions-modal__header {
border-bottom-color: var(--border-color, #3a3a3a);
}
}
.app-actions-modal__header-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.app-actions-modal__title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--text-primary, #333);
}
@media (prefers-color-scheme: dark) {
.app-actions-modal__title {
color: var(--text-primary, #e0e0e0);
}
}
.app-actions-modal__subtitle {
font-size: 14px;
color: var(--text-secondary, #666);
margin: 0;
font-weight: 400;
}
@media (prefers-color-scheme: dark) {
.app-actions-modal__subtitle {
color: var(--text-secondary, #a0a0a0);
}
}
.app-actions-modal__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: none;
border-radius: 6px;
cursor: pointer;
color: var(--text-secondary, #666);
transition: all 0.2s ease;
flex-shrink: 0;
}
.app-actions-modal__close:hover {
background: var(--hover-bg, #f5f5f5);
color: var(--text-primary, #333);
}
@media (prefers-color-scheme: dark) {
.app-actions-modal__close {
color: var(--text-secondary, #a0a0a0);
}
.app-actions-modal__close:hover {
background: var(--hover-bg, #2a2a2a);
color: var(--text-primary, #e0e0e0);
}
}
.app-actions-modal__body {
padding: 8px 0;
max-height: calc(80vh - 85px);
overflow-y: auto;
}
.app-actions-modal__list {
list-style: none;
margin: 0;
padding: 0;
}
.app-actions-modal__item {
margin: 0;
padding: 0;
}
.app-actions-modal__btn {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
font-size: 15px;
color: var(--text-primary, #333);
transition: all 0.15s ease;
}
@media (prefers-color-scheme: dark) {
.app-actions-modal__btn {
color: var(--text-primary, #e0e0e0);
}
}
.app-actions-modal__btn:hover:not(:disabled) {
background: var(--hover-bg, #f5f5f5);
}
@media (prefers-color-scheme: dark) {
.app-actions-modal__btn:hover:not(:disabled) {
background: var(--hover-bg, #2a2a2a);
}
}
.app-actions-modal__btn:active:not(:disabled) {
background: var(--active-bg, #e8e8e8);
}
@media (prefers-color-scheme: dark) {
.app-actions-modal__btn:active:not(:disabled) {
background: var(--active-bg, #3a3a3a);
}
}
.app-actions-modal__btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.app-actions-modal__btn--disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.app-actions-modal__btn--danger {
color: var(--danger-color, #dc3545);
}
.app-actions-modal__btn--danger:hover:not(:disabled) {
background: var(--danger-bg, #fff5f5);
}
@media (prefers-color-scheme: dark) {
.app-actions-modal__btn--danger {
color: var(--danger-color, #ff6b6b);
}
.app-actions-modal__btn--danger:hover:not(:disabled) {
background: var(--danger-bg, #3a1f1f);
}
}
.app-actions-modal__btn--success {
color: var(--success-color, #28a745);
}
.app-actions-modal__btn--success:hover:not(:disabled) {
background: var(--success-bg, #f0fff4);
}
@media (prefers-color-scheme: dark) {
.app-actions-modal__btn--success {
color: var(--success-color, #51cf66);
}
.app-actions-modal__btn--success:hover:not(:disabled) {
background: var(--success-bg, #1f3a1f);
}
}
.app-actions-modal__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.app-actions-modal__icon svg {
width: 20px;
height: 20px;
display: block;
}
.app-actions-modal__text {
flex: 1;
line-height: 1.4;
}
.app-actions-modal__separator {
height: 1px;
background: var(--border-color, #e0e0e0);
margin: 8px 20px;
}
@media (prefers-color-scheme: dark) {
.app-actions-modal__separator {
background: var(--border-color, #3a3a3a);
}
}
/* Scrollbar styling */
.app-actions-modal__body::-webkit-scrollbar {
width: 8px;
}
.app-actions-modal__body::-webkit-scrollbar-track {
background: transparent;
}
.app-actions-modal__body::-webkit-scrollbar-thumb {
background: var(--scrollbar-color, #ccc);
border-radius: 4px;
}
@media (prefers-color-scheme: dark) {
.app-actions-modal__body::-webkit-scrollbar-thumb {
background: var(--scrollbar-color, #555);
}
}
.app-actions-modal__body::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-hover, #999);
}
@media (prefers-color-scheme: dark) {
.app-actions-modal__body::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-hover, #666);
}
}
/* Responsive */
@media (max-width: 480px) {
.app-actions-modal {
padding: 10px;
align-items: flex-end;
}
.app-actions-modal__content {
max-width: 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.app-actions-modal__btn {
padding: 16px 20px;
font-size: 16px;
}
}
/* ==============================================
AppButton - Componente de botón moderno y profesional
============================================== */
/* Base del botón */
.app-button {
font-family: inherit;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25rem;
padding: 0.625rem 1.25rem;
border-radius: 0.5rem;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
outline: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 2.5rem;
text-align: center;
white-space: nowrap;
user-select: none;
position: relative;
overflow: hidden;
}
.app-button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: var(--primary-foreground);
opacity: 0.2;
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.app-button:active::before {
width: 300px;
height: 300px;
}
/* Brillo diagonal al pasar el mouse, solo en variantes con fondo sólido */
.app-button--primary::after,
.app-button--secondary::after,
.app-button--danger::after,
.app-button--success::after {
content: '';
position: absolute;
top: 0;
left: -60%;
width: 35%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
transform: skewX(-20deg);
transition: left 0.6s ease;
pointer-events: none;
}
.app-button--primary:hover::after,
.app-button--secondary:hover::after,
.app-button--danger:hover::after,
.app-button--success:hover::after {
left: 130%;
}
@media (prefers-reduced-motion: reduce) {
.app-button--primary::after,
.app-button--secondary::after,
.app-button--danger::after,
.app-button--success::after {
transition: none;
display: none;
}
}
.app-button__icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
line-height: 1;
}
.app-button__text {
display: inline;
font: inherit;
font-weight: inherit;
line-height: inherit;
}
/* ============================================== */
/* Variantes de botón */
/* ============================================== */
/* Primary - Botón principal */
.app-button--primary {
background: var(--primary-color);
color: var(--primary-foreground);
border-color: var(--primary-color);
box-shadow: var(--shadow-sm);
}
.app-button--primary:hover {
background: var(--primary-hover);
color: var(--primary-foreground);
border-color: var(--primary-hover);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.app-button--primary:active {
background: var(--primary-dark);
color: var(--primary-foreground);
border-color: var(--primary-dark);
box-shadow: var(--shadow-sm);
transform: translateY(0);
}
.app-button--primary:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
box-shadow: var(--shadow-md), 0 0 0 3px var(--focus-ring);
}
/* Secondary - Botón secundario */
.app-button--secondary {
background: var(--secondary-color);
color: var(--secondary-foreground);
border-color: var(--secondary-color);
box-shadow: var(--shadow-sm);
}
.app-button--secondary:hover {
background: var(--secondary-dark);
color: var(--secondary-foreground);
border-color: var(--secondary-dark);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.app-button--secondary:active {
background: var(--secondary-dark);
color: var(--secondary-foreground);
box-shadow: var(--shadow-sm);
transform: translateY(0);
}
.app-button--secondary:focus-visible {
outline: 2px solid var(--secondary-color);
outline-offset: 2px;
box-shadow: var(--shadow-md), 0 0 0 3px var(--focus-ring);
}
/* Ghost - Botón sin fondo */
.app-button--ghost {
background: transparent;
color: inherit;
border-color: color-mix(in srgb, currentColor 28%, transparent);
}
.app-button--ghost:hover {
background: color-mix(in srgb, currentColor 10%, transparent);
color: inherit;
border-color: color-mix(in srgb, currentColor 45%, transparent);
}
.app-button--ghost:active {
background: color-mix(in srgb, currentColor 16%, transparent);
color: inherit;
}
.app-button--ghost:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
}
/* Outline - Botón con borde */
.app-button--outline {
background: transparent;
color: var(--primary-color);
border-color: var(--primary-color);
}
.app-button--outline:hover {
background: var(--primary-color);
color: var(--primary-foreground);
border-color: var(--primary-color);
box-shadow: var(--shadow-sm);
}
.app-button--outline:active {
background: var(--primary-dark);
color: var(--primary-foreground);
border-color: var(--primary-dark);
}
.app-button--outline:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
}
/* Danger - Botón de acción destructiva */
.app-button--danger {
background: var(--danger-color);
color: var(--danger-foreground);
border-color: var(--danger-color);
box-shadow: var(--shadow-sm);
}
.app-button--danger:hover {
background: var(--danger-light);
color: var(--danger-foreground);
border-color: var(--danger-light);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.app-button--danger:active {
background: var(--danger-dark);
color: var(--danger-foreground);
border-color: var(--danger-dark);
box-shadow: var(--shadow-sm);
transform: translateY(0);
}
.app-button--danger:focus-visible {
outline: 2px solid var(--danger-color);
outline-offset: 2px;
box-shadow: var(--shadow-md), 0 0 0 3px var(--focus-ring);
}
/* Success - Botón de acción exitosa */
.app-button--success {
background: var(--success-color);
color: var(--success-foreground);
border-color: var(--success-color);
box-shadow: var(--shadow-sm);
}
.app-button--success:hover {
background: var(--success-light);
color: var(--success-foreground);
border-color: var(--success-light);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.app-button--success:active {
background: var(--success-dark);
color: var(--success-foreground);
border-color: var(--success-dark);
box-shadow: var(--shadow-sm);
transform: translateY(0);
}
.app-button--success:focus-visible {
outline: 2px solid var(--success-color);
outline-offset: 2px;
box-shadow: var(--shadow-md), 0 0 0 3px var(--focus-ring);
}
/* Warning - Botón de advertencia */
.app-button--warning {
background: var(--warning-color);
color: var(--warning-foreground);
border-color: var(--warning-color);
box-shadow: var(--shadow-sm);
}
.app-button--warning:hover {
background: var(--warning-light);
color: var(--warning-foreground);
border-color: var(--warning-light);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.app-button--warning:active {
background: var(--warning-dark);
color: var(--warning-foreground);
border-color: var(--warning-dark);
box-shadow: var(--shadow-sm);
transform: translateY(0);
}
.app-button--warning:focus-visible {
outline: 2px solid var(--warning-color);
outline-offset: 2px;
box-shadow: var(--shadow-md), 0 0 0 3px var(--focus-ring);
}
/* Info - Botón informativo */
.app-button--info {
background: var(--info-color);
color: var(--info-foreground);
border-color: var(--info-color);
box-shadow: var(--shadow-sm);
}
.app-button--info:hover {
background: var(--info-light);
color: var(--info-foreground);
border-color: var(--info-light);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.app-button--info:active {
background: var(--info-dark);
color: var(--info-foreground);
border-color: var(--info-dark);
box-shadow: var(--shadow-sm);
transform: translateY(0);
}
.app-button--info:focus-visible {
outline: 2px solid var(--info-color);
outline-offset: 2px;
box-shadow: var(--shadow-md), 0 0 0 3px var(--focus-ring);
}
/* Accent - Botón de acento */
.app-button--accent {
background: var(--accent-color);
color: var(--accent-foreground);
border-color: var(--accent-color);
box-shadow: var(--shadow-sm);
}
.app-button--accent:hover {
background: var(--accent-light);
color: var(--accent-foreground);
border-color: var(--accent-light);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.app-button--accent:active {
background: var(--accent-dark);
color: var(--accent-foreground);
border-color: var(--accent-dark);
box-shadow: var(--shadow-sm);
transform: translateY(0);
}
.app-button--accent:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
box-shadow: var(--shadow-md), 0 0 0 3px var(--focus-ring);
}
/* Light - Botón claro */
.app-button--light {
background: var(--surface-color);
color: var(--text-color);
border-color: var(--border-color);
box-shadow: var(--shadow-sm);
}
.app-button--light:hover {
background: var(--secondary-background);
color: var(--text-color);
border-color: var(--border-color);
box-shadow: var(--shadow-md);
}
.app-button--light:active {
background: var(--secondary-background);
color: var(--text-color);
box-shadow: var(--shadow-sm);
}
.app-button--light:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
}
/* Dark - Botón oscuro (útil en fondos claros) */
.app-button--dark {
background: var(--text-color);
color: var(--text-light);
border-color: var(--text-color);
box-shadow: var(--shadow-sm);
}
.app-button--dark:hover {
background: var(--text-secondary);
color: var(--text-light);
border-color: var(--text-secondary);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.app-button--dark:active {
background: var(--text-color);
color: var(--text-light);
box-shadow: var(--shadow-sm);
transform: translateY(0);
}
.app-button--dark:focus-visible {
outline: 2px solid var(--text-color);
outline-offset: 2px;
}
/* Outline variants adicionales */
.app-button--outline-secondary {
background: transparent;
color: var(--secondary-color);
border-color: var(--secondary-color);
}
.app-button--outline-secondary:hover {
background: var(--secondary-color);
color: var(--secondary-foreground);
border-color: var(--secondary-color);
}
.app-button--outline-danger {
background: transparent;
color: var(--danger-color);
border-color: var(--danger-color);
}
.app-button--outline-danger:hover {
background: var(--danger-color);
color: var(--danger-foreground);
border-color: var(--danger-color);
}
.app-button--outline-success {
background: transparent;
color: var(--success-color);
border-color: var(--success-color);
}
.app-button--outline-success:hover {
background: var(--success-color);
color: var(--success-foreground);
border-color: var(--success-color);
}
/* Link - Botón estilo enlace */
.app-button--link {
background: transparent;
color: var(--link-color);
border: none;
padding: 0.25rem 0.5rem;
min-width: 0;
min-height: 0;
box-shadow: none;
font-weight: 500;
}
.app-button--link:hover {
color: var(--link-hover-color);
text-decoration: underline;
background: transparent;
transform: none;
box-shadow: none;
}
.app-button--link:active {
color: var(--link-hover-color);
background: transparent;
transform: none;
}
.app-button--link:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
box-shadow: none;
}
/* Link Header - Variante ultra discreta para headers de tabla */
.app-button--link-header {
all: unset;
display: inline-flex;
align-items: center;
gap: 0.25rem;
cursor: pointer;
color: var(--table-header-text);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
transition: color 0.2s ease;
padding: 0;
background: transparent;
}
.app-button--link-header:hover {
color: var(--primary-color);
}
.app-button--link-header:active {
color: var(--primary-dark);
}
.app-button--link-header:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
border-radius: 0.125rem;
}
/* Asegurarse que spans dentro heredan */
.app-button--link-header span,
.app-button--link-header .app-button__text {
color: inherit !important;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-transform: inherit;
}
/* Iconos en link-header más pequeños */
.app-button--link-header .app-button__icon,
.app-button--link-header svg {
width: 0.75rem;
height: 0.75rem;
}
/* ============================================== */
/* Estados */
/* ============================================== */
/* Disabled - Estado deshabilitado */
.app-button--disabled,
.app-button:disabled {
background: var(--disabled-background);
color: var(--disabled-color);
border-color: var(--disabled-background);
cursor: not-allowed;
opacity: 0.6;
box-shadow: none;
transform: none;
}
.app-button--disabled:hover,
.app-button:disabled:hover {
background: var(--disabled-background);
color: var(--disabled-color);
border-color: var(--disabled-background);
box-shadow: none;
transform: none;
}
/* Ghost y outline disabled */
.app-button--ghost:disabled,
.app-button--outline:disabled,
.app-button--outline-secondary:disabled,
.app-button--outline-danger:disabled,
.app-button--outline-success:disabled {
background: transparent;
color: var(--disabled-color);
border-color: var(--disabled-color);
}
/* Full width */
.app-button--fullwidth {
width: 100%;
}
/* ============================================== */
/* Tamaños */
/* ============================================== */
.app-button--xs {
font-size: 0.75rem;
padding: 0.375rem 0.75rem;
min-height: 1.75rem;
}
.app-button--sm {
font-size: 0.8125rem;
padding: 0.5rem 1rem;
min-height: 2rem;
}
.app-button--lg {
font-size: 1rem;
padding: 0.75rem 1.5rem;
min-height: 3rem;
}
.app-button--xl {
font-size: 1.125rem;
padding: 1rem 2rem;
min-height: 3.5rem;
}
/* ============================================== */
/* Grupos de botones */
/* ============================================== */
.app-button-group {
display: inline-flex;
gap: 0;
}
.app-button-group .app-button {
border-radius: 0;
}
.app-button-group .app-button:first-child {
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.app-button-group .app-button:last-child {
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
.app-button-group .app-button:not(:last-child) {
border-right-width: 0;
}
/* ============================================== */
/* Loading state */
/* ============================================== */
.app-button--loading {
pointer-events: none;
position: relative;
color: transparent;
}
.app-button--loading .app-button__icon,
.app-button--loading .app-button__text {
opacity: 0;
}
.app-button--loading::after {
content: '';
position: absolute;
width: 1rem;
height: 1rem;
top: 50%;
left: 50%;
margin-left: -0.5rem;
margin-top: -0.5rem;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: app-button-spin 0.6s linear infinite;
opacity: 1;
}
@keyframes app-button-spin {
to {
transform: rotate(360deg);
}
}
/* ============================================== */
/* Ajustes para modo oscuro */
/* ============================================== */
.app-button__text,
.app-button__icon,
.app-button span {
color: inherit !important;
}
/* ==============================================
AppInput - Componente de entrada moderno
============================================== */
/* Bloque: app-input */
.app-input__control {
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 0.625rem 1rem;
font-size: 0.9375rem;
line-height: 1.5;
font-weight: 400;
color: var(--text-color);
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 0.5rem;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
outline: none;
box-shadow: var(--shadow-xs);
}
/* Estado focus - Más prominente */
.app-input__control:focus {
border-color: var(--focus-color);
background-color: var(--surface-color);
box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-sm);
transform: translateY(-1px);
}
/* Estado hover */
.app-input__control:hover:not(:disabled):not([readonly]):not(.app-input__control--invalid) {
border-color: var(--highlight-color);
box-shadow: var(--shadow-sm);
}
/* Estados disabled y readonly */
.app-input__control:disabled,
.app-input__control[readonly] {
background-color: var(--disabled-background);
color: var(--disabled-color);
border-color: var(--border-color);
cursor: not-allowed;
opacity: 0.6;
box-shadow: none;
}
.app-input__control[readonly] {
cursor: default;
}
/* Estado de error - Más visible */
.app-input__control--invalid {
border-color: var(--danger-color);
background-color: var(--surface-color);
color: var(--text-color);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.app-input__control--invalid:focus {
border-color: var(--danger-color);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2), var(--shadow-sm);
}
/* Estado de éxito */
.app-input__control--valid {
border-color: var(--success-color);
background-color: var(--surface-color);
}
.app-input__control--valid:focus {
border-color: var(--success-color);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), var(--shadow-sm);
}
/* Placeholder mejorado */
.app-input__control::placeholder {
color: var(--text-muted);
opacity: 0.7;
font-weight: 400;
}
.app-input__control:focus::placeholder {
opacity: 0.5;
}
/* Tamaños */
.app-input__control--sm {
padding: 0.5rem 0.875rem;
font-size: 0.875rem;
}
.app-input__control--lg {
padding: 0.75rem 1.25rem;
font-size: 1rem;
}
/* ============================================== */
/* Input con iconos */
/* ============================================== */
.app-input__wrapper {
position: relative;
display: flex;
align-items: center;
}
.app-input__wrapper .app-input__control {
padding-right: 2.5rem;
}
.app-input__icon {
position: absolute;
right: 0.75rem;
color: var(--text-muted);
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.app-input__control:focus ~ .app-input__icon {
color: var(--focus-color);
}
.app-input__control--invalid ~ .app-input__icon {
color: var(--danger-color);
}
/* ============================================== */
/* Responsive */
/* ============================================== */
@media (max-width: 768px) {
.app-input__control {
font-size: 0.875rem;
padding: 0.5rem 0.875rem;
}
.app-input__control--lg {
padding: 0.625rem 1rem;
font-size: 0.9375rem;
}
}
/* ============================================== */
/* Modo oscuro */
/* ============================================== */
@media (prefers-color-scheme: dark) {
/* Input en dark mode - borde más visible y contraste */
.app-input__control {
background-color: var(--surface-color);
border-color: rgba(96, 165, 250, 0.25);
box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.1), var(--shadow-xs);
}
.app-input__control:hover:not(:disabled):not([readonly]):not(.app-input__control--invalid) {
border-color: rgba(96, 165, 250, 0.4);
box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2), var(--shadow-sm);
}
.app-input__control:focus {
background-color: var(--surface-alt-color);
border-color: var(--focus-color);
box-shadow: 0 0 0 1px var(--focus-color), 0 0 0 4px var(--focus-ring), var(--shadow-sm);
}
/* Estados de error y éxito más visibles */
.app-input__control--invalid {
border-color: var(--danger-color);
box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.3), 0 0 0 3px rgba(248, 113, 113, 0.1);
}
.app-input__control--invalid:focus {
box-shadow: 0 0 0 1px var(--danger-color), 0 0 0 4px rgba(248, 113, 113, 0.2), var(--shadow-sm);
}
.app-input__control--valid {
border-color: var(--success-color);
box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.3);
}
.app-input__control--valid:focus {
box-shadow: 0 0 0 1px var(--success-color), 0 0 0 4px rgba(52, 211, 153, 0.2), var(--shadow-sm);
}
/* Placeholder más visible en dark */
.app-input__control::placeholder {
color: var(--text-muted);
opacity: 0.6;
}
/* Disabled state */
.app-input__control:disabled,
.app-input__control[readonly] {
background-color: var(--disabled-background);
border-color: rgba(156, 163, 175, 0.2);
box-shadow: none;
}
}
/* Override explícito para data-theme dark */
:root[data-theme='dark'] .app-input__control {
background-color: var(--surface-color);
border-color: rgba(96, 165, 250, 0.25);
box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.1), var(--shadow-xs);
}
:root[data-theme='dark'] .app-input__control:hover:not(:disabled):not([readonly]):not(.app-input__control--invalid) {
border-color: rgba(96, 165, 250, 0.4);
box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2), var(--shadow-sm);
}
:root[data-theme='dark'] .app-input__control:focus {
background-color: var(--surface-alt-color);
border-color: var(--focus-color);
box-shadow: 0 0 0 1px var(--focus-color), 0 0 0 4px var(--focus-ring), var(--shadow-sm);
}
.app-input-field {
margin-bottom: 1rem; /* unified with select field */
width: 100%;
display: flex;
flex-direction: column;
}
.app-input-field__label-container {
margin-bottom: 0.25rem;
display: flex;
align-items: center;
gap: 0.3rem;
}
/* Unify vertical rhythm: do not reserve extra space when there's no error */
.app-input-field__error {
color: var(--danger-color);
font-size: 0.95rem;
margin-top: 0.2rem; /* slightly tighter */
font-weight: 500;
min-height: 0; /* remove reserved height to align with selects */
}
/* Responsive */
@media (max-width: 600px) {
.app-input-field {
margin-bottom: 0.85rem;
}
.app-input-field__error {
font-size: 0.9rem;
}
}
/* ==============================================
AppLabel - Componente de etiqueta moderno
============================================== */
.app-label {
font-weight: 500;
color: var(--text-color);
font-size: 0.875rem;
margin-bottom: 0.375rem;
display: inline-block;
cursor: pointer;
transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
line-height: 1.5;
letter-spacing: 0.01em;
}
/* Estado de error */
.app-label--error {
color: var(--danger-color);
font-weight: 600;
}
/* Label requerido */
.app-label--required::after {
content: '*';
color: var(--danger-color);
margin-left: 0.25rem;
font-weight: 600;
}
/* Label con tooltip */
.app-label__wrapper {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.375rem;
vertical-align: middle;
}
.app-label__tooltip-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
color: var(--text-muted);
cursor: help;
transition: color 0.2s;
}
.app-label__tooltip-icon:hover {
color: var(--primary-color);
}
/* Hover effect */
.app-label:hover {
color: var(--primary-color);
}
.app-label--error:hover {
color: var(--danger-light);
}
/* Tamaños */
.app-label--sm {
font-size: 0.8125rem;
margin-bottom: 0.25rem;
}
.app-label--lg {
font-size: 1rem;
margin-bottom: 0.5rem;
}
/* Estado disabled */
.app-label--disabled {
color: var(--disabled-color);
cursor: not-allowed;
opacity: 0.6;
}
.app-label--disabled:hover {
color: var(--disabled-color);
}
/* Icono del label */
.app-label__icon {
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 0.375rem;
font-size: 1rem;
vertical-align: middle;
}
.app-label__text {
vertical-align: middle;
}
/* ============================================== */
/* Modo oscuro */
/* ============================================== */
@media (prefers-color-scheme: dark) {
.app-label:hover {
color: var(--primary-light);
}
.app-label__tooltip-icon:hover {
color: var(--primary-light);
}
}
:root[data-theme='dark'] .app-label:hover {
color: var(--primary-light);
}
/* ============================================
AppLazySelect - Componente de selección con carga bajo demanda
Nomenclatura BEM: app-lazy-select
Estilo: Botones dentro del input (similar a DateRange)
============================================ */
/* Variables CSS locales */
:root {
--als-spacing-xs: 0.25rem;
--als-spacing-sm: 0.5rem;
--als-spacing-md: 0.75rem;
--als-spacing-lg: 1rem;
--als-spacing-xl: 1.5rem;
--als-radius-sm: 0.375rem;
--als-radius-md: 0.5rem;
--als-transition: all 0.2s ease;
--als-dropdown-max-height: 400px;
}
/* ============================================
BLOQUE: app-lazy-select
============================================ */
.app-lazy-select {
width: 100%;
margin-bottom: 1rem;
display: flex;
flex-direction: column;
position: relative;
}
/* ============================================
ELEMENTO: label-container
============================================ */
.app-lazy-select__label-container {
margin-bottom: var(--als-spacing-xs);
display: flex;
align-items: center;
gap: 0.3rem;
}
/* ============================================
ELEMENTO: input-wrapper (contiene input + botones)
============================================ */
.app-lazy-select__input-wrapper {
position: relative;
width: 100%;
display: flex;
align-items: center;
}
/* ============================================
ELEMENTO: input
============================================ */
.app-lazy-select__input {
flex: 1;
width: 100%;
padding: var(--als-spacing-md) var(--als-spacing-lg);
padding-right: 5rem; /* Espacio para los botones */
border: 1px solid var(--border-color);
border-radius: var(--als-radius-md);
background-color: var(--surface-color);
color: var(--text-color);
font-size: 1rem;
transition: var(--als-transition);
outline: none;
}
.app-lazy-select__input::placeholder {
color: var(--text-muted);
}
.app-lazy-select__input:focus {
border-color: var(--focus-color);
box-shadow: 0 0 0 3px var(--focus-ring);
}
.app-lazy-select__input:hover:not(:disabled):not(:read-only) {
border-color: var(--hover-color);
}
/* MODIFICADOR: invalid */
.app-lazy-select__input--invalid {
border-color: var(--danger-color);
}
.app-lazy-select__input--invalid:focus {
border-color: var(--danger-color);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}
/* MODIFICADOR: disabled */
.app-lazy-select__input--disabled {
background-color: var(--disabled-background);
color: var(--disabled-color);
cursor: not-allowed;
}
.app-lazy-select__input:read-only {
background-color: var(--secondary-background);
cursor: default;
}
/* ============================================
ELEMENTO: actions (contenedor de botones)
============================================ */
.app-lazy-select__actions {
position: absolute;
right: 0.375rem;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 0.25rem;
pointer-events: none;
}
.app-lazy-select__actions > * {
pointer-events: auto;
}
/* ============================================
ELEMENTO: action-btn (botones dentro del input)
============================================ */
.app-lazy-select__action-btn {
width: 2rem;
height: 2rem;
border: none;
border-radius: var(--als-radius-sm);
background-color: transparent;
color: var(--text-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--als-transition);
flex-shrink: 0;
}
.app-lazy-select__action-btn:hover:not(:disabled) {
background-color: var(--hover-background-color);
color: var(--text-color);
}
.app-lazy-select__action-btn:active:not(:disabled) {
transform: scale(0.95);
}
.app-lazy-select__action-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.app-lazy-select__action-btn svg {
width: 1.125rem;
height: 1.125rem;
flex-shrink: 0;
}
/* MODIFICADOR: search-btn */
.app-lazy-select__search-btn {
color: var(--primary-color);
}
.app-lazy-select__search-btn:hover:not(:disabled) {
background-color: var(--primary-color-light, rgba(59, 130, 246, 0.1));
color: var(--primary-color);
}
/* MODIFICADOR: clear-btn */
.app-lazy-select__clear-btn {
color: var(--danger-color);
}
.app-lazy-select__clear-btn:hover:not(:disabled) {
background-color: var(--danger-background);
color: var(--danger-color);
}
/* ============================================
ELEMENTO: spinner (dentro del botón buscar)
============================================ */
.app-lazy-select__spinner {
width: 1.125rem;
height: 1.125rem;
border: 2px solid var(--primary-color-light, rgba(59, 130, 246, 0.2));
border-top-color: var(--primary-color);
border-radius: 50%;
animation: app-lazy-select-spin 0.8s linear infinite;
}
@keyframes app-lazy-select-spin {
to {
transform: rotate(360deg);
}
}
/* ============================================
ELEMENTO: dropdown
============================================ */
.app-lazy-select__dropdown {
position: absolute;
top: calc(100% + var(--als-spacing-xs));
left: 0;
right: 0;
z-index: 1000;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: var(--als-radius-md);
box-shadow: var(--shadow-lg);
max-height: var(--als-dropdown-max-height);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* ============================================
ELEMENTO: empty
============================================ */
.app-lazy-select__empty {
padding: var(--als-spacing-xl);
text-align: center;
}
.app-lazy-select__empty-text {
color: var(--text-muted);
font-size: 0.95rem;
}
/* ============================================
ELEMENTO: list
============================================ */
.app-lazy-select__list {
list-style: none;
margin: 0;
padding: 0;
overflow-y: auto;
max-height: 300px;
}
/* ============================================
ELEMENTO: item
============================================ */
.app-lazy-select__item {
padding: var(--als-spacing-md) var(--als-spacing-lg);
cursor: pointer;
color: var(--text-color);
font-size: 1rem;
transition: var(--als-transition);
border-bottom: 1px solid var(--border-light);
}
.app-lazy-select__item:last-child {
border-bottom: none;
}
.app-lazy-select__item:hover {
background-color: var(--hover-background-color);
}
.app-lazy-select__item:focus {
outline: none;
background-color: var(--hover-background-color);
border-left: 3px solid var(--focus-color);
}
/* MODIFICADOR: selected */
.app-lazy-select__item--selected {
background-color: var(--primary-color);
color: var(--primary-foreground);
font-weight: 600;
}
.app-lazy-select__item--selected:hover {
background-color: var(--primary-hover);
}
/* ============================================
ELEMENTO: pagination
============================================ */
.app-lazy-select__pagination {
padding: var(--als-spacing-md);
border-top: 1px solid var(--border-color);
background-color: var(--surface-alt-color);
}
/* ============================================
ELEMENTO: error
============================================ */
.app-lazy-select__error {
color: var(--danger-color);
font-size: 0.95rem;
margin-top: var(--als-spacing-xs);
font-weight: 500;
}
/* ============================================
RESPONSIVE: Tablet (max-width: 768px)
============================================ */
@media (max-width: 768px) {
.app-lazy-select__input {
padding: var(--als-spacing-sm) var(--als-spacing-md);
padding-right: 5rem;
font-size: 0.95rem;
}
.app-lazy-select__dropdown {
max-height: 350px;
}
.app-lazy-select__list {
max-height: 250px;
}
}
/* ============================================
RESPONSIVE: Mobile (max-width: 640px)
============================================ */
@media (max-width: 640px) {
.app-lazy-select {
margin-bottom: 0.85rem;
}
.app-lazy-select__input {
padding: var(--als-spacing-sm) var(--als-spacing-md);
padding-right: 4.5rem;
font-size: 0.9rem;
}
.app-lazy-select__action-btn {
width: 1.75rem;
height: 1.75rem;
}
.app-lazy-select__action-btn svg {
width: 1rem;
height: 1rem;
}
.app-lazy-select__dropdown {
max-height: 300px;
}
.app-lazy-select__list {
max-height: 200px;
}
.app-lazy-select__item {
padding: var(--als-spacing-sm) var(--als-spacing-md);
font-size: 0.95rem;
}
.app-lazy-select__error {
font-size: 0.9rem;
}
}
/* ============================================
DARK MODE (Media Query)
============================================ */
@media (prefers-color-scheme: dark) {
.app-lazy-select__input {
background-color: var(--surface-color);
color: var(--text-color);
border-color: var(--border-color);
}
.app-lazy-select__dropdown {
background-color: var(--surface-color);
border-color: var(--border-color);
box-shadow: var(--shadow-lg);
}
.app-lazy-select__item {
color: var(--text-color);
border-bottom-color: var(--border-light);
}
.app-lazy-select__item:hover {
background-color: var(--hover-background-color);
}
}
/* ============================================
DARK MODE (Data Attribute)
============================================ */
:root[data-theme='dark'] .app-lazy-select__input {
background-color: var(--surface-color);
color: var(--text-color);
border-color: var(--border-color);
}
:root[data-theme='dark'] .app-lazy-select__dropdown {
background-color: var(--surface-color);
border-color: var(--border-color);
}
:root[data-theme='dark'] .app-lazy-select__item {
color: var(--text-color);
border-bottom-color: var(--border-light);
}
:root[data-theme='dark'] .app-lazy-select__item:hover {
background-color: var(--hover-background-color);
}
/* ============================================
ACCESSIBILITY: Focus visible
============================================ */
.app-lazy-select__input:focus-visible,
.app-lazy-select__item:focus-visible,
.app-lazy-select__action-btn:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
}
/* ============================================
ACCESSIBILITY: Prefers reduced motion
============================================ */
@media (prefers-reduced-motion: reduce) {
.app-lazy-select__input,
.app-lazy-select__item,
.app-lazy-select__action-btn,
.app-lazy-select__spinner {
transition: none;
animation: none;
}
}
/* ============================================
PRINT: Optimización para impresión
============================================ */
@media print {
.app-lazy-select__dropdown {
display: none;
}
.app-lazy-select__actions {
display: none;
}
}
.app-password-field {
margin-bottom: 1.5rem;
width: 100%;
display: flex;
flex-direction: column;
}
.app-password-field__label-container {
margin-bottom: 0.25rem;
display: flex;
align-items: center;
gap: 0.3rem;
}
.app-password-field__input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.app-password-field__toggle {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
cursor: pointer;
color: var(--text-muted);
font-size: 1.2em;
padding: 0 0.25em;
display: flex;
align-items: center;
transition: color 0.2s;
}
.app-password-field__toggle:hover,
.app-password-field__toggle:focus-visible {
color: var(--primary-color);
outline: none;
}
.app-password-field__error {
color: var(--danger-color);
font-size: 0.95rem;
margin-top: 0.3rem;
font-weight: 500;
min-height: 1.2em;
}
/* Responsive */
@media (max-width: 600px) {
.app-password-field {
margin-bottom: 1rem;
}
.app-password-field__error {
font-size: 0.9rem;
}
}
/* ==============================================
AppSelect - Componente de selección moderno
============================================== */
.app-select {
position: relative;
width: 100%;
min-width: 0;
font-family: inherit;
box-sizing: border-box;
display: flex;
flex-direction: column;
max-width: 100%;
margin-bottom: 1rem;
}
/* Control principal */
.app-select__control {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 0.5rem;
padding: 0.625rem 1rem;
cursor: pointer;
min-height: 44px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
color: var(--text-color);
width: 100%;
min-width: 0;
box-sizing: border-box;
box-shadow: var(--shadow-xs);
}
.app-select__control:hover {
border-color: var(--highlight-color);
box-shadow: var(--shadow-sm);
}
.app-select__control:focus,
.app-select__control--open {
border-color: var(--focus-color);
box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-sm);
outline: none;
}
/* Estado de error - aplicado al componente */
.app-select--invalid .app-select__control {
border-color: var(--danger-color);
background: var(--surface-color);
color: var(--text-color);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.app-select--invalid .app-select__control:focus,
.app-select--invalid .app-select__control--open {
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2), var(--shadow-sm);
}
/* Mensaje de error */
.app-select__error {
color: var(--danger-color);
font-size: 0.875rem;
margin-top: 0.375rem;
display: flex;
align-items: flex-start;
gap: 0.25rem;
animation: app-select-error-slide-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes app-select-error-slide-in {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Estado de error (legacy) */
.app-select__control--error {
border-color: var(--danger-color);
background: var(--surface-color);
color: var(--text-color);
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.app-select__control--error:focus,
.app-select__control--error.app-select__control--open {
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2), var(--shadow-sm);
}
/* Placeholder */
.app-select__placeholder {
color: var(--text-muted);
font-style: normal;
opacity: 0.7;
}
/* Texto seleccionado */
.app-select__selected-text {
color: var(--text-color);
font-weight: 500;
}
/* Flecha indicadora */
.app-select__arrow {
margin-left: 0.5rem;
font-size: 1.1em;
color: var(--text-muted);
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.app-select__control--open .app-select__arrow {
transform: rotate(180deg);
color: var(--focus-color);
}
/* Dropdown */
.app-select__dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 0.5rem;
box-shadow: var(--shadow-lg);
z-index: 100;
padding: 0.5rem 0;
margin-top: 0.25rem;
animation: app-select-dropdown-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
min-width: 0;
box-sizing: border-box;
max-width: 100%;
overflow: hidden;
}
@keyframes app-select-dropdown-fade-in {
from {
opacity: 0;
transform: translateY(-8px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Campo de búsqueda */
.app-select__search {
width: calc(100% - 1rem);
margin: 0.5rem 0.5rem;
display: block;
padding: 0.5rem 0.875rem;
border: 1px solid var(--border-color);
border-radius: 0.5rem;
font-size: 0.9375rem;
background: var(--surface-alt-color);
color: var(--text-color);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box;
outline: none;
}
.app-select__search:focus {
border-color: var(--focus-color);
box-shadow: 0 0 0 2px var(--focus-ring);
background: var(--surface-color);
}
.app-select__search::placeholder {
color: var(--text-muted);
opacity: 0.7;
}
/* Lista de opciones */
.app-select__list {
list-style: none;
margin: 0;
padding: 0.25rem 0.5rem;
max-height: 240px;
overflow-y: auto;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
/* Scrollbar personalizado */
.app-select__list::-webkit-scrollbar {
width: 6px;
}
.app-select__list::-webkit-scrollbar-track {
background: transparent;
}
.app-select__list::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 3px;
}
.app-select__list::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
/* Ítems de la lista */
.app-select__item {
padding: 0.625rem 0.875rem;
cursor: pointer;
color: var(--text-color);
border-radius: 0.375rem;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
box-sizing: border-box;
font-size: 0.9375rem;
}
.app-select__item:hover,
.app-select__item:focus {
background: var(--hover-background-color);
color: var(--primary-color);
outline: none;
font-weight: 500;
}
.app-select__item--selected {
background: var(--primary-color);
color: var(--text-light);
font-weight: 600;
}
.app-select__item--selected:hover {
background: var(--primary-hover);
color: var(--text-light);
}
/* Estado disabled */
.app-select--disabled .app-select__control {
background: var(--disabled-background);
border-color: var(--border-color);
color: var(--disabled-color);
cursor: not-allowed;
opacity: 0.6;
}
.app-select--disabled .app-select__control:hover {
border-color: var(--border-color);
box-shadow: none;
}
/* ============================================== */
/* Responsive */
/* ============================================== */
@media (max-width: 768px) {
.app-select {
max-width: 100%;
margin-bottom: 0.85rem;
}
.app-select__control {
padding: 0.5rem 0.875rem;
font-size: 0.875rem;
}
.app-select__dropdown {
left: 0;
right: 0;
min-width: 180px;
}
.app-select__list {
max-height: 200px;
}
.app-select__item {
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
}
.app-select__error {
font-size: 0.8125rem;
}
}
/* ============================================== */
/* Modo oscuro */
/* ============================================== */
@media (prefers-color-scheme: dark) {
/* Select en dark mode - borde visible */
.app-select__control {
background: var(--surface-color);
border-color: rgba(96, 165, 250, 0.25);
box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.1), var(--shadow-xs);
}
.app-select__control:hover {
border-color: rgba(96, 165, 250, 0.4);
box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2), var(--shadow-sm);
}
.app-select__control:focus,
.app-select__control--open {
border-color: var(--focus-color);
box-shadow: 0 0 0 1px var(--focus-color), 0 0 0 4px var(--focus-ring), var(--shadow-sm);
}
/* Dropdown en dark mode */
.app-select__dropdown {
background: var(--surface-color);
border-color: rgba(96, 165, 250, 0.3);
box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2), var(--shadow-lg);
}
/* Search field en dark mode */
.app-select__search {
background: var(--surface-alt-color);
border-color: rgba(96, 165, 250, 0.2);
box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.1);
}
.app-select__search:focus {
border-color: var(--focus-color);
box-shadow: 0 0 0 1px var(--focus-color), 0 0 0 3px var(--focus-ring);
}
/* Items hover en dark mode */
.app-select__item:hover,
.app-select__item:focus {
background: var(--hover-background-color);
color: var(--primary-light);
}
/* Selected item en dark mode */
.app-select__item--selected {
background: var(--primary-color);
color: var(--text-light);
}
.app-select__item--selected:hover {
background: var(--primary-light);
}
/* Error state en dark mode */
.app-select--invalid .app-select__control {
border-color: var(--danger-color);
box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.3), 0 0 0 3px rgba(248, 113, 113, 0.1);
}
.app-select__control--error {
border-color: var(--danger-color);
box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.3), 0 0 0 3px rgba(248, 113, 113, 0.1);
}
}
/* Override explícito para data-theme dark */
:root[data-theme='dark'] .app-select__control {
background: var(--surface-color);
border-color: rgba(96, 165, 250, 0.25);
box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.1), var(--shadow-xs);
}
:root[data-theme='dark'] .app-select__control:hover {
border-color: rgba(96, 165, 250, 0.4);
box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2), var(--shadow-sm);
}
:root[data-theme='dark'] .app-select__dropdown {
border-color: rgba(96, 165, 250, 0.3);
box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2), var(--shadow-lg);
}
:root[data-theme='dark'] .app-select__item:hover,
:root[data-theme='dark'] .app-select__item:focus {
color: var(--primary-light);
}
:root[data-theme='dark'] .app-select--invalid .app-select__control {
border-color: var(--danger-color);
box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.3), 0 0 0 3px rgba(248, 113, 113, 0.1);
}
.app-select-field { display: block; margin-bottom: 1rem; } /* unify with input field */
.app-select-field__control { margin-top: .25rem; }
.app-select-field--invalid .app-select-field__select { border-color: var(--app-color-error, #ef4444); }
:root{ --sw-track:#334155; --sw-thumb:#e5e7eb; --sw-on:#22c55e; --sw-bg:#0b1220; --sw-fg:#e5e7eb; --sw-focus:#60a5fa; }
@media (prefers-color-scheme: light){ :root{ --sw-track:#cbd5e1; --sw-thumb:#111827; --sw-on:#16a34a; --sw-bg:#f8fafc; --sw-fg:#111827; --sw-focus:#2563eb; } }
.app-switch-bool{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; color:var(--sw-fg); outline:0; margin-bottom: 1rem; }
.app-switch-bool--disabled{ opacity:.6; cursor:not-allowed; pointer-events:none; }
.app-switch-bool__track{ position:relative; width:2.5rem; height:1.35rem; background:var(--sw-track); border-radius:999px; transition:background .2s ease; }
.app-switch-bool__track--on{ background:var(--sw-on); }
.app-switch-bool__thumb{ position:absolute; top:2px; left:2px; width:1rem; height:1rem; border-radius:999px; background:var(--sw-thumb); transition:transform .2s ease; transform:translateX(0); }
.app-switch-bool__track--on .app-switch-bool__thumb{ transform:translateX(1.15rem); }
.app-switch-bool__label{ font-size:.9rem; }
.app-switch-bool:focus-visible .app-switch-bool__track{ box-shadow:0 0 0 3px rgba(96,165,250,.35); }
/* size variants */
.app-switch-bool--sm .app-switch-bool__track{ width:2rem; height:1.1rem; }
.app-switch-bool--sm .app-switch-bool__thumb{ width:.8rem; height:.8rem; top:.15rem; left:.15rem; }
.app-switch-bool--sm .app-switch-bool__track--on .app-switch-bool__thumb{ transform:translateX(.9rem); }
@media (max-width: 640px){ .app-switch-bool__label{ font-size:.85rem; } }
@media (max-width: 600px){ .app-switch-bool{ margin-bottom: .85rem; } }
/* ========================================
PÁGINA DINÁMICA - Header estilo Magazine
======================================== */
.dynamic-page {
min-height: 100vh;
background: var(--background-color);
}
.dynamic-page__header {
padding: 0 2rem;
}
.dynamic-section__text-container {
margin-top: 1.75rem;
}
.dynamic-page__content {
width: 80%;
max-width: 1400px;
margin: 0 auto;
padding: 0 1rem 4rem;
display: flex;
flex-direction: column;
gap: 1.2rem;
}
/* Estados de carga/error */
.dynamic-page__loading,
.dynamic-page__error,
.dynamic-page__empty,
.dynamic-page__not-found {
padding: 3rem 2rem;
border: 1px solid var(--border-color);
border-radius: 12px;
text-align: center;
max-width: 600px;
margin: 4rem auto;
}
.dynamic-page__error {
background-color: var(--danger-background);
border-color: var(--danger-color);
color: var(--danger-color);
}
.dynamic-page__empty {
background-color: var(--surface-color);
color: var(--text-muted);
}
/* Grid de cards centrado */
.dynamic-page__cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
/* Grid de listas - 2 columnas */
.dynamic-page__lists-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
max-width: 1400px;
margin: 0 auto 3rem;
margin-top: 1.75rem;
}
@media (max-width: 900px) {
.dynamic-page__lists-grid {
grid-template-columns: 1fr;
}
}
/* ========================================
COMPONENTE DINÁMICO - Base
======================================== */
.dynamic-section {
width: 100%;
}
/* ========================================
TYPE: TEXT - Sin card, tipografía limpia
======================================== */
.dynamic-section--text {
/*max-width: 900px;*/
margin: 0 auto;
}
.dynamic-section--text .dynamic-section__title {
font-size: 1.75rem;
font-weight: 700;
color: var(--secondary-dark);
margin-bottom: 1rem;
position: relative;
padding-bottom: 0.5rem;
}
.dynamic-section--text .dynamic-section__title::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--secondary-dark) 0%, var(--accent-color) 100%);
}
.dynamic-section--text .dynamic-section__subtitle {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 1.25rem;
}
.dynamic-section--text .dynamic-section__body {
font-size: 1rem;
line-height: 1.4;
color: var(--text-color);
text-align: justify;
text-justify: inter-word;
}
.dynamic-section__paragraph {
color: var(--text-muted) !important;
font-size: 1.03rem !important;
}
.dynamic-section__paragraph a {
color: var(--secondary-color);
font-weight: bold;
}
.dynamic-section__paragraph a:hover {
color: var(--secondary-dark);
}
.dynamic-section-paragraph--resalt {
font-weight: 700;
color: var(--secondary-color);
border-left: 3px solid var(--accent-dark);
padding-left: 1rem;
border-radius: 4px;
font-style: italic;
}
.dynamic-section-resalt--content {
display: flex;
justify-content: center;
}
.dynamic-section-resalt-link--block {
background: var(--card-bg-color);
border-radius: 8px;
padding: 1rem 4rem;
border-left: 4px solid var(--primary-light);
margin-bottom: .55rem;
}
.dynamic-section-resalt--link h5 a {
font-size: 1.25rem;
font-weight: 700;
color: var(--accent-dark);
}
.dynamic-section-resalt--link h5 a:hover{
color: var(--accent-color);
}
/* ========================================
TYPE: TEXT-IMAGE - Grid 60/40
======================================== */
.dynamic-section__text-image-wrapper {
display: grid;
grid-template-columns: 400px 1fr;
gap: 0;
align-items: start;
/*background: var(--surface-color);
border: 1px solid var(--border-color);*/
border-radius: 12px;
overflow: hidden;
/*box-shadow: var(--shadow-sm);*/
}
/* LEFT = imagen a la izquierda (default) */
.dynamic-section--position-left .dynamic-section__text-image-wrapper {
grid-template-columns: 400px 1fr;
}
/* RIGHT = imagen a la derecha */
.dynamic-section--position-right .dynamic-section__text-image-wrapper {
grid-template-columns: 1fr 400px;
}
.dynamic-section--position-right .dynamic-section__image-wrapper {
order: 2;
}
/* TOP = imagen arriba */
.dynamic-section--position-top .dynamic-section__text-image-wrapper {
grid-template-columns: 1fr;
}
.dynamic-section--position-top .dynamic-section__image-wrapper {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
/* BOTTOM = imagen abajo */
.dynamic-section--position-bottom .dynamic-section__text-image-wrapper {
grid-template-columns: 1fr;
}
.dynamic-section--position-bottom .dynamic-section__image-wrapper {
order: 2;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.dynamic-section--position-top .dynamic-section__text-image-wrapper,
.dynamic-section--position-bottom .dynamic-section__text-image-wrapper {
grid-template-columns: 1fr;
}
.dynamic-section--position-bottom .dynamic-section__image-wrapper {
order: 2;
}
.dynamic-section__image-wrapper {
position: relative;
width: 400px;
min-height: 450px;
/*background: var(--surface-alt-color);*/
display: flex;
align-items: center;
justify-content: center;
}
.dynamic-section__image {
width: 100%;
height: auto;
max-height: 600px;
object-fit: contain;
display: block;
}
.dynamic-section__caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 26, 51, 0.85);
backdrop-filter: blur(8px);
padding: 0.75rem 1rem;
font-size: 0.8rem;
font-style: italic;
color: var(--text-light);
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.dynamic-section__content {
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.dynamic-section--text-image .dynamic-section__title {
font-size: 1.75rem;
font-weight: 700;
color: var(--secondary-dark);
margin: 0;
}
.dynamic-section--text-image .dynamic-section__subtitle {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-secondary);
margin: 0;
}
.dynamic-section--text-image .dynamic-section__body {
font-size: 1rem;
line-height: 1.7;
color: var(--text-color);
text-align: justify;
text-justify: inter-word;
margin: 0;
}
.dynamic-section--subtitle {
font-size: 1.25rem;
font-weight: 700;
color: var(--secondary-dark);
margin-top: 1.25rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--border-light);
}
/* ========================================
TYPE: DOCUMENT - Card con pill vertical
======================================== */
.dynamic-section__document-card.app-card {
background: var(--info-background) !important;
border-left: 4px solid var(--info-color) !important;
padding: 1.5rem !important;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dynamic-section__document-card.app-card:hover {
transform: translateX(4px);
box-shadow: var(--shadow-md);
}
.dynamic-section__document-wrapper {
display: flex;
align-items: center;
gap: 1.5rem;
}
.dynamic-section__document-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-color);
border-radius: 12px;
box-shadow: var(--shadow-sm);
}
.dynamic-section__document-icon .dynamic-section__icon {
font-size: 2.5rem;
line-height: 1;
}
.dynamic-section__document-info {
flex: 1;
min-width: 0;
}
.dynamic-section__document-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-color);
margin: 0 0 0.25rem 0;
}
.dynamic-section__document-subtitle {
font-size: 0.9rem;
color: var(--text-muted);
margin: 0;
}
.dynamic-section__download-btn.app-button {
flex-shrink: 0;
}
/* ========================================
TYPE: CARD - Estilo con hover elevado
======================================== */
.dynamic-section--card .app-card {
text-align: center;
padding: 2rem 1.5rem !important;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: default;
}
.dynamic-section--card .app-card:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: var(--shadow-lg);
}
.dynamic-section__card-icon {
font-size: 3rem;
margin-bottom: 1rem;
line-height: 1;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
background: linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-color) 100%);
border-radius: 50%;
box-shadow: var(--shadow-md);
}
.dynamic-section__card-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-color);
margin: 0 0 0.75rem 0;
position: relative;
padding-bottom: 0.75rem;
}
.dynamic-section__card-title::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: var(--accent-color);
}
.dynamic-section__card-body {
font-size: 1rem;
line-height: 1.6;
color: var(--text-color);
margin: 0;
}
/* ========================================
TYPE: TABLE - Tablas responsivas
======================================== */
.dynamic-section--table {
margin: 0 auto;
}
.dynamic-section__table-container {
border-radius: 12px;
/* Centra el título y la tabla como bloque; si la tabla es angosta (poco contenido)
queda centrada en vez de pegada a la izquierda. El ancho de cada celda/columna
no se ve afectado porque th/td reafirman su propio text-align más abajo. */
text-align: center;
}
.dynamic-section__table-title {
font-size: 1.75rem;
font-weight: 700;
color: var(--secondary-dark);
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 0.5rem;
}
.dynamic-section__table-title::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--secondary-dark) 0%, var(--accent-color) 100%);
}
.dynamic-section__table-subtitle {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 1.5rem;
}
.dynamic-section__table-wrapper {
display: inline-block;
max-width: 100%;
overflow-x: auto;
border-radius: 10px;
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
vertical-align: top;
}
/* ── Reset de AppTable dentro de DynamicSection ── */
/* Ancho automático: la tabla se ajusta a su contenido en vez de estirarse siempre al 100% */
.dynamic-section__table-wrapper .app-table__wrapper {
width: auto;
box-shadow: none;
margin-bottom: 0;
border-radius: 0;
}
.dynamic-section__table-wrapper .app-table {
width: auto;
border-collapse: collapse;
border-spacing: 0;
font-size: 0.9375rem;
border: none;
border-radius: 0;
text-align: left;
}
/* ── Header ── */
.dynamic-section__table-wrapper .app-table__head {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-dark) 100%);
position: static;
}
.dynamic-section__table-wrapper .app-table__head th {
background: transparent !important;
color: var(--text-light) !important;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.9rem 1.25rem;
border-bottom: 2px solid color-mix(in srgb, var(--accent-color) 70%, transparent);
white-space: nowrap;
cursor: default;
user-select: none;
}
.dynamic-section__table-wrapper .app-table__head th:hover {
background: transparent !important;
color: var(--text-light) !important;
}
.dynamic-section__table-wrapper .app-table__head th:first-child {
border-top-left-radius: 0;
padding-left: 1.5rem;
}
.dynamic-section__table-wrapper .app-table__head th:last-child {
border-top-right-radius: 0;
padding-right: 1.5rem;
}
/* ── Filas ── */
.dynamic-section__table-wrapper .app-table__body .app-table__row {
border-bottom: 1px solid var(--border-color);
background: var(--surface-color);
transition: background-color 0.15s ease;
}
.dynamic-section__table-wrapper .app-table__body .app-table__row:nth-child(even) {
background: var(--surface-alt-color);
}
.dynamic-section__table-wrapper .app-table__body .app-table__row:hover {
background: var(--hover-background-color) !important;
box-shadow: none !important;
}
.dynamic-section__table-wrapper .app-table__body .app-table__row:last-child {
border-bottom: none;
}
/* ── Celdas ── */
.dynamic-section__table-wrapper .app-table__body td {
padding: 0.85rem 1.25rem;
color: var(--text-color);
font-size: 0.9rem;
border-bottom: none;
vertical-align: middle;
line-height: 1.5;
}
.dynamic-section__table-wrapper .app-table__body td:first-child {
padding-left: 1.5rem;
font-weight: 600;
color: var(--secondary-dark);
}
.dynamic-section__table-wrapper .app-table__body td:last-child {
padding-right: 1.5rem;
}
/* ========================================
TYPE: TIMELINE - Línea del tiempo vertical alternada
======================================== */
.dynamic-section--timeline {
margin: 0 auto;
max-width: 720px;
}
.dynamic-section__timeline-container {
text-align: center;
}
.dynamic-section__timeline-title {
font-size: 1.75rem;
font-weight: 700;
color: var(--secondary-dark);
margin-bottom: 0.75rem;
}
.dynamic-section__timeline-subtitle {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 2rem;
}
.dynamic-section__timeline {
position: relative;
padding: 0.5rem 0;
}
.dynamic-section__timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 3px;
background: var(--border-color);
transform: translateX(-50%);
}
.dynamic-section__timeline-item {
position: relative;
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 1.75rem;
}
.dynamic-section__timeline-item:last-child {
margin-bottom: 0;
}
.dynamic-section__timeline-item:nth-child(even) {
flex-direction: row-reverse;
}
.dynamic-section__timeline-year {
flex: 1;
text-align: right;
font-weight: 700;
color: var(--secondary-color);
font-size: 1.55rem;
}
.dynamic-section__timeline-name {
flex: 1;
text-align: left;
font-weight: 600;
color: var(--text-color);
font-size: 1rem;
}
.dynamic-section__timeline-item:nth-child(even) .dynamic-section__timeline-year {
text-align: left;
}
.dynamic-section__timeline-item:nth-child(even) .dynamic-section__timeline-name {
text-align: right;
}
.dynamic-section__timeline-dot {
flex-shrink: 0;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--secondary-color);
box-shadow: 0 0 0 4px var(--surface-color);
z-index: 1;
}
@media (max-width: 640px) {
.dynamic-section__timeline::before {
left: 6px;
}
.dynamic-section__timeline-item,
.dynamic-section__timeline-item:nth-child(even) {
flex-direction: row;
gap: 1rem;
text-align: left;
padding-left: 0;
}
.dynamic-section__timeline-dot {
order: -1;
}
.dynamic-section__timeline-year,
.dynamic-section__timeline-item:nth-child(even) .dynamic-section__timeline-year {
flex: 0 0 auto;
text-align: left;
min-width: 3.5rem;
}
.dynamic-section__timeline-name,
.dynamic-section__timeline-item:nth-child(even) .dynamic-section__timeline-name {
flex: 1;
text-align: left;
}
}
/*=================================
TYPE: Note - Estilo para notas
*/
.dynamic-section__note {
display: flex;
align-items: flex-start;
gap: 1rem;
background: var(--info-background);
border-left: 4px solid var(--info-color);
border-radius: 8px;
padding: 1.25rem;
box-shadow: var(--shadow-sm);
margin-bottom: 2rem;
}
.dynamic-section__note-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: var(--info-color);
}
.dynamic-section__note-icon svg {
width: 20px;
height: 20px;
}
.dynamic-section__note-content {
flex: 1;
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-color);
}
.dynamic-section__note-content strong {
color: var(--info-color);
font-weight: 600;
}
/* LIST */
.dynamic-section__list-container {
/*background: var(--surface-color);
border: 1px solid var(--border-color);*/
border-radius: 12px;
padding: 2rem;
/*box-shadow: var(--shadow-sm);*/
}
.dynamic-section__list-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--secondary-dark);
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
position: relative;
}
.dynamic-section__list-title::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 50px;
height: 2px;
background: var(--accent-color);
}
.dynamic-section__list-subtitle {
font-size: 1rem;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 1.5rem;
}
.dynamic-section__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.dynamic-section__list-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: 8px;
transition: transform 0.2s, background-color 0.2s;
}
.dynamic-section__list-item:hover {
background: var(--hover-background-color);
transform: translateX(4px);
}
.dynamic-section__list-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--secondary-color) !important;
}
.dynamic-section__list-icon svg {
width: 18px;
height: 18px;
}
.dynamic-section__list-text {
flex: 1;
font-size: 1rem !important;
line-height: 1.1 !important;
color: var(--text-color);
}
.dynamic-section__list-text a {
color: var(--secondary-color);
font-weight: 600;
}
.dynamic-section__list-text a:hover{
color: var(--secondary-dark);
}
/* LIST-CARD */
.dynamic-section--list-card .app-card {
padding: 2rem !important;
}
.dynamic-section__list-card .dynamic-section__list-title {
text-align: center;
}
.dynamic-section__list-card .dynamic-section__list-title::after {
left: 50%;
transform: translateX(-50%);
}
.dynamic-section__list-card .dynamic-section__list-subtitle {
text-align: center;
}
/* ══════════════════════════════════════════════════════════════════
BADGES — propiedades compartidas
Todas las variantes usan estas clases base para texto/botón.
Cada contenedor (*-container) define su propio layout y textura.
══════════════════════════════════════════════════════════════════ */
/* Eyebrow — etiqueta pequeña encima del título */
.dynamic-section__badge-eyebrow {
position: relative;
z-index: 1;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
margin: 0;
}
/* Título principal */
.dynamic-section__badge-title {
position: relative;
z-index: 1;
font-size: 1.6rem;
font-weight: 700;
line-height: 1.25;
margin: 0;
}
/* Subtítulo — debajo del título siempre */
.dynamic-section__badge-subtitle {
position: relative;
z-index: 1;
font-size: 0.95rem;
font-weight: 400;
margin: 0;
line-height: 1.5;
}
/* Botón — z-index para quedar sobre texturas */
.dynamic-section__badge-btn.app-button {
position: relative;
z-index: 1;
flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════════════════
BADGE · Radial glow — centrado, fondo degradado + halo animado
Layout: eyebrow / title / subtitle / btn (columna centrada)
══════════════════════════════════════════════════════════════════ */
.dynamic-section--badge {
max-width: 660px;
margin: 0 auto;
}
.dynamic-section__badge-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
text-align: center;
padding: 2.5rem 2.25rem;
border-radius: 20px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 60%, var(--secondary-dark) 100%);
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
transition: transform 0.25s, box-shadow 0.25s;
}
/* Textura: halo radial animado */
.dynamic-section__badge-container::before {
content: '';
position: absolute;
top: -40%;
left: 50%;
transform: translateX(-50%);
width: 130%;
height: 130%;
background: radial-gradient(ellipse at center, rgba(0,152,255,0.18) 0%, transparent 65%);
animation: badgeRadialPulse 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes badgeRadialPulse {
0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
50%       { opacity: 1;   transform: translateX(-50%) scale(1.12); }
}
.dynamic-section__badge-container:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-xl);
}
.dynamic-section__badge-container .dynamic-section__badge-eyebrow {
color: rgba(255,255,255,0.5);
}
.dynamic-section__badge-container .dynamic-section__badge-title {
color: #fff;
}
.dynamic-section__badge-container .dynamic-section__badge-subtitle {
color: rgba(255,255,255,0.75);
margin-top: 0.15rem;
margin-bottom: 0.75rem;
}
.dynamic-section__badge-container .dynamic-section__badge-btn.app-button {
background: var(--accent-color) !important;
color: #fff !important;
border: none !important;
min-width: 160px;
box-shadow: 0 4px 14px rgba(0,152,255,0.4);
}
.dynamic-section__badge-container .dynamic-section__badge-btn.app-button:hover {
background: var(--accent-dark) !important;
box-shadow: 0 6px 20px rgba(0,152,255,0.55);
}
/* ══════════════════════════════════════════════════════════════════
BADGE-DARK · Filled azul marino + rayas diagonales
Layout: eyebrow / title / subtitle / btn (columna centrada)
══════════════════════════════════════════════════════════════════ */
.dynamic-section--badge-dark {
max-width: 660px;
margin: 0 auto;
}
.dynamic-section__badge__dark-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
text-align: center;
padding: 2.25rem 2rem;
border-radius: 20px;
background: var(--split-left-bg);
box-shadow: 0 8px 24px rgba(0,0,0,0.28);
position: relative;
overflow: hidden;
transition: transform 0.25s, box-shadow 0.25s;
}
/* Textura: rayas diagonales blancas semitransparentes */
.dynamic-section__badge__dark-container::before {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
-45deg,
rgba(255,255,255,0.03) 0px,
rgba(255,255,255,0.03) 1px,
transparent 1px,
transparent 10px
);
pointer-events: none;
}
.dynamic-section__badge__dark-container:hover {
transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(0,0,0,0.35);
}
.dynamic-section__badge__dark-container .dynamic-section__badge-eyebrow {
color: rgba(255,255,255,0.45) !important;
}
.dynamic-section__badge__dark-container .dynamic-section__badge-title {
color: #fff;
}
.dynamic-section__badge__dark-container .dynamic-section__badge-subtitle {
color: rgba(255,255,255,0.6);
margin-top: 0.15rem;
margin-bottom: 0.75rem;
}
.dynamic-section__badge__dark-container .dynamic-section__badge-btn.app-button {
background: rgba(255,255,255,0.1) !important;
color: #fff !important;
border: 1.5px solid rgba(255,255,255,0.28) !important;
backdrop-filter: blur(8px);
min-width: 150px;
}
.dynamic-section__badge__dark-container .dynamic-section__badge-btn.app-button:hover {
background: rgba(255,255,255,0.2) !important;
border-color: rgba(255,255,255,0.55) !important;
}
/* ══════════════════════════════════════════════════════════════════
BADGE-DASHED · Borde dashed + puntos de fondo
Layout: eyebrow / title / subtitle / btn (columna centrada)
══════════════════════════════════════════════════════════════════ */
.dynamic-section--badge-dashed {
max-width: 660px;
margin: 0 auto;
}
.dynamic-section__badge__dashed-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
text-align: center;
padding: 2.25rem 2rem;
border-radius: 18px;
background: var(--surface-color);
border: 2px dashed var(--accent-color);
position: relative;
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
}
/* Textura: micro puntos en el fondo */
.dynamic-section__badge__dashed-container::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(
circle,
color-mix(in srgb, var(--accent-color) 12%, transparent) 1px,
transparent 1px
);
background-size: 20px 20px;
pointer-events: none;
}
.dynamic-section__badge__dashed-container:hover {
border-color: var(--accent-dark);
box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-color) 10%, transparent);
}
.dynamic-section__badge__dashed-container .dynamic-section__badge-eyebrow {
color: var(--accent-dark);
}
.dynamic-section__badge__dashed-container .dynamic-section__badge-title {
font-size: 1.5rem;
color: var(--text-color);
}
.dynamic-section__badge__dashed-container .dynamic-section__badge-subtitle {
color: var(--text-muted);
margin-top: 0.15rem;
margin-bottom: 0.75rem;
}
.dynamic-section__badge__dashed-container .dynamic-section__badge-btn.app-button {
background: var(--accent-color) !important;
color: #fff !important;
border: none !important;
min-width: 150px;
}
.dynamic-section__badge__dashed-container .dynamic-section__badge-btn.app-button:hover {
background: var(--accent-dark) !important;
}
/* ══════════════════════════════════════════════════════════════════
BADGE-OUTLINE · Inline horizontal + grid de fondo
Layout: [eyebrow + title + subtitle (izq)] — [btn (der)]
Subtitle queda debajo del título en el bloque de texto izquierdo
══════════════════════════════════════════════════════════════════ */
.dynamic-section--badge-outline {
max-width: 980px;
margin: 0 auto;
}
.dynamic-section__badge__outline-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1.25rem 1.75rem;
border-radius: 16px;
background: var(--primary-color);
border: 2px dashed color-mix(in srgb, var(--accent-color) 50%, transparent);
position: relative;
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
}
/* Textura: grid sutil */
.dynamic-section__badge__outline-container::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
}
.dynamic-section__badge__outline-container:hover {
border-color: var(--accent-color);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 12%, transparent);
}
/* Bloque de texto a la izquierda */
.dynamic-section__badge__outline-container .dynamic-section__badge-text-group {
display: flex;
flex-direction: column;
gap: 0.2rem;
flex: 1;
min-width: 0;
}
.dynamic-section__badge__outline-container .dynamic-section__badge-eyebrow {
color: rgba(255,255,255,0.45);
}
.dynamic-section__badge__outline-container .dynamic-section__badge-title {
font-size: 1rem;
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dynamic-section__badge__outline-container .dynamic-section__badge-subtitle {
font-size: 0.82rem !important;
color: rgba(255,255,255,0.55) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dynamic-section__badge__outline-container .dynamic-section__badge-btn.app-button {
background: transparent !important;
color: var(--accent-color) !important;
border: 1.5px solid var(--accent-color) !important;
padding: 0.5rem 1.25rem;
white-space: nowrap;
}
.dynamic-section__badge__outline-container .dynamic-section__badge-btn.app-button:hover {
background: var(--accent-color) !important;
color: #fff !important;
}
/* ══════════════════════════════════════════════════════════════════
BADGE-INLINE · Gradient inline horizontal + líneas horizontales
Layout: [eyebrow + title + subtitle (izq)] — [btn (der)]
══════════════════════════════════════════════════════════════════ */
.dynamic-section--badge-inline {
max-width: 980px;
margin: 0 auto;
}
.dynamic-section__badge__inline-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1.25rem 1.75rem;
border-radius: 16px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
}
/* Textura: líneas horizontales finas */
.dynamic-section__badge__inline-container::before {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
0deg,
rgba(255,255,255,0.04) 0px,
rgba(255,255,255,0.04) 1px,
transparent 1px,
transparent 12px
);
pointer-events: none;
}
.dynamic-section__badge__inline-container:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.dynamic-section__badge__inline-container .dynamic-section__badge-text-group {
display: flex;
flex-direction: column;
gap: 0.2rem;
flex: 1;
min-width: 0;
}
.dynamic-section__badge__inline-container .dynamic-section__badge-eyebrow {
color: rgba(255,255,255,0.45);
}
.dynamic-section__badge__inline-container .dynamic-section__badge-title {
font-size: 1rem;
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dynamic-section__badge__inline-container .dynamic-section__badge-subtitle {
font-size: 0.82rem !important;
color: rgba(255,255,255,0.55) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dynamic-section__badge__inline-container .dynamic-section__badge-btn.app-button {
background: rgba(255,255,255,0.12) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,0.3) !important;
backdrop-filter: blur(6px);
padding: 0.5rem 1.25rem;
white-space: nowrap;
}
.dynamic-section__badge__inline-container .dynamic-section__badge-btn.app-button:hover {
background: rgba(255,255,255,0.24) !important;
border-color: rgba(255,255,255,0.55) !important;
}
/* ══════════════════════════════════════════════════════════════════
BADGE-BLUR · Glassmorphism + noise
Layout: eyebrow / title / subtitle / btn (columna centrada)
══════════════════════════════════════════════════════════════════ */
.dynamic-section--badge-blur {
max-width: 660px;
margin: 0 auto;
}
.dynamic-section__badge__blur-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
text-align: center;
padding: 2.25rem 2rem;
border-radius: 20px;
background: rgba(0, 26, 51, 0.55);
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
position: relative;
overflow: hidden;
transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
/* Textura: noise SVG via data-URI para efecto frosted */
.dynamic-section__badge__blur-container::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
background-size: 180px 180px;
opacity: 0.35;
pointer-events: none;
}
.dynamic-section__badge__blur-container:hover {
transform: translateY(-3px);
box-shadow: 0 14px 40px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.22);
}
.dynamic-section__badge__blur-container .dynamic-section__badge-eyebrow {
color: rgba(255,255,255,0.45);
}
.dynamic-section__badge__blur-container .dynamic-section__badge-title {
color: #fff;
text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.dynamic-section__badge__blur-container .dynamic-section__badge-subtitle {
color: rgba(255,255,255,0.65);
margin-top: 0.15rem;
margin-bottom: 0.75rem;
}
.dynamic-section__badge__blur-container .dynamic-section__badge-btn.app-button {
background: rgba(0,152,255,0.75) !important;
color: #fff !important;
border: 1px solid rgba(0,152,255,0.5) !important;
backdrop-filter: blur(4px);
min-width: 150px;
}
.dynamic-section__badge__blur-container .dynamic-section__badge-btn.app-button:hover {
background: var(--accent-color) !important;
border-color: var(--accent-color) !important;
}
/* ══════════════════════════════════════════════════════════════════
BADGE-GLOW · Glow animado + halo exterior
Layout: [eyebrow + title + subtitle (izq)] — [btn (der)]
══════════════════════════════════════════════════════════════════ */
.dynamic-section--badge-glow {
max-width: 980px;
margin: 0 auto;
}
.dynamic-section__badge__glow-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1.25rem 1.75rem;
border-radius: 16px;
background: var(--primary-dark);
border: 1px solid color-mix(in srgb, var(--accent-color) 45%, transparent);
position: relative;
overflow: hidden;
animation: glowPulse 3.5s ease-in-out infinite;
transition: border-color 0.2s;
}
@keyframes glowPulse {
0%, 100% { box-shadow: 0 0 8px 0 color-mix(in srgb, var(--accent-color) 20%, transparent); }
50%       { box-shadow: 0 0 28px 6px color-mix(in srgb, var(--accent-color) 38%, transparent); }
}
/* Textura: línea de acento brillante en la parte superior */
.dynamic-section__badge__glow-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
opacity: 0.8;
pointer-events: none;
}
.dynamic-section__badge__glow-container:hover {
border-color: var(--accent-color);
}
.dynamic-section__badge__glow-container .dynamic-section__badge-text-group {
display: flex;
flex-direction: column;
gap: 0.2rem;
flex: 1;
min-width: 0;
}
.dynamic-section__badge__glow-container .dynamic-section__badge-eyebrow {
color: color-mix(in srgb, var(--accent-color) 70%, white);
}
.dynamic-section__badge__glow-container .dynamic-section__badge-title {
font-size: 1rem;
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dynamic-section__badge__glow-container .dynamic-section__badge-subtitle {
font-size: 0.82rem;
color: rgba(255,255,255,0.5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dynamic-section__badge__glow-container .dynamic-section__badge-btn.app-button {
background: var(--accent-color) !important;
color: #fff !important;
border: none !important;
padding: 0.5rem 1.25rem;
box-shadow: 0 0 12px rgba(0,152,255,0.5);
white-space: nowrap;
}
.dynamic-section__badge__glow-container .dynamic-section__badge-btn.app-button:hover {
background: var(--accent-dark) !important;
box-shadow: 0 0 20px rgba(0,152,255,0.7);
}
/* ══════════════════════════════════════════════════════════════════
BADGE-DOTS · Dots de fondo + borde sutil
Layout: eyebrow / title / subtitle / btn (columna centrada)
══════════════════════════════════════════════════════════════════ */
.dynamic-section--badge-dots {
max-width: 660px;
margin: 0 auto;
}
.dynamic-section__badge__dots-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
text-align: center;
padding: 2.25rem 2rem;
border-radius: 20px;
background: var(--surface-color);
border: 1.5px solid var(--border-color);
position: relative;
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
}
/* Textura: dots más visibles con color de acento */
.dynamic-section__badge__dots-container::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(
circle,
color-mix(in srgb, var(--accent-color) 22%, transparent) 1.5px,
transparent 1.5px
);
background-size: 20px 20px;
pointer-events: none;
}
.dynamic-section__badge__dots-container > * {
position: relative;
z-index: 1;
}
.dynamic-section__badge__dots-container:hover {
border-color: var(--accent-color);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 8%, transparent);
}
.dynamic-section__badge__dots-container .dynamic-section__badge-eyebrow {
color: var(--accent-dark);
}
.dynamic-section__badge__dots-container .dynamic-section__badge-title {
font-size: 1.5rem;
color: var(--text-color);
}
.dynamic-section__badge__dots-container .dynamic-section__badge-subtitle {
color: var(--text-muted);
margin-top: 0.15rem;
margin-bottom: 0.75rem;
}
.dynamic-section__badge__dots-container .dynamic-section__badge-btn.app-button {
background: var(--primary-color) !important;
color: #fff !important;
border: none !important;
min-width: 150px;
}
.dynamic-section__badge__dots-container .dynamic-section__badge-btn.app-button:hover {
background: var(--primary-light) !important;
}
@media (max-width: 480px) {
/* Badges verticales — reducir padding */
.dynamic-section__badge-container,
.dynamic-section__badge__dark-container,
.dynamic-section__badge__dashed-container,
.dynamic-section__badge__blur-container,
.dynamic-section__badge__dots-container {
padding: 1.75rem 1.25rem;
}
.dynamic-section__badge-title {
font-size: 1.35rem;
}
/* Badges inline — apilan en columna centrada en móvil */
.dynamic-section__badge__outline-container,
.dynamic-section__badge__inline-container,
.dynamic-section__badge__glow-container {
flex-direction: column;
text-align: center;
align-items: center;
}
.dynamic-section__badge__outline-container .dynamic-section__badge-title,
.dynamic-section__badge__inline-container .dynamic-section__badge-title,
.dynamic-section__badge__glow-container .dynamic-section__badge-title,
.dynamic-section__badge__outline-container .dynamic-section__badge-subtitle,
.dynamic-section__badge__inline-container .dynamic-section__badge-subtitle,
.dynamic-section__badge__glow-container .dynamic-section__badge-subtitle {
white-space: normal;
overflow: visible;
text-overflow: unset;
text-align: center;
}
}
/* ========================================
ERROR STATE
======================================== */
.dynamic-section__error-card.app-card {
background: var(--danger-background) !important;
border: 1px solid var(--danger-color) !important;
}
.dynamic-section__error {
text-align: center;
color: var(--danger-color);
padding: 1rem;
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 1024px) {
.dynamic-page__cards-grid {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
}
@media (max-width: 768px) {
.dynamic-page__title {
font-size: 2rem;
}
.dynamic-page__content {
width: 95%;
gap: 2rem;
}
/* Text-Image apilado vertical en móvil */
.dynamic-section__text-image-wrapper {
grid-template-columns: 1fr !important;
}
.dynamic-section__image-wrapper {
width: 100% !important;
min-height: 250px !important;
}
.dynamic-section--position-right .dynamic-section__image-wrapper,
.dynamic-section--position-left .dynamic-section__image-wrapper,
.dynamic-section--position-bottom .dynamic-section__image-wrapper {
order: 1;
}
.dynamic-section--position-right .dynamic-section__content,
.dynamic-section--position-left .dynamic-section__content {
order: 2;
}
.dynamic-section__content {
padding: 1.5rem;
}
.dynamic-section__caption {
position: static;
margin-top: 0.5rem;
}
/* Document en columna en móvil */
.dynamic-section__document-wrapper {
flex-direction: column;
text-align: center;
}
.dynamic-section__document-icon {
width: 50px;
height: 50px;
}
/* Cards grid a 1 columna */
.dynamic-page__cards-grid {
grid-template-columns: 1fr;
}
.dynamic-section--card .app-card {
padding: 1.5rem 1rem !important;
}
.dynamic-section__card-title {
font-size: 1.25rem;
}
}
@media (max-width: 480px) {
.dynamic-page__header {
padding: 1rem 0;
}
.dynamic-page__title {
font-size: 1.5rem;
}
.dynamic-section--text .dynamic-section__title {
font-size: 1.5rem;
}
.dynamic-section--text-image .dynamic-section__title {
font-size: 1.5rem;
}
}
.app-member-fees__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.app-member-fees__title {
display: flex;
align-items: center;
gap: .5rem;
font-size: 1.25rem;
font-weight: 600;
margin: 0;
}
.app-member-fees__title svg {
width: 22px;
height: 22px;
}
.app-member-fees__preview-notice {
display: flex;
align-items: center;
gap: .6rem;
padding: .65rem 1rem;
margin-bottom: 1.25rem;
border-radius: 10px;
background: var(--warning-bg, #fff3cd);
color: var(--warning-text, #856404);
font-size: .85rem;
}
.app-member-fees__preview-notice svg {
flex-shrink: 0;
width: 18px;
height: 18px;
}
.app-member-fees__empty {
display: flex;
flex-direction: column;
align-items: center;
gap: .75rem;
padding: 3rem 1rem;
color: var(--text-muted);
text-align: center;
}
.app-member-fees__empty-icon svg {
width: 40px;
height: 40px;
opacity: .5;
}
.app-member-fees__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1rem;
}
.app-member-fees__card {
display: flex;
flex-direction: column;
gap: .85rem;
padding: 1.1rem;
border: 1.5px solid var(--border-light);
border-radius: 12px;
background: var(--surface, #fff);
}
.app-member-fees__card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: .5rem;
}
.app-member-fees__card-name {
font-weight: 600;
line-height: 1.3;
}
.app-member-fees__badge {
flex-shrink: 0;
font-size: .75rem;
font-weight: 600;
padding: .2rem .6rem;
border-radius: 999px;
white-space: nowrap;
}
.app-member-fees__badge--success {
background: var(--success-bg, #d4edda);
color: var(--success-text, #155724);
}
.app-member-fees__badge--warning {
background: var(--warning-bg, #fff3cd);
color: var(--warning-text, #856404);
}
.app-member-fees__badge--danger {
background: var(--error-bg, #f8d7da);
color: var(--error-text, #721c24);
}
.app-member-fees__badge--neutral {
background: var(--border-light, #e9ecef);
color: var(--text-muted, #6c757d);
}
.app-member-fees__card-body {
display: flex;
flex-direction: column;
gap: .35rem;
}
.app-member-fees__card-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: .875rem;
}
.app-member-fees__card-label {
color: var(--text-muted);
}
.app-member-fees__card-value--amount {
font-weight: 600;
}
.app-member-fees__card-footer {
display: flex;
align-items: center;
gap: .6rem;
padding-top: .6rem;
border-top: 1px solid var(--border-light);
}
.app-member-fees__pay-hint {
font-size: .75rem;
color: var(--text-muted);
}
.app-member-fees__subtitle{margin:0;color:var(--text-muted);font-size:.9rem}.app-member-fees__card{position:relative;cursor:pointer}.app-member-fees__card--selected{border-color:var(--secondary-color);box-shadow:var(--shadow-md)}.app-member-fees__check{position:absolute;top:1rem;right:1rem;width:1.15rem;height:1.15rem;accent-color:var(--secondary-color)}.app-member-fees__payment-flow{display:grid;gap:1rem}.app-member-fees__step{display:flex;align-items:center;gap:.65rem;color:var(--text-color);font-size:1rem}.app-member-fees__step span{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--primary-color);color:var(--primary-foreground);font-weight:700}.app-member-fees__summary{display:grid;grid-template-columns:1fr auto;gap:.5rem 1rem;padding:1rem;border:1px solid var(--border-color);border-radius:.65rem;background:var(--surface-alt-color)}.app-member-fees__summary strong:last-child{font-size:1.15rem;color:var(--secondary-color)}.app-member-fees__secure-note{margin:0;color:var(--text-muted);font-size:.9rem}.app-member-fees__actions{display:flex;justify-content:flex-end;gap:.75rem;flex-wrap:wrap}@media(max-width:640px){.app-member-fees__header{align-items:stretch;gap:1rem}.app-member-fees__header .app-button{width:100%}.app-member-fees__actions{flex-direction:column}.app-member-fees__actions>*{width:100%}}
.society-payment-status{min-height:60vh;display:grid;place-items:center;padding:2rem}.society-payment-status__message{color:var(--text-muted);text-align:center}.society-payment-status__card{width:min(100%,30rem);padding:2rem;border:1px solid var(--border-color);border-radius:.85rem;background:var(--surface-color);box-shadow:var(--shadow-md);text-align:center}.society-payment-status__card h1{font-size:1.5rem;margin-bottom:.75rem}.society-payment-status__card p{color:var(--text-muted)}.society-payment-status__card--success h1{color:var(--success-color)}.society-payment-status__card--error h1{color:var(--danger-color)}.society-payment-status__details{display:grid;grid-template-columns:1fr auto;gap:.5rem;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border-color);text-align:left}.society-payment-status__details strong{text-align:right}
/* ========================================== */
/*  AppFiscals - Rediseño Completo Modernizado */
/* ========================================== */
/* Contenedor principal */
.fiscals {
padding: 3rem 0rem;
width: 100%;
}
/* ========================================== */
/*  MODO SELECTOR - Cards Visuales            */
/* ========================================== */
.fiscals__selector {
padding: 1rem;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 12px;
}
.fiscals__selector-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border-color);
}
.fiscals__selector-title {
font-size: 14px;
font-weight: 700;
color: var(--text-color);
display: flex;
align-items: center;
gap: 0.5rem;
}
.fiscals__selector-title svg {
width: 18px;
height: 18px;
color: var(--secondary-color);
}
.fiscals__selector-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}
/* Card individual en selector */
.fiscals__card {
background: var(--surface-color);
border: 2px solid var(--border-color);
border-radius: 10px;
padding: 1rem;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.fiscals__card:hover {
border-color: var(--primary-color);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.fiscals__card--selected {
background: color-mix(in oklab, var(--primary-color) 8%, transparent);
border-color: var(--primary-color);
box-shadow: 0 2px 12px rgba(0, 35, 108, 0.15);
}
.fiscals__card--default::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 40px 40px 0;
border-color: transparent var(--primary-color) transparent transparent;
}
.fiscals__card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.75rem;
}
.fiscals__card-rfc {
font-size: 15px;
font-weight: 800;
color: var(--text-color);
font-family: ui-monospace, monospace;
letter-spacing: 0.02em;
}
.fiscals__card-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 6px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.fiscals__card-badge--default {
background: var(--primary-color);
color: #fff;
position: absolute;
top: 8px;
right: 8px;
z-index: 1;
}
.fiscals__card-badge--complete {
background: var(--success-background);
color: var(--success-color);
border: 1px solid var(--success-light);
}
.fiscals__card-badge--incomplete {
background: var(--warning-background);
color: var(--warning-color);
border: 1px solid var(--warning-light);
}
.fiscals__card-badge svg {
width: 16px;
height: 16px;
}
.fiscals__card-body {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.fiscals__card-company {
font-size: 13px;
font-weight: 600;
color: var(--text-color);
line-height: 1.3;
}
.fiscals__card-regime {
font-size: 12px;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 4px;
}
.fiscals__card-regime svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
.fiscals__card-footer {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--border-light);
display: flex;
align-items: center;
gap: 4px;
}
/* Empty state en selector */
.fiscals__empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 2rem 1rem;
text-align: center;
background: var(--surface-alt-color);
border: 2px dashed var(--border-color);
border-radius: 10px;
}
.fiscals__empty-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--surface-color);
display: flex;
align-items: center;
justify-content: center;
border: 2px dashed var(--border-color);
}
.fiscals__empty-icon svg {
width: 28px;
height: 28px;
color: var(--text-muted);
}
.fiscals__empty-text {
font-size: 14px;
color: var(--text-muted);
margin: 0;
}
.fiscals__warning {
margin-top: 0.75rem;
padding: 0.75rem 1rem;
background: var(--warning-background);
border-left: 4px solid var(--warning-color);
border-radius: 6px;
display: flex;
align-items: center;
gap: 0.5rem;
}
.fiscals__warning svg {
width: 16px;
height: 16px;
color: var(--warning-color);
flex-shrink: 0;
}
.fiscals__warning small {
font-size: 12px;
color: var(--warning-dark);
line-height: 1.4;
}
/* ========================================== */
/*  MODO GRID - Cards en Grid                 */
/* ========================================== */
.fiscals__header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.fiscals__header-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 18px;
font-weight: 800;
color: var(--text-color);
}
.fiscals__header-title svg {
width: 22px;
height: 22px;
color: var(--secondary-color);
}
.fiscals__actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
.fiscals__search-group {
display: flex;
align-items: center;
gap: 0.5rem;
}
.fiscals__search-group .app-button svg {
width: 20px;
height: 20px;
}
/* Grid de cards */
.fiscals__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.25rem;
margin-bottom: 1.5rem;
}
/* Card en grid */
.fiscals__grid-card {
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 1.25rem;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.fiscals__grid-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.fiscals__grid-card--default::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 60px 55px 0;
border-color: transparent var(--secondary-dark) transparent transparent;
}
.fiscals__grid-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}
.fiscals__grid-card-main {
flex: 1;
min-width: 0;
}
.fiscals__grid-card-rfc {
font-size: 16px;
font-weight: 800;
color: var(--text-color);
font-family: ui-monospace, monospace;
letter-spacing: 0.02em;
margin-bottom: 0.25rem;
}
.fiscals__grid-card-company {
font-size: 14px;
font-weight: 600;
color: var(--text-secondary);
line-height: 1.3;
margin-bottom: 0.5rem;
}
.fiscals__grid-card-regime {
font-size: 12px;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 4px;
}
.fiscals__grid-card-regime svg {
width: 12px;
height: 12px;
}
.fiscals__grid-card-actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
}
.fiscals__grid-card-actions .app-button svg {
width: 16px;
height: 16px;
}
/* ========================================== */
/*  FORMULARIO EN MODAL                       */
/* ========================================== */
.fiscals__form {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem 1.5rem;
width: 100%;
box-sizing: border-box;
}
.fiscals__form-full {
grid-column: 1 / -1;
}
.fiscals__form-actions {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
margin-top: 1.25rem;
}
.fiscals__disclaimer {
grid-column: 1 / -1;
background: var(--warning-background);
border: 1px solid var(--warning-light);
padding: 0.75rem 1rem;
border-radius: 8px;
font-size: 12px;
line-height: 1.4;
color: var(--warning-dark);
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.fiscals__disclaimer svg {
width: 16px;
height: 16px;
color: var(--warning-color);
flex-shrink: 0;
margin-top: 2px;
}
/* ========================================== */
/*  TABS EN MODAL                             */
/* ========================================== */
.fiscals__tabs {
margin-bottom: 1.5rem;
}
/* ========================================== */
/*  RESPONSIVE                                */
/* ========================================== */
@media (max-width: 768px) {
.fiscals__form {
grid-template-columns: 1fr;
gap: 1rem;
}
.fiscals__grid {
grid-template-columns: 1fr;
}
.fiscals__selector-cards {
grid-template-columns: 1fr;
}
.fiscals__header {
flex-direction: column;
align-items: flex-start;
}
.fiscals__actions {
width: 100%;
flex-direction: column;
align-items: stretch;
}
.fiscals__search-group {
width: 100%;
}
}
@media (max-width: 480px) {
.fiscals__form {
gap: 0.75rem;
}
.fiscals__grid {
gap: 1rem;
}
.fiscals__selector-cards {
gap: 0.75rem;
}
}
/* ========================================================================
MAGAZINE PAGE - Página Principal de Revista
======================================================================== */
.magazine-page {
min-height: 100vh;
background: var(--background-color);
}
.magazine-page__loading {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
padding: 4rem 0;
}
/* ========================================================================
MAGAZINE HEADER - Diseño Compacto con Variables de Color
======================================================================== */
.magazine-header {
}
/* ========================================================================
MAGAZINE LAYOUT - Sidebar (20%) + Content (80%)
======================================================================== */
.magazine-layout {
display: flex;
min-height: 600px;
gap: 2rem;
max-width: 80%;
margin: 2rem auto;
padding: 0 2rem;
}
.magazine-layout__sidebar {
flex: 0 0 20%;
position: sticky;
top: 20px;
height: fit-content;
background: var(--surface-color);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
border: 1px solid var(--border-color);
}
.magazine-layout__content {
flex: 1;
min-width: 0;
}
/* ========================================================================
MAGAZINE SIDEBAR - Diseño Elegante y Profesional
======================================================================== */
.magazine-sidebar__menu {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.magazine-sidebar__item {
margin: 0;
}
/* Botones con estilo clean y moderno */
.magazine-nav-btn {
width: 100%;
padding: 0.875rem 1rem;
border: none;
background: transparent;
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
border-radius: 6px;
transition: all 0.15s ease;
color: var(--text-color);
font-size: 0.875rem;
font-weight: 500;
text-align: left;
font-family: inherit;
position: relative;
}
.magazine-nav-btn::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 20px;
background: var(--accent-color);
border-radius: 0 2px 2px 0;
transition: width 0.15s ease;
}
.magazine-nav-btn:hover {
background: var(--focus-ring);
padding-left: 1.25rem;
}
.magazine-nav-btn:hover::before {
width: 3px;
}
.magazine-nav-btn .app-button__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.5;
transition: opacity 0.15s ease;
}
.magazine-nav-btn .app-button__icon svg {
width: 18px;
height: 18px;
stroke: var(--secondary-color);
}
.magazine-nav-btn:hover .app-button__icon {
opacity: 0.8;
}
.magazine-nav-btn .app-button__text {
flex: 1;
line-height: 1.4;
color: var(--secondary-dark) !important;
}
/* Estado activo - borde izquierdo + color */
.magazine-nav-btn--active {
background: var(--hover-background-color);
color: var(--primary-color);
font-weight: 600;
padding-left: 1.25rem;
}
.magazine-nav-btn--active::before {
width: 3px;
}
.magazine-nav-btn--active .app-button__icon {
opacity: 1;
color: var(--accent-color) !important;
}
/* ========================================================================
MAGAZINE LIST - Listado de Revistas
======================================================================== */
.magazine-list__header {
margin-bottom: 2rem;
text-align: center;
}
.magazine-list__title {
font-size: 2rem;
font-weight: 700;
color: var(--text-color);
margin: 0 0 0.5rem 0;
}
.magazine-list__subtitle {
font-size: 1.05rem;
color: var(--text-muted);
margin: 0;
}
.magazine-list__year-group {
margin-bottom: 3rem;
}
.magazine-list__year-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--accent-color);
margin: 0 0 1.5rem 0;
padding-bottom: 0.75rem;
border-bottom: 2px solid var(--accent-color);
}
.magazine-list__issues {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* ========================================================================
MAGAZINE ISSUE - Card Individual de Revista
======================================================================== */
.magazine-issue {
padding: 1.5rem !important;
transition: all 0.3s ease;
}
.magazine-issue:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}
.magazine-issue__header {
display: flex;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.magazine-issue__cover {
width: 120px;
height: 160px;
flex-shrink: 0;
border-radius: 8px;
overflow: hidden;
background: var(--secondary-background);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.magazine-issue__cover-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.magazine-issue__cover-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
}
.magazine-issue__info {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.magazine-issue__meta {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.magazine-issue__badge {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-light) !important;
background: var(--primary-color);
padding: 0.35rem 0.75rem;
border-radius: 12px;
}
.magazine-issue__badge--volume {
background: var(--primary-color);
}
.magazine-issue__badge--number {
background: var(--secondary-color);
}
.magazine-issue__badge--date {
background: var(--accent-color);
}
.magazine-issue__title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-color);
margin: 0;
line-height: 1.3;
}
.magazine-issue__description {
font-size: 0.95rem;
color: var(--text-muted);
margin: 0;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.magazine-issue__actions {
display: flex;
gap: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--divider-color);
}
.magazine-issue__btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.magazine-issue__btn--primary {
background: var(--primary-color);
color: var(--text-light);
}
.magazine-issue__btn--primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.magazine-issue__btn--secondary {
background: transparent;
color: var(--secondary-color);
border: 2px solid var(--secondary-color);
}
.magazine-issue__btn--secondary:hover {
background: var(--secondary-color);
color: var(--text-light);
}
/* ========================================================================
MAGAZINE EMPTY - Estado Vacío
======================================================================== */
.magazine-list__empty {
text-align: center;
padding: 6rem 2rem;
}
.magazine-list__empty-icon {
color: var(--text-muted);
opacity: 0.5;
margin-bottom: 1.5rem;
}
.magazine-list__empty-title {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-color);
margin: 0 0 0.75rem 0;
}
.magazine-list__empty-text {
font-size: 1rem;
color: var(--text-muted);
margin: 0;
}
/* ========================================================================
MAGAZINE PLACEHOLDER - Secciones sin Contenido
======================================================================== */
.magazine-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 4rem 2rem;
background: var(--surface-color);
border-radius: 16px;
border: 2px dashed var(--border-color);
}
.magazine-placeholder__icon {
color: var(--text-muted);
opacity: 0.5;
margin-bottom: 1rem;
}
.magazine-placeholder__title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-color);
margin: 0 0 0.5rem 0;
}
.magazine-placeholder__text {
font-size: 1rem;
color: var(--text-muted);
margin: 0;
}
/* ========================================================================
MAGAZINE COMING SOON - Mensaje de Próximamente
======================================================================== */
.magazine-coming-soon {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 4rem 3rem;
background: var(--surface-color);
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 2px solid var(--border-color);
}
.magazine-coming-soon__icon {
color: var(--primary-color);
margin-bottom: 2rem;
opacity: 0.8;
}
.magazine-coming-soon__title {
font-size: 2.25rem;
font-weight: 700;
color: var(--text-color);
margin: .625rem 0 2rem;
}
.magazine-coming-soon__text {
font-size: 1.1rem;
color: var(--text-muted);
margin: 0 0 2rem 0;
line-height: 1.6;
max-width: 1000px;
}
.magazine-coming-soon__btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 1.75rem;
background: var(--primary-color);
color: var(--text-light);
text-decoration: none;
border-radius: 10px;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
}
.magazine-coming-soon__btn:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.magazine-list__icon {
list-style: disclosure-closed;
margin-left: 2rem;
}
magazine-list__icon a {
text-decoration: red !important;
}
/* ========================================================================
RESPONSIVE - TABLET
======================================================================== */
@media (max-width: 1024px) {
.magazine-layout {
gap: 1.5rem;
}
.magazine-layout__sidebar {
flex: 0 0 25%;
}
.magazine-issue__header {
flex-direction: column;
}
.magazine-issue__cover {
width: 100%;
height: 200px;
}
}
/* ========================================================================
RESPONSIVE - MOBILE
======================================================================== */
@media (max-width: 768px) {
.magazine-header {
padding: 1.5rem 0;
}
.magazine-header__icon {
width: 50px;
height: 50px;
}
.magazine-header__icon svg {
width: 24px;
height: 24px;
}
.magazine-header__title {
font-size: 1.25rem;
}
.magazine-header__subtitle {
font-size: 0.85rem;
}
.magazine-layout {
flex-direction: column;
padding: 0 1rem;
margin: 1rem auto;
}
.magazine-layout__sidebar {
position: relative;
top: 0;
flex: 0 0 auto;
width: 100%;
padding: 1rem;
}
.magazine-sidebar__menu {
gap: 0;
}
.magazine-nav-btn {
padding: 0.875rem 0.5rem;
font-size: 0.875rem;
}
.magazine-nav-btn:hover,
.magazine-nav-btn--active {
padding-left: 0.875rem;
}
.magazine-list__title {
font-size: 1.5rem;
}
.magazine-list__year-title {
font-size: 1.25rem;
}
.magazine-issue {
padding: 1.25rem !important;
}
.magazine-issue__actions {
flex-direction: column;
}
.magazine-issue__btn {
width: 100%;
justify-content: center;
}
.magazine-placeholder {
padding: 3rem 1.5rem;
}
.magazine-coming-soon {
padding: 3rem 2rem;
}
.magazine-coming-soon__title {
font-size: 1.75rem;
}
.magazine-coming-soon__text {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.magazine-header {
padding: 1.25rem 0;
}
.magazine-header__icon {
width: 45px;
height: 45px;
}
.magazine-header__icon svg {
width: 22px;
height: 22px;
}
.magazine-header__title {
font-size: 1.1rem;
}
.magazine-header__subtitle {
font-size: 0.8rem;
}
.magazine-nav-btn {
padding: 0.75rem 0.5rem;
font-size: 0.85rem;
}
.magazine-nav-btn .app-button__icon svg {
width: 16px;
height: 16px;
}
.magazine-list__empty {
padding: 4rem 1rem;
}
}
/* ========================================================================
COMMITTEE - Comité Editorial
======================================================================== */
.committee {
display: flex;
flex-direction: column;
gap: 2rem;
background: var(--surface-color);
border-radius: 16px;
border: 2px dashed var(--border-color);
padding: 2rem;
}
/* ── Header ── */
.committee__hero-header {
text-align: center;
padding-bottom: 0.25rem;
}
.committee__overline {
font-size: 0.72rem !important;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted) !important;
margin: 0 0 0.5rem;
}
.committee__title {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
color: var(--text-color);
margin: 0 0 0.75rem;
line-height: 1.2;
}
.committee__title-accent {
width: 40px;
height: 3px;
background: var(--secondary-color);
border-radius: 999px;
margin: 0 auto;
}
/* ── Editor-in-Chief card ── */
.committee__chief-wrap {
display: flex;
justify-content: center;
}
.committee__chief-card {
background: var(--primary-color);
border-radius: 1rem;
padding: 1.75rem 2rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.4rem;
width: 100%;
max-width: 480px;
}
.committee__chief-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--secondary-color);
color: #fff;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.04em;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
flex-shrink: 0;
}
.committee__chief-role {
font-size: 0.68rem !important;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--secondary-color) !important;
margin: 0;
}
.committee__chief-name {
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
font-weight: 700;
color: #fff;
margin: 0.15rem 0 0;
margin: 0.15rem 0 0;
line-height: 1.2;
}
.committee__chief-info {
font-size: 0.82rem !important;
color: rgba(255, 255, 255, 0.65) !important;
margin: 0.15rem 0 0;
line-height: 1.5 !important;
}
/* ── Section header ── */
.committee__section-title {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-color);
margin: 0 0 1.1rem;
padding-bottom: 0.65rem;
border-bottom: 2px solid var(--secondary-color);
}
/* ── Member grid ── */
.committee__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.85rem;
}
/* ── Member card ── */
.committee__member-card {
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 0.75rem;
padding: 1.25rem 0.9rem 1rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.4rem;
transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.committee__member-card:hover {
border-color: var(--secondary-color);
box-shadow: var(--shadow-sm);
transform: translateY(-2px);
}
.committee__member-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--background-color);
border: 1px solid var(--border-color);
color: var(--text-muted);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-bottom: 0.25rem;
}
.committee__member-name {
font-size: 0.95rem !important;
font-weight: 600;
color: var(--text-color) !important;
line-height: 1.35 !important;
margin: 0;
}
.committee__member-institution {
font-size: 0.85rem !important;
color: var(--text-muted) !important;
line-height: 1.4 !important;
margin: 0;
}
/* ── Pagination ── */
.committee__pagination {
margin-top: 0.5rem;
}
/* ── Loading / Empty ── */
.committee__loading {
display: flex;
justify-content: center;
padding: 3rem 0;
}
.committee__empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 3rem 2rem;
color: var(--text-muted);
text-align: center;
}
.committee__empty svg {
width: 48px;
height: 48px;
opacity: 0.4;
}
.committee__empty p {
font-size: 0.9rem;
margin: 0;
}
/* ── Responsive ── */
@media (max-width: 768px) {
.committee__chief-card {
padding: 1.75rem 1.25rem;
}
.committee__grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0.65rem;
}
.committee__member-card {
padding: 1rem 0.75rem 0.85rem;
}
}
@media (max-width: 480px) {
.committee__grid {
grid-template-columns: repeat(2, 1fr);
}
.committee__chief-name {
font-size: 1.1rem;
}
}
/* ========================================================================
AUTHOR INSTRUCTIONS - Guía para autores
======================================================================== */
.author-instructions {
background: var(--surface-color);
border-radius: 16px;
border: 2px dashed var(--border-color);
padding: 2rem;
max-height: 80vh;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.author-instructions__header {
text-align: center;
padding-bottom: 1rem;
border-bottom: 2px solid var(--border-color);
flex-shrink: 0;
}
.author-instructions__title {
font-size: 2rem;
font-weight: 700;
color: var(--text-color);
margin: 0;
line-height: 1.2;
}
/* ── Custom scrollbar ── */
.author-instructions::-webkit-scrollbar {
width: 8px;
}
.author-instructions::-webkit-scrollbar-track {
background: var(--background-color);
border-radius: 4px;
}
.author-instructions::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 4px;
transition: background 0.3s ease;
}
.author-instructions::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
/* ── Section titles & running text ── */
.guide-section {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.guide-section__title {
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--primary-color);
margin: 0;
}
.guide-text {
font-size: 0.95rem !important;
line-height: 1.7 !important;
color: var(--text-secondary) !important;
text-align: justify;
margin: 0;
}
.guide-text a {
color: var(--accent-dark);
font-weight: 500;
text-decoration: underline;
}
.guide-text a:hover {
color: var(--primary-dark);
}
/* ── Tipos de artículo ── */
.guide-types-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.1rem;
}
.guide-type-card {
display: flex;
flex-direction: column;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
transition: box-shadow 0.2s, transform 0.2s;
}
.guide-type-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.guide-type-card__header {
display: flex;
align-items: center;
gap: 0.65rem;
background: var(--primary-color);
color: var(--text-light);
padding: 0.65rem 1rem;
}
.guide-type-card__number {
background: rgba(255, 255, 255, 0.15);
color: var(--text-light) !important;
border-radius: 6px;
padding: 0.15rem 0.5rem;
font-size: 0.7rem !important;
font-weight: 700;
flex-shrink: 0;
}
.guide-type-card__title {
font-size: 0.965rem !important;
font-weight: 500;
line-height: 1.3 !important;
color: var(--text-light) !important
}
.guide-type-card__body {
flex: 1;
padding: 0.9rem 1rem;
font-size: 0.9125rem;
text-align: justify;
line-height: 1.55;
color: var(--text-secondary);
}
.guide-type-card__stats {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 0.75rem 1rem;
background: var(--background-color);
border-top: 1px solid var(--border-color);
}
.guide-type-card__stat {
display: flex;
justify-content: space-between;
gap: 0.5rem;
font-size: 0.7rem;
}
.guide-type-card__stat-label {
font-size: .75rem !important;
color: var(--text-muted) !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
white-space: nowrap;
}
.guide-type-card__stat-value {
font-size: .85rem !important;
color: var(--text-color);
font-weight: 600;
text-align: right;
}
/* ── Callouts (warning / info / neutral) ── */
.guide-callout {
display: flex;
gap: 0.75rem;
align-items: flex-start;
border-radius: 10px;
border: 1px solid;
padding: 1rem 1.25rem;
font-size: 0.875rem;
line-height: 1.6;
}
.guide-callout p {
margin: 0;
}
.guide-callout__icon {
flex-shrink: 0;
margin-top: 0.1rem;
}
.guide-callout__title {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.75rem;
margin: 0 0 0.35rem 0 !important;
}
.guide-callout a {
color: inherit;
font-weight: 700;
text-decoration: underline;
}
.guide-callout--warning {
background: var(--warning-background);
border-color: var(--warning-color);
color: var(--warning-foreground) !important;
}
.guide-callout--warning .guide-callout__icon {
color: var(--warning-dark);
}
.guide-callout--info {
background: var(--info-background);
border-color: var(--info-color);
color: var(--info-foreground) !important;
}
.guide-callout--info .guide-callout__icon {
color: var(--info-dark);
}
.guide-callout--neutral {
background: var(--background-color);
border-color: var(--border-color);
color: var(--text-secondary);
}
.guide-callout--neutral .guide-callout__icon {
color: var(--text-muted);
}
/* ── Página frontal: bullet list ── */
.guide-bullet-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.guide-bullet-list li {
position: relative;
padding-left: 1.25rem;
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.6;
}
.guide-bullet-list li::before {
content: '—';
position: absolute;
left: 0;
color: var(--accent-color);
font-weight: 700;
}
.guide-download-link {
display: inline-flex;
align-self: flex-start;
color: var(--accent-dark) !important;
font-weight: 600;
text-decoration: underline;
}
.guide-download-link:hover {
color: var(--primary-dark);
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.guide-types-grid,
.guide-info-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.author-instructions {
padding: 1.5rem;
max-height: 70vh;
}
.author-instructions__title {
font-size: 1.5rem;
}
.guide-types-grid,
.guide-info-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.author-instructions {
padding: 1rem;
max-height: 60vh;
gap: 1.5rem;
}
.author-instructions__title {
font-size: 1.3rem;
}
}
/* ========================================================================
SUBMISSION PROCESS - Proceso para el envío de artículos
======================================================================== */
.submission-process {
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 16px;
box-shadow: var(--shadow-sm);
padding: 2.5rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
.submission-process__header {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
text-align: center;
}
.submission-process__eyebrow {
font-size: 0.75rem !important;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-muted) !important;
}
.submission-process__title {
font-size: 1.75rem;
font-weight: 800;
color: var(--text-color);
margin: 0;
letter-spacing: -0.02em;
}
.submission-process__accent {
width: 40px;
height: 3px;
background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
border-radius: 999px;
}
.submission-process__intro {
max-width: 720px;
margin: 0 auto;
text-align: center;
color: var(--text-secondary) !important;
font-size: 0.9375rem !important;
line-height: 1.6;
}
/* ── Timeline ── */
.submission-process__timeline {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.submission-process__step {
position: relative;
display: flex;
gap: 1.25rem;
padding-bottom: 2rem;
}
.submission-process__step:last-child {
padding-bottom: 0;
}
.submission-process__step:not(:last-child)::before {
content: '';
position: absolute;
left: 19px;
top: 40px;
bottom: 0;
width: 2px;
background: var(--border-color);
}
.submission-process__step-number {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--primary-color);
color: var(--text-light) !important;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9375rem !important;
z-index: 1;
}
.submission-process__step-number--last {
background: var(--accent-color);
}
.submission-process__step-body {
flex: 1;
min-width: 0;
padding-top: 0.25rem;
}
.submission-process__step-title {
font-size: 1.0625rem;
font-weight: 700;
color: var(--text-color);
margin: 0 0 0.375rem 0;
}
.submission-process__step-desc {
font-size: 0.9rem !important;
color: var(--text-secondary) !important;
line-height: 1.6;
margin: 0;
}
.submission-process__step-desc a {
color: var(--accent-dark);
font-weight: 600;
text-decoration: underline;
}
.submission-process__step-desc a:hover {
color: var(--primary-dark);
}
.submission-process__step-image {
margin-top: 1rem;
border: 1px solid var(--border-color);
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow-sm);
max-width: 560px;
}
.submission-process__step-image img {
width: 100%;
height: auto;
display: block;
}
/* ── Botón final ── */
.submission-process__actions {
display: flex;
justify-content: center;
padding-top: 0.5rem;
}
.submission-process__btn {
display: inline-flex;
align-items: center;
gap: 0.625rem;
background: var(--accent-color);
color: var(--text-light);
border: none;
border-radius: 10px;
padding: 0.875rem 1.75rem;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.submission-process__btn:hover {
background: var(--accent-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* ── Responsive ── */
@media (max-width: 768px) {
.submission-process {
padding: 1.5rem;
gap: 1.5rem;
}
.submission-process__title {
font-size: 1.4rem;
}
.submission-process__step {
gap: 1rem;
}
.submission-process__step-number {
width: 32px;
height: 32px;
font-size: 0.8125rem;
}
.submission-process__step:not(:last-child)::before {
left: 15px;
top: 32px;
}
}
/* ========================================================================
MAGAZINE FILTERS - Barra Horizontal
======================================================================== */
/* ========================================================================
ARCHIVO DE PUBLICACIONES
======================================================================== */
.archivo-publicaciones {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1rem;
}
/* Loading State */
.archivo-publicaciones__loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
gap: 1rem;
}
/* Empty State */
.archivo-publicaciones__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 6rem 2rem;
background: var(--surface-color);
border-radius: 16px;
border: 2px dashed var(--border-color);
}
.archivo-publicaciones__empty svg {
color: var(--text-muted);
opacity: 0.5;
margin-bottom: 1.5rem;
}
.archivo-publicaciones__empty-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-color);
margin: 0 0 0.5rem 0;
}
.archivo-publicaciones__empty-text {
font-size: 1rem;
color: var(--text-muted);
margin: 0;
}
/* Header */
.archivo-publicaciones__header {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
padding: 3rem 2rem;
border-radius: 16px;
margin-bottom: 2rem;
text-align: center;
color: var(--text-light);
box-shadow: var(--shadow-lg);
}
.archivo-publicaciones__title {
font-family: 'Cormorant Garamond', serif;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.75rem;
line-height: 1.2;
}
.archivo-publicaciones__subtitle {
font-size: 1.125rem;
opacity: 0.95;
}
/* Filtros */
.archivo-publicaciones__filtros {
background: var(--surface-color);
padding: 2rem;
border-radius: 12px;
margin-bottom: 2rem;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
}
.filtros__grid {
display: grid;
grid-template-columns: repeat(3, 1fr) auto;
gap: 1rem;
align-items: end;
}
.filtro__grupo {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Override del margin-bottom del AppLabel dentro de filtros */
.filtro__grupo .app-label,
.filtro__grupo .app-label__wrapper {
margin-bottom: 0;
}
/* Override del margin-bottom del AppSelect dentro de filtros */
.filtro__grupo .app-select {
margin-bottom: 0;
}
.filtro__label {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-color);
display: flex;
align-items: center;
gap: 0.5rem;
}
.filtro__label svg {
width: 16px;
height: 16px;
color: var(--accent-color);
}
.filtro__select {
border-radius: 8px;
color: var(--text-color);
font-size: 0.9375rem;
font-family: inherit;
cursor: pointer;
transition: all 0.3s ease;
}
.filtro__select:hover {
border-color: var(--accent-color);
}
.filtro__select:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(0, 152, 255, 0.1);
}
.filtro__btn-limpiar {
padding: 0.75rem 1.5rem;
background: transparent;
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-muted);
font-size: 0.9375rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 44px;
align-self: end;
margin-top: 1.875rem; /* Altura del label + gap */
}
.filtro__btn-limpiar:hover {
border-color: var(--accent-color);
color: var(--accent-color);
background: rgba(0, 152, 255, 0.05);
}
/* Resultados Header */
.resultados__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.resultados__titulo {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-color);
}
.resultados__contador {
font-size: 0.9375rem;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 0.5rem;
}
.resultados__contador-numero {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
padding: 0 0.5rem;
background: var(--accent-color);
color: var(--text-light);
border-radius: 6px;
font-weight: 600;
font-size: 0.875rem;
}
/* Lista de Artículos */
.articulos-lista {
display: flex;
flex-direction: column;
gap: 1rem;
}
.articulo-item {
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: grid;
grid-template-columns: 100px 1fr auto;
gap: 1.5rem;
align-items: center;
}
.articulo-item:hover {
transform: translateX(4px);
box-shadow: var(--shadow-md);
border-color: var(--accent-color);
}
/* Thumbnail */
.articulo-item__thumbnail {
width: 100px;
height: 133px;
border-radius: 8px;
overflow: hidden;
background: var(--border-color);
flex-shrink: 0;
box-shadow: var(--shadow-sm);
}
.articulo-item__thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Contenido */
.articulo-item__contenido {
display: flex;
flex-direction: column;
gap: 0.75rem;
min-width: 0;
}
.articulo-item__metadata {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.articulo-item__badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.75rem;
background: linear-gradient(135deg, var(--accent-color), var(--secondary-light));
color: var(--text-light);
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.articulo-item__fecha {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--text-muted);
}
.articulo-item__fecha svg {
width: 14px;
height: 14px;
}
.articulo-item__titulo {
font-size: 1.125rem;
font-weight: 700;
color: var(--text-color);
line-height: 1.4;
margin: 0;
}
.articulo-item__autores {
font-size: 0.875rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 0.5rem;
}
.articulo-item__autores svg {
width: 14px;
height: 14px;
color: var(--accent-color);
}
/* Acción */
.articulo-item__accion {
flex-shrink: 0;
}
.articulo-item__btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: var(--primary-color);
color: var(--text-light);
border: none;
border-radius: 8px;
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.articulo-item__btn:hover {
background: var(--primary-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.articulo-item__btn svg {
width: 16px;
height: 16px;
}
/* Paginación */
.paginacion-wrapper {
display: flex;
justify-content: center;
margin-top: 2.5rem;
}
/* Estado vacío */
.articulos-lista__empty {
text-align: center;
padding: 4rem 2rem;
color: var(--text-muted);
}
.articulos-lista__empty svg {
margin: 0 auto 1.5rem;
opacity: 0.5;
}
.articulos-lista__empty h4 {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-secondary);
}
/* ========================================================================
RESPONSIVE
======================================================================== */
@media (max-width: 968px) {
.filtros__grid {
grid-template-columns: 1fr;
}
.articulo-item {
grid-template-columns: 80px 1fr;
gap: 1rem;
}
.articulo-item__thumbnail {
width: 80px;
height: 107px;
}
.articulo-item__accion {
grid-column: 2;
}
.articulo-item__btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 640px) {
.archivo-publicaciones__header {
padding: 2rem 1.5rem;
}
.archivo-publicaciones__title {
font-size: 2rem;
}
.archivo-publicaciones__filtros {
padding: 1.5rem;
}
.articulo-item {
grid-template-columns: 1fr;
text-align: center;
}
.articulo-item__thumbnail {
width: 120px;
height: 160px;
margin: 0 auto;
}
.articulo-item__metadata {
justify-content: center;
}
.articulo-item__accion {
grid-column: 1;
}
.resultados__header {
flex-direction: column;
gap: 1rem;
text-align: center;
}
}
/* ========================================================================
MAGAZINE INDIVIDUAL - Página de artículo individual
======================================================================== */
/* Contenedor principal */
.magazine-individual {
max-width: 1400px;
margin: 0 auto;
padding: 2rem 1rem;
}
/* Breadcrumb */
.magazine-individual__breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--text-muted);
margin-bottom: 2rem;
}
.magazine-individual__breadcrumb a {
color: var(--accent-color);
text-decoration: none;
transition: color 0.3s ease;
}
.magazine-individual__breadcrumb a:hover {
color: var(--secondary-light);
}
.magazine-individual__breadcrumb__separator {
color: var(--text-muted);
}
/* Hero del artículo - Diseño compacto como la imagen de referencia */
.magazine-individual__hero {
background: var(--surface-color);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid var(--border-color);
}
.magazine-individual__hero__container {
display: grid;
grid-template-columns: 140px 1fr;
gap: 1.5rem;
align-items: start;
}
.magazine-individual__hero__cover {
width: 140px;
height: 187px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
background: #e8f4f8;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.magazine-individual__hero__cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.magazine-individual__hero__info {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.magazine-individual__hero__badges {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.magazine-individual__hero__badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.875rem;
background: linear-gradient(135deg, var(--accent-color), var(--secondary-light));
color: var(--text-light);
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.magazine-individual__hero__title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-color);
line-height: 1.3;
margin: 0;
}
.magazine-individual__hero__authors {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: var(--text-secondary);
}
.magazine-individual__hero__authors svg {
width: 16px;
height: 16px;
color: var(--primary-color);
flex-shrink: 0;
}
.magazine-individual__hero__metadata {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.magazine-individual__hero__meta-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--text-muted);
}
.magazine-individual__hero__meta-item svg {
width: 16px;
height: 16px;
}
.magazine-individual__hero__meta-item strong {
color: var(--text-color);
}
.magazine-individual__hero__doi {
padding: 0.75rem 1rem;
background: var(--background-color);
border-radius: 8px;
font-size: 0.875rem;
font-family: 'Courier New', monospace;
color: var(--accent-color);
}
.magazine-individual__hero__actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.magazine-individual__hero__btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.5rem;
border-radius: 10px;
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.magazine-individual__hero__btn--primary {
background: var(--primary-color);
color: var(--text-light);
}
.magazine-individual__hero__btn--primary:hover {
background: var(--primary-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.magazine-individual__hero__btn--secondary {
background: transparent;
color: var(--accent-color);
border: 2px solid var(--accent-color);
}
.magazine-individual__hero__btn--secondary:hover {
background: var(--accent-color);
color: var(--text-light);
}
.magazine-individual__hero__btn svg {
width: 18px;
height: 18px;
}
/* Tabs de idioma */
.magazine-individual__tabs {
display: flex;
gap: 0.5rem;
margin-bottom: 2rem;
border-bottom: 2px solid var(--border-color);
}
.magazine-individual__tabs__tab {
padding: 1rem 2rem;
background: transparent;
border: none;
color: var(--text-muted);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
}
.magazine-individual__tabs__tab:hover {
color: var(--accent-color);
}
.magazine-individual__tabs__tab--active {
color: var(--accent-color);
border-bottom-color: var(--accent-color);
}
.magazine-individual__tabs__tab-flag {
font-size: 1.25rem;
margin-right: 0.5rem;
}
/* Contenido con tabs - Layout como la imagen */
.magazine-individual__tabs-content {
display: grid;
grid-template-columns: 1fr 320px;
gap: 1.5rem;
margin-top: 1.5rem;
}
/* Contenido principal */
.magazine-individual__content {
background: var(--surface-color);
border-radius: 12px;
padding: 2rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid var(--border-color);
}
.magazine-individual__content__section {
margin-bottom: 2rem;
}
.magazine-individual__content__section:last-child {
margin-bottom: 0;
}
.magazine-individual__content__title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-color);
margin: 0 0 1rem 0;
padding-bottom: 0.75rem;
border-bottom: 2px solid var(--border-color);
}
.magazine-individual__content__text {
font-size: 0.95rem;
line-height: 1.7;
color: var(--text-secondary);
text-align: justify;
margin-bottom: 1rem;
}
.magazine-individual__content__text:last-child {
margin-bottom: 0;
}
.magazine-individual__content__text strong {
color: var(--text-color);
font-weight: 600;
}
.magazine-individual__content__subtitle {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-color);
margin: 1.5rem 0 0.75rem;
}
.magazine-individual__content__list {
padding-left: 1.5rem;
margin: 1rem 0;
list-style-type: disc;
}
.magazine-individual__content__list li {
margin-bottom: 0.5rem;
color: var(--text-secondary);
line-height: 1.6;
}
/* Sidebar - Diseño compacto */
.magazine-individual__sidebar {
display: flex;
flex-direction: column;
gap: 1rem;
}
.magazine-individual__sidebar-card {
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 1.25rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.magazine-individual__sidebar-card__title {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-color);
margin: 0 0 1rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.magazine-individual__sidebar-card__title svg {
width: 16px;
height: 16px;
color: var(--primary-color);
flex-shrink: 0;
}
.magazine-individual__sidebar-card__item {
display: flex;
justify-content: space-between;
padding: 0.75rem 0;
border-bottom: 1px solid var(--border-color);
font-size: 0.875rem;
}
.magazine-individual__sidebar-card__item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.magazine-individual__sidebar-card__label {
color: var(--text-muted);
}
.magazine-individual__sidebar-card__value {
color: var(--text-color);
font-weight: 600;
text-align: right;
}
.magazine-individual__sidebar-card__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.75rem 1rem;
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-color);
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
}
.magazine-individual__sidebar-card__btn:hover {
background: var(--primary-color);
color: var(--text-light);
border-color: var(--primary-color);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.magazine-individual__sidebar-card__btn svg {
width: 16px;
height: 16px;
}
/* Palabras clave */
.magazine-individual__keywords {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.magazine-individual__keywords__tag {
padding: 0.375rem 0.75rem;
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 0.8125rem;
color: var(--text-secondary);
transition: all 0.3s ease;
line-height: 1.3;
}
.magazine-individual__keywords__tag:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: rgba(var(--primary-color-rgb, 52, 152, 219), 0.05);
}
/* Responsive */
@media (max-width: 1200px) {
.magazine-individual__tabs-content {
grid-template-columns: 1fr 280px;
gap: 1.25rem;
}
}
@media (max-width: 968px) {
.magazine-individual__tabs-content {
grid-template-columns: 1fr;
}
.magazine-individual__sidebar {
order: 1;
}
.magazine-individual__content {
order: 2;
}
}
@media (max-width: 768px) {
.magazine-individual__hero {
padding: 1.25rem;
}
.magazine-individual__hero__container {
grid-template-columns: 1fr;
gap: 1rem;
text-align: center;
}
.magazine-individual__hero__cover {
width: 120px;
height: 160px;
margin: 0 auto;
}
.magazine-individual__hero__title {
font-size: 1.25rem;
}
.magazine-individual__hero__authors {
justify-content: center;
font-size: 0.85rem;
}
.magazine-individual__content {
padding: 1.5rem;
}
.magazine-individual__content__title {
font-size: 1.25rem;
}
.magazine-individual__content__text {
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.magazine-individual {
padding: 1rem 0.5rem;
}
.magazine-individual__hero {
padding: 1rem;
}
.magazine-individual__hero__title {
font-size: 1.125rem;
}
.magazine-individual__content {
padding: 1.25rem;
}
.magazine-individual__sidebar-card {
padding: 1rem;
}
}
/* Botón de descarga en sección de contacto */
.magazine-contact__download-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
background: var(--primary-color);
color: var(--text-light);
text-decoration: none;
border-radius: 10px;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.magazine-contact__download-btn svg {
width: 18px;
height: 18px;
color: var(--secondary-dark)
}
.magazine-contact__download-btn:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
/* Payment Modal Styles */
.payment-modal__container {
padding: 1rem;
min-height: 200px;
}
/* Estado: Error */
.payment-modal__error {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: 2rem;
text-align: center;
}
.payment-modal__error-icon {
width: 64px;
height: 64px;
color: var(--danger-color);
}
.payment-modal__error-text {
color: var(--text-color);
font-size: 1rem;
margin: 0;
}
/* Estado: Success */
.payment-modal__success {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: 2rem;
text-align: center;
}
.payment-modal__success-icon {
width: 64px;
height: 64px;
color: var(--success-color);
}
.payment-modal__success-title {
color: var(--text-color);
font-size: 1.5rem;
font-weight: 700;
margin: 0;
}
.payment-modal__success-text {
color: var(--text-color);
font-size: 1rem;
margin: 0;
}
.payment-modal__redirecting {
color: var(--text-muted);
font-size: 0.875rem;
margin: 0;
}
/* Estado: Opening */
.payment-modal__opening {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 2rem;
}
.payment-modal__opening-text {
color: var(--text-muted);
margin: 0;
}
/* Estado: Waiting Payment */
.payment-modal__waiting-payment {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 1.5rem;
}
.payment-modal__info-icon {
width: 48px;
height: 48px;
color: var(--primary-color);
margin: 0 auto;
flex-shrink: 0;
}
.payment-modal__waiting-title {
color: var(--text-color);
font-size: 1.25rem;
font-weight: 600;
margin: 0;
text-align: center;
}
.payment-modal__waiting-text {
color: var(--text-muted);
margin: 0;
text-align: center;
line-height: 1.6;
}
.payment-modal__instructions {
background: var(--surface-color);
border-left: 4px solid var(--primary-color);
border-radius: 8px;
padding: 1rem 1.5rem;
}
.payment-modal__instructions p {
color: var(--text-color);
font-weight: 600;
margin: 0 0 0.75rem 0;
}
.payment-modal__instructions ol {
margin: 0;
padding-left: 1.5rem;
color: var(--text-color);
}
.payment-modal__instructions li {
margin-bottom: 0.5rem;
line-height: 1.5;
}
/* Estado: Checking Status */
.payment-modal__verifying,
.payment-modal__checking,
.payment-modal__verifying-manual,
.payment-modal__confirming {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: 2rem;
text-align: center;
}
.payment-modal__verifying-title,
.payment-modal__checking-title,
.payment-modal__confirming-title {
color: var(--text-color);
font-size: 1.125rem;
font-weight: 600;
margin: 0;
}
.payment-modal__verifying-text,
.payment-modal__checking-text,
.payment-modal__confirming-text {
color: var(--text-muted);
margin: 0;
line-height: 1.6;
}
.payment-modal__attempts {
color: var(--text-muted);
font-size: 0.875rem;
margin: 0;
}
/* Estado: Waiting Confirm (Manual) */
.payment-modal__manual-confirm {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 1.5rem;
}
.payment-modal__question-icon {
width: 48px;
height: 48px;
color: var(--warning-color);
margin: 0 auto;
flex-shrink: 0;
}
.payment-modal__manual-title {
color: var(--text-color);
font-size: 1.25rem;
font-weight: 600;
margin: 0;
text-align: center;
}
.payment-modal__manual-text {
color: var(--text-muted);
margin: 0;
text-align: center;
line-height: 1.6;
}
.payment-modal__manual-info {
background: var(--surface-color);
border-radius: 8px;
padding: 1rem 1.5rem;
line-height: 1.6;
}
.payment-modal__manual-info p {
margin: 0 0 0.75rem 0;
color: var(--text-color);
}
.payment-modal__manual-info p:last-child {
margin-bottom: 0;
}
.payment-modal__manual-error {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background: var(--danger-background);
border: 1px solid var(--danger-color);
border-radius: 8px;
color: var(--danger-color);
font-size: 0.875rem;
}
.payment-modal__error-icon-small {
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* Timer compartido */
.payment-modal__timer {
text-align: center;
color: var(--text-muted);
font-size: 0.875rem;
margin: 0;
padding: 0.75rem;
background: var(--surface-color);
border-radius: 8px;
}
.payment-modal__timer strong {
color: var(--primary-color);
font-weight: 600;
}
/* Actions compartidas */
.payment-modal__actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.payment-modal__actions button {
min-width: 180px;
}
/* Responsive */
@media (max-width: 640px) {
.payment-modal__container {
padding: 0.5rem;
}
.payment-modal__waiting-payment,
.payment-modal__manual-confirm {
padding: 1rem;
}
.payment-modal__actions button {
min-width: 100%;
}
}
/* ============================================================
RegisterFree — Split card  (izq oscuro · der blanco)
Solo variables de colors.css · BEM · sin colores directos
============================================================ */
/* ── Wrapper de página ───────────────────────────────────── */
.rf-back {
max-width: 1060px;
margin: 1.5rem auto 1.25rem;
padding: 0 1.5rem;
}
.rf-not-found {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
padding: 4rem 2rem;
text-align: center;
}
.rf-not-found__text {
font-size: 1rem;
color: var(--text-muted);
margin: 0;
}
/* ══════════════════════════════════════════════════════════
CARD CONTENEDOR
══════════════════════════════════════════════════════════ */
.rf-card {
display: flex;
width: 100%;
max-width: 1060px;
min-height: 600px;
margin: 0 auto 3rem;
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-xl);
}
/* ══════════════════════════════════════════════════════════
PANEL IZQUIERDO
══════════════════════════════════════════════════════════ */
.rf-card__left {
width: 420px;
flex-shrink: 0;
background-color: var(--primary-color);
color: var(--text-light);
display: flex;
flex-direction: column;
padding: 2.25rem 2rem;
gap: 1.5rem;
position: relative;
overflow: hidden;
}
/* Orbe decorativo esquina superior derecha */
.rf-card__left::before {
content: "";
position: absolute;
top: -80px;
right: -80px;
width: 260px;
height: 260px;
border-radius: 50%;
background: radial-gradient(circle, var(--focus-ring) 0%, transparent 70%);
pointer-events: none;
}
/* Orbe secundario esquina inferior izquierda */
.rf-card__left::after {
content: "";
position: absolute;
bottom: -60px;
left: -60px;
width: 180px;
height: 180px;
border-radius: 50%;
background: radial-gradient(circle, var(--focus-ring) 0%, transparent 70%);
pointer-events: none;
}
/* ── Branding ── */
.rf-card__brand {
display: flex;
align-items: center;
gap: .75rem;
position: relative;
}
.rf-card__brand-icon-wrap {
width: 40px;
height: 40px;
border-radius: 10px;
background-color: var(--primary-light);
border: 1px solid var(--primary-light);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.rf-card__brand-icon-wrap svg {
width: 20px;
height: 20px;
stroke: var(--secondary-color);
}
.rf-card__brand-text {
display: flex;
flex-direction: column;
gap: .05rem;
}
.rf-card__brand-name {
font-size: .95rem;
font-weight: 800;
letter-spacing: .04em;
color: var(--text-light);
line-height: 1;
}
.rf-card__brand-sub {
font-size: .72rem !important;
color: var(--disabled-color) !important;
line-height: 1 !important;
}
/* ── Pill badge ── */
.rf-card__pill {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 50px;
padding: .35rem .9rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
width: fit-content;
position: relative;
background: rgba(255,255,255,.1);
}
.rf-card__pill span {
font-size: 11px !important;
color: var(--text-light) !important;
}
.rf-card__pill svg {
width: 12px;
height: 12px;
stroke: var(--secondary-color);
flex-shrink: 0;
}
/* ── Título del evento ── */
.rf-card__event-title {
font-size: 1.75rem !important;
font-weight: 700;
line-height: 1.2 !important;
color: var(--text-light) !important;
margin: 0;
letter-spacing: -.01em;
position: relative;
}
/* ── Meta rows ── */
.rf-card__meta-list {
display: flex;
flex-direction: column;
gap: .55rem;
position: relative;
}
.rf-card__meta-row {
display: flex;
align-items: center;
gap: .6rem;
}
.rf-card__meta-row span {
font-size: .85rem !important;
color: var(--text-light) !important;
}
.rf-card__meta-row svg {
width: 15px;
height: 15px;
stroke: var(--secondary-color);
flex-shrink: 0;
}
.rf-card__meta-muted {
color: var(--primary-light);
opacity: .8;
}
.rf-card__meta-strong {
font-weight: 700;
color: var(--text-light);
}
/* ── Divisor ── */
.rf-card__divider {
height: 1px;
background-color: var(--primary-light);
border-radius: 1px;
opacity: .5;
position: relative;
}
/* ── Speaker cards ── */
.rf-card__speakers {
display: flex;
flex-direction: column;
gap: .75rem;
/*margin-top: auto;*/
position: relative;
}
.rf-speaker-card {
display: flex;
align-items: center;
gap: .85rem;
background-color: var(--primary-light);
border: 1px solid rgba(255,255,255,.07);
border-radius: 12px;
padding: .85rem 1rem;
}
.rf-speaker-card__avatar {
width: 38px;
height: 38px;
border-radius: 50%;
background-color: var(--primary-color);
border: 1px solid var(--primary-light);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.rf-speaker-card__avatar svg {
width: 18px;
height: 18px;
stroke: var(--secondary-color);
}
.rf-speaker-card__info {
display: flex;
flex-direction: column;
gap: .15rem;
min-width: 0;
line-height: 1.4;
}
.rf-speaker-card__role {
font-size: .65rem !important;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--secondary-color) !important;
}
.rf-speaker-card__name {
font-size: .88rem !important;
font-weight: 700;
color: var(--text-light) !important;
line-height: 1.2 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rf-speaker-card__meta {
font-size: .73rem !important;
color: var(--text-muted) !important;
line-height: 1.3 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ══════════════════════════════════════════════════════════
PANEL DERECHO
══════════════════════════════════════════════════════════ */
.rf-card__right {
flex: 1;
background-color: var(--surface-color);
display: flex;
flex-direction: column;
min-width: 0;
}
/* ── Stepper horizontal ── */
.rf-hstep {
display: flex;
align-items: center;
padding: 1.5rem 2rem 0;
gap: 0;
border-bottom: 1px solid var(--border-light);
padding-bottom: 1.25rem;
}
.rf-hstep__item {
display: flex;
align-items: center;
gap: .55rem;
flex-shrink: 0;
}
.rf-hstep__line {
flex: 1;
height: 2px;
background-color: var(--acp-border);
border-radius: 1px;
min-width: 32px;
margin: 0 .5rem;
transition: background .3s;
}
.rf-hstep__line--done {
background-color: var(--success-color);
transition: background .4s ease;
}
/* nodo */
.rf-stepper__node {
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid var(--border-color);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-weight: 700;
color: var(--text-muted);
transition: background .25s, border-color .25s, box-shadow .25s;
}
.rf-stepper__node span {
font-size: .75rem !important;
}
.rf-stepper__node--active {
border-color: var(--secondary-color);
background-color: var(--secondary-color);
color: var(--primary-foreground) !important;
box-shadow: 0 0 0 4px var(--focus-ring);
}
.rf-stepper__node--done {
border-color: var(--success-color);
background-color: var(--success-color);
color: var(--primary-foreground) !important;
animation: rf-node-pop .3s ease;
}
@keyframes rf-node-pop {
0%   { transform: scale(.6); opacity: 0; }
60%  { transform: scale(1.15); }
100% { transform: scale(1); opacity: 1; }
}
.rf-stepper__node svg {
width: 14px;
height: 14px;
stroke: var(--primary-foreground);
}
/* label */
.rf-stepper__label {
font-size: .78rem !important;
color: var(--text-color) !important;
font-weight: 600 !important;
white-space: nowrap;
}
.rf-stepper__label--active {
color: var(--secondary-light) !important;
font-weight: 700 !important;
}
.rf-stepper__label--done {
color: var(--success-color) !important;
font-weight: 600 !important;
}
/* ── Contenido del paso ── */
.rf-card__right-inner {
flex: 1;
padding: 2rem 2.25rem 1.5rem;
display: flex;
flex-direction: column;
}
.rf-card__step-meta {
font-size: .68rem !important;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--primary-light) !important;
line-height: 1.2 !important;
margin-bottom: .4rem;
}
.rf-card__step-title {
font-size: 1.4rem !important;
font-weight: 800;
color: var(--accent-color) !important;
margin: 0 0 .3rem;
line-height: 1.2 !important;
}
.rf-card__step-sub {
font-size: .85rem !important;
color: var(--text-muted) !important;
margin: 0 0 1.75rem;
line-height: 1.55 !important;
}
.rf-card__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
}
/* ── Nota informativa ── */
.rf-note {
display: flex;
align-items: flex-start;
gap: .75rem;
background-color: var(--info-background);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 1rem 1.1rem;
color: var(--text-secondary);
font-size: .85rem;
line-height: 1.5;
}
.rf-note p {
font-size: .85rem !important;
font-weight: 600;
line-height: 1.5 !important;
color: var(--text-secondary) !important;
}
.rf-note svg {
width: 18px;
height: 18px;
stroke: var(--info-color);
flex-shrink: 0;
margin-top: .1rem;
}
.rf-note p {
margin: 0;
font-size: .85rem !important;
color: var(--text-secondary) !important;
line-height: 1.5 !important;
}
/* ── Acciones ── */
.rf-card__actions {
display: flex;
align-items: center;
gap: .75rem;
padding-top: 1rem;
border-top: 1px solid var(--border-light);
margin-top: 1rem;
}
.rf-card__actions--center { justify-content: center; }
.rf-card__spinner {
display: flex;
align-items: center;
padding: 0 .5rem;
}
/* ── Éxito ── */
.rf-card__body--success {
align-items: center;
justify-content: center;
gap: 1.5rem;
text-align: center;
padding: 1.5rem 1rem;
animation: rf-fadein .4s ease;
}
@keyframes rf-fadein {
from { opacity: 0; transform: translateY(10px); }
to   { opacity: 1; transform: translateY(0); }
}
/* Ícono animado */
.rf-success-ring {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: var(--success-background);
border: 2px solid transparent;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
animation: rf-ring-in .5s cubic-bezier(.34,1.56,.64,1);
}
.rf-success-ring--animated {
box-shadow: 0 0 0 6px var(--success-background);
}
.rf-success-ring svg {
width: 34px;
height: 34px;
stroke: var(--success-color);
stroke-dasharray: 40;
stroke-dashoffset: 40;
animation: rf-check-draw .45s .2s ease forwards;
}
@keyframes rf-ring-in {
from { transform: scale(0); opacity: 0; }
to   { transform: scale(1); opacity: 1; }
}
@keyframes rf-check-draw {
to { stroke-dashoffset: 0; }
}
/* Título y subtítulo */
.rf-success-content {
display: flex;
flex-direction: column;
gap: .35rem;
animation: rf-fadein .4s .15s ease both;
}
.rf-success-title {
font-size: 1.45rem !important;
font-weight: 800;
color: var(--text-color) !important;
margin: 0;
line-height: 1.2 !important;
}
.rf-success-sub {
font-size: .875rem !important;
color: var(--accent-color) !important;
font-weight: 500;
line-height: 1.55 !important;
margin: 0;
max-width: 340px;
}
/* Pill correo */
.rf-success-email {
display: inline-flex;
align-items: center;
gap: .6rem;
border: 1.5px solid var(--border-color);
border-radius: 999px;
padding: .45rem 1.1rem;
font-size: .875rem;
font-weight: 600;
color: var(--text-color);
background: transparent;
animation: rf-fadein .4s .25s ease both;
}
.rf-success-email svg {
width: 16px;
height: 16px;
stroke: var(--text-muted);
flex-shrink: 0;
}
/* Nota info alternativa (fondo más neutro) */
.rf-note--info-alt {
background-color: var(--surface-alt-color);
border-color: var(--border-color);
animation: rf-fadein .4s .35s ease both;
max-width: 400px;
width: 100%;
}
/* ── Footer ── */
.rf-card__footer {
display: flex;
align-items: center;
gap: .5rem;
padding: .85rem 2.25rem;
border-top: 1px solid var(--border-light);
font-size: .7rem;
color: var(--text-muted);
background-color: var(--surface-alt-color);
}
.rf-card__footer span {
font-size: .7rem !important;
color: var(--text-muted) !important;
}
.rf-card__footer svg {
width: 12px;
height: 12px;
stroke: var(--text-muted) !important;
margin-left: auto;
}
.rf-card__footer-sep { color: var(--border-color); }
/* ══════════════════════════════════════════════════════════
PASO 2 — REVIEW CARD
══════════════════════════════════════════════════════════ */
/* ── Resumen del evento ── */
.rf-review-event {
background-color: var(--primary-color);
border-radius: 12px;
padding: 1.1rem 1.25rem;
display: flex;
flex-direction: column;
gap: .55rem;
}
.rf-review-event__label {
font-size: .65rem !important;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-muted) !important;
line-height: 1.2 !important;
}
.rf-review-event__title {
font-size: .95rem !important;
font-weight: 700;
color: var(--text-light) !important;
line-height: 1.35 !important;
margin: 0;
}
.rf-review-event__pills {
display: flex;
flex-wrap: wrap;
gap: .45rem;
margin-top: .1rem;
}
.rf-review-pill {
display: inline-flex;
align-items: center;
gap: .35rem;
border: 1px solid var(--primary-light);
border-radius: 50px;
padding: .25rem .65rem;
font-size: .74rem !important;
color: var(--text-muted) !important;
line-height: 1.2 !important;
background-color: transparent;
}
.rf-review-pill svg {
width: 11px;
height: 11px;
stroke: var(--secondary-color);
flex-shrink: 0;
}
/* ── Grilla de campos ── */
.rf-review-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .65rem;
}
.rf-review-fields--full {
grid-template-columns: 1fr;
}
.rf-review-field {
display: flex;
flex-direction: column;
gap: .4rem;
border: 1px solid var(--focus-ring);
border-radius: 12px;
padding: .9rem 1.1rem;
background-color: var(--surface-color);
transition: border-color .2s, box-shadow .2s;
}
.rf-review-field:hover {
border-color: var(--secondary-color);
box-shadow: 0 0 0 3px var(--focus-ring);
}
.rf-review-field__label {
display: flex;
align-items: center;
gap: .4rem;
font-size: .65rem !important;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--secondary-dark) !important;
line-height: 1.2 !important;
}
.rf-review-field__label svg {
width: 13px;
height: 13px;
stroke: var(--secondary-color);
flex-shrink: 0;
}
.rf-review-field__value {
font-size: .95rem !important;
font-weight: 600;
color: var(--text-color) !important;
line-height: 1.4 !important;
min-height: 1.3em;
}
/* ── Meta en barra de acciones ── */
.rf-card__actions-meta {
font-size: .78rem !important;
color: var(--text-muted) !important;
line-height: 1.2 !important;
margin-right: auto;
}
/* ══════════════════════════════════════════════════════════
RESPONSIVO
══════════════════════════════════════════════════════════ */
/* Tablet */
@media (max-width: 820px) {
.rf-back {
margin: 1rem 1rem 0.75rem;
padding: 0;
}
.rf-card {
flex-direction: column;
margin: 0 1rem 2rem;
border-radius: 16px;
width: auto;
min-height: unset;
}
.rf-card__left {
width: 100%;
min-width: 0;
padding: 1.75rem 1.5rem 1.25rem;
border-radius: 16px 16px 0 0;
}
.rf-card__right {
width: 100%;
min-width: 0;
border-radius: 0 0 16px 16px;
}
.rf-card__event-title {
font-size: 1.4rem;
}
.rf-card__speakers {
margin-top: 0;
}
.rf-hstep {
padding: 1.25rem 1.25rem 0.75rem;
overflow-x: auto;
}
.rf-card__right-inner {
padding: 1.25rem 1.25rem 0.75rem;
}
.rf-card__footer {
padding: 0.75rem 1.25rem;
}
}
/* Móvil */
@media (max-width: 560px) {
.rf-back {
margin: 0.75rem 0.75rem 0.5rem;
}
.rf-card {
margin: 0 0.75rem 1.5rem;
border-radius: 14px;
}
.rf-card__left {
padding: 1.5rem 1.25rem 1rem;
border-radius: 14px 14px 0 0;
}
.rf-card__right {
border-radius: 0 0 14px 14px;
}
.rf-card__event-title {
font-size: 1.25rem;
}
.rf-card__badge {
font-size: 0.7rem;
padding: 0.3rem 0.75rem;
}
.rf-hstep {
padding: 1rem 1rem 0.75rem;
}
.rf-card__right-inner {
padding: 1rem 1.25rem 0.75rem;
}
.rf-card__footer {
padding: 0.75rem 1.25rem;
flex-direction: column;
gap: 0.5rem;
}
.rf-stepper__label {
display: none;
}
.rf-hstep__line {
min-width: 16px;
}
}
/* Móvil muy pequeño */
@media (max-width: 380px) {
.rf-back {
margin: 0.5rem 0.5rem 0.5rem;
}
.rf-card {
margin: 0 0.5rem 1rem;
border-radius: 12px;
}
.rf-card__left {
padding: 1.25rem 1rem 0.75rem;
}
.rf-card__right-inner {
padding: 0.875rem 1rem 0.5rem;
}
.rf-card__footer {
padding: 0.625rem 1rem;
}
}
/* ==============================================
AuthComponent - Estilos para componente de autenticación
============================================== */
/* Enlace para volver */
.auth__back-link {
margin-top: 0.75rem;
text-align: center;
}
.auth__back-link span {
color: var(--link-color);
font-size: 0.875rem;
font-weight: 500;
text-decoration: underline;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
display: inline-block;
}
.auth__back-link span:hover,
.auth__back-link span:focus {
color: var(--primary-color);
background: var(--hover-background-color);
text-decoration: underline;
}
/* Descripción informativa */
.auth__description {
color: var(--text-muted);
font-size: 0.875rem;
line-height: 1.5;
margin-bottom: 1.25rem;
padding: 0.75rem;
background: var(--surface-alt-color);
border-radius: 0.5rem;
border-left: 3px solid var(--primary-color);
}
/* Enlace para reenviar código */
.auth__resend-link {
margin-top: 1rem;
text-align: right;
}
.auth__resend-link--active {
color: var(--link-color);
cursor: pointer;
text-decoration: underline;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
display: inline-block;
}
.auth__resend-link--active:hover,
.auth__resend-link--active:focus {
color: var(--primary-color);
background: var(--hover-background-color);
text-decoration: underline;
}
.auth__resend-link--disabled {
color: var(--text-muted);
font-size: 0.875rem;
opacity: 0.7;
}
/* ============================================== */
/* Layout Responsivo para Formulario de Registro */
/* ============================================== */
/* Grid responsivo para formularios */
.register__form-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
width: 100%;
box-sizing: border-box;
}
/* Campo inline para selects pequeños (título, código de país) */
.register__inline-field {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
box-sizing: border-box;
}
/* Grupo de teléfono (código + número) */
.register__phone-group {
display: grid;
grid-template-columns: 1fr;
gap: 0.875rem;
width: 100%;
box-sizing: border-box;
}
/* ============================================== */
/* Móvil muy pequeño (420px - 479px)             */
/* ============================================== */
@media (min-width: 420px) and (max-width: 479px) {
.register__form-grid {
gap: 0.75rem;
}
.register__phone-group {
gap: 0.75rem;
}
.auth__description {
padding: 0.625rem;
font-size: 0.8125rem;
}
}
/* ============================================== */
/* Móvil pequeño (480px - 639px)                 */
/* ============================================== */
@media (min-width: 480px) and (max-width: 639px) {
.register__form-grid {
gap: 0.875rem;
}
.register__phone-group {
gap: 0.875rem;
}
}
/* ============================================== */
/* Tablet y superior (640px+) - 2 columnas       */
/* ============================================== */
@media (min-width: 640px) {
.register__form-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
/* Grupo de teléfono: código (pequeño) + número */
.register__phone-group {
grid-template-columns: 140px 1fr;
gap: 0.75rem;
}
/* Clase para campos que ocupan toda la fila */
.register__field--full {
grid-column: 1 / -1;
}
/* Clase para campos de media fila */
.register__field--half {
grid-column: span 1;
}
}
/* ============================================== */
/* Desktop grande (1024px+) - 3 columnas         */
/* ============================================== */
@media (min-width: 1024px) {
.register__form-grid {
grid-template-columns: repeat(3, 1fr);
gap: 0.875rem;
}
/* Campos que ocupan 2 de 3 columnas */
.register__field--two-thirds {
grid-column: span 2;
}
/* Grupo de teléfono en 3 columnas */
.register__phone-group {
grid-template-columns: 130px 1fr;
}
}
/* ============================================== */
/* Ajustes generales para pantallas pequeñas     */
/* ============================================== */
@media (max-width: 639px) {
/* Asegurar que todos los campos no se desborden */
.register__form-grid > *,
.register__phone-group > *,
.register__inline-field > * {
min-width: 0;
max-width: 100%;
}
/* Reducir padding en descripción para pantallas pequeñas */
.auth__description {
padding: 0.625rem;
font-size: 0.8125rem;
margin-bottom: 1rem;
}
/* Ajustar enlaces en móvil */
.auth__resend-link,
.auth__back-link {
font-size: 0.8125rem;
}
.auth__resend-link--active,
.auth__back-link span {
padding: 0.25rem 0.375rem;
font-size: 0.8125rem;
}
}
/* ============================================== */
/* Ajustes específicos para móviles muy pequeños */
/* ============================================== */
@media (max-width: 420px) {
.register__form-grid {
gap: 0.625rem;
}
.register__phone-group {
gap: 0.625rem;
}
.auth__description {
padding: 0.5rem;
font-size: 0.75rem;
margin-bottom: 0.875rem;
line-height: 1.4;
}
.auth__resend-link,
.auth__back-link {
margin-top: 0.625rem;
}
.auth__resend-link--active,
.auth__back-link span,
.auth__resend-link--disabled {
font-size: 0.75rem;
padding: 0.25rem;
}
}
/* ============================================== */
/* Bloque de campos opcionales del registro      */
/* (Reemplazado por AppTabs — estilos eliminados)*/
/* ============================================== */
/* Tabs del formulario de registro: alineados a la izquierda */
.register__tabs .app-tabs__list {
justify-content: flex-start;
gap: 0.25rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border-color);
margin-bottom: 0.25rem;
}
.register__tabs .app-tabs__tab {
border-radius: 6px;
font-size: 0.875rem;
font-weight: 500;
padding: 0.45rem 0.9rem;
box-shadow: none;
border-width: 1px;
}
.register__tabs .app-tabs__tab.is-active {
background: var(--primary-color);
color: var(--primary-foreground);
border-color: var(--primary-color);
box-shadow: none;
}
.register__tabs .app-tabs__tab:not(.is-active) {
background: transparent;
border-color: var(--border-color);
color: var(--text-color);
}
.register__tabs .app-tabs__panels {
margin-top: 1.25rem;
}
/* ==============================================
Separador de sección — compacto (texto + línea)
============================================== */
.register__section-divider {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.25rem;
margin-bottom: 0;
width: 100%;
min-width: 0;
overflow: visible;
}
.register__section-divider span {
font-size: 0.6875rem !important;
font-weight: 600;
color: var(--text-muted) !important;
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: nowrap;
opacity: 0.75;
flex-shrink: 0;
}
.register__section-divider::after {
content: '';
display: block;
flex: 1 1 0;
height: 1px;
background: var(--border-color);
opacity: 0.8;
min-width: 0;
}
.register__form-grid > .register__section-divider:first-child {
margin-top: 0;
}
/* ==============================================
Labels uppercase dentro del formulario de registro
============================================== */
.register__form-grid .app-label,
.register__contact-group .app-label,
.register__city-row .app-label {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-muted);
margin-bottom: 0.3rem;
}
/* ==============================================
Grupo de contacto: PREFIX | CÓDIGO | TELÉFONO
en una sola fila
============================================== */
.register__contact-group {
display: grid;
grid-template-columns: 90px 110px 1fr;
gap: 0.75rem;
align-items: start;
}
/* ==============================================
Fila ciudad: CIUDAD | ESTADO | C.P.
============================================== */
.register__city-row {
display: grid;
grid-template-columns: 1fr 1fr 6.5rem;
gap: 0.75rem;
align-items: end;
}
/* Responsive: contact y city colapsan en móvil */
@media (max-width: 639px) {
.register__contact-group {
grid-template-columns: 80px 90px 1fr;
gap: 0.5rem;
}
.register__city-row {
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.register__city-row > :last-child {
grid-column: 1 / -1;
}
}
@media (max-width: 420px) {
.register__contact-group {
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.register__contact-group > :last-child {
grid-column: 1 / -1;
}
}
@media (max-width: 639px) {
.register__section-divider span {
font-size: 0.625rem;
}
}
.aditional-category {
background: var(--card-category-bg-color, #DCE4F2);
border-radius: 10px;
border: 2px solid transparent;
margin-bottom: 1.2rem;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
padding: 1.2rem 1.5rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.aditional-category--disabled {
opacity: 0.6;
pointer-events: none;
filter: grayscale(0.2);
background: var(--disabled-background, #E0E5EC);
border: 2px dashed var(--disabled-color, #A0B4C8);
}
.aditional-category__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1.2rem;
}
.aditional-category__info {
flex: 1 1 auto;
}
.aditional-category__name {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-color, #1A1A1A);
}
.aditional-category__desc {
font-size: 0.98rem;
color: var(--text-muted, #6c757d);
}
.aditional-category__not-available {
color: var(--danger-color, #dc3545);
font-size: 0.98rem;
margin-top: 0.5rem;
font-weight: 600;
}
.aditional-category__fees {
min-width: 180px;
text-align: right;
}
.aditional-category__fee--active {
font-size: 1.1rem;
font-weight: 800;
color: var(--success-color, #007A33);
}
.aditional-category__fee-amount {
font-size: 1.1rem;
font-weight: 800;
color: var(--success-color, #007A33);
}
.aditional-category__fee-dates {
font-size: 0.95rem;
color: var(--text-muted, #6c757d);
font-weight: 400;
margin-left: 0.4rem;
white-space: nowrap;
}
.aditional-category__fee-list {
margin-top: 0.2rem;
}
.aditional-category__fee--future .aditional-category__fee-amount {
font-size: 0.98rem;
color: var(--secondary-color, #5596D3);
font-weight: 600;
}
.aditional-category__fee--future .aditional-category__fee-dates {
font-size: 0.92rem;
color: var(--text-muted, #6c757d);
font-weight: 400;
margin-left: 0.3rem;
white-space: nowrap;
}
.aditional-category__actions {
margin-top: 1rem;
}
.aditional-category__quantity {
width: 60px;
margin-left: 0.5rem;
padding: 0.2rem 0.4rem;
border-radius: 4px;
border: 1px solid var(--border-color, #C4D7E7);
font-size: 1rem;
}
.aditional-category__names {
margin-top: 0.7rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.aditional-category__name-input {
width: 100%;
padding: 0.3rem 0.6rem;
border-radius: 4px;
border: 1px solid var(--border-color, #C4D7E7);
font-size: 1rem;
}
/* Required name inputs (BEM modifier + compatibility helper) */
.aditional-category__name-input--required,
.aditional-category__name-input.is-required,
.aditional-category__name-input:required:invalid {
border-color: var(--danger-color, #dc3545);
box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.10);
}
/* Focus state for required/invalid */
.aditional-category__name-input--required:focus,
.aditional-category__name-input.is-required:focus,
.aditional-category__name-input:required:invalid:focus {
outline: none;
border-color: var(--danger-color, #dc3545);
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}
/* Optional subtle hint icon space (if needed later) */
.aditional-category__names .aditional-category__name-input--required::placeholder,
.aditional-category__names .aditional-category__name-input.is-required::placeholder {
color: var(--text-muted, #6c757d);
}
.aditional-category--selected {
border-color: var(--primary-color, #00236C);
background: var(--secondary-background, #EBF2FA);
box-shadow: 0 4px 16px var(--shadow-color, rgba(0,35,108,0.10));
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.aditional-category__quantity-label {
display: flex;
align-items: center;
gap: 0.5rem;
}
.aditional-category__quantity-btn {
background: var(--surface-color, #fff);
border: 1px solid var(--border-color, #C4D7E7);
color: var(--primary-color, #00236C);
border-radius: 50%;
width: 2rem;
height: 2rem;
font-size: 1.2rem;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
margin: 0 0.1rem;
padding: 0;
}
.aditional-category__quantity-btn span,
.aditional-category__quantity-btn svg {
color: inherit !important;
fill: currentColor !important;
transition: color 0.15s, fill 0.15s;
}
.aditional-category__quantity-btn:hover:not(:disabled),
.aditional-category__quantity-btn:focus-visible:not(:disabled) {
background: var(--primary-color, #00236C);
color: #fff;
border-color: var(--primary-color, #00236C);
}
.aditional-category__quantity-btn:hover:not(:disabled) span,
.aditional-category__quantity-btn:focus-visible:not(:disabled) span,
.aditional-category__quantity-btn:hover:not(:disabled) svg,
.aditional-category__quantity-btn:focus-visible:not(:disabled) svg {
color: #fff !important;
fill: #fff !important;
}
.aditional-category__quantity-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
background: var(--disabled-background, #E0E5EC);
border-color: var(--disabled-color, #A0B4C8);
color: var(--disabled-color, #A0B4C8);
}
@media (max-width: 700px) {
.aditional-category__header {
flex-direction: column;
gap: 0.7rem;
}
.aditional-category__fees {
min-width: unset;
text-align: left;
}
}
/* Ajustes extra para pantallas pequeñas (ahora <=600px) */
@media (max-width: 600px) {
.aditional-category__fee--active,
.aditional-category__fee--future {
display: flex;
flex-direction: column;
align-items: center; /* centrar monto y fechas */
text-align: center;
gap: 0.2rem;
}
.aditional-category__fee-dates,
.aditional-category__fee--future .aditional-category__fee-dates {
margin-left: 0;
white-space: normal;
line-height: 1.15;
}
.aditional-category__fees {
width: 100%;
text-align: center;
}
.aditional-category__header {
align-items: center;
}
.aditional-category__info {
text-align: center;
}
}
/* App Badge Preview Component (BEM) */
.app-badge-preview {
position: relative;
display: flex;
width: 100%;
/* Use aspect-ratio to force desired proportion. 420x510 ≈ 14/17 */
aspect-ratio: 14 / 17;
/* limit overall size so it doesn't dominate layout */
max-width: 420px;
max-height: 510px;
min-height: 130px; /* asegura tamaño mínimo cuando el contenedor no define altura */
border-radius: .75rem;
overflow: hidden;
background: var(--surface-alt, var(--surface, #f5f5f5));
box-shadow: 0 2px 4px rgba(0,0,0,.08);
isolation: isolate;
font-family: inherit;
user-select: none;
/* badge-specific variables so fallback and text can be forced independently of global surface vars */
--badge-fallback-start: #f5f7fa;
--badge-fallback-end: #e9ecf1;
--badge-text-color: #111827;
}
/* Orientation modifier: fuerza formato vertical típico de credencial */
.app-badge-preview--vertical { aspect-ratio: 54 / 86; }
.app-badge-preview--vertical .app-badge-preview__image { object-fit: cover; object-position: center top; }
/* Para imágenes muy horizontales, se prioriza altura completa sin distorsión, recortando laterales */
.app-badge-preview--vertical .app-badge-preview__image-wrapper { background-color: #000; }
.app-badge-preview--editing { outline: 2px solid var(--primary, #2563eb); outline-offset: 2px; }
/* Toolbar */
.app-badge-preview__toolbar {
position: absolute;
top: .4rem;
right: .4rem;
display: flex;
gap: .35rem;
z-index: 5;
}
.app-badge-preview__btn {
appearance: none;
border: 1px solid rgba(0,0,0,.12);
background: rgba(255,255,255,0.92);
color: var(--badge-text-color, #111827);
width: 2.1rem;
height: 2.1rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: .55rem;
font-size: 1.05rem;
cursor: pointer;
transition: background .12s, transform .12s;
box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.app-badge-preview__btn:hover { background: #fff; }
.app-badge-preview__btn:active { transform: scale(.96); }
.app-badge-preview__btn:disabled { opacity: .35; cursor: not-allowed; }
.app-badge-preview__btn--save { border-color: rgba(34,197,94,.9); box-shadow: 0 0 0 1px rgba(34,197,94,.12); }
.app-badge-preview__btn--cancel { border-color: rgba(239,68,68,.9); box-shadow: 0 0 0 1px rgba(239,68,68,.12); }
/* Tamaños (modifier): ahora considerablemente más grandes */
/* medium (default) se define en las clases base */
.app-badge-preview--size-small .app-badge-preview__name { font-size: clamp(.9rem, 3vw, 1.25rem); }
.app-badge-preview--size-small .app-badge-preview__lastname { font-size: clamp(.8rem, 2.7vw, 1.1rem); }
.app-badge-preview--size-large .app-badge-preview__name { font-size: clamp(1.8rem, 4vw, 3rem); }
.app-badge-preview--size-large .app-badge-preview__lastname { font-size: clamp(1.55rem, 3.5vw, 2.4rem); }
/* Imagen */
.app-badge-preview__image-wrapper {
/* keep full-bleed wrapper but ensure clipping and that inner content respects container aspect-ratio */
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
background: var(--surface, #f5f5f5);
overflow: hidden; /* ensure nothing can overflow the badge area */
display: block;
}
.app-badge-preview__image {
/* Fill the container and preserve the set proportion via aspect-ratio on the parent */
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; /* cover ensures the image fills without distortion and will be clipped inside */
object-position: center;
filter: brightness(0.95) saturate(1.05);
transition: transform .6s ease, filter .4s ease;
}
/* Fallback cuando no hay imagen */
.app-badge-preview__image-fallback {
position: absolute;
inset: 0;
/* Use badge-specific variables so fallback remains light by default even in dark themes */
background: linear-gradient(135deg, var(--badge-fallback-start), var(--badge-fallback-end));
display: flex;
align-items: center;
justify-content: center;
padding: 0; /* removed extra padding so SVG can fill entirely; spacing can be handled inside the SVG if needed */
}
/* Make placeholder SVG fill the wrapper and respect preserveAspectRatio set in the SVG */
.app-badge-preview__image-fallback svg,
.app-badge-preview__placeholder-svg {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
display: block;
opacity: .95;
filter: none; /* remove drop-shadow to keep crisp on light backgrounds */
}
/* Estilos internos del SVG */
.abp-pl-outline { fill: #ffffff; stroke: rgba(0,0,0,.06); stroke-width: 2; }
.abp-pl-band { fill: url(#abpGradient); }
.abp-pl-avatar { fill: rgba(0,0,0,.06); }
.abp-pl-line { fill: rgba(0,0,0,.12); }
.abp-pl-line--short { fill: rgba(0,0,0,.08); }
.abp-pl-code { fill: rgba(0,0,0,.06); }
/* Overlay para texto (centrado) */
.app-badge-preview__overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center; /* centro vertical */
justify-content: center; /* centro horizontal */
padding: 1rem;
text-align: center;
/* Removed dark semi-opaque background so underlying image is visible */
background: transparent;
/* Reduce or remove backdrop-filter to avoid darkening the image */
backdrop-filter: none;
pointer-events: none; /* avoid blocking input click events when editing inputs are visually on top */
}
.app-badge-preview__text {
width: 100%;
line-height: 1.1;
font-weight: 600;
letter-spacing: .5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: .4rem;
pointer-events: auto; /* allow interactions with text when editing is active */
}
/* Tamaños base (default: medium) */
.app-badge-preview__name {
display: block;
width: 100%;
/* Use badge-text-color so it can be forced to dark even in dark mode */
color: var(--badge-text-color, var(--on-surface, #111827));
/* Subtle light text shadow to help readability over busy images */
text-shadow: 0 1px 2px rgba(255,255,255,0.6);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 700;
font-size: clamp(1.35rem, 3.2vw, 2.2rem);
}
.app-badge-preview__lastname {
display: block;
width: 100%;
color: var(--badge-text-color, var(--on-surface, #111827));
text-shadow: 0 1px 2px rgba(255,255,255,0.55);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
font-size: clamp(1.15rem, 2.8vw, 1.8rem);
}
/* Editing form */
.app-badge-preview__form {
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
gap: .5rem;
pointer-events: auto; /* allow form interactions */
}
.app-badge-preview__field { width: 100%; }
.app-badge-preview__input {
width: 100%;
background: #ffffff;
border: 1px solid rgba(0,0,0,.12);
color: var(--badge-text-color, #111827);
padding: .55rem .7rem;
border-radius: .55rem;
font-size: 1rem;
font-weight: 600;
letter-spacing: .5px;
outline: none;
transition: border-color .25s, background .25s;
}
.app-badge-preview__input::placeholder {
color: rgba(17,24,39,.45);
font-weight: 400;
}
.app-badge-preview__input:focus {
border-color: var(--primary, #2563eb);
background: #fff;
}
.app-badge-preview__input:disabled { opacity: .6; cursor: not-allowed; }
.app-badge-preview__input--error { border-color: rgba(239,68,68,.85) !important; background: rgba(239,68,68,.08); }
/* Status / hint */
.app-badge-preview__hint {
min-height: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: .8rem;
font-weight: 500;
letter-spacing: .4px;
}
.app-badge-preview__status {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .2rem .55rem;
border-radius: .5rem;
line-height: 1;
}
.app-badge-preview__status--pending {
background: rgba(0,0,0,.06);
color: var(--badge-text-color, #111827);
animation: abpPulse 1.2s ease-in-out infinite;
}
.app-badge-preview__status--success { background: rgba(34,197,94,.12); color: rgba(4,120,87,.96); }
.app-badge-preview__status--error { background: rgba(239,68,68,.12); color: rgba(153,27,27,.96); }
@keyframes abpPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
/* Interacciones suaves (aunque sea solo preview) */
.app-badge-preview:hover .app-badge-preview__image {
transform: scale(1.04);
filter: brightness(1) saturate(1.1);
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
.app-badge-preview {
background: var(--surface-dark, #1f1f22);
box-shadow: 0 2px 6px rgba(0,0,0,.6);
/* keep badge fallback and text forced to light-background + dark text */
--badge-fallback-start: #f5f7fa;
--badge-fallback-end: #e9ecf1;
--badge-text-color: #111827;
}
.app-badge-preview__image { filter: brightness(.9) saturate(1.05); }
.app-badge-preview:hover .app-badge-preview__image { filter: brightness(.95) saturate(1.12); }
/* Ensure overlay stays transparent so underlying image/SVG is visible */
.app-badge-preview__overlay { background: transparent !important; }
/* Use the badge-specific fallback colors even in dark mode so SVG is visible */
.app-badge-preview__image-fallback { background: linear-gradient(135deg, var(--badge-fallback-start), var(--badge-fallback-end)); }
.abp-pl-outline { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.15); }
.abp-pl-avatar { fill: rgba(255,255,255,.25); }
.abp-pl-line { fill: rgba(255,255,255,.28); }
.abp-pl-line--short { fill: rgba(255,255,255,.2); }
.abp-pl-code { fill: rgba(255,255,255,.18); }
}
/* Compacidad en layouts muy pequeños */
@media (max-width: 420px) {
.app-badge-preview { min-height: 130px; max-width: 320px; max-height: 420px; }
.app-badge-preview__overlay { padding: .8rem; }
/* Ajustes responsive para que no se desborde */
.app-badge-preview__name { font-size: clamp(1.1rem, 6vw, 1.7rem); }
.app-badge-preview__lastname { font-size: clamp(.95rem, 5.2vw, 1.4rem); }
.app-badge-preview--size-small .app-badge-preview__name { font-size: clamp(.85rem, 5vw, 1.1rem); }
.app-badge-preview--size-small .app-badge-preview__lastname { font-size: clamp(.75rem, 4.5vw, 1rem); }
.app-badge-preview--size-large .app-badge-preview__name { font-size: clamp(1.4rem, 7vw, 2.2rem); }
.app-badge-preview--size-large .app-badge-preview__lastname { font-size: clamp(1.2rem, 6.3vw, 1.9rem); }
}
/* Utilitario ratio credencial (54x86 mm => ~1:1.59) */
.app-badge-preview--ratio-id { aspect-ratio: 54 / 86; }
/* Clase opcional (ya no necesaria para centrar, se mantiene por compatibilidad) */
.app-badge-preview--vcenter .app-badge-preview__overlay { align-items: center; justify-content: center; }
/* Add / extend error state styles for inputs and error messages */
.app-badge-preview__error { display:inline-block; margin-top:.25rem; font-size:.7rem; font-weight:600; letter-spacing:.5px; color:#b91c1c; text-shadow:none; }
/* ========================================
AppBottomBar - Footer Oscuro Premium
======================================== */
.app-bottombar-accent {
height: 3px;
background: var(--topbar-accent-gradient);
width: 100%;
}
.app-bottombar-f {
background: #071c36;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
/* Textura de puntos */
.app-bottombar-f::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
background-size: 20px 20px;
pointer-events: none;
}
.app-bottombar-f__main {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
padding: 2.5rem 2rem 2rem;
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
gap: 2.5rem;
}
/* === Columna marca === */
.app-bottombar-f__brand {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.app-bottombar-f__logo {
display: flex;
justify-content: center;
align-items: center;
gap: 0.625rem;
margin-bottom: 0.25rem;
}
.app-bottombar-f__logo-img {
width: 60px;
height: 60px;
object-fit: contain;
border-radius: 8px;
}
.app-bottombar-f__brand-name {
font-size: 0.9375rem;
font-weight: 700;
color: #ffffff;
margin: 0;
line-height: 1.2;
}
.app-bottombar-f__tagline {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.5);
line-height: 1.5;
margin: 0;
}
.app-bottombar-f__social {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 0.25rem;
flex-wrap: wrap;
}
.app-bottombar-f__social-link {
width: 30px !important;
height: 30px !important;
border-radius: 7px !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
background: transparent !important;
color: rgba(255, 255, 255, 0.5) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 14px !important;
padding: 0 !important;
min-height: unset !important;
transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
.app-bottombar-f__social-link:hover {
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
color: #fff !important;
transform: none !important;
}
/* === Columnas info === */
.app-bottombar-f__column {
display: flex;
flex-direction: column;
}
.app-bottombar-f__column-title {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.35);
margin: 0 0 0.875rem 0;
}
.app-bottombar-f__info-list {
display: flex;
flex-direction: column;
gap: 0.625rem;
margin-bottom: 1.25rem;
}
.app-bottombar-f__info-item {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.6);
line-height: 1.5;
}
.app-bottombar-f__info-icon {
color: var(--accent-color);
flex-shrink: 0;
margin-top: 1px;
font-size: 0.875rem;
}
.app-bottombar-f__info-text {
flex: 1;
}
.app-bottombar-f__info-text a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: color 0.15s;
}
.app-bottombar-f__info-text a:hover {
color: rgba(255, 255, 255, 0.9);
}
.app-bottombar-f__info-text b {
color: rgba(255, 255, 255, 0.75);
font-weight: 600;
}
/* === Barra de copyright === */
.app-bottombar-f__bottom {
position: relative;
z-index: 1;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 1rem 2rem;
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
}
.app-bottombar-f__copyright {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.3);
margin: 0;
}
.app-bottombar-f__footer-links {
display: flex;
gap: 1rem;
}
.app-bottombar-f__footer-link {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.3);
cursor: pointer;
text-decoration: none;
transition: color 0.15s;
}
.app-bottombar-f__footer-link:hover {
color: rgba(255, 255, 255, 0.7);
}
/* === Responsive === */
@media (max-width: 968px) {
.app-bottombar-f__main {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 2rem 1.5rem 1.5rem;
}
.app-bottombar-f__brand {
align-items: flex-start;
}
}
@media (max-width: 640px) {
.app-bottombar-f__main {
padding: 1.5rem 1rem 1rem;
}
.app-bottombar-f__bottom {
padding: 0.875rem 1rem;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
}
/* OpenPay Form - BEM Naming with Modern Design */
.appform-openpay {
display: block;
position: relative;
}
.appform-openpay--processing {
pointer-events: none;
opacity: 0.7;
}
/* Rows */
.appform-openpay__row {
margin-bottom: 1rem;
}
.appform-openpay__row--exp {
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
/* Columns for expiration/CVV */
.appform-openpay__col {
flex: 1 1 0;
min-width: 0;
}
.appform-openpay__col--month {
flex: 1.5;
}
.appform-openpay__col--year {
flex: 1.5;
}
.appform-openpay__col--cvv {
flex: 1;
}
/* Card Number Input with Icon */
.appform-openpay__card-input {
position: relative;
}
.appform-openpay__card-icon {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
margin-top: 8px; /* Adjust for label */
width: 48px;
height: 32px;
pointer-events: none;
z-index: 10;
transition: opacity 0.2s ease;
}
.card-icon {
width: 100%;
height: 100%;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
/* Card type specific animations */
.appform-openpay__card-icon--visa {
animation: fadeInScale 0.3s ease;
}
.appform-openpay__card-icon--mastercard {
animation: fadeInScale 0.3s ease;
}
.appform-openpay__card-icon--amex {
animation: fadeInScale 0.3s ease;
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: translateY(-50%) scale(0.8);
}
to {
opacity: 1;
transform: translateY(-50%) scale(1);
}
}
/* CVV Input with Visual Help */
.appform-openpay__cvv-input {
position: relative;
}
.appform-openpay__cvv-icon {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
margin-top: 8px;
width: 48px;
height: 32px;
pointer-events: none;
z-index: 10;
opacity: 0.6;
transition: opacity 0.2s ease;
}
.appform-openpay__cvv-input:hover .appform-openpay__cvv-icon {
opacity: 1;
}
.cvv-icon {
width: 100%;
height: 100%;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
/* Actions (Button area) */
.appform-openpay__actions {
margin-top: 1.5rem;
}
.appform-openpay__actions button {
width: 100%;
}
/* Security Indicator */
.appform-openpay__security {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
margin-top: 0.75rem;
padding: 0.5rem 0.75rem;
background-color: transparent;
border-radius: var(--border-radius-md, 8px);
color: var(--text-muted, #9ca3af);
font-size: 0.8125rem;
line-height: 1.2;
}
.appform-openpay__security-icon {
width: 16px;
height: 16px;
color: var(--color-success, #10b981);
flex-shrink: 0;
}
.appform-openpay__security-text {
font-weight: var(--font-weight-normal, 400);
}
/* Responsive */
@media (max-width: 640px) {
.appform-openpay__row--exp {
flex-wrap: wrap;
}
.appform-openpay__col--month,
.appform-openpay__col--year {
flex: 1 1 calc(50% - 0.375rem);
min-width: 0;
}
.appform-openpay__col--cvv {
flex: 1 1 100%;
}
.appform-openpay__card-icon,
.appform-openpay__cvv-icon {
width: 40px;
height: 28px;
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.appform-openpay__security {
background-color: var(--bg-secondary-dark, #1f2937);
color: var(--text-secondary-dark, #9ca3af);
}
.card-icon rect[fill="#E5E7EB"] {
fill: #374151;
}
.card-icon text[fill="#374151"] {
fill: #E5E7EB;
}
}
/* Loading state */
.appform-openpay--processing::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(2px);
border-radius: var(--border-radius-lg, 12px);
z-index: 100;
}
.appform-openpay--processing .appform-openpay__actions button {
cursor: wait;
}
/* Focus states enhancement */
.appform-openpay input:focus ~ .appform-openpay__card-icon,
.appform-openpay input:focus ~ .appform-openpay__cvv-icon {
opacity: 1;
}
/* Error states */
.appform-openpay input[aria-invalid="true"] ~ .appform-openpay__card-icon {
opacity: 0.5;
}
/* ============================================================
AppFormStripe — BEM Component
Namespace único: appform-stripe
Fuente de colores: colors.css (variables CSS, sin hardcode)
Responsivo: sm / md / lg
============================================================ */
/* ── Bloque raíz ──────────────────────────────────────────── */
.appform-stripe {
display: block;
position: relative;
}
.appform-stripe--processing {
pointer-events: none;
opacity: 0.72;
}
/* ── Grupo de campo ───────────────────────────────────────── */
.appform-stripe__field-group {
margin-bottom: 1rem;
}
/* ── Label con ícono de tarjeta ───────────────────────────── */
.appform-stripe__label {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 0.5rem;
letter-spacing: 0.01em;
}
.appform-stripe__label-icon {
width: 1rem;
height: 1rem;
flex-shrink: 0;
color: var(--primary-color);
}
/* ── Área de montaje del Card Element de Stripe ───────────── */
/* Imita exactamente el estilo de app-input__control del proyecto */
.appform-stripe__card-mount {
display: block;
width: 100%;
padding: 0.6875rem 0.875rem;
border: 1.5px solid var(--border-color);
border-radius: 8px;
background-color: var(--surface-color);
color: var(--text-color);
min-height: 46px;
box-sizing: border-box;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
position: relative;
}
/* Dark mode explícito — garantiza que el fondo nunca quede blanco */
:root:not([data-theme='light']) .appform-stripe__card-mount,
:root[data-theme='dark'] .appform-stripe__card-mount {
background-color: #0f1428;
border-color: #1a2340;
}
.appform-stripe__card-mount:focus-within {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
outline: none;
}
.appform-stripe__card-mount--error {
border-color: var(--danger-foreground);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-foreground) 14%, transparent);
}
/* ── Mensaje de error de campo ────────────────────────────── */
.appform-stripe__field-error {
margin-top: 0.35rem;
font-size: 0.78rem;
color: var(--danger-foreground);
display: flex;
align-items: center;
gap: 0.3rem;
line-height: 1.4;
}
/* ── Términos (slot pasado desde Register) ────────────────── */
.appform-stripe__terms {
margin-bottom: 0.75rem;
}
/* ── Mensaje de recovery (caso límite) ────────────────────── */
.appform-stripe__recovery {
margin-bottom: 1rem;
padding: 0.875rem 1rem;
border-radius: 8px;
border-left: 4px solid var(--warning-foreground);
background-color: var(--warning-background);
color: var(--warning-foreground);
font-size: 0.8375rem;
line-height: 1.5;
}
/* ── Área de acciones ─────────────────────────────────────── */
.appform-stripe__actions {
margin-top: 0.75rem;
}
.appform-stripe__actions button,
.appform-stripe__actions .app-button {
width: 100%;
}
/* ── Sello de seguridad ───────────────────────────────────── */
.appform-stripe__security {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-top: 1rem;
padding: 0.6rem 0.75rem;
border-radius: 6px;
background-color: var(--success-background);
}
.appform-stripe__security-icon {
width: 0.9rem;
height: 0.9rem;
flex-shrink: 0;
margin-top: 0.1rem;
color: var(--success-foreground);
}
.appform-stripe__security-text {
font-size: 0.74rem;
color: var(--success-foreground);
line-height: 1.45;
}
/* ── Responsivo ───────────────────────────────────────────── */
@media (min-width: 480px) {
.appform-stripe__card-mount {
padding: 0.75rem 1rem;
}
}
@media (min-width: 768px) {
.appform-stripe__label {
font-size: 0.875rem;
}
.appform-stripe__field-error {
font-size: 0.8125rem;
}
}
/* MercadoPago mounts - estilos claros/oscuro y clickeables */
.app-payment-form__form--mp .app-payment-form__mount {
position: relative;
display: block;
width: 100%;
min-height: 46px;
border: 1px solid var(--border-color, #c9c9c9);
border-radius: 6px;
padding: 10px 12px;
background: var(--bg-color, #fff);
color: var(--text-color, #111);
}
/* iFrame de MP ocupa el contenedor */
.app-payment-form__form--mp .app-payment-form__mount iframe {
position: relative !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 24px !important;
border: none !important;
background: transparent !important;
z-index: 2;
pointer-events: auto !important;
}
.app-payment-form__form--mp .app-payment-form__label { color: var(--label-color, #374151); }
/* Dark theme variables (prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
.app-payment-form__form--mp .app-payment-form__mount {
--bg-color: #111827;
--text-color: #f9fafb;
--border-color: #374151;
}
.app-payment-form__form--mp .app-payment-form__label { color: #d1d5db; }
}
/* separación */
.app-payment-form__form--mp .app-payment-form__row + .app-payment-form__row { margin-top: 12px; }
/* Block: app-payment-form (BEM) */
.app-payment-form {
border: 2px solid var(--primary-color);
border-radius: 10px;
background: var(--surface-color);
box-shadow: 0 2px 10px var(--shadow-color);
padding: 16px;
display: grid;
gap: 16px;
color: var(--text-color);
width: 100%;
position: relative;
}
@media (prefers-color-scheme: dark) {
.app-payment-form {
border-color: var(--primary-light);
box-shadow: 0 2px 12px rgba(0,0,0,.45);
}
}
.app-payment-form__engine-selector {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.app-payment-form__engine-btn {
border: 1px solid var(--border-color);
background: var(--surface-color);
color: var(--text-color);
border-radius: 999px;
padding: 6px 12px;
cursor: pointer;
transition: border-color .15s ease,color .15s ease,background-color .15s ease;
}
.app-payment-form__engine-btn:hover {
border-color: var(--highlight-color);
}
.app-payment-form__engine-btn.is-active {
border-color: var(--primary-color);
color: var(--primary-color);
font-weight: 600;
}
.app-payment-form__header {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-bottom: 6px;
border-bottom: 1px dashed var(--divider-color);
}
.app-payment-form__title {
font-weight: 700;
font-size: 1.05rem;
}
.app-payment-form__amount {
opacity: .8;
}
.app-payment-form__content {
display: grid;
gap: 12px;
}
.app-payment-form__form {
display: grid;
gap: 12px;
}
/* Filas y proporciones */
.app-payment-form__row {
display: grid;
gap: 12px;
}
.app-payment-form__row--two {
grid-template-columns: 1fr 1fr;
}
/* Primera fila del formulario: 2fr 1fr (Número + Titular) */
.app-payment-form__form .app-payment-form__row--two:first-of-type {
grid-template-columns: 2fr 1fr;
}
@media(max-width:640px) {
.app-payment-form__row--two {
grid-template-columns: 1fr;
}
}
.app-payment-form__field {
display: grid;
gap: 6px;
}
.app-payment-form__label {
font-weight: 600;
color: var(--text-color);
}
.app-payment-form__input,
.app-payment-form__select {
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 10px 12px;
background: #fff;
color: #1A1A1A;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
@media (prefers-color-scheme: dark) {
.app-payment-form__input,
.app-payment-form__select {
background: var(--surface-alt-color);
color: var(--text-color);
}
}
.app-payment-form__input:focus,
.app-payment-form__select:focus {
border-color: var(--focus-color);
box-shadow: 0 0 0 3px rgba(68,119,187,.25);
}
/* Monturas de SDK: foco y puntero correctos (evita bloqueo) */
.app-payment-form__mount {
min-height: 44px;
border: 1px solid var(--border-color);
border-radius: 6px;
background: #fff;
padding: 8px 10px;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
isolation: isolate;
z-index: 1000;
pointer-events: auto;
width: 100%;
}
.app-payment-form__mount iframe,
.app-payment-form__mount > div {
width: 100%;
}
@media (prefers-color-scheme: dark) {
.app-payment-form__mount {
background: var(--surface-alt-color);
}
}
.app-payment-form__mount--paypal {
padding: 12px;
justify-content: center;
}
.app-payment-form__hint {
font-size: .85rem;
color: var(--text-muted);
}
.app-payment-form__actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
position: relative;
z-index: 1;
}
.app-payment-form__note {
color: var(--text-muted);
}
.app-payment-form__pay-btn {
background: var(--primary-color);
color: #fff;
border: none;
border-radius: 8px;
padding: 10px 16px;
cursor: pointer;
transition: filter .15s ease, opacity .15s ease;
}
.app-payment-form__pay-btn:hover {
filter: brightness(1.05);
}
.app-payment-form__pay-btn[disabled] {
opacity: .6;
cursor: not-allowed;
}
/* --- Principal Category Styles --- */
.principal-category {
width: 100%;
background: var(--card-category-bg-color, #DCE4F2);
border-radius: 12px;
border: 2px solid transparent;
box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
margin-bottom: 1.2rem;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.15s;
outline: none;
padding: 0;
position: relative;
}
.principal-category:focus-visible {
border-color: var(--focus-color, #4477BB);
box-shadow: 0 0 0 3px var(--focus-color, #4477BB33);
}
.principal-category--selected {
border-color: var(--primary-color, #00236C);
border-width: 4px;
background: var(--secondary-background, #EBF2FA);
box-shadow: 0 4px 16px var(--shadow-color, rgba(0,35,108,0.16)), 0 0 0 4px var(--primary-color, #00236C33);
transform: scale(1.025);
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.2s, border-width 0.2s;
z-index: 1;
}
.principal-category:hover {
background: var(--hover-background-color, #E8F1FD);
box-shadow: 0 8px 24px var(--shadow-color, rgba(0,35,108,0.18));
border-color: var(--primary-color, #00236C);
transform: scale(1.015);
}
.principal-category__selected-icon {
position: absolute;
top: 0.7rem;
right: 0.9rem;
background: var(--primary-color, #00236C);
color: #fff;
border-radius: 50%;
width: 2.1rem;
height: 2.1rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
font-weight: bold;
box-shadow: 0 4px 12px var(--shadow-color, rgba(0,35,108,0.18));
z-index: 2;
border: 3px solid #fff;
transition: all 0.2s;
animation: popSelected 0.18s cubic-bezier(.4,1.3,.6,1);
}
@keyframes popSelected {
0% { transform: scale(0.8); }
60% { transform: scale(1.15); }
100% { transform: scale(1); }
}
.principal-category__grid {
display: grid;
grid-template-columns: 2fr 1.2fr;
gap: 1.2rem;
align-items: center;
padding: 1.2rem 1.2rem 1.2rem 2rem;
}
.principal-category__info {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.principal-category__name {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-color, #1A1A1A);
}
.principal-category__desc {
font-size: 0.98rem;
color: var(--text-muted, #6c757d);
}
.principal-category__fees {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.15rem;
width: 100%;
}
.principal-category__fee--active {
display: flex;
align-items: baseline;
gap: 0.5rem;
font-size: 1.15rem;
font-weight: 800;
color: var(--success-color, #007A33);
background: none;
border-radius: 6px;
padding: 0.15rem 0.2rem 0.15rem 0;
border: 2px dashed var(--success-color, #007A33);
border-bottom: 3px solid var(--success-color, #007A33);
margin-bottom: 0.18rem;
}
.principal-category__fee--active .principal-category__fee-amount {
font-size: 1.15rem;
font-weight: 800;
color: var(--success-color, #007A33);
}
.principal-category__fee--active .principal-category__fee-dates {
font-size: 1rem;
color: var(--text-muted, #6c757d);
font-weight: 500;
margin-left: 0.6rem;
}
.principal-category__fee--active .principal-category__fee-current {
font-size: 1.1rem;
color: var(--success-color, #007A33);
margin-left: 0.5rem;
vertical-align: middle;
font-weight: bold;
display: inline-flex;
align-items: center;
}
.principal-category__fee--active .principal-category__fee-current svg {
width: 1.1em;
height: 1.1em;
fill: var(--success-color, #007A33);
margin-left: 0.1em;
vertical-align: middle;
}
.principal-category__fee-amount {
font-size: 1.2rem;
font-weight: 800;
color: var(--success-color, #007A33);
}
.principal-category__fee-dates {
font-size: 0.95rem;
color: var(--text-muted, #6c757d);
font-weight: 400;
margin-left: 0.4rem;
white-space: nowrap;
}
.principal-category__fee-list {
width: 100%;
}
.principal-category__fee--future {
display: flex;
align-items: baseline;
gap: 0.3rem;
font-size: 0.98rem;
color: var(--secondary-color, #5596D3);
font-weight: 600;
margin-top: 0.05rem;
}
.principal-category__fee--future .principal-category__fee-amount {
font-size: 0.98rem;
color: var(--secondary-color, #5596D3);
font-weight: 600;
}
.principal-category__fee--future .principal-category__fee-dates {
font-size: 0.92rem;
color: var(--text-muted, #6c757d);
font-weight: 400;
margin-left: 0.3rem;
white-space: nowrap;
}
.principal-category--selected .principal-category__name,
.principal-category--selected .principal-category__desc,
.principal-category--selected .principal-category__fee-amount,
.principal-category--selected .principal-category__fee-dates {
color: var(--text-color, #1A1A1A);
}
.principal-category--selected .principal-category__fee--active .principal-category__fee-amount {
color: var(--success-color, #007A33);
}
.principal-category--selected .principal-category__fee--future .principal-category__fee-amount {
color: var(--secondary-color, #5596D3);
}
.principal-category--selected .principal-category__selected-icon {
background: var(--primary-color, #00236C);
color: #fff;
border: 3px solid #fff;
}
.principal-category--disabled {
opacity: 0.6;
pointer-events: none;
filter: grayscale(0.2);
background: var(--disabled-background, #E0E5EC);
border: 2px dashed var(--disabled-color, #A0B4C8);
box-shadow: none;
cursor: not-allowed;
}
.principal-category--locked {
opacity: 1;
filter: none;
background: var(--warning-background);
border-color: var(--warning-color);
box-shadow: inset 0.35rem 0 0 var(--warning-color);
transform: none;
}
.principal-category--locked:focus-visible {
border-color: var(--warning-color);
box-shadow: inset 0.35rem 0 0 var(--warning-color);
}
.principal-category--locked .principal-category__name {
color: var(--warning-foreground);
}
.principal-category--locked .principal-category__desc,
.principal-category--locked .principal-category__fee-dates {
color: var(--text-secondary);
}
.principal-category--locked .principal-category__fee--active {
background: var(--surface-color);
border-color: var(--disabled-color);
}
.principal-category--locked .principal-category__fee--active .principal-category__fee-amount,
.principal-category--locked .principal-category__fee--future .principal-category__fee-amount {
color: var(--warning-foreground);
}
.principal-category__not-available {
color: var(--danger-color, #dc3545);
font-size: 0.98rem;
margin-top: 0.5rem;
font-weight: 600;
}
/* Modo oscuro */
@media (prefers-color-scheme: dark) {
.principal-category {
background: var(--card-category-bg-color, #2a3140);
}
.principal-category--selected {
background: var(--surface-alt-color, #1a1d1f);
border-color: var(--primary-color, #7da6ff);
box-shadow: 0 4px 16px var(--shadow-color, rgba(0,35,108,0.32)), 0 0 0 4px var(--primary-color, #7da6ff33);
}
.principal-category--selected .principal-category__name,
.principal-category--selected .principal-category__desc,
.principal-category--selected .principal-category__fee-amount,
.principal-category--selected .principal-category__fee-dates {
color: var(--text-color, #e6e6e6);
}
}
/* Ajustes para pantallas pequeñas (ahora <=600px) */
@media (max-width: 600px) {
.principal-category__grid {
grid-template-columns: 1fr;
padding: 1rem;
gap: 0.9rem;
justify-items: center; /* Centra elementos del grid */
}
.principal-category__info {
align-items: center;
text-align: center;
display: flex; /* asegura flex para centrar */
flex-direction: column;
}
.principal-category__fees {
align-items: center;
text-align: center;
}
.principal-category__fee--active,
.principal-category__fee--future {
flex-direction: column;
align-items: center; /* centrar monto y fechas */
text-align: center;
gap: 0.2rem;
}
.principal-category__fee--active .principal-category__fee-dates,
.principal-category__fee--future .principal-category__fee-dates,
.principal-category__fee-dates {
margin-left: 0;
white-space: normal;
line-height: 1.15;
}
.principal-category__fee--active {
border-width: 2px;
border-bottom-width: 3px;
}
}
/* AppPrivacy Component (BEM) */
.app-privacy {
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 100%;
height: 100%; /* To fit any modal/container */
overflow: hidden; /* Hide overflow from inner scroll container */
background: var(--surface-color);
color: var(--text-color);
font-size: var(--font-size-base, 0.95rem);
}
.app-privacy__inner {
box-sizing: border-box;
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.25rem 1.25rem 2rem;
overflow-y: auto; /* Scroll only content */
scrollbar-width: thin;
}
.app-privacy__inner::-webkit-scrollbar {
width: 8px;
}
.app-privacy__inner::-webkit-scrollbar-track {
background: transparent;
}
.app-privacy__inner::-webkit-scrollbar-thumb {
background: var(--text-muted);
border-radius: 4px;
}
.app-privacy__header {
border-bottom: 1px solid var(--border-color);
padding-bottom: .75rem;
margin-bottom: .25rem;
}
.app-privacy__title {
margin: 0 0 .25rem 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--text-color);
}
.app-privacy__last-updated {
margin: 0;
font-size: .7rem;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--text-muted);
}
.app-privacy__content {
line-height: 1.55;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.app-privacy__section {
display: flex;
flex-direction: column;
gap: .5rem;
}
.app-privacy__section-title {
margin: 0;
font-size: 1.05rem;
font-weight: 600;
color: var(--accent-color);
}
.app-privacy__paragraph {
margin: 0;
text-align: justify;
}
.app-privacy__paragraph + .app-privacy__paragraph {
margin-top: .75rem;
}
.app-privacy__extra {
margin-top: .5rem;
padding-top: .75rem;
border-top: 1px dashed var(--border-light);
font-size: .85rem;
}
/* Responsive */
@media (min-width: 768px) {
.app-privacy__title {
font-size: 1.4rem;
}
.app-privacy__section-title {
font-size: 1.15rem;
}
}
/* Optional transitions for smooth theme change */
.app-privacy, .app-privacy * {
transition: background-color .25s, color .25s, border-color .25s;
}
/* Componente AppQr */
.app-qr {
position: relative;
display: inline-flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
background: var(--color-surface, #fff);
border: 1px solid var(--color-border, #e0e0e0);
border-radius: var(--radius-md, 8px);
padding: var(--space-sm, 0.5rem);
box-sizing: border-box;
overflow: hidden;
aspect-ratio: 1 / 1;
}
/* Estado sin botón de descarga */
.app-qr--no-download .app-qr__download-btn { display: none; }
.app-qr__image {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
object-fit: contain;
image-rendering: pixelated;
border-radius: var(--radius-xs, 4px);
user-select: none;
-webkit-user-drag: none;
}
.app-qr__placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(0.75rem, 2vw, 1rem);
color: var(--color-text-secondary, #666);
background: repeating-conic-gradient(var(--color-border, #e0e0e0) 0% 25%, transparent 0% 50%) 50% / 20px 20px;
border-radius: var(--radius-xs, 4px);
letter-spacing: 1px;
font-weight: 600;
}
.app-qr__placeholder-text { opacity: 0.6; }
.app-qr__download-btn {
position: absolute;
top: 4px;
right: 4px;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-surface-alt, rgba(255,255,255,0.85));
border: 1px solid var(--color-border, #d4d4d4);
border-radius: var(--radius-sm, 6px);
text-decoration: none;
color: var(--color-text, #222);
backdrop-filter: blur(4px);
opacity: 0.0;
transform: translateY(-4px);
transition: opacity .25s ease, transform .25s ease, background .25s, border-color .25s;
}
.app-qr:hover .app-qr__download-btn,
.app-qr:focus-within .app-qr__download-btn {
opacity: 1;
transform: translateY(0);
}
.app-qr__download-btn:hover,
.app-qr__download-btn:focus-visible {
background: var(--color-primary, #2563eb);
border-color: var(--color-primary, #2563eb);
color: var(--color-on-primary, #fff);
}
.app-qr__download-icon {
width: 16px;
height: 16px;
fill: currentColor;
pointer-events: none;
}
/* Modo oscuro */
:root[data-theme='dark'] .app-qr,
.dark .app-qr {
background: var(--color-surface, #1f1f23);
border-color: var(--color-border, #333);
}
:root[data-theme='dark'] .app-qr__download-btn,
.dark .app-qr__download-btn {
background: rgba(30,30,35,0.75);
border-color: var(--color-border, #333);
color: var(--color-text, #ddd);
}
:root[data-theme='dark'] .app-qr__download-btn:hover,
.dark .app-qr__download-btn:hover {
background: var(--color-primary, #3b82f6);
color: var(--color-on-primary, #fff);
}
:root[data-theme='dark'] .app-qr__placeholder,
.dark .app-qr__placeholder {
color: var(--color-text-secondary, #999);
background: repeating-conic-gradient(var(--color-border, #333) 0% 25%, transparent 0% 50%) 50% / 20px 20px;
}
/* Ajuste: asegurar que el código de confirmación sea legible en modo oscuro */
:root[data-theme='dark'] .app-qr + .inscription-page__code,
:root[data-theme='dark'] .inscription-page__qr .inscription-page__code,
.dark .app-qr + .inscription-page__code,
.dark .inscription-page__qr .inscription-page__code {
color: var(--color-text, #fff);
}
/* Reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
.app-qr__download-btn { transition: none; }
}
/* ------------------------------------------------------------------ */
/* Estilos para el código de confirmación / etiqueta (solo visual, sin cambio de comportamiento) */
/* Centra y enfatiza el código de confirmación cuando se coloca junto o debajo del componente QR.
Apunta a .inscription-page__qr común envolvente y también patrones de hermanos adyacentes. */
.inscription-page__qr {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
/* Cuando el código de confirmación se representa como un hermano justo después del elemento .app-qr */
.app-qr + .inscription-page__code,
/* Cuando está dentro de un contenedor como .inscription-page__qr */
.inscription-page__qr .inscription-page__code {
text-align: center;
font-weight: 700;
font-size: clamp(1rem, 2.6vw, 1.40rem); /* receptivo, más grande en pantallas más anchas */
/*color: var(--color-text, #111);*/
color: var(--text-color, #111);
letter-spacing: 0.02em;
line-height: 1;
margin: 0;
}
/* Ligera separación y separación visual del cuadro QR */
.app-qr + .inscription-page__code { margin-top: 0.25rem; }
/* Asegurar que los códigos largos se ajusten bien (si los hay) */
.inscription-page__code { word-break: break-word; max-width: 100%; }
/* AppSideBar (BEM)
Visual polish + alignment with base/colors.css variables
*/
:root {
/* map to base colors (colors.css) with safe fallbacks */
--app-sidebar-bg: var(--surface-color, #ffffff);
--app-sidebar-fg: var(--text-color, #1A1A1A);
--app-sidebar-accent: var(--primary-color, #2547d0);
--app-sidebar-accent-contrast: var(--text-light, #ffffff);
--app-sidebar-muted: var(--text-muted, #6c757d);
--app-sidebar-border: var(--border-color, #C4D7E7);
--app-sidebar-shadow:010px30px var(--shadow-color, rgba(0,0,0,0.12));
--app-sidebar-overlay: var(--overlay-color, rgba(0,0,0,0.35));
}
@media (prefers-color-scheme: dark) {
:root {
--app-sidebar-bg: var(--surface-color, #23272A);
--app-sidebar-fg: var(--text-color, #F7F9FC);
--app-sidebar-accent: var(--primary-light, #7aa2ff);
--app-sidebar-accent-contrast: var(--surface-color, #111827);
--app-sidebar-muted: var(--text-muted, #b0b8c1);
--app-sidebar-border: var(--border-color, #2C2F33);
--app-sidebar-shadow:010px30px var(--shadow-color, rgba(0,0,0,0.42));
--app-sidebar-overlay: var(--overlay-color, rgba(0,0,0,0.55));
}
}
.app-sidebar { position: relative; z-index:1000; }
/* Overlay for small screens */
.app-sidebar__overlay { position: fixed; inset:0; background: var(--app-sidebar-overlay); backdrop-filter: blur(1px); z-index:1090; }
/* Panel */
.app-sidebar__panel {
position: fixed;
top:0; left:0;
height:100dvh;
width: min(320px,90vw);
background: var(--app-sidebar-bg);
color: var(--app-sidebar-fg);
border-right:1px solid var(--app-sidebar-border);
box-shadow: var(--app-sidebar-shadow);
transform: translateX(-100%);
transition: transform .28s ease;
display: flex; flex-direction: column;
z-index:1100;
}
.app-sidebar--open .app-sidebar__panel { transform: translateX(0); }
/* Header */
.app-sidebar__header {
display: flex; align-items: center; justify-content: space-between; gap: .5rem;
padding:1rem; border-bottom:1px solid var(--app-sidebar-border);
background: var(--app-sidebar-bg); color: var(--app-sidebar-fg);
}
.app-sidebar__title { font-weight:700; letter-spacing: .2px; }
.app-sidebar__close {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width:36px; height:36px; border-radius:8px;
border:1px solid var(--app-sidebar-border);
background: transparent; color: var(--app-sidebar-fg);
cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
box-shadow:0001px rgba(0,0,0,.02) inset;
}
.app-sidebar__close:hover { background: rgba(127,127,127,.10); border-color: var(--app-sidebar-accent); color: var(--app-sidebar-accent) }
@media (prefers-color-scheme: dark) {
.app-sidebar__close { border-color: rgba(255,255,255,.18); box-shadow:0001px rgba(255,255,255,.06) inset; }
.app-sidebar__close:hover { background: rgba(255,255,255,.08); border-color: var(--app-sidebar-accent); }
}
/* close button visual X */
.app-sidebar__close::before, .app-sidebar__close::after {
content: ""; position: absolute; top:50%; left:50%; width:16px; height:2.4px;
background-color: currentColor; transform-origin: center; border-radius:1px;
}
.app-sidebar__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.app-sidebar__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* Nav */
.app-sidebar__nav { padding: .25rem .5rem1rem .5rem; overflow: auto; }
.app-sidebar__group { padding: .75rem .5rem; }
.app-sidebar__group + .app-sidebar__group { border-top:1px dashed var(--app-sidebar-border); }
.app-sidebar__group-title { padding: .25rem .5rem; margin:00 .25rem0; font-size: .9rem; color: var(--app-sidebar-muted); text-transform: uppercase; letter-spacing: .06em; }
.app-sidebar__list { list-style: none; padding:0; margin:0; }
/* Links */
.app-sidebar__link {
display: flex; align-items: center; gap: .6rem;
padding: .5rem .75rem; margin:2px0; border-radius:8px;
color: inherit; text-decoration: none;
transition: background-color .18s ease, color .18s ease, padding-left .2s ease;
}
.app-sidebar__link:hover { background: rgba(37,71,208,.08); padding-left:1rem; }
@media (prefers-color-scheme: dark) { .app-sidebar__link:hover { background: rgba(122,162,255,.12); } }
.app-sidebar__link--active { background: rgba(37,71,208,.1); color: var(--app-sidebar-accent); }
@media (prefers-color-scheme: dark) { .app-sidebar__link--active { background: rgba(122,162,255,.16); color: var(--app-sidebar-accent); } }
/* Uniform icons for groups and items */
.app-sidebar__item-icon {
width:22px; height:22px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--app-sidebar-muted);
border-radius:6px; /* subtle shape for consistency */
}
.app-sidebar__item-icon > svg { width:18px; height:18px; display: block; }
/* Hover/active icon color */
.app-sidebar__link:hover .app-sidebar__item-icon { color: var(--app-sidebar-accent); }
.app-sidebar__link--active .app-sidebar__item-icon { color: var(--app-sidebar-accent); }
/* Group toggle */
.app-sidebar__group-toggle { width:100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .75rem; border:0; background: transparent; color: inherit; border-radius:8px; cursor: pointer; }
.app-sidebar__group-toggle:hover { background: rgba(37,71,208,.08); }
@media (prefers-color-scheme: dark) { .app-sidebar__group-toggle:hover { background: rgba(122,162,255,.12); } }
/* Caret indicator */
.app-sidebar__group-caret { width:16px; height:16px; position: relative; color: var(--app-sidebar-muted); }
.app-sidebar__group-caret::before, .app-sidebar__group-caret::after { content: ""; position: absolute; left:50%; top:50%; width:10px; height:2px; background: currentColor; border-radius:1px; transform-origin: center; transition: transform .2s ease; }
.app-sidebar__group-caret::before { transform: translate(-50%, -50%) rotate(45deg); }
.app-sidebar__group-caret::after { transform: translate(-50%, -50%) rotate(-45deg); }
.app-sidebar__group--closed .app-sidebar__group-caret { color: var(--app-sidebar-muted); }
.app-sidebar__group--closed .app-sidebar__group-caret::before { transform: translate(-50%, -50%) rotate(135deg); }
.app-sidebar__group--closed .app-sidebar__group-caret::after { transform: translate(-50%, -50%) rotate(45deg); }
/* Rail variant (optional) */
.app-sidebar--rail .app-sidebar__panel { width:72px; }
.app-sidebar--rail .app-sidebar__title { display: none; }
.app-sidebar--rail .app-sidebar__group-title { display: none; }
.app-sidebar--rail .app-sidebar__list { display: none; }
.app-sidebar--rail .app-sidebar__group-toggle { justify-content: center; }
.app-sidebar--rail .app-sidebar__item-label { display: none; }
.app-summary {
background: var(--card-bg-color);
border-radius: 14px;
box-shadow: 0 2px 12px var(--shadow-color);
padding: 1rem 1rem 0.75rem 1rem;
margin-bottom: 2rem;
font-size: 1rem;
color: var(--text-color);
}
.app-summary__currency-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: color-mix(in srgb, var(--primary-color) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
border-radius: 20px;
padding: 0.25rem 0.75rem 0.25rem 0.5rem;
margin-bottom: 0.75rem;
}
.app-summary__currency-badge-icon {
width: 15px;
height: 15px;
stroke: var(--primary-color);
flex-shrink: 0;
}
.app-summary__currency-badge-label {
font-size: 0.72rem;
color: var(--text-muted);
font-weight: 500;
}
.app-summary__currency-badge-value {
font-size: 0.82rem;
font-weight: 700;
color: var(--primary-color);
}
.app-summary__section {
margin-bottom: 1.2rem;
}
.app-summary__item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.3rem 0;
}
.app-summary__item--empty {
color: var(--text-muted);
font-style: italic;
}
/* Table like layout */
.app-summary__table {
width: 100%;
margin-bottom: 1rem;
border-radius: 8px;
background: var(--surface-color);
box-shadow: 0 2px 8px var(--shadow-color);
overflow: hidden;
font-size: 0.98rem;
}
.app-summary__table-header,
.app-summary__table-row,
.app-summary__table-footer {
display: grid;
grid-template-columns: 1fr 2.5fr 1.5fr;
align-items: center;
padding: 0.5rem 1rem;
border-bottom: 1px solid var(--divider-color);
}
.app-summary__table-header {
background: var(--divider-color);
font-weight: 700;
color: var(--primary-color);
}
.app-summary__table-row--principal {
background: var(--surface-alt-color);
font-weight: 700;
}
.app-summary__table-footer {
background: var(--surface-color);
font-weight: 600;
color: var(--text-color);
border-bottom: none;
}
.app-summary__table-footer--total {
background: var(--divider-color);
font-size: 1.08rem;
font-weight: 800;
color: var(--primary-color);
border-top: 2px solid var(--warning-color);
}
.app-summary__table--taxes {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
background: var(--surface-color);
border-radius: 8px;
box-shadow: 0 2px 8px var(--shadow-color);
}
.app-summary__table--total {
margin-top: 0.5rem;
background: var(--divider-color);
border-radius: 8px;
box-shadow: 0 2px 8px var(--shadow-color);
}
/* Fiscal card */
.app-summary__fiscal-card {
background: var(--surface-color);
border-radius: 10px;
box-shadow: 0 2px 8px var(--shadow-color);
padding: 1rem 1.2rem;
margin-top: 1.2rem;
margin-bottom: 0.5rem;
}
.app-summary__fiscal-fields {
display: flex;
flex-direction: column;
gap: 0.3rem;
font-size: 1rem;
color: var(--primary-color);
}
/* Currency warning */
.app-summary__currency-warning {
font-size: 0.92rem;
color: var(--warning-color);
background: var(--warning-background);
border-radius: 8px;
padding: 0.6rem 1rem;
margin-bottom: 1.1rem;
margin-top: 0.2rem;
text-align: left;
display: flex;
align-items: center;
gap: 0.5rem;
box-shadow: 0 2px 8px var(--shadow-color);
}
/* Headings */
.app-summary h3,
.app-summary h4 {
color: var(--text-color);
margin: 0 0 0.6rem;
}
/* Event name section */
.app-summary__event-name {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
margin-bottom: 1rem;
background: var(--primary-background);
border: 1px solid var(--primary-color);
border-radius: 8px;
color: var(--primary-color);
font-weight: 600;
font-size: 1rem;
box-shadow: 0 2px 8px var(--shadow-color);
}
.app-summary__event-name span {
flex: 1;
}
.app-summary__icon {
margin-right: 0.25rem;
font-size: 0.95em;
}
.app-summary__icon--event {
font-size: 1.1em;
color: var(--primary-color);
}
.app-summary__icon--flag {
color: var(--warning-color);
}
.app-summary__icon--tag {
color: var(--success-color);
}
.app-summary__icon--info {
color: var(--warning-color);
font-size: 1.1em;
}
@media (max-width: 700px) {
.app-summary {
padding: .75rem .5rem;
}
.app-summary__table-header,
.app-summary__table-row,
.app-summary__table-footer {
grid-template-columns: .8fr 2fr 1.2fr;
}
}
/* Estilo para la etiqueta de descuentos */
.app-summary__discount-label {
display: flex;
align-items: center;
font-weight: 600;
color: var(--success-color);
margin-top: 0.5rem;
margin-bottom: 0.25rem;
font-size: 1rem;
}
/* Tabla de descuentos con borde success */
.app-summary__table--discounts {
border: 2px solid var(--success-color);
border-radius: 8px;
margin-top: 0.5rem;
margin-bottom: 1rem;
background: var(--surface-color);
box-shadow: var(--shadow-sm);
}
/* Fila de descuento: texto success */
.app-summary__table-row--discount {
color: var(--success-color);
font-weight: 600;
display: grid;
grid-template-columns: 1fr 2.5fr 1.5fr;
align-items: center;
padding: 0.5rem 1rem;
border-bottom: 1px solid var(--divider-color);
background: inherit;
}
.app-summary__table-row--discount span {
text-align: left;
padding: 0.15rem 0.25rem;
}
.app-terms {
width: 100%;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
padding: 0;
box-sizing: border-box;
}
.app-terms__container {
background: var(--surface-color, #fff);
border-radius: 18px;
box-shadow: 0 4px 24px rgba(0,35,108,0.10);
padding: 2.5rem 2.5rem 2rem 2.5rem;
width: 100%;
margin: 0;
box-sizing: border-box;
transition: background 0.3s;
}
.app-terms__title {
font-size: 2.1rem;
font-weight: 800;
color: var(--primary-color, #00236C);
margin-bottom: 1.2rem;
text-align: center;
letter-spacing: 0.01em;
}
.app-terms__subtitle {
font-size: 1.25rem;
font-weight: 700;
color: var(--primary-color, #00236C);
margin-bottom: 1.5rem;
text-align: center;
letter-spacing: 0.01em;
}
.app-terms__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.app-terms__item {
display: flex;
align-items: flex-start;
gap: 1rem;
font-size: 1.15rem;
color: var(--text-color, #222);
background: var(--surface-alt-color, #f6f8fa);
border-radius: 12px;
padding: 1.2rem 1.5rem;
box-shadow: 0 2px 8px rgba(0,35,108,0.07);
font-weight: 500;
position: relative;
transition: background 0.3s, color 0.3s;
}
.app-terms__item::before {
content: '';
display: inline-block;
width: 1.1em;
height: 1.1em;
margin-top: 0.2em;
margin-right: 0.5em;
background: var(--accent-color, #007bff);
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg>') no-repeat center / contain;
-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg>') no-repeat center / contain;
}
.app-terms__item strong {
color: var(--accent-color, #007bff);
font-weight: 700;
transition: color 0.3s;
}
@media (prefers-color-scheme: dark) {
.app-terms__container {
background: var(--surface-color, #181a20);
}
.app-terms__item {
color: var(--text-color, #e5e9f0);
background: var(--surface-alt-color, #23262f);
box-shadow: 0 2px 8px rgba(0,35,108,0.18);
}
.app-terms__item strong {
color: var(--accent-color, #4f8cff);
}
.app-terms__title, .app-terms__subtitle {
color: var(--primary-color, #e5e9f0);
}
.app-terms__item::before {
background: var(--accent-color, #4f8cff);
}
}
.app-terms__item:hover {
background: var(--accent-color, #eaf4ff);
color: var(--primary-color, #00236C);
}
@media (max-width: 700px) {
.app-terms__container {
padding: 1.2rem 0.5rem 1rem 0.5rem;
}
.app-terms__title {
font-size: 1.3rem;
}
.app-terms__subtitle {
font-size: 1.05rem;
}
.app-terms__item {
font-size: 1rem;
padding: 0.8rem 0.7rem;
}
.app-terms__item::before {
width: 0.9em;
height: 0.9em;
margin-right: 0.4em;
}
}
.ticket-message { display: flex; margin: 8px 0; }
.ticket-message__bubble { max-width: 70%; padding: 10px 12px; border-radius: 12px; line-height: 1.4; font-size: 0.95rem; }
.ticket-message--staff { justify-content: flex-start; }
.ticket-message--staff .ticket-message__bubble { background: #f0f4ff; color: #102a63; border-top-left-radius: 4px; }
.ticket-message--client { justify-content: flex-end; }
.ticket-message--client .ticket-message__bubble { background: #eaf8ec; color: #0d4622; border-top-right-radius: 4px; }
.ticket-message__meta { margin-top: 4px; font-size: 0.75rem; color: #667; }
body
{
}
.app-user-data-form{width:100%;display:block}
.app-user-data-form__grid{display:grid;grid-template-columns:1fr;gap:1rem}
.app-user-data-form__field{width:100%}
.app-user-data-form__field--full{grid-column:1/-1}
.app-user-data-form__inline-field{display:flex;flex-direction:column;gap:.5rem}
.app-user-data-form__actions{display:flex;justify-content:flex-end}
@media (min-width: 640px){
.app-user-data-form__grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width: 1024px){
.app-user-data-form__grid{grid-template-columns:repeat(3,1fr)}
}
/* Theme-aware colors rely on existing CSS variables defined globally */
.app-user-data-form, .app-user-data-form *{box-sizing:border-box}
/* ============================================================
PERSONAL DATA PANEL
============================================================ */
.app_profile__panel {
overflow: visible !important;
}
.app_profile__form-section {
background: var(--surface-color);
border: 1.5px solid var(--border-light);
border-radius: 18px;
padding: 1.5rem 1.75rem;
margin-bottom: 1.25rem;
box-shadow: var(--shadow-sm);
overflow: visible;
}
.app_profile__form-section-title {
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .6px;
color: var(--accent-dark);
margin-bottom: 1.25rem;
padding-bottom: .85rem;
border-bottom: 1.5px solid var(--border-light);
}
.app_profile__form-section-title svg {
width: 14px;
height: 14px;
stroke: var(--accent-dark);
}
.app_profile__form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
overflow: visible;
}
.app_profile__form-field {
display: flex;
flex-direction: column;
gap: 5px;
overflow: visible;
}
.app_profile__form-field--full {
grid-column: 1 / -1;
}
.app_profile__form-label {
display: flex !important;
align-items: center;
gap: 5px;
font-size: 11.5px !important;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: .55px !important;
color: var(--text-secondary) !important;
}
.app_profile__form-label svg {
width: 13px;
height: 13px;
stroke: var(--accent-dark);
}
.app_profile__form-input-wrap {
position: relative;
}
.app_profile__form-input-wrap svg {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 15px;
height: 15px;
stroke: #b0c4d4;
pointer-events: none;
}
.app_profile__form-input {
width: 100%;
padding: 10px 13px 10px 36px;
border: 1.5px solid var(--border-color);
border-radius: 8px;
background: var(--surface-color);
color: var(--text-color);
font-size: 14px;
outline: none;
transition: border-color .18s, box-shadow .18s;
}
.app_profile__form-input--bare {
padding-left: 13px;
}
.app_profile__form-input:focus {
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(0,152,255,.1);
}
/* ============================================================
ADAPTACIÓN DE COMPONENTES REUTILIZABLES
Hace que AppInputField, AppSelectField, etc. se vean como los estilos app_profile
============================================================ */
/* Elimina espaciado extra del wrapper del componente */
.app_profile__form-field .app-input-field,
.app_profile__form-field .app-select-field {
margin-bottom: 0;
overflow: visible;
}
/* Adapta el label del componente al estilo app_profile */
.app_profile__form-field .app-label {
display: flex !important;
align-items: center;
gap: 5px;
font-size: 11.5px !important;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: .55px !important;
color: var(--text-secondary) !important;
margin-bottom: 5px;
overflow: visible;
}
/* Wrapper del label con tooltip */
.app_profile__form-field .app-label__wrapper {
overflow: visible;
position: relative;
}
.app_profile__form-field .app-label__icon {
margin-right: 0;
}
.app_profile__form-field .app-label__icon svg {
width: 13px;
height: 13px;
stroke: var(--accent-dark);
}
/* Adapta el input del componente */
.app_profile__form-field .app-input__control {
width: 100%;
padding: 10px 13px;
border: 1.5px solid var(--border-color);
border-radius: 8px;
background: var(--surface-color);
color: var(--text-color);
font-size: 14px;
outline: none;
transition: border-color .18s, box-shadow .18s;
}
.app_profile__form-field .app-input__control:focus {
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(0,152,255,.1);
}
.app_profile__form-field .app-input__control--invalid {
border-color: var(--danger-color);
}
/* Adapta el select del componente */
.app_profile__form-field .app-select {
margin-bottom: 0;
}
/* Elimina estilos del wrapper intermedio */
.app_profile__form-field .app-select-field__control {
margin-top: 0;
}
/* Estilos del control principal del select */
.app_profile__form-field .app-select__control {
padding: 10px 13px !important;
border: 1.5px solid var(--border-color) !important;
border-radius: 8px !important;
background: var(--surface-color) !important;
background-image: none !important;
color: var(--text-color);
font-size: 14px;
font-family: var(--font-sans);
transition: border-color .18s, box-shadow .18s;
box-shadow: none !important;
min-height: auto !important;
}
.app_profile__form-field .app-select__control:hover {
border-color: var(--border-color) !important;
box-shadow: none !important;
}
.app_profile__form-field .app-select__control:focus,
.app_profile__form-field .app-select__control--open {
border-color: var(--accent-color) !important;
box-shadow: 0 0 0 3px rgba(0,152,255,.1) !important;
}
/* Asegura que no haya padding/margin extra que cause doble borde visual */
.app_profile__form-field .app-select-field {
margin-bottom: 0;
}
/* Texto del select */
.app_profile__form-field .app-select__selected-text,
.app_profile__form-field .app-select__placeholder {
font-size: 14px;
font-family: var(--font-sans);
}
/* Flecha del select */
.app_profile__form-field .app-select__arrow {
color: var(--text-muted);
}
/* Dropdown del select - permite que se muestre completo */
.app_profile__form-field .app-select__dropdown {
z-index: 99999 !important;
}
/* Lista dentro del dropdown - mantiene scroll si es necesario */
.app_profile__form-field .app-select__list {
max-height: 300px !important;
}
/* Mensajes de error */
.app_profile__form-field .app-input-field__error,
.app_profile__form-field .app-select-field__error {
font-size: 11px;
color: var(--danger-color);
margin-top: 4px;
}
.app_profile__form-input::placeholder {
color: #b8c8d4;
}
.app_profile__form-select {
width: 100%;
padding: 10px 13px 10px 36px;
border: 1.5px solid var(--border-color);
border-radius: 8px;
background: var(--surface-color);
color: var(--text-color);
font-size: 14px;
outline: none;
appearance: none;
cursor: pointer;
transition: border-color .18s, box-shadow .18s;
}
.app_profile__form-select:focus {
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(0,152,255,.1);
}
/* Photo upload */
.app_profile__photo-upload {
display: flex !important;
align-items: center;
gap: 1.25rem;
padding: 1.1rem 1.25rem;
background: var(--background-color);
border: 1.5px dashed var(--border-color);
border-radius: 12px;
transition: border-color .15s, background .15s;
cursor: pointer;
}
.app_profile__photo-upload:hover {
border-color: var(--accent-color);
background: #eaf5ff;
}
.app_profile__photo-upload-preview {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--border-light);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
border: 2px solid var(--border-color);
}
.app_profile__photo-upload-preview svg {
width: 24px;
height: 24px;
stroke: var(--text-muted);
}
.app_profile__photo-upload-body {
flex: 1;
}
.app_profile__photo-upload-title {
font-size: 13.5px;
font-weight: 500;
color: var(--text-color);
margin-bottom: 2px;
}
.app_profile__photo-upload-hint {
font-size: 12px;
color: var(--text-muted);
}
.app_profile__photo-upload-btn {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12.5px;
font-weight: 500;
color: var(--accent-dark);
background: var(--surface-color);
border: 1.5px solid var(--border-color);
border-radius: 8px;
padding: 6px 14px;
cursor: pointer;
transition: border-color .15s, background .15s;
}
.app_profile__photo-upload-btn svg {
width: 14px;
height: 14px;
stroke: var(--accent-dark);
}
.app_profile__photo-upload-btn:hover {
border-color: var(--accent-color);
background: #eaf5ff;
}
.app_profile__form-error {
color: var(--color-danger-text, #b71c1c);
font-size: .875rem;
margin-top: .75rem;
}
/* Form actions */
.app_profile__form-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: .65rem;
padding-top: 1.25rem;
border-top: 1.5px solid var(--border-light);
margin-top: 1.25rem;
}
.app_profile__form-actions-hint {
font-size: .8rem !important;
color: var(--text-muted) !important;
margin-right: auto;
display: flex;
align-items: center;
gap: 5px;
}
.app_profile__form-actions-hint svg {
width: 13px;
height: 13px;
stroke: var(--text-muted);
}
body
{
}
.app-user-photo-upload {
position: relative;
display: block;
/* local design tokens with safe fallbacks */
--appupp-surface: #ffffff;
--appupp-surface-2: #f8fafc;
--appupp-border: #d4d7dd;
--appupp-muted: #f3f4f6;
--appupp-primary: #2563eb;
--appupp-text: #111827;
--appupp-text-muted: #6b7280;
--appupp-danger: #b91c1c;
}
/* Dark theme overrides (prefers explicit theme hooks), fallback below */
:where([data-theme="dark"], .dark) .app-user-photo-upload {
--appupp-surface: #111827;
--appupp-surface-2: #0b1220;
--appupp-border: #374151;
--appupp-muted: #111827;
--appupp-primary: #60a5fa;
--appupp-text: #e5e7eb;
--appupp-text-muted: #9ca3af;
--appupp-danger: #f87171;
}
/* Card */
.app-user-photo-upload__card {
position: relative;
display: flex;
flex-direction: column;
gap: .5rem;
border: 1px dashed var(--appupp-border);
border-radius: 12px;
overflow: hidden;
background: var(--appupp-surface);
transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.app-user-photo-upload__card:hover {
border-color: color-mix(in srgb, var(--appupp-primary) 35%, var(--appupp-border));
}
.app-user-photo-upload__card--dragover,
.app-user-photo-upload__card:focus-within {
border-color: var(--appupp-primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
/* Top image area */
.app-user-photo-upload__image {
width: 100%;
aspect-ratio: 1.6/1;
background: var(--appupp-muted);
display: flex;
align-items: center;
justify-content: center;
}
.app-user-photo-upload__img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
display: block;
width: 100%;
height: 100%;
}
.app-user-photo-upload__placeholder {
color: #9aa3af;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
/* Bottom area */
.app-user-photo-upload__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: .75rem .9rem;
/* background: var(--appupp-surface); */
}
.app-user-photo-upload__texts {
min-width: 0;
color: var(--appupp-text);
}
.app-user-photo-upload__title {
font-weight: 600;
font-size: .95rem;
line-height: 1.2;
}
.app-user-photo-upload__hint {
font-size: .8rem;
color: var(--appupp-text-muted);
}
.app-user-photo-upload__action {
color: var(--appupp-primary);
cursor: pointer;
font-weight: 600;
white-space: nowrap;
}
.app-user-photo-upload__action:hover,
.app-user-photo-upload__action:focus {
text-decoration: underline;
}
/* Full overlay input capturing clicks and drops */
.app-user-photo-upload__input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
padding: 0;
margin: -1px;
}
/* Error message */
.app-user-photo-upload__error {
color: var(--appupp-danger);
font-size: .85rem;
margin-top: .5rem;
}
/* Fallback dark mode (only if app doesn't provide data-theme/.dark) */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .app-user-photo-upload {
--appupp-surface: #111827;
--appupp-surface-2: #0b1220;
--appupp-border: #374151;
--appupp-muted: #111827;
--appupp-primary: #60a5fa;
--appupp-text: #e5e7eb;
--appupp-text-muted: #9ca3af;
--appupp-danger: #f87171;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.app-user-photo-upload__card {
transition: none;
}
}
/* Input oculto cuando se usa fuera del contenedor */
.app-user-photo-upload__input--hidden {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
pointer-events: none;
z-index: -1;
left: -9999px;
}
.app-user-summary {
width: 100%;
display: block;
padding: clamp(0.25rem, 1.5vw, 1.25rem);
}
.app-user-summary__card {
width: 100%;
overflow: hidden;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 16px;
box-shadow: 0 8px 24px var(--shadow-color);
}
.app-user-summary__header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1.15rem 1.35rem;
background: var(--gradient-surface);
border-bottom: 1px solid var(--border-color);
}
.app-user-summary__header-icon {
width: 2.5rem;
height: 2.5rem;
flex: 0 0 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: 50%;
}
.app-user-summary__header-icon svg {
width: 1.25rem;
height: 1.25rem;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.app-user-summary__title {
margin: 0;
color: var(--text-color);
font-size: clamp(1rem, 1.8vw, 1.25rem);
font-weight: 700;
}
.app-user-summary__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin: 0;
padding: 1.35rem;
}
.app-user-summary__field {
min-width: 0;
margin: 0;
padding: 0.9rem 1rem;
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: 10px;
}
.app-user-summary__field--full {
grid-column: 1 / -1;
}
.app-user-summary__key {
margin: 0 0 0.35rem;
color: var(--text-muted);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.app-user-summary__value {
margin: 0;
color: var(--text-color);
font-size: 0.95rem;
font-weight: 600;
line-height: 1.45;
}
.app-user-summary__value--break {
overflow-wrap: anywhere;
}
@media (max-width: 767px) {
.app-user-summary {
padding: 0;
}
.app-user-summary__header,
.app-user-summary__grid {
padding: 1rem;
}
.app-user-summary__grid {
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
}
.app-user-summary__field--full {
grid-column: auto;
}
}
.app-user-view {
width: 100%;
display: block;
padding: 2rem 3rem;
}
.app-user-view__role-badge-container {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
.app-user-view__role-badge-wrapper {
display: flex;
justify-content: center;
margin-bottom: 0.75rem;
}
.app-user-view__role-badge {
display: inline-block;
padding: 0.35rem 0.85rem;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #fff;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-dark) 100%);
border-radius: 20px;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.app-user-view__role-badge:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.app-user-view__actions {
display: flex;
align-items: center;
gap: .5rem
}
.app-user-view__spacer {
flex: 1
}
.app-user-view__loading, .app-user-view__error, .app-user-view__empty {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
color: var(--text-secondary)
}
/* Mobile first: tabs stacked */
.app-user-view__mobile {
display: block
}
.app-user-view__desktop {
display: none
}
/* Panels (left column) */
.app-user-view__layout {
display: grid;
grid-template-columns: 1fr;
gap: 1rem
}
.app-user-view__left {
display: flex;
flex-direction: column;
gap: 1rem
}
.app-user-view__right {
min-width: 0
}
.app-user-view__panel {
background: var(--surface);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1rem
}
.app-user-view__panel-title {
margin: 0 0 .5rem;
color: var(--text-primary);
font-size: 1rem
}
/* Nueva clase para centrar el contenido de privacidad debajo de la foto */
.app-user-view__left {
display: flex;
flex-direction: column;
align-items: center;
}
.app-user-view__panel {
width: 100%;
max-width: 280px;
text-align: center;
}
.app-user-view__panel-title {
margin-bottom: .6rem
}
.app-user-view__privacy {
margin-top: 1rem;
text-align: center;
}
.app-user-view__privacy-text {
font-size: .9rem;
color: var(--text-muted);
margin-bottom: .4rem
}
.app-user-view__privacy-action {
display: flex;
justify-content: center
}
.app-user-view__privacy-action .app-button--link {
font-weight: 600
}
/* Privacy mobile styles (dentro de tabs) */
.app-user-view__privacy-mobile {
padding: 1rem;
text-align: center;
}
.app-user-view__privacy-mobile .app-user-view__privacy-text {
font-size: .9rem;
color: var(--text-muted);
margin-bottom: 1rem;
line-height: 1.5;
}
.app-user-view__privacy-mobile .app-user-view__privacy-action {
display: flex;
justify-content: center;
}
.app-user-view__privacy-mobile .app-button--link {
font-weight: 600;
}
/* >= md: two columns */
@media (min-width:768px) {
.app-user-view__mobile {
display: none
}
.app-user-view__desktop {
display: block
}
.app-user-view__layout {
grid-template-columns: minmax(220px,30%)1fr
}
}
/* >= lg: wider left column cap */
@media (min-width:1024px) {
.app-user-view__layout {
grid-template-columns: minmax(260px,28%)1fr
}
}
/* ========================================== */
/*  EnvironmentBar — aviso de modo de pruebas */
/*  (el componente no se renderiza en producción) */
/* ========================================== */
.app-env-bar {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.5rem;
width: 100%;
height: var(--env-bar-height, 30px);
padding: 0.25rem 1rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
box-sizing: border-box;
}
.app-env-bar__dot {
width: 7px;
height: 7px;
flex-shrink: 0;
border-radius: 50%;
}
.app-env-bar__sep {
opacity: 0.5;
}
.app-env-bar__app {
font-weight: 600;
text-transform: none;
letter-spacing: normal;
opacity: 0.85;
}
/* ── Modo de pruebas — con pequeño pulso para que no pase desapercibido ── */
.app-env-bar--test {
background: var(--warning-background);
color: var(--warning-foreground);
}
.app-env-bar--test .app-env-bar__dot {
background: var(--warning-color);
animation: app-env-bar-pulse 1.8s ease-in-out infinite;
}
@keyframes app-env-bar-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
70% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}
@media (prefers-reduced-motion: reduce) {
.app-env-bar--test .app-env-bar__dot {
animation: none;
}
}
@media (max-width: 480px) {
.app-env-bar {
font-size: 0.68rem;
gap: 0.4rem;
padding: 0.3rem 0.75rem;
}
}
/* Styles for AppEventCsd component - BEM: app-event-csd
Responsive, uses CSS variables from global palette
*/
.app-event-csd {
box-sizing: border-box;
width: 100%;
display: flex;
flex-direction: column;
gap: 0.75rem;
font-family: var(--app-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial);
color: var(--text-color);
}
/* modifier to ensure full container sizing when required */
.app-event-csd--full {
width: 100%;
height: 100%;
}
/* Card container alignment (AppCard wrapper keeps padding) */
.app-event-csd .app-card {
width: 100%;
}
/* Assigned CSD block */
.app-event-csd__assigned {
padding: 1rem;
border-radius: 8px;
background: var(--card-bg-color);
border: 1px solid var(--border-color);
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.app-event-csd__assigned h3 {
margin: 0;
font-size: 1rem;
color: var(--primary-color);
}
.app-event-csd__assigned-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
.app-event-csd__assigned-row > div {
min-width: 160px;
font-size: 0.95rem;
color: var(--text-color);
}
.app-event-csd__assigned-actions {
display: flex;
gap: 0.5rem;
}
/* List & search area */
.app-event-csd__list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.app-event-csd__search {
display: flex;
gap: 0.5rem;
align-items: end;
flex-wrap: wrap;
}
.app-event-csd__search .app-input-field,
.app-event-csd__search .app-button {
vertical-align: middle;
}
/* ensure spinner aligns center */
.app-event-csd app-spinner,
.app-event-csd .app-spinner {
display: block;
margin: 1rem auto;
}
/* Table responsiveness - keep consistent with base table styles */
.app-event-csd table.app-table {
width: 100%;
border-collapse: collapse;
}
.app-event-csd__pagination {
display: flex;
justify-content: center;
margin-top: 0.5rem;
}
/* Modal actions */
.app-event-csd__modal-actions {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
margin-top: 0.75rem;
}
/* Error box inside modal/form */
.app-event-csd__error {
color: var(--danger-color);
background: var(--danger-background);
padding: 0.5rem 0.75rem;
border-radius: 6px;
font-size: 0.95rem;
}
/* small utilities */
.app-event-csd__small {
font-size: 0.875rem;
color: var(--text-muted);
}
/* Responsive breakpoints */
@media (max-width:767px) {
.app-event-csd__search {
flex-direction: column;
align-items: stretch;
}
.app-event-csd__assigned-row {
flex-direction: column;
gap: 0.5rem;
}
.app-event-csd__assigned-row > div {
min-width: auto;
}
.app-event-csd__modal-actions {
flex-direction: column-reverse;
align-items: stretch;
}
}
/* Theme Toggle Component */
.theme-toggle {
position: relative;
}
.theme-toggle__button {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
background: transparent;
border: 1.5px solid var(--border-color);
border-radius: 9px;
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s ease;
box-shadow: none;
}
.theme-toggle__button:hover {
background: var(--hover-background-color);
border-color: var(--primary-color);
color: var(--primary-color);
transform: translateY(-1px);
}
.theme-toggle__button:active {
transform: translateY(0);
}
.theme-toggle__button:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
}
.theme-toggle__icon {
width: 18px;
height: 18px;
flex-shrink: 0;
color: currentColor;
transition: transform 0.2s ease;
}
.theme-toggle__button:hover .theme-toggle__icon {
transform: scale(1.08);
}
/* Dropdown */
.theme-toggle__dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
background-color: var(--surface-color);
color: var(--text-color);
min-width: 180px;
border-radius: 12px;
box-shadow: var(--shadow-xl);
border: 1px solid var(--border-color);
padding: 0.25rem;
display: none;
z-index: 1050;
animation: themeDropFadeIn 0.15s ease;
isolation: isolate;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.theme-toggle.open .theme-toggle__dropdown {
display: block;
}
@keyframes themeDropFadeIn {
from {
opacity: 0;
transform: translateY(-6px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.theme-toggle__dropdown .theme-toggle__option {
width: 100%;
text-align: left;
background-color: transparent;
border: 0;
padding: 0.5rem 0.75rem;
border-radius: 8px;
cursor: pointer;
color: var(--text-color);
text-decoration: none;
display: flex;
align-items: center;
gap: 0.625rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
transition: background-color 0.15s ease, color 0.15s ease;
box-shadow: none;
outline: none;
min-height: auto;
transform: none;
}
.theme-toggle__dropdown .theme-toggle__option:hover {
background-color: var(--topbar-dropdown-hover-bg);
color: var(--primary-color);
box-shadow: none;
transform: none;
}
.theme-toggle__dropdown .theme-toggle__option:active {
opacity: 0.8;
transform: none;
box-shadow: none;
}
.theme-toggle__dropdown .theme-toggle__option:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
}
.theme-toggle__dropdown .theme-toggle__option--active {
background-color: var(--topbar-dropdown-hover-bg);
color: var(--primary-color);
font-weight: 600;
}
.theme-toggle__option {
width: 100%;
text-align: left;
background: transparent;
border: 0;
padding: 0.5rem 0.75rem;
border-radius: 8px;
cursor: pointer;
color: var(--text-color);
text-decoration: none;
display: flex;
align-items: center;
gap: 0.625rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.4;
transition: all 0.15s ease;
}
.theme-toggle__option:hover {
background-color: var(--topbar-dropdown-hover-bg);
color: var(--primary-color);
}
.theme-toggle__option:active {
opacity: 0.8;
}
.theme-toggle__option:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
}
.theme-toggle__option--active {
background-color: var(--topbar-dropdown-hover-bg);
color: var(--primary-color);
font-weight: 600;
}
.theme-toggle__option svg:first-of-type {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.theme-toggle__option span {
flex: 1;
}
.theme-toggle__check {
width: 14px;
height: 14px;
flex-shrink: 0;
color: var(--primary-color);
}
/* Responsive */
@media (max-width: 640px) {
.theme-toggle__dropdown {
right: -0.5rem;
min-width: 160px;
}
.theme-toggle__button {
width: 34px;
height: 34px;
}
.theme-toggle__icon {
width: 16px;
height: 16px;
}
}
/* Backdrop */
.theme-toggle__backdrop {
position: fixed;
inset: 0;
z-index: 1040;
background: transparent;
}
/* ========================================== */
/*  TopBar - Frosted Glass Premium            */
/* ========================================== */
.app-topbar-wrapper {
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 980;
width: 100%;
}
.app-topbar {
background: var(--topbar-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border-bottom: 1px solid var(--topbar-border);
box-shadow: var(--topbar-shadow);
transition: background 0.3s ease, border-color 0.3s ease;
}
.app-topbar__accent {
height: 2.5px;
background: var(--topbar-accent-gradient);
width: 100%;
}
.app-topbar__inner {
height: var(--topbar-height);
display: grid;
grid-template-columns: minmax(160px, 18%) minmax(0, 1fr) minmax(160px, 18%);
align-items: center;
gap: 1rem;
padding: 0 1.5rem;
max-width: 1600px;
margin: 0 auto;
}
/* ========================================== */
/*  Columna Izquierda - Logo                 */
/* ========================================== */
.app-topbar__left {
display: flex;
align-items: center;
gap: 0.625rem;
}
.app-topbar__logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
flex-shrink: 0;
}
.app-topbar__logo:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.app-topbar__logo img {
width: 38px;
height: 38px;
object-fit: contain;
display: block;
}
.app-topbar__brand {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: var(--text-color);
transition: opacity 0.2s;
border-left: 3px solid var(--secondary-color);
}
.app-topbar__brand:hover {
opacity: 0.8;
}
.app-topbar__brand-name {
font-size: 0.9375rem;
font-weight: 700;
color: var(--text-color) !important;
letter-spacing: -0.02em;
max-width: 180px;
margin-left: .75rem;
overflow: hidden;
text-overflow: ellipsis;
/*white-space: nowrap;*/
display: inline-block;
line-height: 1.2;
}
.app-topbar__hamburger {
display: none;
}
.app-topbar__menu-toggle {
background: transparent;
color: var(--primary-color);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 0.4rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
.app-topbar__menu-toggle:hover {
background: var(--hover-background-color);
}
.app-topbar__menu-toggle svg {
width: 22px;
height: 22px;
color: var(--primary-color);
}
/* ========================================== */
/*  Columna Central - Navegación             */
/* ========================================== */
.app-topbar__center {
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
.app-topbar__nav {
display: flex;
gap: 2px;
align-items: center;
flex-wrap: nowrap;
overflow: visible;
}
.app-topbar__nav-item {
position: relative;
display: inline-flex;
align-items: center;
}
.app-topbar__nav-link {
color: var(--topbar-nav-link-color);
text-decoration: none;
padding: 0.5rem 0.875rem;
border-radius: 8px;
border: 1px solid transparent;
font-size: 0.875rem;
font-weight: 500;
white-space: nowrap;
background: transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.25rem;
transition: background 0.15s, color 0.15s, border-color 0.15s;
line-height: 1.4;
}
.app-topbar__nav-link svg {
width: 11px;
height: 11px;
transition: transform 0.2s ease;
opacity: 0.6;
}
.app-topbar__nav-link:hover,
.app-topbar__nav-link:focus-visible {
background: var(--topbar-nav-link-hover-bg);
color: var(--topbar-nav-link-hover-color);
border-color: var(--topbar-nav-link-hover-border, transparent);
}
.app-topbar__nav-item--has-submenu:hover > .app-topbar__nav-link svg {
transform: rotate(180deg);
}
/* Submenú nivel 1 */
.app-topbar__nav-submenu {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 200px;
background: var(--surface-color);
border-radius: 12px;
box-shadow: var(--shadow-xl);
padding: 6px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
z-index: 1050;
border: 1px solid var(--border-color);
}
.app-topbar__nav-item--has-submenu:hover > .app-topbar__nav-submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Items del dropdown */
.app-topbar__nav-submenu .app-topbar__dropdown-item {
width: 100%;
text-align: left;
background: transparent;
border: 0;
padding: 7px 10px;
border-radius: 7px;
cursor: pointer;
color: var(--text-color);
text-decoration: none;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.875rem;
font-weight: 500;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
position: relative;
}
.app-topbar__nav-submenu .app-topbar__dropdown-item:hover {
background: var(--topbar-dropdown-hover-bg);
color: var(--primary-color);
}
/* Submenú nivel 2 (nested) */
.app-topbar__nav-submenu .app-topbar__dropdown-item .app-topbar__sub-submenu {
position: absolute;
left: calc(100% + 4px);
top: -6px;
min-width: 180px;
background: var(--surface-color);
border-radius: 10px;
box-shadow: var(--shadow-xl);
padding: 6px;
opacity: 0;
visibility: hidden;
transform: translateX(-4px);
transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
z-index: 1060;
border: 1px solid var(--border-color);
}
.app-topbar__nav-submenu .app-topbar__dropdown-item:hover .app-topbar__sub-submenu {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.app-topbar__sub-submenu .app-topbar__dropdown-item {
font-size: 0.8125rem;
color: var(--text-secondary);
padding: 6px 10px;
justify-content: flex-start;
}
.app-topbar__sub-submenu .app-topbar__dropdown-item:hover {
color: var(--primary-color);
}
.app-topbar__dropdown-caret {
font-size: 10px;
opacity: 0.4;
margin-left: auto;
padding-left: 8px;
}
/* ========================================== */
/*  Columna Derecha - Controles              */
/* ========================================== */
.app-topbar__right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
}
.app-topbar__admin {
display: flex;
align-items: center;
}
.app-topbar__admin-btn {
background: var(--primary-color);
border: none;
color: #fff;
border-radius: 8px;
height: 36px;
padding: 0 0.875rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-weight: 600;
font-size: 0.875rem;
transition: background 0.15s, transform 0.15s;
}
.app-topbar__admin-btn:hover {
background: var(--primary-dark);
transform: translateY(-1px);
}
.app-topbar__admin-btn svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.app-topbar__dropdowns {
display: flex;
align-items: center;
gap: 4px;
}
.app-topbar__theme {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Language button - muestra texto (Esp / Eng) */
.app-topbar__language {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.app-topbar__language-btn {
display: inline-flex;
align-items: center;
gap: 4px;
height: 36px;
padding: 0 10px;
border-radius: 8px;
border: 1px solid var(--border-color);
background: transparent;
color: var(--topbar-nav-link-color);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
white-space: nowrap;
letter-spacing: 0.02em;
}
.app-topbar__language-btn:hover {
background: var(--topbar-nav-link-hover-bg);
color: var(--topbar-nav-link-hover-color);
border-color: var(--topbar-nav-link-hover-border, var(--border-color));
}
.app-topbar__language-btn svg {
width: 12px;
height: 12px;
opacity: 0.5;
}
/* Avatar / Login button */
.app-topbar__avatar {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.app-topbar__avatar-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--primary-color);
border: none;
color: #fff;
cursor: pointer;
transition: background 0.15s, transform 0.15s;
}
.app-topbar__avatar-btn:hover {
background: var(--primary-dark);
transform: translateY(-1px);
}
.app-topbar__avatar-btn svg {
width: 20px;
height: 20px;
color: #fff;
}
/* Dropdown menu (language + avatar) */
.app-topbar__dropdown-menu {
position: absolute;
right: 0;
top: calc(100% + 8px);
background: var(--surface-color);
color: var(--text-color);
min-width: 200px;
border-radius: 12px;
box-shadow: var(--shadow-xl);
padding: 6px;
display: none;
z-index: 1050;
border: 1px solid var(--border-color);
animation: dropdownIn 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes dropdownIn {
from { opacity: 0; transform: translateY(-6px); }
to   { opacity: 1; transform: translateY(0); }
}
.app-topbar__language.open .app-topbar__dropdown-menu,
.app-topbar__avatar.open .app-topbar__dropdown-menu {
display: block;
}
.app-topbar__dropdown-item {
width: 100%;
text-align: left;
background: transparent;
border: 0;
padding: 8px 10px;
border-radius: 7px;
cursor: pointer;
color: var(--text-color);
text-decoration: none;
display: block;
font-size: 0.875rem;
font-weight: 500;
transition: background 0.15s, color 0.15s;
}
.app-topbar__dropdown-item:hover {
background: var(--topbar-dropdown-hover-bg);
color: var(--primary-color);
}
.app-topbar__dropdown-item:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
}
/* ========================================== */
/*  Responsive Móvil                         */
/* ========================================== */
@media (max-width: 900px) {
.app-topbar__inner {
grid-template-columns: auto 1fr auto;
padding: 0 1rem;
}
.app-topbar__brand-name {
display: none;
}
.app-topbar__hamburger {
display: block;
}
.app-topbar__center {
justify-content: flex-end;
}
.app-topbar__nav--closed {
display: none;
}
.app-topbar__nav--open {
display: flex;
position: absolute;
left: 0;
right: 0;
top: var(--topbar-height);
background: var(--surface-color);
border-bottom: 1px solid var(--border-color);
box-shadow: var(--shadow-lg);
padding: 0.75rem;
flex-direction: column;
gap: 4px;
z-index: 1040;
}
.app-topbar__nav--open .app-topbar__nav-link {
width: 100%;
padding: 0.75rem 1rem;
font-size: 0.9375rem;
justify-content: space-between;
}
.app-topbar__nav--open .app-topbar__nav-item {
width: 100%;
flex-direction: column;
}
.app-topbar__nav--open .app-topbar__nav-submenu {
position: relative;
top: auto;
left: auto;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
border-radius: 8px;
background: var(--secondary-background);
max-height: 0;
overflow: hidden;
padding: 0;
transition: max-height 0.25s ease, padding 0.25s ease;
width: 100%;
min-width: auto;
}
.app-topbar__nav--open .app-topbar__nav-item--has-submenu.open .app-topbar__nav-submenu {
max-height: 600px;
padding: 4px 0;
margin-top: 4px;
}
.app-topbar__nav--open .app-topbar__nav-submenu .app-topbar__dropdown-item {
padding: 8px 1.25rem;
font-size: 0.875rem;
}
.app-topbar__sub-submenu {
position: relative !important;
left: auto !important;
top: auto !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
box-shadow: none !important;
border: none !important;
background: var(--border-light) !important;
padding: 4px 0 !important;
margin: 4px 0 !important;
}
.app-topbar__admin-label {
display: none;
}
}
@media (max-width: 480px) {
:root {
--topbar-height: 58px;
}
.app-topbar__inner {
padding: 0 0.75rem;
}
}
.app-accordion__item {
border-bottom: 1px solid var(--border-color);
background: var(--surface-color);
}
.app-accordion__header {
width: 100%;
background: var(--surface-color);
border: none;
padding: 1rem;
text-align: left;
font-size: 1.08rem;
font-weight: 500;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
color: var(--primary-color);
transition: background 0.2s, color 0.2s;
}
.app-accordion__header:hover {
background: var(--hover-background-color);
color: var(--hover-color);
}
.app-accordion__icon {
display: inline-flex;
align-items: center;
margin-left: 0.5em;
color: var(--primary-color);
}
.app-accordion__icon svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.25s ease;
}
.app-accordion__item--expanded .app-accordion__icon svg {
transform: rotate(180deg);
}
.app-accordion__content {
padding: 1rem;
background: var(--surface-alt-color);
color: var(--text-color);
font-size: 1rem;
animation: accordion-fadein 0.2s;
}
.app-accordion__content, .app-accordion__content *:not(svg):not(svg *) {
color: var(--text-color);
}
@keyframes accordion-fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ==============================================
AppCard - Componente de tarjeta moderno
============================================== */
.app-card {
background-color: var(--card-bg-color) !important;
border: 1px solid var(--border-color);
border-radius: 0.75rem;
box-shadow: var(--shadow-sm);
padding: 1.5rem;
margin: 1rem 0;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
min-width: 0;
position: relative;
overflow: hidden;
}
/* Header del card */
.app-card-header {
margin-bottom: 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--divider-color);
}
.app-card-header h3 {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--text-color);
line-height: 1.5;
}
/* Body del card */
.app-card-body {
flex: 1 1 auto;
color: var(--text-color);
line-height: 1.6;
}
/* Footer del card */
.app-card-footer {
margin-top: 1.25rem;
padding-top: 0.75rem;
border-top: 1px solid var(--divider-color);
display: flex;
gap: 0.75rem;
align-items: center;
flex-wrap: wrap;
}
/* Hover effect - Elevación sutil */
.app-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--border-color);
transform: translateY(-2px);
}
/* ============================================== */
/* Variantes del card */
/* ============================================== */
/* Card interactivo (clickeable) */
.app-card--interactive {
cursor: pointer;
}
.app-card--interactive:hover {
box-shadow: var(--shadow-lg);
border-color: var(--primary-color);
transform: translateY(-4px);
}
.app-card--interactive:active {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* Card elevado */
.app-card--elevated {
box-shadow: var(--shadow-md);
}
.app-card--elevated:hover {
box-shadow: var(--shadow-lg);
}
/* Card plano */
.app-card--flat {
box-shadow: none;
border: 1px solid var(--border-color);
}
.app-card--flat:hover {
box-shadow: var(--shadow-sm);
}
/* Card con acento superior */
.app-card--accent-top::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
border-radius: 0.75rem 0.75rem 0 0;
}
/* Card con acento lateral */
.app-card--accent-left::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--primary-color), var(--accent-color));
border-radius: 0.75rem 0 0 0.75rem;
}
/* ============================================== */
/* Tamaños */
/* ============================================== */
.app-card--compact {
padding: 1rem;
}
.app-card--spacious {
padding: 2rem;
}
/* ============================================== */
/* Estados */
/* ============================================== */
/* Card con foco */
.app-card:focus-within {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
box-shadow: var(--shadow-md), 0 0 0 3px var(--focus-ring);
}
/* Card deshabilitado */
.app-card--disabled {
opacity: 0.6;
pointer-events: none;
background-color: var(--disabled-background);
}
/* ============================================== */
/* Responsive */
/* ============================================== */
@media (max-width: 768px) {
.app-card {
padding: 1rem;
border-radius: 0.5rem;
}
.app-card-header {
margin-bottom: 1rem;
padding-bottom: 0.5rem;
}
.app-card-header h3 {
font-size: 1.125rem;
}
.app-card-footer {
margin-top: 1rem;
padding-top: 0.5rem;
gap: 0.5rem;
}
.app-card--spacious {
padding: 1.25rem;
}
}
/* ============================================== */
/* Modo oscuro */
/* ============================================== */
@media (prefers-color-scheme: dark) {
.app-card:hover {
border-color: var(--border-color);
}
.app-card--interactive:hover {
border-color: var(--primary-light);
}
}
:root[data-theme='dark'] .app-card--interactive:hover {
border-color: var(--primary-light);
}
.app-carousel {
width: 100%;
max-width: 480px;
margin: 0 auto;
position: relative;
background: var(--color-surface, #fff);
border-radius: 0.7rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
overflow: hidden;
}
.app-carousel__viewport {
width: 100%;
min-height: 220px;
display: flex;
align-items: center;
justify-content: center;
}
.app-carousel__slide {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.app-carousel__image-link, .app-carousel__image {
display: block;
width: 100%;
max-height: 220px;
object-fit: cover;
border-radius: 0.7rem 0.7rem 0 0;
}
.app-carousel__text {
margin-top: 0.7rem;
font-size: 1rem;
color: var(--color-on-surface, #333);
text-align: center;
padding: 0 1rem;
}
.app-carousel__button {
margin-top: 0.6rem;
padding: 0.5rem 1.2rem;
background: var(--color-primary, #1976d2);
color: #fff;
border: none;
border-radius: 0.4rem;
text-decoration: none;
font-size: 1rem;
cursor: pointer;
transition: background 0.2s;
display: inline-block;
}
.app-carousel__button:hover {
background: var(--color-primary-dark, #125ea2);
}
.app-carousel__controls {
display: flex;
align-items: center;
justify-content: center;
gap: 1.2rem;
padding: 0.5rem 0;
}
.app-carousel__nav {
background: none;
border: none;
font-size: 1.6rem;
color: var(--color-primary, #1976d2);
cursor: pointer;
padding: 0.2rem 0.7rem;
border-radius: 50%;
transition: background 0.2s;
}
.app-carousel__nav:hover {
background: var(--color-primary-light, #e3f2fd);
}
.app-carousel__indicator {
font-size: 1rem;
color: var(--color-on-surface, #555);
}
:root { --acp-bg:#0f172a; --acp-fg:#e5e7eb; --acp-border:#334155; --acp-error:#ef4444; --acp-focus:#6366f1; }
@media (prefers-color-scheme: light) { :root { --acp-bg:#f8fafc; --acp-fg:#111827; --acp-border:#cbd5e1; --acp-error:#b91c1c; --acp-focus:#4f46e5; } }
.app-color-picker { display:flex; flex-direction:column; gap:.4rem; color:var(--acp-fg); }
.app-color-picker__label{ font-size:.85rem; opacity:.9; }
.app-color-picker__control{ display:flex; align-items:center; gap:.4rem; }
.app-color-picker__input{ flex:1 1 auto; min-width:8rem; padding:.45rem .6rem; border:1px solid var(--acp-border); border-radius:.5rem; background:var(--acp-bg); color:var(--acp-fg); outline:none; transition:border-color .2s, box-shadow .2s; }
.app-color-picker__input:focus{ border-color:var(--acp-focus); box-shadow:0 0 0 3px color-mix(in oklab, var(--acp-focus) 25%, transparent); }
.app-color-picker__native{ width:2.4rem; height:2.4rem; border:none; background:transparent; padding:0; cursor:pointer; }
.app-color-picker__swatch{ width:2.4rem; height:2.4rem; border:1px solid var(--acp-border); border-radius:.4rem; }
.app-color-picker__error{ color:var(--acp-error); font-size:.8rem; }
.app-color-picker--disabled{ opacity:.6; pointer-events:none; }
:root{ --aci-fg:#e5e7eb; --aci-bg:#0f172a; --aci-border:#334155; --aci-muted:#94a3b8; }
@media (prefers-color-scheme: light){ :root{ --aci-fg:#111827; --aci-bg:#f8fafc; --aci-border:#cbd5e1; --aci-muted:#6b7280; } }
.app-coordinates-input{ display:flex; flex-direction:column; gap:.5rem; color:var(--aci-fg); }
.app-coordinates-input__label{ font-size:.9rem; font-weight:600; color:var(--aci-muted); }
.app-coordinates-input__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:.6rem; }
.app-coordinates-input__item{ min-width:0; }
.app-coordinates-input--disabled{ opacity:.6; pointer-events:none; }
@media (max-width: 640px){
.app-coordinates-input__grid{ grid-template-columns: 1fr; }
}
/* ========================================================================
AppDateRange Component - Compact Date Range Picker
BEM Prefix: adr
======================================================================== */
/* ========================================================================
Base Container
======================================================================== */
.adr {
position: relative;
width: 100%;
font-family: inherit;
font-size: 0.875rem;
}
.adr--open {
z-index: 1000;
}
/* ========================================================================
Label
======================================================================== */
.adr__label-wrapper {
margin-bottom: 0.375rem;
}
/* ========================================================================
Layout Modes
======================================================================== */
.adr__single {
display: flex;
flex-direction: column;
gap: 0.375rem;
width: 100%;
}
.adr__dual {
display: flex;
flex-direction: column;
gap: 0.625rem;
width: 100%;
}
.adr__field {
display: flex;
flex-direction: column;
gap: 0.375rem;
min-width: 0;
}
/* ========================================================================
Trigger (Input Display)
======================================================================== */
.adr__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 0.375rem;
padding: 0.625rem 0.75rem;
cursor: pointer;
transition: all 0.2s ease;
min-height: 2.5rem;
}
.adr__trigger:hover {
border-color: var(--primary-color);
background: var(--hover-background-color);
}
.adr__trigger:focus-within {
border-color: var(--focus-color);
box-shadow: 0 0 0 3px var(--focus-ring);
outline: none;
}
.adr--error .adr__trigger {
border-color: var(--danger-color);
}
.adr--error .adr__trigger:focus-within {
box-shadow: 0 0 0 3px var(--danger-background);
}
.adr__trigger-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-color);
font-size: 0.875rem;
}
.adr__trigger-text:empty::before {
content: attr(data-placeholder);
color: var(--text-muted);
}
.adr__trigger-actions {
display: flex;
align-items: center;
gap: 0.375rem;
flex-shrink: 0;
}
/* ========================================================================
SVG Icons
======================================================================== */
.adr__svg-icon {
width: 1.125rem;
height: 1.125rem;
flex-shrink: 0;
stroke-linecap: round;
stroke-linejoin: round;
}
.adr__icon {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
}
/* ========================================================================
Buttons
======================================================================== */
.adr__btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 0.25rem;
font-family: inherit;
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
user-select: none;
padding: 0.375rem 0.625rem;
line-height: 1.2;
gap: 0.25rem;
}
.adr__btn:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
}
.adr__btn:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.adr__btn--clear {
background: transparent;
color: var(--danger-color);
padding: 0.25rem 0.375rem;
}
.adr__btn--clear:hover {
background: var(--danger-background);
}
.adr__btn--clear .adr__svg-icon {
width: 1rem;
height: 1rem;
}
.adr__btn--ghost {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border-color);
}
.adr__btn--ghost:hover {
background: var(--hover-background-color);
border-color: var(--text-muted);
}
.adr__btn--primary {
background: var(--primary-color);
color: var(--text-light);
}
.adr__btn--primary:hover {
background: var(--primary-hover);
}
/* ========================================================================
Error Messages
======================================================================== */
.adr__error {
margin-top: 0.375rem;
font-size: 0.75rem;
color: var(--danger-color);
line-height: 1.4;
}
/* ========================================================================
Backdrop & Panel - CENTRADO EN PANTALLA
======================================================================== */
.adr__backdrop {
position: fixed;
inset: 0;
background: var(--overlay-color);
backdrop-filter: blur(2px);
z-index: 999;
animation: adr-fade-in 0.2s ease-out;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.adr__panel {
position: relative;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 0.5rem;
box-shadow: var(--shadow-xl);
padding: 1rem;
z-index: 1000;
min-width: 280px;
max-width: min(600px, 100%);
max-height: calc(100vh - 2rem);
overflow-y: auto;
animation: adr-scale-in 0.2s ease-out;
}
@keyframes adr-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes adr-scale-in {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* ========================================================================
Panel Header
======================================================================== */
.adr__header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.625rem;
margin-bottom: 0.875rem;
padding-bottom: 0.625rem;
border-bottom: 1px solid var(--border-color);
flex-wrap: wrap;
}
.adr__nav {
display: flex;
gap: 0.375rem;
flex-shrink: 0;
}
.adr__nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border: 1px solid var(--border-color);
border-radius: 0.25rem;
background: var(--surface-alt-color);
color: var(--text-color);
cursor: pointer;
transition: all 0.2s ease;
}
.adr__nav-btn:hover {
background: var(--primary-color);
color: var(--text-light);
border-color: var(--primary-color);
}
.adr__nav-btn .adr__svg-icon {
width: 1rem;
height: 1rem;
}
.adr__actions {
display: flex;
gap: 0.375rem;
flex-shrink: 0;
}
/* ========================================================================
Calendars Layout
======================================================================== */
.adr__calendars {
display: flex;
gap: 0.875rem;
flex-wrap: wrap;
justify-content: center;
}
.adr__calendar {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 0 0 auto;
min-width: 240px;
}
.adr__month {
font-size: 0.875rem;
font-weight: 600;
color: var(--primary-color);
text-align: center;
text-transform: capitalize;
padding: 0.25rem 0;
}
/* ========================================================================
Calendar Grid
======================================================================== */
.adr__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.adr__weekday {
display: flex;
align-items: center;
justify-content: center;
padding: 0.375rem 0.25rem;
font-size: 0.6875rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* ========================================================================
Day Cells
======================================================================== */
.adr__day {
display: flex;
align-items: center;
justify-content: center;
min-height: 2rem;
aspect-ratio: 1;
border: none;
border-radius: 0.25rem;
background: transparent;
color: var(--text-color);
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
user-select: none;
padding: 0.25rem;
}
.adr__day:not(.adr__day--disabled):not(.adr__day--empty):hover {
background: var(--hover-background-color);
color: var(--primary-color);
font-weight: 600;
transform: scale(1.05);
}
.adr__day--empty {
cursor: default;
pointer-events: none;
}
.adr__day--disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.adr__day--today {
font-weight: 700;
box-shadow: inset 0 0 0 2px var(--info-color);
}
.adr__day--start,
.adr__day--end {
background: var(--primary-color);
color: var(--text-light);
font-weight: 600;
}
.adr__day--start:hover,
.adr__day--end:hover {
background: var(--primary-hover);
color: var(--text-light);
}
.adr__day--in-range {
background: var(--primary-light);
color: var(--text-light);
opacity: 0.7;
}
.adr__day--hover {
background: var(--primary-light);
color: var(--text-light);
opacity: 0.5;
}
/* ========================================================================
Panel Error
======================================================================== */
.adr__panel-error {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.625rem;
padding: 0.625rem 0.75rem;
background: var(--danger-background);
border: 1px solid var(--danger-color);
border-radius: 0.375rem;
color: var(--danger-color);
font-size: 0.8125rem;
line-height: 1.4;
}
.adr__panel-error .adr__svg-icon {
width: 1.125rem;
height: 1.125rem;
flex-shrink: 0;
}
/* ========================================================================
Responsive - Tablet
======================================================================== */
@media (max-width: 768px) {
.adr__calendars {
flex-direction: column;
gap: 0.875rem;
}
.adr__calendar {
min-width: 100%;
}
.adr__header {
flex-direction: column;
align-items: stretch;
}
.adr__nav {
justify-content: center;
}
.adr__actions {
width: 100%;
}
.adr__actions .adr__btn {
flex: 1;
}
}
/* ========================================================================
Responsive - Mobile
======================================================================== */
@media (max-width: 640px) {
.adr__backdrop {
padding: 0.75rem;
}
.adr__panel {
padding: 0.875rem;
max-height: calc(100vh - 1.5rem);
}
.adr__calendars {
flex-direction: column;
}
.adr__calendar {
min-width: 100%;
}
.adr__day {
min-height: 2.25rem;
font-size: 0.875rem;
}
.adr__weekday {
font-size: 0.6875rem;
padding: 0.375rem 0.25rem;
}
}
/* ========================================================================
Dark Mode Support
======================================================================== */
@media (prefers-color-scheme: dark) {
.adr__backdrop {
backdrop-filter: blur(3px);
}
.adr__panel {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.6);
}
.adr__day--in-range {
background: rgba(77, 111, 194, 0.35);
}
.adr__day--hover {
background: rgba(77, 111, 194, 0.25);
}
}
:root[data-theme='dark'] .adr__backdrop {
backdrop-filter: blur(3px);
}
:root[data-theme='dark'] .adr__panel {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.6);
}
:root[data-theme='dark'] .adr__day--in-range {
background: rgba(77, 111, 194, 0.35);
}
:root[data-theme='dark'] .adr__day--hover {
background: rgba(77, 111, 194, 0.25);
}
/* ========================================================================
Print Styles
======================================================================== */
@media print {
.adr__backdrop,
.adr__panel {
display: none;
}
}
/* ========================================================================
Accessibility
======================================================================== */
.adr__btn:focus-visible,
.adr__day:focus-visible,
.adr__nav-btn:focus-visible,
.adr__trigger:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.adr__btn,
.adr__day,
.adr__trigger,
.adr__nav-btn,
.adr__backdrop,
.adr__panel {
animation: none;
transition: none;
}
}
@media (prefers-contrast: high) {
.adr__trigger {
border-width: 2px;
}
.adr__day--start,
.adr__day--end {
outline: 2px solid currentColor;
outline-offset: -2px;
}
}
/* ========================================================================
Scrollbar personalizado para el panel
======================================================================== */
.adr__panel::-webkit-scrollbar {
width: 6px;
}
.adr__panel::-webkit-scrollbar-track {
background: var(--surface-alt-color);
border-radius: 3px;
}
.adr__panel::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 3px;
}
.adr__panel::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
.app-event-cats{ padding:1rem; }
.app-event-cats__header{ display:flex; align-items:center; justify-content:space-between; }
.app-event-cats__actions{ margin:.5rem 0; }
.app-event-cats__list{ display:flex; flex-direction:column; gap:1rem; }
.app-event-cats__item{ border:1px solid var(--border,#e5e7eb); border-radius:.5rem; padding:.75rem; }
.cat-form{ display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:.5rem; }
.cat-actions{ display:flex; gap:.5rem; align-items:center; }
.input{ width:100%; padding:.35rem .5rem; border:1px solid var(--border,#cbd5e1); border-radius:.35rem; }
.fees{ margin-top:.75rem; }
.fees__new{ margin:.5rem 0; }
.fee-form{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:.5rem; }
.fees-table{ width:100%; border-collapse:collapse; }
.fees-table th,.fees-table td{ border:1px solid var(--border,#e5e7eb); padding:.35rem .5rem; text-align:left; }
.btn{ padding:.35rem .6rem; border:1px solid var(--border,#cbd5e1); background:#fff; border-radius:.35rem; cursor:pointer; }
.btn--primary{ background:#2563eb;color:#fff;border-color:#1d4ed8; }
.btn--danger{ background:#ef4444;color:#fff;border-color:#dc2626; }
.btn--ghost{ background:transparent; }
.error{ color:#dc2626; }
.app-event-images-editor{ padding:1rem; }
.app-event-images-editor__header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.app-event-images-editor__close{ border:1px solid var(--border,#cbd5e1); background:transparent; border-radius:.4rem; width:2rem; height:2rem; cursor:pointer; }
.app-event-images-editor__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
.app-event-images-editor__block{ border:1px dashed var(--border,#cbd5e1); border-radius:.5rem; padding:1rem; }
.app-event-images-editor__preview{ width:100%; aspect-ratio: 1920 / 480; background:var(--surface,#f8fafc); border:1px solid var(--border,#e5e7eb); border-radius:.5rem; display:grid; place-items:center; overflow:hidden; }
.app-event-images-editor__preview--poster{ aspect-ratio: 612 / 900; }
.app-event-images-editor__preview img{ width:100%; height:100%; object-fit:cover; display:block; }
.app-event-images-editor__placeholder{ color:#94a3b8; font-size:.9rem; }
.app-event-images-editor__actions{ margin-top:.5rem; display:flex; gap:.5rem; }
.btn{ padding:.45rem .75rem; border:1px solid var(--border,#cbd5e1); background:#fff; border-radius:.4rem; cursor:pointer; }
.btn--primary{ background:#2563eb; color:#fff; border-color:#1d4ed8; }
.app-event-images-editor__error{ margin-top:.35rem; color:#dc2626; font-size:.85rem; }
@media (max-width: 760px){
.app-event-images-editor__grid{ grid-template-columns: 1fr; }
}
/* ==============================================
AppModal - Componente de modal moderno y responsivo
============================================== */
.app-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
animation: app-modal-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes app-modal-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Overlay con blur moderno */
.app-modal__overlay {
position: absolute;
inset: 0;
background: var(--overlay-color);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
animation: app-modal-overlay-fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes app-modal-overlay-fade-in {
from {
opacity: 0;
backdrop-filter: blur(0);
}
to {
opacity: 1;
backdrop-filter: blur(4px);
}
}
/* Dialog principal - Responsivo por defecto */
.app-modal__dialog {
position: relative;
background: var(--surface-color);
color: var(--text-color);
border-radius: 1rem;
border: 1px solid var(--border-color);
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-xl);
animation: app-modal-dialog-scale-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes app-modal-dialog-scale-in {
from {
opacity: 0;
transform: scale(0.95) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Variantes de ancho - Responsivas */
.app-modal__dialog--wide {
max-width: 920px;
}
.app-modal__dialog--narrow {
max-width: 420px;
}
.app-modal__dialog--full {
max-width: 1280px;
}
/* Header */
.app-modal__header {
position: sticky;
top: 0;
background: var(--surface-color);
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--divider-color);
flex-shrink: 0;
}
.app-modal__title {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--text-color);
line-height: 1.4;
word-break: break-word;
}
/* Botón de cerrar */
.app-modal__close-btn,
.app-modal__close {
background: transparent;
border: none;
color: var(--text-muted);
width: 2.5rem;
height: 2.5rem;
min-width: 2.5rem;
border-radius: 0.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
}
.app-modal__close-icon {
width: 1.25rem;
height: 1.25rem;
fill: currentColor;
color: inherit;
}
.app-modal__close-icon path {
fill: currentColor;
}
.app-modal__close-btn:hover,
.app-modal__close:hover {
background: var(--hover-background-color);
color: var(--text-color);
}
.app-modal__close-btn:focus,
.app-modal__close:focus {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
box-shadow: 0 0 0 3px var(--focus-ring);
color: var(--text-color);
}
.app-modal__close-btn:active,
.app-modal__close:active {
transform: scale(0.95);
background: var(--secondary-background);
}
/* Content */
.app-modal__content {
padding: 1.5rem;
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
color: var(--text-color);
line-height: 1.6;
}
/* Scrollbar personalizado para el contenido */
.app-modal__content::-webkit-scrollbar {
width: 8px;
}
.app-modal__content::-webkit-scrollbar-track {
background: transparent;
}
.app-modal__content::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 4px;
}
.app-modal__content::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
/* Footer */
.app-modal__footer {
position: sticky;
bottom: 0;
background: var(--surface-color);
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.25rem;
border-top: 1px solid var(--divider-color);
flex-shrink: 0;
}
.app-modal__footer--start {
justify-content: flex-start;
}
.app-modal__footer--center {
justify-content: center;
}
.app-modal__footer--space-between {
justify-content: space-between;
}
/* ============================================== */
/* Responsive - Móvil muy pequeño (420px-479px)  */
/* ============================================== */
@media (min-width: 420px) and (max-width: 479px) {
.app-modal {
padding: 0.375rem;
}
.app-modal__dialog {
max-width: 100%;
max-height: 92vh;
border-radius: 0.75rem;
}
.app-modal__dialog--wide,
.app-modal__dialog--full {
max-width: 100%;
}
.app-modal__header {
padding: 0.875rem 1rem;
gap: 0.5rem;
}
.app-modal__title {
font-size: 1rem;
}
.app-modal__close-btn,
.app-modal__close {
width: 2.25rem;
height: 2.25rem;
min-width: 2.25rem;
}
.app-modal__content {
padding: 1rem;
}
.app-modal__footer {
padding: 0.875rem 1rem;
gap: 0.5rem;
}
}
/* ============================================== */
/* Responsive - Móvil pequeño (480px-639px)      */
/* ============================================== */
@media (min-width: 480px) and (max-width: 639px) {
.app-modal {
padding: 0.5rem;
}
.app-modal__dialog {
max-width: 100%;
max-height: 92vh;
border-radius: 0.75rem;
}
.app-modal__dialog--wide,
.app-modal__dialog--full {
max-width: 100%;
}
.app-modal__header {
padding: 0.875rem 1rem;
}
.app-modal__title {
font-size: 1.0625rem;
}
.app-modal__content {
padding: 1rem;
}
.app-modal__footer {
padding: 0.875rem 1rem;
gap: 0.5rem;
}
}
/* ============================================== */
/* Responsive - Tablet (640px - 1024px)          */
/* ============================================== */
@media (min-width: 640px) and (max-width: 1024px) {
.app-modal {
padding: 0.75rem;
}
.app-modal__dialog {
max-width: 680px;
}
.app-modal__dialog--wide {
max-width: 85vw;
}
.app-modal__dialog--full {
max-width: 92vw;
}
.app-modal__header {
padding: 1rem 1.25rem;
}
.app-modal__title {
font-size: 1.125rem;
}
.app-modal__content {
padding: 1.25rem;
}
.app-modal__footer {
padding: 1rem 1.25rem;
}
}
/* ============================================== */
/* Responsive - Desktop (1025px+)                */
/* ============================================== */
@media (min-width: 1025px) {
.app-modal {
padding: 1rem;
}
.app-modal__dialog {
max-width: 580px;
}
.app-modal__dialog--wide {
max-width: min(920px, 85vw);
}
.app-modal__dialog--full {
max-width: min(1280px, 90vw);
}
.app-modal__content {
padding: 1.5rem;
}
.app-modal__header {
padding: 1.25rem 1.5rem;
}
.app-modal__title {
font-size: 1.375rem;
}
.app-modal__footer {
padding: 1.25rem 1.5rem;
}
}
/* ============================================== */
/* Responsive - Pantallas muy pequeñas (<420px)  */
/* ============================================== */
@media (max-width: 419px) {
.app-modal {
padding: 0;
}
.app-modal__dialog {
width: 100vw;
max-width: 100vw;
max-height: 100vh;
border-radius: 0;
border: none;
border-left: none;
border-right: none;
}
.app-modal__dialog--wide,
.app-modal__dialog--narrow,
.app-modal__dialog--full {
width: 100vw;
max-width: 100vw;
}
.app-modal__header {
padding: 0.75rem;
gap: 0.5rem;
}
.app-modal__title {
font-size: 0.9375rem;
line-height: 1.3;
}
.app-modal__close-btn,
.app-modal__close {
width: 2rem;
height: 2rem;
min-width: 2rem;
}
.app-modal__close-icon {
width: 1rem;
height: 1rem;
}
.app-modal__content {
padding: 0.75rem;
}
.app-modal__footer {
padding: 0.75rem;
flex-wrap: wrap;
gap: 0.5rem;
}
}
/* ============================================== */
/* Modo oscuro */
/* ============================================== */
@media (prefers-color-scheme: dark) {
.app-modal__overlay {
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.app-modal__dialog {
background: var(--surface-color);
border-color: var(--border-color);
}
.app-modal__close-btn,
.app-modal__close {
color: var(--text-muted);
}
.app-modal__close-btn:hover,
.app-modal__close:hover {
background: var(--hover-background-color);
color: var(--text-light);
}
}
:root[data-theme='dark'] .app-modal__dialog {
background: var(--surface-color);
border-color: var(--border-color);
}
:root[data-theme='dark'] .app-modal__close-btn:hover,
:root[data-theme='dark'] .app-modal__close:hover {
color: var(--text-light);
}
/* ==============================================
AppPagination - Componente de paginación moderno
============================================== */
.app-pagination {
display: flex;
align-items: center;
gap: 0.5rem;
justify-content: center;
margin: 1.5rem 0 1rem 0;
flex-wrap: wrap;
}
/* Botones de navegación */
.app-pagination__nav-button {
background: var(--surface-color);
color: var(--primary-color);
border: 1px solid var(--border-color);
border-radius: 0.5rem;
padding: 0.5rem 1rem;
font-size: 0.9375rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 2.5rem;
min-height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
box-shadow: var(--shadow-xs);
}
.app-pagination__nav-button:hover:not(:disabled) {
background: var(--primary-color);
color: var(--text-light);
border-color: var(--primary-color);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.app-pagination__nav-button:active:not(:disabled) {
transform: translateY(0);
box-shadow: var(--shadow-xs);
}
.app-pagination__nav-button:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
box-shadow: 0 0 0 3px var(--focus-ring);
}
.app-pagination__nav-button:disabled {
background: var(--disabled-background);
color: var(--disabled-color);
border-color: var(--border-color);
cursor: not-allowed;
opacity: 0.5;
box-shadow: none;
}
/* Información de página actual */
.app-pagination__page-info {
font-weight: 600;
color: var(--text-color);
min-width: 4rem;
text-align: center;
padding: 0 0.5rem;
font-size: 0.9375rem;
}
.app-pagination__page-info .app-pagination__current-page {
color: var(--primary-color);
font-weight: 700;
font-size: 1.125rem;
}
/* Resumen de paginación */
.app-pagination__summary {
text-align: center;
color: var(--text-muted);
font-size: 0.875rem;
margin-top: 0.5rem;
width: 100%;
line-height: 1.5;
}
/* ============================================== */
/* Variante con números de página */
/* ============================================== */
.app-pagination--numbered {
gap: 0.375rem;
}
.app-pagination__page-button {
background: var(--surface-color);
color: var(--text-color);
border: 1px solid var(--border-color);
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
font-size: 0.9375rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 2.5rem;
min-height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-xs);
}
.app-pagination__page-button:hover:not(.app-pagination__page-button--active) {
background: var(--hover-background-color);
border-color: var(--primary-color);
color: var(--primary-color);
box-shadow: var(--shadow-sm);
}
.app-pagination__page-button--active {
background: var(--primary-color);
color: var(--text-light);
border-color: var(--primary-color);
font-weight: 700;
box-shadow: var(--shadow-sm);
pointer-events: none;
}
.app-pagination__page-button--dots {
pointer-events: none;
border: none;
box-shadow: none;
background: transparent;
color: var(--text-muted);
}
/* ============================================== */
/* Tamaños */
/* ============================================== */
.app-pagination--sm .app-pagination__nav-button,
.app-pagination--sm .app-pagination__page-button {
padding: 0.375rem 0.625rem;
font-size: 0.875rem;
min-width: 2rem;
min-height: 2rem;
}
.app-pagination--lg .app-pagination__nav-button,
.app-pagination--lg .app-pagination__page-button {
padding: 0.625rem 1.25rem;
font-size: 1rem;
min-width: 3rem;
min-height: 3rem;
}
/* ============================================== */
/* Responsive */
/* ============================================== */
@media (max-width: 768px) {
.app-pagination {
font-size: 0.875rem;
gap: 0.375rem;
margin: 1rem 0 0.75rem 0;
}
.app-pagination__nav-button,
.app-pagination__page-button {
padding: 0.4rem 0.75rem;
font-size: 0.875rem;
min-width: 2.25rem;
min-height: 2.25rem;
}
.app-pagination__page-info {
font-size: 0.875rem;
min-width: 3rem;
}
.app-pagination__summary {
font-size: 0.8125rem;
margin-top: 0.375rem;
}
}
@media (max-width: 480px) {
.app-pagination__nav-button,
.app-pagination__page-button {
padding: 0.375rem 0.625rem;
min-width: 2rem;
min-height: 2rem;
}
/* Ocultar números intermedios en móviles */
.app-pagination__page-button:not(.app-pagination__page-button--active):not(:first-of-type):not(:last-of-type) {
display: none;
}
}
/* ============================================== */
/* Modo oscuro */
/* ============================================== */
@media (prefers-color-scheme: dark) {
.app-pagination__nav-button:hover:not(:disabled),
.app-pagination__page-button:hover:not(.app-pagination__page-button--active) {
background: var(--primary-color);
color: var(--text-light);
}
.app-pagination__page-button--active {
background: var(--primary-color);
color: var(--text-light);
}
}
:root[data-theme='dark'] .app-pagination__page-button--active {
background: var(--primary-color);
color: var(--text-light);
}
/* Componente de Resultado de Pago con Animaci�n */
.app-payment-result {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.app-payment-result--visible {
opacity: 1;
visibility: visible;
}
.app-payment-result__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
.app-payment-result__card {
position: relative;
z-index: 1;
background: var(--card-bg-color, #ffffff);
border-radius: 16px;
padding: 3rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
animation: scaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
max-width: 480px;
}
@keyframes scaleIn {
from {
transform: scale(0.5);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.app-payment-result__icon {
width: 120px;
height: 120px;
margin: 0 auto;
flex-shrink: 0;
}
/* Textos del resultado */
.app-payment-result__title {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-color);
text-align: center;
margin: 0;
line-height: 1.3;
}
.app-payment-result__message {
font-size: 1.125rem;
font-weight: 400;
color: var(--text-muted);
text-align: center;
margin: 0;
line-height: 1.5;
}
/* Animaci�n de �xito (Checkmark) */
.app-payment-result__checkmark {
width: 120px;
height: 120px;
border-radius: 50%;
display: block;
stroke-width: 2;
stroke: #10b981;
stroke-miterlimit: 10;
}
.app-payment-result__checkmark-circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: #10b981;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.app-payment-result__checkmark-check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
/* Animaci�n de Error (Cross) */
.app-payment-result__cross {
width: 120px;
height: 120px;
border-radius: 50%;
display: block;
stroke-width: 2;
stroke: #ef4444;
stroke-miterlimit: 10;
}
.app-payment-result__cross-circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: #ef4444;
fill: none;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.app-payment-result__cross-line {
stroke-dasharray: 28;
stroke-dashoffset: 28;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}
/* Responsive */
@media (max-width: 640px) {
.app-payment-result__card {
padding: 2rem;
max-width: 90vw;
}
.app-payment-result__icon {
width: 100px;
height: 100px;
}
.app-payment-result__checkmark,
.app-payment-result__cross {
width: 100px;
height: 100px;
}
.app-payment-result__title {
font-size: 1.5rem;
}
.app-payment-result__message {
font-size: 1rem;
}
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
.app-payment-result__card {
background: var(--card-bg-color-dark, #1f2937);
}
.app-payment-result__title {
color: var(--text-color, #f9fafb);
}
.app-payment-result__message {
color: var(--text-muted, #9ca3af);
}
}
.payment-selector__list {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
justify-content: center;
}
.payment-selector__card {
background: #fff;
border: 2px solid #e5e9f0;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,35,108,0.07);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.7rem;
padding: 1.2rem 1.2rem;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
min-width: 220px;
max-width: 260px;
width: 100%;
position: relative;
height: 220px;
}
.payment-selector__card--selected {
border-color: var(--primary-color, #00236C);
background: var(--primary-color, #00236C08);
box-shadow: 0 4px 16px rgba(0,35,108,0.12);
}
.payment-selector__logo {
width: 48px;
height: 48px;
object-fit: contain;
margin-bottom: 0.5rem;
}
.payment-selector__info {
text-align: center;
}
.payment-selector__name {
font-size: 1.1rem;
font-weight: 700;
color: var(--primary-color, #00236C);
}
.payment-selector__desc {
font-size: 0.98rem;
color: var(--text-muted, #6c757d);
}
.payment-selector__badge {
position: absolute;
top: 10px;
right: 14px;
background: var(--primary-color, #00236C);
color: #fff;
font-size: 1.2rem;
border-radius: 50%;
padding: 0.2rem 0.5rem;
font-weight: bold;
box-shadow: 0 2px 8px rgba(0,35,108,0.10);
}
.payment-selector__not-available {
position: absolute;
top: 8px;
left: 12px;
background: #dc3545;
color: #fff;
font-size: 0.9rem;
padding: 0.2rem 0.6rem;
border-radius: 6px;
font-weight: 600;
}
.payment-selector__confirmation {
margin: 1rem 0 0.5rem 0;
font-size: 1.05rem;
color: var(--primary-color, #00236C);
text-align: center;
}
.payment-selector__summary {
margin: 1.2rem 0;
padding: 0.8rem 1.2rem;
background: var(--surface-alt-color, #f6f8fa);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,35,108,0.07);
}
.payment-selector__summary-details {
display: flex;
flex-direction: column;
gap: 0.3rem;
font-size: 1rem;
color: var(--primary-color, #00236C);
}
.payment-selector__total {
font-size: 1.15rem;
color: var(--success-color, #007A33);
font-weight: bold;
}
.payment-selector__continue {
text-align: right;
margin-top: 1.2rem;
}
@media (max-width: 700px) {
.payment-selector__list {
flex-direction: column;
gap: 1rem;
}
.payment-selector__card {
min-width: unset;
max-width: unset;
width: 100%;
height: 180px;
}
}
.app-progress-bar {
width: 100%;
max-width: 400px;
margin: 0.5rem 0;
}
.app-progress-bar__track {
width: 100%;
height: 1.2rem;
background: var(--surface-alt-color);
border-radius: 0.6rem;
overflow: hidden;
box-shadow: 0 1px 2px var(--shadow-color, rgba(0,0,0,0.08));
position: relative;
}
.app-progress-bar__fill {
height: 100%;
background: var(--primary-color);
border-radius: 0.6rem 0 0 0.6rem;
transition: width 0.4s cubic-bezier(.4,1,.7,1);
}
/* Clases de anchura en múltiplos de 5% */
.app-progress-bar__fill--w0 {
width: 0%;
}
.app-progress-bar__fill--w5 {
width: 5%;
}
.app-progress-bar__fill--w10 {
width: 10%;
}
.app-progress-bar__fill--w15 {
width: 15%;
}
.app-progress-bar__fill--w20 {
width: 20%;
}
.app-progress-bar__fill--w25 {
width: 25%;
}
.app-progress-bar__fill--w30 {
width: 30%;
}
.app-progress-bar__fill--w35 {
width: 35%;
}
.app-progress-bar__fill--w40 {
width: 40%;
}
.app-progress-bar__fill--w45 {
width: 45%;
}
.app-progress-bar__fill--w50 {
width: 50%;
}
.app-progress-bar__fill--w55 {
width: 55%;
}
.app-progress-bar__fill--w60 {
width: 60%;
}
.app-progress-bar__fill--w65 {
width: 65%;
}
.app-progress-bar__fill--w70 {
width: 70%;
}
.app-progress-bar__fill--w75 {
width: 75%;
}
.app-progress-bar__fill--w80 {
width: 80%;
}
.app-progress-bar__fill--w85 {
width: 85%;
}
.app-progress-bar__fill--w90 {
width: 90%;
}
.app-progress-bar__fill--w95 {
width: 95%;
}
.app-progress-bar__fill--w100 {
width: 100%;
}
.app-progress-bar__fill--animated {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 30%;
min-width: 60px;
max-width: 100%;
background: var(--primary-color);
border-radius: 0.6rem;
animation: app-progress-bar-animated 1.2s infinite linear;
}
@keyframes app-progress-bar-animated {
0% {
left: -30%;
width: 30%;
}
50% {
left: 35%;
width: 40%;
}
100% {
left: 100%;
width: 30%;
}
}
.app-progress-bar__label {
margin-top: 0.3rem;
font-size: 0.98rem;
color: var(--text-color);
text-align: right;
font-weight: 500;
}
.app-custom-sidebarpage {
position: sticky;
top: 2rem;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 0.75rem;
padding: 1.5rem;
box-shadow: var(--shadow-sm);
max-height: 46rem;
overflow-y: auto;
}
/* Estilos del scrollbar - Webkit (Chrome, Safari, Edge) */
.app-custom-sidebarpage::-webkit-scrollbar {
width: 0.5rem;
}
.app-custom-sidebarpage::-webkit-scrollbar-track {
background: var(--background-color);
border-radius: 0.5rem;
margin: 0.5rem 0;
}
.app-custom-sidebarpage::-webkit-scrollbar-thumb {
background: var(--accent-color);
border-radius: 0.5rem;
border: 2px solid var(--background-color);
transition: background 0.2s ease;
}
.app-custom-sidebarpage::-webkit-scrollbar-thumb:hover {
background: var(--accent-dark);
}
.app-custom-sidebarpage::-webkit-scrollbar-thumb:active {
background: var(--secondary-dark);
}
/* Estilos del scrollbar - Firefox */
.app-custom-sidebarpage {
scrollbar-width: thin;
scrollbar-color: var(--accent-color) var(--background-color);
}
.app-custom-sidebarpage__nav {
display: flex;
flex-direction: column;
gap: 1rem;
}
.app-custom-sidebarpage__title {
font-size: 1rem;
font-weight: 600;
color: var(--text-color);
margin: 0 0 0.5rem 0;
padding-bottom: 0.75rem;
border-bottom: 2px solid var(--border-color);
}
.app-custom-sidebarpage__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.app-custom-sidebarpage__item {
margin: 0;
}
.app-custom-sidebarpage__link {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0.75rem;
background: transparent;
border: none;
border-radius: 0.5rem;
cursor: pointer;
text-align: left;
transition: all 0.2s ease;
color: var(--text-secondary);
}
.app-custom-sidebarpage__link:hover {
background: var(--hover-background-color);
color: var(--hover-color);
}
.app-custom-sidebarpage__link--active {
background: var(--info-background);
color: var(--accent-color);
font-weight: 600;
}
.app-custom-sidebarpage__link:active {
transform: translateY(1px);
}
.app-custom-sidebarpage__icon {
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.app-custom-sidebarpage__icon svg {
width: 100%;
height: 100%;
stroke: currentColor;
}
.app-custom-sidebarpage__text {
font-size: 0.875rem;
font-weight: 500;
line-height: 1.3;
}
.app-custom-sidebarpage__empty {
text-align: center;
padding: 2rem 1rem;
color: var(--text-muted);
font-size: 0.875rem;
margin: 0;
}
/* ==============================================
AppSpinner - Componente de carga moderno
============================================== */
.app-spinner__container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 1rem;
min-height: 80px;
min-width: 80px;
position: relative;
padding: 1rem;
}
.app-spinner__svg {
width: 64px;
height: 64px;
display: block;
}
/* Ring de fondo */
.app-spinner__ring {
stroke: var(--border-color);
stroke-width: 6;
opacity: 0.2;
fill: none;
}
/* Arco animado */
.app-spinner__arc {
stroke: var(--secondary-dark);
stroke-width: 6;
stroke-linecap: round;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
fill: none;
transform-origin: 50% 50%;
animation: app-spinner-arc-spin 1.4s ease-in-out infinite;
}
@keyframes app-spinner-arc-spin {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
transform: rotate(0deg);
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
transform: rotate(180deg);
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
transform: rotate(360deg);
}
}
/* Texto dentro del spinner */
.app-spinner__text {
fill: var(--secondary-dark);
font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
font-weight: 700;
font-size: 0.875rem;
pointer-events: none;
user-select: none;
opacity: 0.9;
animation: app-spinner-text-pulse 1.4s ease-in-out infinite;
}
@keyframes app-spinner-text-pulse {
0%, 100% {
opacity: 0.9;
}
50% {
opacity: 0.4;
}
}
/* Mensaje de carga */
.app-spinner__message {
color: var(--text-color);
font-size: 0.9375rem;
font-weight: 500;
text-align: center;
margin-top: 0.5rem;
animation: app-spinner-message-fade 1.4s ease-in-out infinite;
}
@keyframes app-spinner-message-fade {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* ============================================== */
/* Variantes de tamaño */
/* ============================================== */
.app-spinner--sm .app-spinner__svg {
width: 32px;
height: 32px;
}
.app-spinner--sm .app-spinner__ring,
.app-spinner--sm .app-spinner__arc {
stroke-width: 4;
}
.app-spinner--lg .app-spinner__svg {
width: 96px;
height: 96px;
}
.app-spinner--lg .app-spinner__ring,
.app-spinner--lg .app-spinner__arc {
stroke-width: 8;
}
/* ============================================== */
/* Variantes de color */
/* ============================================== */
.app-spinner--secondary .app-spinner__arc {
stroke: var(--secondary-color);
}
.app-spinner--secondary .app-spinner__text {
fill: var(--secondary-color);
}
.app-spinner--success .app-spinner__arc {
stroke: var(--success-color);
}
.app-spinner--success .app-spinner__text {
fill: var(--success-color);
}
.app-spinner--danger .app-spinner__arc {
stroke: var(--danger-color);
}
.app-spinner--danger .app-spinner__text {
fill: var(--danger-color);
}
/* ============================================== */
/* Spinner de overlay (pantalla completa) */
/* ============================================== */
.app-spinner--overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--overlay-color);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
animation: app-spinner-overlay-fade-in 0.2s ease-out;
}
@keyframes app-spinner-overlay-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.app-spinner--overlay .app-spinner__container {
background: var(--surface-color);
padding: 2rem;
border-radius: 1rem;
box-shadow: var(--shadow-xl);
min-width: 200px;
}
/* ============================================== */
/* Spinner inline (dentro de botones) */
/* ============================================== */
.app-spinner--inline {
display: inline-flex;
vertical-align: middle;
}
.app-spinner--inline .app-spinner__svg {
width: 1rem;
height: 1rem;
}
.app-spinner--inline .app-spinner__ring,
.app-spinner--inline .app-spinner__arc {
stroke-width: 4;
}
/* ============================================== */
/* Modo oscuro */
/* ============================================== */
@media (prefers-color-scheme: dark) {
.app-spinner__ring {
stroke: var(--border-color);
opacity: 0.3;
}
.app-spinner--overlay {
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
}
:root[data-theme='dark'] .app-spinner__ring {
opacity: 0.3;
}
/* Contenedor principal */
.app-steps {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 2.5rem;
width: 100%;
max-width: 100%;
overflow-x: auto;
padding: 0.5rem 0;
box-sizing: border-box;
}
/* Cada paso */
.app-steps__item {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
min-width: 0;
}
/* Círculo del número/check */
.app-steps__circle {
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
background: var(--surface-color, #fff);
color: var(--primary-color, #00236C);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.1rem;
border: 2px solid var(--primary-color, #00236C);
transition: background 0.3s, color 0.3s, border-color 0.3s;
flex-shrink: 0;
}
/* Paso activo */
.app-steps__item--active .app-steps__circle {
background: var(--primary-color, #00236C);
color: var(--text-light, #fff);
border-color: var(--primary-color, #00236C);
}
/* Paso completado: animación y color */
.app-steps__item--completed .app-steps__circle {
background: var(--success-color, #007A33);
color: var(--text-light, #fff);
border-color: var(--success-color, #007A33);
animation: app-steps-check-pop 0.25s cubic-bezier(.4,1.3,.6,1) 1;
}
/* Animación "pop" al marcar completado */
@keyframes app-steps-check-pop {
0% {
transform: scale(1);
}
60% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
/* Etiqueta debajo del número */
.app-steps__label {
margin-top: 0.4rem;
font-size: 0.85rem;
color: var(--text-color, #1A1A1A);
min-width: 60px;
max-width: 90px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.1;
transition: opacity 0.2s;
cursor: default;
}
/* Línea conectora entre pasos */
.app-steps__connector {
position: absolute;
top: 1.1rem;
left: 100%;
width: 2.5rem;
height: 2px;
background: var(--divider-color, #E5E9F0);
z-index: 0;
}
/* Check especial (puedes usar un span o svg con esta clase) */
.app-steps__check {
color: var(--success-background, #D2F6E1);
font-weight: bold;
font-size: 1.2em;
transition: color 0.3s;
}
/* Responsividad para móvil */
@media (max-width: 600px) {
.app-steps {
gap: 0.5rem;
padding: 0.5rem 0.2rem;
justify-content: flex-start;
}
.app-steps__label {
display: none;
}
.app-steps__connector {
width: 1.2rem;
}
.app-steps__circle {
width: 2rem;
height: 2rem;
font-size: 1rem;
}
}
/* Modo oscuro */
@media (prefers-color-scheme: dark) {
.app-steps__circle {
background: var(--surface-color, #23272A);
color: var(--primary-color, #7da6ff);
border-color: var(--primary-color, #7da6ff);
}
.app-steps__item--active .app-steps__circle {
background: var(--primary-color, #7da6ff);
color: var(--text-light, #fff);
border-color: var(--primary-color, #7da6ff);
}
.app-steps__item--completed .app-steps__circle {
background: var(--success-color, #4ade80);
color: var(--text-light, #fff);
border-color: var(--success-color, #4ade80);
}
.app-steps__label {
color: var(--text-color, #F7F9FC);
}
.app-steps__connector {
background: var(--divider-color, #2C2F33);
}
.app-steps__check {
color: var(--success-background, #1a3a2a);
}
}
/* ==============================================
AppTable - Componente de tabla moderno y profesional
============================================== */
.app-table__wrapper {
width: 100%;
overflow-x: auto;
margin-bottom: 1.5rem;
border-radius: 0.5rem;
box-shadow: var(--shadow-sm);
}
.app-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--surface-color);
color: var(--text-color);
font-size: 0.9375rem;
border-radius: 0.5rem;
overflow: hidden;
border: 1px solid var(--table-border);
}
/* Header de la tabla - Diseño profesional y limpio */
.app-table__head {
position: sticky;
top: 0;
z-index: 10;
background-color: var(--table-header-bg);
}
.app-table__head th {
background-color: var(--table-header-bg);
color: var(--table-header-text);
font-weight: 600;
padding: 1rem 1.25rem;
border-bottom: 2px solid var(--table-border);
text-align: left;
white-space: nowrap;
font-size: 0.8125rem;
letter-spacing: 0.05em;
text-transform: uppercase;
transition: all 0.2s ease;
cursor: pointer;
user-select: none;
}
.app-table__head th:hover {
background-color: var(--hover-background-color);
color: var(--primary-color);
}
.app-table__head th:first-child {
border-top-left-radius: 0.5rem;
padding-left: 1.5rem;
}
.app-table__head th:last-child {
border-top-right-radius: 0.5rem;
padding-right: 1.5rem;
cursor: default;
}
.app-table__head th:last-child:hover {
background-color: var(--table-header-bg);
color: var(--table-header-text);
}
/* Botones en header - ya no se usan, pero por compatibilidad */
.app-table__head th button {
all: unset;
display: inline;
cursor: pointer;
color: inherit;
font: inherit;
}
/* Los spans dentro del header heredan */
.app-table__head th span {
color: inherit !important;
}
/* Cuerpo de la tabla */
.app-table__body .app-table__row {
transition: background-color 0.2s ease, box-shadow 0.2s ease;
background: var(--surface-color);
border-bottom: 1px solid var(--table-border);
}
.app-table__body .app-table__row:nth-child(even) {
background: var(--surface-alt-color);
}
.app-table__body .app-table__row:hover {
background: var(--table-row-hover);
box-shadow: inset 3px 0 0 var(--primary-color);
}
/* Filas con menú contextual */
.app-table__body .app-table__row[data-has-context-menu] {
cursor: context-menu;
position: relative;
}
.app-table__body .app-table__row[data-has-context-menu]::after {
content: '⋮';
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
opacity: 0;
color: var(--text-muted);
font-size: 1.25rem;
font-weight: bold;
pointer-events: none;
transition: opacity 0.2s ease;
}
.app-table__body .app-table__row[data-has-context-menu]:hover::after {
opacity: 0.5;
}
/* Celdas */
.app-table__cell,
.app-table__body td,
.app-table__head th {
padding: 0.875rem 1.25rem;
vertical-align: middle;
}
.app-table__body td {
line-height: 1.5;
color: var(--text-color);
font-size: 0.875rem;
border-bottom: none;
}
.app-table__body td:first-child {
padding-left: 1.5rem;
}
.app-table__body td:last-child {
padding-right: 1.5rem;
}
/* Última fila sin borde inferior */
.app-table__row:last-child {
border-bottom: none;
}
/* Fila vacía */
.app-table__row--empty .app-table__cell--empty {
text-align: center;
color: var(--text-muted);
font-style: italic;
background: var(--surface-alt-color);
border-bottom: none;
padding: 3rem 1rem;
font-size: 0.9375rem;
}
/* Celda con alineación */
.app-table__cell--center,
.app-table__body td[data-align="center"] {
text-align: center;
}
.app-table__cell--right,
.app-table__body td[data-align="right"] {
text-align: right;
}
/* Celda con acciones */
.app-table__cell--actions {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
}
/* Estados de fila */
.app-table__row--selected {
background: var(--hover-background-color);
box-shadow: inset 3px 0 0 var(--primary-color);
}
.app-table__row--disabled {
opacity: 0.5;
pointer-events: none;
}
/* ============================================== */
/* Header sorteable */
/* ============================================== */
.app-table__head th[data-sortable="true"] {
cursor: pointer;
user-select: none;
position: relative;
padding-right: 2.5rem;
}
.app-table__head th[data-sortable="true"]:hover {
background-color: var(--hover-background-color);
}
.app-table__head th[data-sortable="true"]::after {
content: '⇅';
position: absolute;
right: 0.75rem;
opacity: 0.4;
font-size: 0.75rem;
transition: opacity 0.2s ease;
}
.app-table__head th[data-sortable="true"]:hover::after {
opacity: 0.7;
}
.app-table__head th[data-sort="asc"]::after {
content: '↑';
opacity: 1;
color: var(--primary-color);
}
.app-table__head th[data-sort="desc"]::after {
content: '↓';
opacity: 1;
color: var(--primary-color);
}
/* ============================================== */
/* Responsive - Cards en móvil < 750px */
/* ============================================== */
@media (max-width: 750px) {
.app-table__wrapper {
margin-bottom: 1rem;
border-radius: 0;
box-shadow: none;
background: transparent;
overflow-x: visible;
}
.app-table {
border: none;
background: transparent;
}
/* Ocultar header en móvil */
.app-table__head {
display: none;
}
/* Convertir filas en cards */
.app-table__body {
display: flex;
flex-direction: column;
gap: 1rem;
}
.app-table__body .app-table__row {
display: flex;
flex-direction: column;
background-color: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 0.75rem;
padding: 1rem;
box-shadow: var(--shadow-sm);
margin-bottom: 0;
transition: all 0.2s ease;
}
.app-table__body .app-table__row:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
border-color: var(--primary-color);
}
.app-table__body .app-table__row:nth-child(even) {
background: var(--surface-color);
}
/* Cada celda como fila con label */
.app-table__body td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid var(--border-color);
font-size: 0.875rem;
}
.app-table__body td:first-child {
padding-left: 0;
padding-top: 0;
}
.app-table__body td:last-child {
padding-right: 0;
padding-bottom: 0;
border-bottom: none;
}
/* Label antes del valor */
.app-table__body td::before {
content: attr(data-label);
font-weight: 600;
color: var(--text-secondary);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-right: 0.5rem;
}
/* Valor a la derecha */
.app-table__body td > * {
text-align: right;
}
/* Celda de acciones - centrada */
.app-table__cell--actions {
justify-content: flex-end;
margin-top: 0.5rem;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
}
/* Menú contextual en cards */
.app-table__body .app-table__row[data-has-context-menu]::after {
display: none;
}
}
@media (max-width: 768px) and (min-width: 751px) {
.app-table__wrapper {
margin-bottom: 1rem;
border-radius: 0.375rem;
}
.app-table__head th,
.app-table__cell,
.app-table__body td {
padding: 0.75rem 1rem;
font-size: 0.8125rem;
}
.app-table__head th {
font-size: 0.75rem;
}
.app-table__head th:first-child,
.app-table__body td:first-child {
padding-left: 1rem;
}
.app-table__head th:last-child,
.app-table__body td:last-child {
padding-right: 1rem;
}
.app-table__cell--actions {
gap: 0.375rem;
}
.app-table__body .app-table__row[data-has-context-menu]::after {
right: 0.5rem;
}
}
/* ============================================== */
/* Modo oscuro */
/* ============================================== */
@media (prefers-color-scheme: dark) {
.app-table__head th[data-sortable="true"]:hover {
background-color: var(--hover-background-color);
}
.app-table__body .app-table__row:hover {
background: var(--table-row-hover);
box-shadow: inset 3px 0 0 var(--primary-color);
}
.app-table__row--selected {
box-shadow: inset 3px 0 0 var(--primary-color);
}
/* Cards en dark mode */
@media (max-width: 750px) {
.app-table__body .app-table__row:hover {
box-shadow: var(--shadow-md), 0 0 0 1px var(--primary-color);
}
}
}
:root[data-theme='dark'] .app-table__head th[data-sortable="true"]:hover {
background-color: var(--hover-background-color);
}
:root[data-theme='dark'] .app-table__body .app-table__row:hover {
box-shadow: inset 3px 0 0 var(--primary-color);
}
@media (max-width: 750px) {
:root[data-theme='dark'] .app-table__body .app-table__row:hover {
box-shadow: var(--shadow-md), 0 0 0 1px var(--primary-color);
}
}
.app-tabs {
width: 100%;
--tab-gap: .5rem;
--tab-radius: 8px;
--tab-padding: .55rem .95rem;
/* tokens mapeados a variables del sitio */
--tab-fg: var(--text-color);
--tab-bg: var(--surface-color);
--tab-border: var(--border-color);
--tab-hover-bg: var(--hover-background-color);
--tab-active-bg: var(--primary-color);
--tab-active-border: var(--primary-color);
--tab-active-fg: var(--primary-foreground); /* Cambiado a primary-foreground para mejor contraste */
--tab-shadow: 01px2px var(--shadow-color);
}
.app-tabs__list {
display: flex;
gap: var(--tab-gap);
flex-wrap: wrap;
justify-content: center;
}
.app-tabs--scroll .app-tabs__list {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: thin
}
.app-tabs--fill .app-tabs__list {
justify-content: space-between
}
.app-tabs--variant-underline .app-tabs__text {
font-weight: 600;
color: inherit;
}
.app-tabs__tab {
appearance: none;
background: var(--tab-bg);
color: var(--tab-fg);
border: 1px solid var(--tab-border);
padding: var(--tab-padding);
border-radius: var(--tab-radius);
cursor: pointer;
font: inherit;
display: inline-flex;
align-items: center;
gap: .45rem;
white-space: nowrap;
transition: .15s background,.15s border-color,.15s color,.15s box-shadow;
box-shadow: none
}
.app-tabs__tab:hover {
background: var(--tab-hover-bg);
color: var(--tab-fg)
}
.app-tabs__tab:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px
}
.app-tabs__tab.is-active {
background: var(--tab-active-bg);
color: var(--tab-active-fg);
border-color: var(--tab-active-border);
box-shadow: var(--tab-shadow)
}
.app-tabs__tab.is-disabled {
opacity: .5;
cursor: not-allowed
}
.app-tabs__icon {
display: inline-flex;
align-items: center;
color: currentColor
}
.app-tabs__panels {
margin-top: 1rem
}
.app-tabs__panel {
animation: fade .18s ease
}
.app-tabs__panel.is-hidden {
display: none
}
/* Variant underline */
.app-tabs--variant-underline .app-tabs__tab {
background: transparent;
border: none;
border-bottom: 3px solid transparent;
border-radius: 0;
padding: .65rem .9rem;
color: var(--text-color)
}
.app-tabs--variant-underline .app-tabs__tab:hover {
background: var(--hover-background-color)
}
.app-tabs--variant-underline .app-tabs__tab.is-active {
border-color: var(--accent-dark);
color: var(--accent-dark)
}
.app-tabs--variant-underline .app-tabs__list {
border-bottom: 2px solid var(--border-light);
}
/* Variant pills */
.app-tabs--variant-pills .app-tabs__tab {
border: 1px solid var(--border-color);
background: var(--secondary-background);
color: var(--text-color)
}
.app-tabs--variant-pills .app-tabs__tab:hover {
background: var(--hover-background-color);
color: var(--text-color)
}
.app-tabs--variant-pills .app-tabs__tab.is-active {
background: var(--primary-color);
color: var(--primary-foreground);
border-color: var(--primary-color)
}
@media (max-width:767px) {
.app-tabs__list {
gap: .35rem
}
.app-tabs__tab {
padding: .5rem .8rem
}
}
@keyframes fade {
from {
opacity: 0;
transform: translateY(4px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
.app-toast__container {
position: fixed;
top: 1.2rem;
right: 1.2rem;
z-index: 10000;
}
.app-toast {
min-width: 260px;
max-width: 340px;
padding: 1.1rem 1.5rem 1.1rem 1.1rem;
border-radius: 0.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
position: relative;
background: var(--color-surface, #fff);
display: flex;
flex-direction: column;
gap: 0.3rem;
font-family: var(--font-family-base);
font-size: 1rem;
animation: app-toast-fadein 0.3s;
opacity: 1;
transition: opacity 0.5s;
}
.app-toast--closing {
opacity: 0;
}
.app-toast--info {
background: var(--color-info-bg, #e7f3fe);
color: var(--color-info-text, #31708f);
}
.app-toast--success {
background: var(--color-success-bg, #dff0d8);
color: var(--color-success-text, #3c763d);
}
.app-toast--warning {
background: var(--color-warning-bg, #fcf8e3);
color: var(--color-warning-text, #8a6d3b);
}
.app-toast--error {
background: var(--color-error-bg, #f2dede);
color: var(--color-error-text, #a94442);
}
.app-toast__close {
position: absolute;
top: 0.5rem;
right: 0.7rem;
background: none;
border: none;
color: inherit;
font-size: 1rem; /* Antes: 1.3rem */
font-weight: normal; /* Antes: bold */
cursor: pointer;
opacity: 0.6;
transition: opacity 0.2s, color 0.2s;
z-index: 1;
line-height: 1;
padding: 0;
width: 1.5em;
height: 1.5em;
display: flex;
align-items: center;
justify-content: center;
}
.app-toast__close:hover {
opacity: 1;
color: var(--color-primary, #1976d2);
}
.app-toast__title {
font-weight: 600;
font-size: 1.08em;
margin-bottom: 0.15em;
line-height: 1.2;
word-break: break-word;
}
.app-toast__content {
font-size: 0.98em;
margin-bottom: 0.1em;
line-height: 1.4;
word-break: break-word;
}
.app-toast__link {
display: inline-block;
margin-top: 0.15em;
font-size: 0.95em;
color: var(--color-primary, #1976d2);
text-decoration: underline;
word-break: break-all;
transition: color 0.2s;
}
.app-toast__link:hover {
color: var(--color-primary-dark, #125ea2);
}
@keyframes app-toast-fadein {
from {
opacity: 0;
right: 0;
}
to {
opacity: 1;
right: 1.2rem;
}
}
.app-tooltip__content {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: var(--primary-color);
color: var(--text-light);
font-size: 0.95rem;
border: 1px solid var(--border-color);
border-radius: 0.5rem;
padding: 0.5rem 1rem;
white-space: normal;
max-width: 320px;
min-width: 180px;
z-index: 99999;
margin-bottom: 0.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
opacity: 0.98;
pointer-events: none;
transition: opacity 0.15s;
text-align: center;
word-wrap: break-word;
}
/* Flecha del tooltip */
.app-tooltip__content::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: var(--primary-color) transparent transparent transparent;
}
/* ========================================================================
WINNER PAGE - Ganadores de Trabajos Libres
======================================================================== */
/* ========================================================================
HEADER SIMPLE Y LIMPIO
======================================================================== */
.winner-header {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
/* ========================================================================
PAGE CONTAINER
======================================================================== */
.winner-page {
max-width: 1400px;
margin: 2rem auto;
padding: 0 2rem;
}
.winner-page__loading,
.winner-page__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 6rem 2rem;
min-height: 400px;
}
.winner-page__empty-icon {
font-size: 4rem;
margin-bottom: 1.5rem;
opacity: 0.3;
}
.winner-page__empty-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-color);
margin: 0 0 0.5rem 0;
}
.winner-page__empty-text {
font-size: 1rem;
color: var(--text-muted);
margin: 0;
}
/* ========================================================================
WINNER GRID 2x2
======================================================================== */
.winner-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
/* ========================================================================
WINNER CARD CON FLIP EFFECT
======================================================================== */
.winner-card {
position: relative;
min-height: 500px;
cursor: pointer;
perspective: 1000px;
}
.winner-card__inner {
position: relative;
width: 100%;
height: 100%;
min-height: 570px;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.winner-card__inner--flipped {
transform: rotateY(180deg);
}
.winner-card__front,
.winner-card__back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 16px;
background: var(--surface-color);
border: 1px solid var(--border-color);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.winner-card__back {
transform: rotateY(180deg);
}
/* ========================================================================
CARD FRONT - Vista Principal
======================================================================== */
.winner-card__front {
display: flex;
flex-direction: column;
padding: 4rem 2rem;
gap: 1.5rem;
transition: all 0.3s ease;
}
.winner-card__front .winner-card__badge-floating {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* Ocultar badge del frente cuando está volteado */
.winner-card__inner--flipped .winner-card__front .winner-card__badge-floating {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.winner-card__front:hover {
transform: translateY(-8px) scale(1.015);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}
/* Resplandor de color por categoría al pasar el cursor - refuerza la identidad visual de cada premio */
.winner-card__front--research:hover {
border-color: rgba(52, 152, 219, 0.45);
box-shadow: 0 16px 36px rgba(52, 152, 219, 0.22);
}
.winner-card__front--review:hover {
border-color: rgba(39, 174, 96, 0.45);
box-shadow: 0 16px 36px rgba(39, 174, 96, 0.22);
}
.winner-card__front--education:hover {
border-color: rgba(155, 89, 182, 0.45);
box-shadow: 0 16px 36px rgba(155, 89, 182, 0.22);
}
.winner-card__front--clinical:hover {
border-color: rgba(230, 126, 34, 0.45);
box-shadow: 0 16px 36px rgba(230, 126, 34, 0.22);
}
/* Badge Floating - Esquina Superior Derecha */
.winner-card__badge-floating {
position: absolute;
top: 1rem;
right: 1rem;
min-width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
/* Fondo sólido en vez de backdrop-filter: con perspective/preserve-3d en las 4 tarjetas del
grid, el blur combinado llegaba a colgar el compositor del navegador y la sección se
renderizaba en blanco (bug reportado: "los ganadores no cargan correctamente"). */
background: var(--surface-color);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border: 2px solid;
transition: all 0.3s ease, opacity 0.6s ease, visibility 0.6s ease;
z-index: 10;
padding: 0 0.625rem;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.winner-card__badge-floating:hover {
transform: scale(1.05);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.winner-card__badge-content {
display: flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
}
.winner-card__badge-floating--research {
border-color: rgba(52, 152, 219, 0.3);
}
.winner-card__badge-floating--research .winner-card__badge-icon,
.winner-card__badge-floating--research .winner-card__badge-text {
color: #3498db !important;
}
.winner-card__badge-floating--review {
border-color: rgba(39, 174, 96, 0.3);
}
.winner-card__badge-floating--review .winner-card__badge-icon,
.winner-card__badge-floating--review .winner-card__badge-text {
color: #27ae60 !important;
}
.winner-card__badge-floating--education {
border-color: rgba(155, 89, 182, 0.3);
}
.winner-card__badge-floating--education .winner-card__badge-icon,
.winner-card__badge-floating--education .winner-card__badge-text {
color: #9b59b6 !important;
}
.winner-card__badge-floating--clinical {
border-color: rgba(230, 126, 34, 0.3);
}
.winner-card__badge-floating--clinical .winner-card__badge-icon,
.winner-card__badge-floating--clinical .winner-card__badge-text {
color: #e67e22 !important;
}
.winner-card__badge-floating--default {
border-color: var(--primary-color);
}
.winner-card__badge-floating--default .winner-card__badge-icon,
.winner-card__badge-floating--default .winner-card__badge-text {
color: var(--primary-color) !important;
}
.winner-card__badge-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.winner-card__badge-text {
font-size: 0.75rem !important;
font-weight: 600;
letter-spacing: 0.3px !important;
text-transform: uppercase;
}
.winner-card__photo {
width: 120px;
height: 120px;
aspect-ratio: 1 / 1;
flex-shrink: 0;
box-sizing: border-box;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
border: 4px solid var(--border-color);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
margin-top: 1rem;
animation: winner-photo-glow 3s ease-in-out infinite;
}
/* Aura dorada pulsante - evoca el reconocimiento de un premio */
@keyframes winner-photo-glow {
0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(255, 193, 7, 0.35); }
50% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(255, 193, 7, 0); }
}
@media (prefers-reduced-motion: reduce) {
.winner-card__photo {
animation: none;
}
}
.winner-card__photo--placeholder {
background: var(--secondary-background);
display: flex;
align-items: center;
justify-content: center;
}
.winner-card__photo-placeholder-icon {
width: 60px;
height: 60px;
color: var(--text-muted);
opacity: 0.4;
}
.winner-card__photo-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.winner-card__info {
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
}
.winner-card__name {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-color) !important;
margin: 0;
line-height: 1.3;
position: relative;
display: inline-block;
}
.winner-card__name-underline {
display: block;
width: 40px;
height: 3px;
margin: 0.5rem auto 0;
border-radius: 2px;
}
.winner-card__name-underline--research {
background: rgba(52, 152, 219, 0.5);
}
.winner-card__name-underline--review {
background: rgba(39, 174, 96, 0.5);
}
.winner-card__name-underline--education {
background: rgba(155, 89, 182, 0.5);
}
.winner-card__name-underline--clinical {
background: rgba(230, 126, 34, 0.5);
}
.winner-card__name-underline--default {
background: var(--primary-color);
}
/* Título Destacado con Container */
.winner-card__title-container {
padding: 0.875rem 1rem;
border-radius: 8px;
border-left: 3px solid;
background: rgba(0, 0, 0, 0.02);
transition: all 0.3s ease;
}
.winner-card__title-container--research {
border-left-color: #3498db;
background: rgba(52, 152, 219, 0.05);
}
.winner-card__title-container--review {
border-left-color: #27ae60;
background: rgba(39, 174, 96, 0.05);
}
.winner-card__title-container--education {
border-left-color: #9b59b6;
background: rgba(155, 89, 182, 0.05);
}
.winner-card__title-container--clinical {
border-left-color: #e67e22;
background: rgba(230, 126, 34, 0.05);
}
.winner-card__title-container--default {
border-left-color: var(--primary-color);
background: rgba(0, 0, 0, 0.03);
}
.winner-card__title {
font-size: 0.95rem !important;
font-weight: 600;
color: var(--text-secondary) !important;
line-height: 1.5 !important;
margin: 0;
/*display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;*/
}
.winner-card__hint {
text-align: center;
padding-top: 1rem;
border-top: 1px solid var(--divider-color);
font-size: 0.875rem !important;
color: var(--text-muted) !important;
font-style: italic;
}
/* ========================================================================
CARD BACK - Vista de Detalles
======================================================================== */
.winner-card__back {
display: flex;
flex-direction: column;
padding: 2rem;
gap: 1.5rem;
}
.winner-card__back .winner-card__badge-floating {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.winner-card__back-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
padding-top: 3rem;
}
.winner-card__back-name {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-color) !important;
margin: 0;
text-align: center;
position: relative;
display: inline-block;
}
.winner-card__back-title {
font-size: 1rem;
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
text-align: center;
padding-bottom: 1rem;
border-bottom: 1px solid var(--divider-color);
}
.winner-card__details {
display: flex;
flex-direction: column;
gap: 1rem;
}
.winner-card__detail-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background: var(--background-color);
border-radius: 8px;
border: 1px solid var(--border-color);
}
.winner-card__detail-svg {
width: 24px;
height: 24px;
color: var(--text-muted);
flex-shrink: 0;
}
.winner-card__detail-text {
font-size: 0.95rem;
color: var(--text-color);
line-height: 1.5;
}
/* Badge Código - Estilo Pill */
.winner-card__code-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
background: var(--surface-color);
border: 2px solid var(--border-color);
border-radius: 20px;
align-self: center;
transition: all 0.3s ease;
}
.winner-card__code-badge:hover {
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
.winner-card__code-svg {
width: 18px;
height: 18px;
color: var(--text-muted);
}
.winner-card__code-text {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-secondary);
letter-spacing: 0.5px;
}
.winner-card__actions {
display: flex;
gap: 0.75rem;
flex-direction: column;
}
/* ========================================================================
MODAL - Vista del Trabajo
======================================================================== */
.winner-modal {
display: flex;
flex-direction: row;
gap: 1.5rem;
height: calc(100vh - 200px);
}
.winner-modal__badge-wrapper {
flex-shrink: 0;
}
/* Badge de Categoría con SVG - Compacto */
.winner-modal__badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.875rem;
border-radius: 8px;
font-size: 0.75rem !important;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.winner-modal__badge:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.winner-modal__badge-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.winner-modal__badge-text {
font-size: 0.75rem !important;
font-weight: 600;
color: inherit !important;
}
.winner-modal__badge--research {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white !important;
}
.winner-modal__badge--review {
background: linear-gradient(135deg, #27ae60, #229954);
color: white !important;
}
.winner-modal__badge--education {
background: linear-gradient(135deg, #9b59b6, #8e44ad);
color: white !important;
}
.winner-modal__badge--clinical {
background: linear-gradient(135deg, #e67e22, #d35400);
color: white !important;
}
.winner-modal__badge--default {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white !important;
}
/* Título del trabajo, en la columna de detalles */
.winner-modal__work-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--text-color);
line-height: 1.45;
margin: 0;
}
/* Información del ganador */
.winner-modal__info {
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Sección del autor */
.winner-modal__author-section {
display: flex;
align-items: center;
gap: 0.75rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid var(--divider-color);
}
.winner-modal__author-icon {
width: 24px;
height: 24px;
color: var(--secondary-color) !important;
flex-shrink: 0;
}
.winner-modal__author {
font-size: 1.125rem !important;
font-weight: 700;
color: var(--text-color) !important;
line-height: 1.3 !important;
}
/* Fila de detalles (Institución + Código) — columna angosta, se apilan */
.winner-modal__details-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.85rem;
}
/* Institución */
.winner-modal__institution {
display: flex;
align-items: center;
gap: 0.625rem;
width: 100%;
}
.winner-modal__institution-icon {
width: 20px;
height: 20px;
color: var(--text-muted) !important;
flex-shrink: 0;
}
.winner-modal__institution-text {
font-size: 0.9375rem !important;
color: var(--text-secondary) !important;
line-height: 1.4 !important;
}
/* Código como Badge Pill */
.winner-modal__code-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.125rem;
background: var(--surface-color);
border: 2px solid var(--border-color);
border-radius: 20px;
transition: all 0.3s ease;
flex-shrink: 0;
}
.winner-modal__code-badge:hover {
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
.winner-modal__code-icon {
width: 18px;
height: 18px;
color: var(--text-muted) !important;
flex-shrink: 0;
}
.winner-modal__code-text {
font-size: 0.875rem !important;
font-weight: 600;
color: var(--text-secondary) !important;
letter-spacing: 0.5px !important;
}
/* Columna izquierda — imagen del trabajo, grande y completa.
Se ajusta al ANCHO completo de la columna (nunca dejamos aire a los
costados); si el póster es muy alto, esta columna hace scroll vertical
en lugar de encogerlo o recortarlo. */
.winner-modal__image-container {
flex: 1 1 60%;
min-width: 0;
overflow-y: auto;
overflow-x: hidden;
border-radius: 12px;
border: 1px solid var(--border-color);
background: var(--background-color);
padding: 0.75rem;
}
.winner-modal__image {
display: block;
width: 100%;
height: auto;
border-radius: 6px;
box-shadow: var(--shadow-sm);
}
/* Columna derecha — detalles del ganador */
.winner-modal__details {
flex: 1 1 38%;
min-width: 300px;
max-width: 420px;
display: flex;
flex-direction: column;
gap: 1.25rem;
padding: 1.5rem;
background: var(--background-color);
border-radius: 12px;
border: 1px solid var(--border-color);
overflow-y: auto;
}
/* ========================================================================
RESPONSIVE - TABLET
======================================================================== */
@media (max-width: 1024px) {
.winner-grid {
gap: 1.5rem;
}
.winner-card__inner {
min-height: 480px;
}
}
/* ========================================================================
RESPONSIVE - MOBILE
======================================================================== */
@media (max-width: 768px) {
.winner-header {
padding: 0 1rem;
}
.winner-page {
margin: 1.5rem auto;
padding: 0 1rem;
}
.winner-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.winner-card__inner {
min-height: 520px;
}
.winner-card__front,
.winner-card__back {
padding: 1.5rem;
}
.winner-card__badge-floating {
top: 0.75rem;
right: 0.75rem;
min-width: 36px;
height: 36px;
padding: 0 0.5rem;
}
.winner-card__badge-icon {
width: 18px;
height: 18px;
}
.winner-card__badge-text {
font-size: 0.7rem !important;
}
.winner-card__photo {
width: 150px;
height: 150px;
}
.winner-card__title-container {
padding: 0.75rem 0.875rem;
}
/* Modal responsive — se apila: imagen arriba, detalles abajo */
.winner-modal {
height: calc(100vh - 150px);
flex-direction: column;
}
.winner-modal__image-container {
flex: 0 0 42%;
padding: 0.75rem;
}
.winner-modal__details {
flex: 1;
max-width: none;
min-width: 0;
padding: 1.25rem;
gap: 1rem;
}
.winner-modal__badge-wrapper {
align-self: center;
}
.winner-modal__code-badge {
align-self: center;
}
}
@media (max-width: 480px) {
.winner-card__front,
.winner-card__back {
padding: 1.25rem;
}
.winner-card__badge-floating {
min-width: 32px;
height: 32px;
padding: 0 0.375rem;
}
.winner-card__badge-icon {
width: 16px;
height: 16px;
}
.winner-card__badge-text {
font-size: 0.65rem;
}
.winner-card__name,
.winner-card__back-name {
font-size: 1.125rem;
}
.winner-card__title {
font-size: 0.875rem;
}
.winner-card__back-title {
font-size: 0.875rem;
}
.winner-card__title-container {
padding: 0.625rem 0.75rem;
border-left-width: 2px;
}
}
.csdPage__card {
margin-bottom:1.5rem;
padding:1.5rem;
}
.csdPage__filters {
display: flex;
flex-wrap: wrap;
gap:1rem;
align-items: end;
}
.csdPage__filters > * {
min-width:180px;
}
.csdPage__table-card {
margin-bottom:1rem;
padding:1.5rem;
}
.csdPage__table {
width:100%;
border-collapse: collapse;
}
.csdPage__row--active {
background: var(--color-bg-table-row-active, #e8f5e9);
}
.csdPage__row--inactive {
background: var(--color-bg-table-row-inactive, #fbe9e7);
}
.csdPage__status {
padding:0.25em 0.75em;
border-radius:1em;
font-size:0.95em;
font-weight:600;
display: inline-block;
}
.csdPage__status--active {
background: var(--color-success-bg, #c8e6c9);
color: var(--color-success-text, #256029);
}
.csdPage__status--inactive {
background: var(--color-danger-bg, #ffcdd2);
color: var(--color-danger-text, #b71c1c);
}
.csdPage__empty {
text-align: center;
color: var(--color-text-muted, #888);
font-style: italic;
}
.csdPage__error {
color: var(--color-danger-text, #b71c1c);
margin-bottom:1rem;
}
.csdPage__info {
color: var(--color-info-text, #1976d2);
margin-bottom:1rem;
}
.csdPage__pagination {
margin-top:1.5rem;
display: flex;
justify-content: center;
}
.csdPage__modal {
position: fixed;
top:50%;
left:50%;
min-width:320px;
max-width:90vw;
background: var(--color-bg-modal, #fff);
color: var(--color-text, #222);
border-radius:1rem;
box-shadow:0 2px 24px 0 rgba(0,0,0,0.18);
padding:2rem;
z-index:1000;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
gap:1.5rem;
align-items: center;
}
.csdPage__form-grid {
display: grid;
grid-template-columns:1fr 1fr;
gap:1rem 2rem;
}
.csdPage__form-error {
color: var(--color-danger-text, #b71c1c);
font-size:0.95em;
margin-bottom:0.5rem;
min-height:1.2em;
}
.csdPage__form-actions {
display: flex;
gap:1rem;
margin-top:2rem;
justify-content: flex-end;
}
.csdPage__modal-form {
max-width:700px;
width:95vw;
margin:0 auto;
}
/* Styles for CSD page search panel */
.csdPage__card { }
.csdPage__search-form { }
/* Desktop:3 columns for inputs + actions area */
.csdPage__search-grid {
display: grid;
grid-template-columns:1fr 1fr 1fr auto;
gap:1rem;
align-items: end;
}
.csdPage__search-input {
min-width:0;
}
.csdPage__search-actions {
display:flex;
gap:0.5rem;
align-items:center;
justify-self:end;
}
/* Responsive: small screens stack inputs and put actions in their own row; actions inline */
@media (max-width:767px) {
.csdPage__search-grid {
grid-template-columns:1fr;
gap:0.75rem;
}
.csdPage__search-actions {
justify-self:start;
display:flex;
gap:0.5rem;
}
}
@media (max-width:900px) {
.csdPage__filters {
flex-direction: column;
align-items: stretch;
}
.csdPage__table-card, .csdPage__card {
padding:1rem;
}
.csdPage__form-grid {
grid-template-columns:1fr;
}
.csdPage__modal-form {
max-width:99vw;
padding:0.5rem;
}
}
@media (max-width:600px) {
.csdPage__table {
font-size:0.95em;
}
.csdPage__modal {
min-width:90vw;
padding:1rem;
}
}
/* Modo oscuro */
@media (prefers-color-scheme: dark) {
.csdPage__card, .csdPage__table-card {
background: var(--color-bg-card-dark, #23272f);
color: var(--color-text-dark, #f1f1f1);
}
.csdPage__modal {
background: var(--color-bg-modal-dark, #23272f);
color: var(--color-text-dark, #f1f1f1);
}
.csdPage__row--active {
background: var(--color-bg-table-row-active-dark, #294034);
}
.csdPage__row--inactive {
background: var(--color-bg-table-row-inactive-dark, #402929);
}
.csdPage__status--active {
background: var(--color-success-bg-dark, #2e7d32);
color: var(--color-success-text-dark, #b9f6ca);
}
.csdPage__status--inactive {
background: var(--color-danger-bg-dark, #b71c1c);
color: var(--color-danger-text-dark, #ffcdd2);
}
}
/* ─────────────────────────────────────────────
LAYOUT PRINCIPAL
───────────────────────────────────────────── */
.app-gallery {
max-width: 1320px;
margin: 0 auto;
padding: 0 2rem 3rem;
}
.app-gallery__loading,
.app-gallery__error,
.app-gallery__empty {
text-align: center;
padding: 3rem 1rem;
color: var(--text-muted);
}
.app-gallery__tabs {
margin-bottom: 1.5rem;
}
.app-gallery__day-header {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border-color);
}
.app-gallery__day-date {
font-size: 1.15rem;
font-weight: 700;
color: var(--text-color);
text-transform: capitalize;
}
.app-gallery__day-count {
font-size: 0.875rem;
color: var(--text-muted);
}
/* ═══════════════════════════════════════════════════════════
GRID — estilo Pinterest con columnas de altura variable
═══════════════════════════════════════════════════════════ */
.app-gallery__grid {
column-count: 4;
column-gap: 1rem;
}
.app-gallery__photo {
position: relative;
display: block;
margin: 0 0 1rem;
break-inside: avoid;
overflow: hidden;
border-radius: 12px;
background: var(--surface-alt-color);
box-shadow: var(--shadow-sm);
cursor: default;
outline: none;
animation: app-gallery-fade-in 0.5s ease both;
}
.app-gallery__photo:hover,
.app-gallery__photo:focus-visible {
box-shadow: var(--shadow-md);
}
.app-gallery__photo-img {
display: block;
width: 100%;
height: auto;
transition: transform 0.45s ease;
}
.app-gallery__photo:hover .app-gallery__photo-img,
.app-gallery__photo:focus-within .app-gallery__photo-img {
transform: scale(1.06);
}
/* Descripción: overlay que aparece del lado derecho de la foto al hover/focus */
.app-gallery__photo-desc {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: flex-end;
text-align: right;
padding: 1rem 0.9rem;
margin: 0;
background: linear-gradient(to left, var(--overlay-color) 0%, rgba(7, 28, 54, 0) 65%);
color: var(--text-light);
font-size: 0.875rem;
line-height: 1.4;
opacity: 0;
transform: translateX(10px);
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
}
.app-gallery__photo:hover .app-gallery__photo-desc,
.app-gallery__photo:focus-within .app-gallery__photo-desc {
opacity: 1;
transform: translateX(0);
}
@keyframes app-gallery-fade-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.app-gallery__photo {
animation: none;
}
.app-gallery__photo-img,
.app-gallery__photo-desc {
transition: none;
}
}
/* ── Cargar más ── */
.app-gallery__load-more {
display: flex;
justify-content: center;
margin-top: 2rem;
}
/* ═══════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 1100px) {
.app-gallery__grid {
column-count: 3;
}
}
@media (max-width: 760px) {
.app-gallery {
padding: 0 1rem 2rem;
}
.app-gallery__grid {
column-count: 2;
column-gap: 0.75rem;
}
.app-gallery__photo {
margin-bottom: 0.75rem;
border-radius: 10px;
}
}
@media (max-width: 480px) {
.app-gallery__grid {
column-count: 1;
}
}
/* ============================================
Admin Inscriptions List Page
Página de administración de inscripciones
============================================ */
.admin-inscriptions-list-page {
width: 100%;
max-width: 100%;
padding: var(--spacing-md);
box-sizing: border-box;
}
/* ============================================
Header y Título
============================================ */
.admin-inscriptions-list-page__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-md);
border-bottom: 2px solid var(--primary-color, #0066cc);
}
.admin-inscriptions-list-page__title {
font-size: var(--font-size-3xl, 2rem);
font-weight: var(--font-weight-bold, 700);
color: var(--text-primary, #1a1a1a);
margin: 0;
letter-spacing: -0.02em;
background: linear-gradient(135deg, var(--primary-color, #0066cc) 0%, var(--primary-dark, #004d99) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ============================================
Contenido Principal
============================================ */
.admin-inscriptions-list-page__content {
width: 100%;
margin-top: var(--spacing-md);
}
.admin-inscriptions-list-page__loading {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
padding: var(--spacing-xl);
color: var(--text-secondary);
}
.admin-inscriptions-list-page__error {
padding: var(--spacing-md);
background: var(--error-bg, #fee);
color: var(--error-text, #c00);
border-radius: var(--border-radius-md);
margin: var(--spacing-md) 0;
}
.admin-inscriptions-list-page__empty {
text-align: center;
padding: var(--spacing-xl);
color: var(--text-secondary);
font-size: var(--font-size-lg);
}
/* ============================================
Tabla
============================================ */
.admin-inscriptions-list-page__table-wrapper {
width: 100%;
overflow-x: auto;
margin-top: var(--spacing-md);
}
.admin-inscriptions-list-page__th-center {
text-align: center !important;
}
.admin-inscriptions-list-page__actions-cell {
text-align: center;
}
.admin-inscriptions-list-page__attendance-cell {
text-align: center;
padding: var(--spacing-sm) !important;
}
.admin-inscriptions-list-page__sub-text {
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary, #666);
margin-top: var(--spacing-xs, 0.25rem);
}
/* ============================================
Badges
============================================ */
.admin-inscriptions-list-page__badge {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius-sm);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
}
.admin-inscriptions-list-page__badge--success {
background: var(--success-bg, #d4edda);
color: var(--success-text, #155724);
}
.admin-inscriptions-list-page__badge--warning {
background: var(--warning-bg, #fff3cd);
color: var(--warning-text, #856404);
}
.admin-inscriptions-list-page__badge--danger {
background: var(--error-bg, #f8d7da);
color: var(--error-text, #721c24);
}
/* ============================================
Filtros
============================================ */
.admin-inscriptions-list-page__filter-group {
margin-bottom: var(--spacing-md);
}
.admin-inscriptions-list-page__filter-divider {
height: 1px;
background: var(--border-color, #e0e0e0);
margin: var(--spacing-lg) 0;
}
.admin-inscriptions-list-page__label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
margin-bottom: var(--spacing-xs);
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
/* ============================================
Modal Detalle con Adicionales
============================================ */
.admin-inscriptions-list-page__detail {
width: 100%;
}
.admin-inscriptions-list-page__detail-loading {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
padding: var(--spacing-xl);
color: var(--text-secondary);
}
.admin-inscriptions-list-page__detail-section {
margin-bottom: var(--spacing-lg);
padding: var(--spacing-md);
background: var(--surface-color, #f9f9f9);
border-radius: var(--border-radius-md);
border: 1px solid var(--border-color, #e0e0e0);
}
.admin-inscriptions-list-page__detail-section h3 {
margin: 0 0 var(--spacing-md) 0;
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--primary-color, #0066cc);
border-bottom: 1px solid var(--border-color, #e0e0e0);
padding-bottom: var(--spacing-sm);
}
.admin-inscriptions-list-page__detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-sm);
}
.admin-inscriptions-list-page__detail-row {
padding: var(--spacing-xs) 0;
}
.admin-inscriptions-list-page__detail-row strong {
display: inline-block;
min-width: 120px;
color: var(--text-secondary, #666);
font-weight: var(--font-weight-medium);
}
/* ============================================
Adicionales
============================================ */
.admin-inscriptions-list-page__additionals {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--spacing-md);
}
.admin-inscriptions-list-page__additional-card {
padding: var(--spacing-md);
background: white;
border: 1px solid var(--border-color, #e0e0e0);
border-radius: var(--border-radius-md);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.admin-inscriptions-list-page__additional-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-sm);
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
}
.admin-inscriptions-list-page__additional-info {
font-size: var(--font-size-sm);
color: var(--text-secondary, #666);
}
.admin-inscriptions-list-page__modal-actions {
display: flex;
gap: var(--spacing-sm);
justify-content: flex-end;
margin-top: var(--spacing-lg);
padding-top: var(--spacing-md);
border-top: 1px solid var(--border-color, #e0e0e0);
}
/* ============================================
Switch Readonly
============================================ */
.switch-readonly {
pointer-events: none;
opacity: 0.7;
}
/* ============================================
Responsive
============================================ */
@media (max-width: 768px) {
.admin-inscriptions-list-page {
padding: var(--spacing-sm);
}
.admin-inscriptions-list-page__title {
font-size: var(--font-size-2xl, 1.5rem);
}
.admin-inscriptions-list-page__detail-grid {
grid-template-columns: 1fr;
}
.admin-inscriptions-list-page__additionals {
grid-template-columns: 1fr;
}
.admin-inscriptions-list-page__modal-actions {
flex-direction: column;
}
}
@media (max-width: 480px) {
.admin-inscriptions-list-page__title {
font-size: var(--font-size-xl, 1.25rem);
}
.admin-inscriptions-list-page__attendance-toggle {
width: 32px;
height: 32px;
}
}
/* ============================================
Modo Oscuro
============================================ */
@media (prefers-color-scheme: dark) {
.admin-inscriptions-list-page__title {
color: var(--text-primary-dark, #fff);
}
.admin-inscriptions-list-page__label {
color: var(--text-primary-dark, #fff);
}
.admin-inscriptions-list-page__sub-text {
color: var(--text-secondary-dark, #aaa);
}
.admin-inscriptions-list-page__error {
background: var(--error-bg-dark, #5a1a1a);
color: var(--error-text-dark, #ff9999);
}
.admin-inscriptions-list-page__loading {
color: var(--text-secondary-dark, #bbb);
}
.admin-inscriptions-list-page__empty {
color: var(--text-secondary-dark, #bbb);
}
.admin-inscriptions-list-page__detail-section {
background: var(--surface-color-dark, #2a2a2a);
border-color: var(--border-color-dark, #444);
}
.admin-inscriptions-list-page__detail-section h3 {
color: var(--primary-light, #4d9fff);
border-bottom-color: var(--border-color-dark, #444);
}
.admin-inscriptions-list-page__additional-card {
background: var(--surface-color-dark, #2a2a2a);
border-color: var(--border-color-dark, #444);
}
.admin-inscriptions-list-page__filter-divider {
background: var(--border-color-dark, #444);
}
.admin-inscriptions-list-page__modal-actions {
border-top-color: var(--border-color-dark, #444);
}
.admin-inscriptions-list-page__attendance-toggle--inactive {
background: var(--surface-color-dark, #333);
}
}
.admin-inscriptions-list-page__loading-indicator {
font-size: var(--font-size-xs, 0.75rem);
color: var(--primary-color);
font-weight: normal;
font-style: italic;
}
/* ========================================== */
/*  InscriptionListPage - Diseño Adaptado    */
/* ========================================== */
/* Contenedor principal */
.inscription-list-page {
max-width: 1400px;
margin: 0 auto;
padding: 2rem 1.5rem 3rem;
}
/* ========================================== */
/*  Header con título y contador             */
/* ========================================== */
.inscription-list-page__header {
margin-bottom: 2rem;
}
.inscription-list-page__header-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.25rem;
background: var(--split-left-bg);
padding: 2rem;
border-radius: 10px;
}
.inscription-list-page__title {
font-size: 24px;
font-weight: 800;
color: var(--text-light);
line-height: 1.2;
}
.inscription-list-page__subtitle {
font-size: 13px !important;
color: var(--text-muted) !important;
margin-top: 0.25rem;
}
.inscription-list-page__counter {
background: rgba(7, 44, 79, 0.85);
color: var(--text-light) !important;
border-radius: 10px;
padding: 0.4rem 0.9rem;
text-align: center;
flex-shrink: 0;
backdrop-filter: blur(20px);
}
.inscription-list-page__counter span {
font-size: 1.2rem !important;
font-weight: 800;
color: var(--text-light) !important;
display: block;
line-height: 1;
}
.inscription-list-page__counter p {
font-size: .65rem !important;
color: var(--text-muted) !important;
margin-top: .2rem;
display: block;
font-weight: bolder;
}
/* ========================================== */
/*  Filtros                                   */
/* ========================================== */
.inscription-list-page__filters {
display: flex;
align-items: normal;
gap: 0.75rem;
flex-wrap: wrap;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 0.875rem 1.125rem;
}
.inscription-list-page__filter-item {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1;
min-width: 150px;
}
.inscription-list-page__filter-item--name {
flex: 2;
min-width: 180px;
}
.inscription-list-page__filter-item label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-muted);
}
.inscription-list-page__filter-actions {
display: flex;
gap: 0.5rem;
align-items: center;
margin-bottom: 0;
padding-bottom: 0;
margin-top: .30rem;
}
/* Forzar altura uniforme en los controles */
.inscription-list-page__filters .app-input,
.inscription-list-page__filters .app-select,
.inscription-list-page__filter-actions .app-button {
height: 34px;
min-height: 34px;
}
/* ========================================== */
/*  Meta row con contador y view toggle      */
/* ========================================== */
.inscription-list-page__meta-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
}
.inscription-list-page__summary {
font-size: 12px;
color: var(--text-muted);
}
.inscription-list-page__summary b {
color: var(--text-color);
}
.inscription-list-page__view-toggle {
display: flex;
gap: 0.5rem;
align-items: center;
}
.inscription-list-page__view-btn {
width: 38px;
height: 38px;
border-radius: 8px;
border: 1px solid var(--border-color);
background: var(--surface-color);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
transition: all 0.2s ease;
padding: 0 !important;
}
.inscription-list-page__view-btn:hover {
background: var(--hover-background-color);
border-color: var(--primary-color);
color: var(--primary-color);
}
.inscription-list-page__view-btn.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}
.inscription-list-page__view-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* ========================================== */
/*  Grid de cards                             */
/* ========================================== */
.inscription-list-page__cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 1.25rem;
}
.inscription-list-page__cards.list-mode {
grid-template-columns: 1fr;
}
/* ========================================== */
/*  Card individual                           */
/* ========================================== */
.inscription-card {
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: row;
transition: box-shadow 0.2s, transform 0.15s;
cursor: pointer;
min-height: 180px;
}
.inscription-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
/* Imagen del card - SIEMPRE a la izquierda */
.inscription-card__media {
flex-shrink: 0;
width: 200px;
position: relative;
overflow: hidden;
}
.inscription-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Badge de fecha flotante sobre la imagen */
.inscription-card__date-badge {
position: absolute;
bottom: 0.75rem;
left: 0.75rem;
background: rgba(0, 26, 51, 0.92);
backdrop-filter: blur(8px);
color: #fff;
padding: 0.4rem 0.75rem;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
gap: 4px;
}
.inscription-card__date-badge svg {
width: 11px;
height: 11px;
flex-shrink: 0;
}
.inscription-card__img-placeholder {
background: var(--surface-alt-color);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 180px;
}
.inscription-card__img-placeholder svg {
width: 48px;
height: 48px;
color: var(--border-color);
}
/* Body del card - SIEMPRE a la derecha */
.inscription-card__content {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.inscription-card__body {
padding: 1rem 1.25rem;
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 0;
}
.inscription-card__category {
font-size: 10px !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--accent-color) !important;
margin-bottom: -0.25rem;
}
.inscription-card__title {
font-size: 15px;
font-weight: 700;
color: var(--text-color);
line-height: 1.4;
margin: 0;
}
.inscription-card__dates {
font-size: 12px;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 4px;
}
.inscription-card__dates svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
/* Código de confirmación */
.inscription-card__code {
margin-top: auto;
padding-top: 0.75rem;
border-top: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.inscription-card__code-label {
font-size: 10px !important;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--info-dark) !important;
opacity: 0.7;
}
.inscription-card__code-value {
font-family: ui-monospace, monospace;
font-size: 13px;
font-weight: 800;
color: var(--info-dark);
background: var(--info-background);
padding: 4px 10px;
border-radius: 5px;
letter-spacing: 0.04em;
}
/* Footer del card - SIEMPRE visible */
.inscription-card__footer {
padding: 1rem 1.25rem;
padding-top: 0;
display: flex;
justify-content: flex-end;
align-items: center;
align-self: flex-end;
width: 100%;
}
/* Responsive: Móvil - Stack vertical */
@media (max-width: 600px) {
.inscription-card {
flex-direction: column;
min-height: unset;
}
.inscription-card__media {
width: 100%;
height: 200px;
}
}
/* En modo LIST - cards más anchos pero mismo diseño */
.inscription-list-page__cards.list-mode .inscription-card {
/* Mismo diseño, solo ajustamos el poster un poco más ancho */
flex-direction: row;
}
.inscription-list-page__cards.list-mode .inscription-card__media {
width: 240px;
}
.inscription-list-page__cards.list-mode .inscription-card__body {
padding: 1.25rem 1.5rem;
}
/* ========================================== */
/*  Empty State                               */
/* ========================================== */
.inscription-list-page__empty {
padding: 3.5rem 1rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
text-align: center;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 16px;
}
.inscription-list-page__empty-icon {
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px dashed var(--border-color);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.inscription-list-page__empty-icon svg {
width: 32px;
height: 32px;
color: var(--border-color);
}
.inscription-list-page__empty-title {
font-size: 17px;
font-weight: 700;
color: var(--text-color);
}
.inscription-list-page__empty-text {
font-size: 13px;
color: var(--text-muted);
max-width: 320px;
line-height: 1.65;
}
/* ========================================== */
/*  Loading & Errors                          */
/* ========================================== */
.inscription-list-page__loading {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
min-height: 200px;
color: var(--text-muted);
}
.inscription-list-page__error {
padding: 0.875rem 1rem;
background: var(--danger-background);
color: var(--error-text);
border-radius: 0.5rem;
border-left: 4px solid var(--danger-color);
font-size: 0.9375rem;
font-weight: 500;
margin-top: 1rem;
}
.inscription-list-page__info {
padding: 0.875rem 1rem;
background: var(--info-background);
color: var(--info-color);
border-radius: 0.5rem;
border-left: 4px solid var(--info-color);
font-size: 0.9375rem;
font-weight: 500;
margin-top: 1rem;
}
/* ========================================== */
/*  Pagination                                */
/* ========================================== */
.inscription-list-page__pagination {
margin-top: 2rem;
display: flex;
justify-content: center;
}
/* ========================================== */
/*  Responsive                                */
/* ========================================== */
@media (max-width: 768px) {
.inscription-list-page {
padding: 1.5rem 1rem 2rem;
}
.inscription-list-page__header-top {
flex-direction: column;
align-items: center;
text-align: center;
}
.inscription-list-page__filter-item {
min-width: 100%;
}
.inscription-list-page__meta-row {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.inscription-list-page__cards {
grid-template-columns: 1fr;
}
}
/* Inscription details page (BEM) */
.inscription-page { padding: 1rem; display: grid; gap: 1rem; justify-items: center; }
.inscription-page__loading { display: flex; align-items: center; gap: .5rem; min-height: 3rem; }
.inscription-page__error { color: var(--danger-color); }
.inscription-page__header { text-align: center; display: grid; gap: .35rem; width: 100%; }
.inscription-page__title { font-size: clamp(1.35rem, 2.5vw, 2rem); font-weight: 800; color: var(--text-color); }
.inscription-page__meta { display: grid; gap: .15rem; color: var(--text-muted); }
.inscription-page__dates { font-weight: 600; }
.inscription-page__venue { opacity: .95; }
/* Main area: stacked by default (mobile) */
.inscription-page__main { display: grid; grid-template-columns: 1fr; gap: 1rem; width: 100%; max-width: 1400px; }
.inscription-page__col { min-width: 0; }
/* QR box: constrain size so it never grows too large */
.inscription-page__qr { display: grid; place-items: center; gap: .5rem; }
.inscription-page__qr > * { max-width: 320px; max-height: 320px; width: 100%; height: auto; }
.inscription-page__code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: 900; font-size: 1.4rem; letter-spacing: .04em; background: color-mix(in oklab, var(--primary-color) 10%, transparent); border: 1px dashed color-mix(in oklab, var(--primary-color) 40%, var(--border-color)); padding: .35rem .6rem; border-radius: .35rem; }
/* Badge preview: center and limit its width so it doesn't stretch too wide */
.inscription-page__badge { display: grid; place-items: center; }
.inscription-page__badge > * { max-width: 420px; width: 100%; }
.inscription-page__includes { width: 100%; }
.inscription-page__includes-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.inscription-page__include-item { padding: .5rem .75rem; border: 1px solid var(--border-color); border-radius: .5rem; background: var(--surface-alt-color); }
/* On very small screens reduce QR and badge max width */
@media (max-width: 480px) {
.inscription-page__qr > * { max-width: 220px; max-height: 220px; }
.inscription-page__badge > * { max-width: 320px; }
}
/* On medium screens (>=700px) show QR and Badge side-by-side; includes stay below (span full width) */
@media (min-width: 700px) and (max-width: 1099px) {
.inscription-page__main {
grid-template-columns: minmax(0, 360px) minmax(0, 460px);
gap: 1.25rem;
align-items: start;
}
.inscription-page__qr > * { max-width: 360px; max-height: 360px; }
.inscription-page__badge > * { max-width: 460px; }
/* make the includes block span both columns and appear below */
.inscription-page__col--includes { grid-column: 1 / -1; }
}
/* On larger screens (>=1100px) show QR, Badge and Includes side-by-side (three columns) */
@media (min-width: 1100px) and (max-width: 1399px) {
.inscription-page__main {
grid-template-columns: minmax(0, 360px) minmax(0, 460px) 1fr;
gap: 1.25rem;
align-items: start;
}
.inscription-page__qr > * { max-width: 360px; max-height: 360px; }
.inscription-page__badge > * { max-width: 460px; }
.inscription-page__includes { max-width: none; }
}
/* On very large screens allow slightly bigger QR and badge */
@media (min-width: 1400px) {
.inscription-page__main { grid-template-columns: minmax(0, 420px) minmax(0, 520px) 1fr; }
.inscription-page__qr > * { max-width: 420px; max-height: 420px; }
.inscription-page__badge > * { max-width: 520px; }
}
/* Layout dinámico según las tarjetas realmente disponibles. */
@media (min-width: 700px) {
.inscription-page__main--one-card {
grid-template-columns: minmax(0, 420px);
justify-content: center;
}
.inscription-page__main--two-cards {
grid-template-columns: minmax(0, 360px) minmax(0, 460px);
justify-content: center;
}
.inscription-page__main--two-cards .inscription-page__col--includes {
grid-column: auto;
}
}
@media (min-width: 1100px) {
.inscription-page__main--two-cards {
grid-template-columns: minmax(0, 360px) minmax(0, 460px);
}
.inscription-page__main--three-cards {
grid-template-columns: minmax(0, 360px) minmax(0, 460px) 1fr;
justify-content: center;
}
}
@media (min-width: 1400px) {
.inscription-page__main--one-card {
grid-template-columns: minmax(0, 420px);
}
.inscription-page__main--two-cards {
grid-template-columns: minmax(0, 420px) minmax(0, 520px);
}
.inscription-page__main--three-cards {
grid-template-columns: minmax(0, 420px) minmax(0, 520px) 1fr;
}
}
/* ─────────────────────────────────────────────
ICONOGRAFÍA (sprite SVG oculto + ícono base)
───────────────────────────────────────────── */
.app-job-board__icon-sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.app-job-board__icon {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
vertical-align: -2px;
}
/* ─────────────────────────────────────────────
LAYOUT PRINCIPAL
───────────────────────────────────────────── */
.app-job-board {
max-width: 960px;
margin: 0 auto;
padding: 0 2rem 3rem;
}
.app-job-board__loading,
.app-job-board__error {
text-align: center;
padding: 3rem 1rem;
color: var(--text-muted);
}
/* ═══════════════════════════════════════════════════════════
ESTADO VACÍO (sin fondo de puntos, tarjeta simple con borde punteado)
═══════════════════════════════════════════════════════════ */
.app-job-board__empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
padding: 3.5rem 1.75rem;
border: 1.5px dashed var(--border-color);
border-radius: 24px;
background: var(--surface-color);
}
.app-job-board__empty-icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 18px;
background: var(--info-background);
color: var(--secondary-color);
}
.app-job-board__empty-icon .app-job-board__icon {
width: 30px;
height: 30px;
}
.app-job-board__empty-title {
font-weight: 700;
font-size: 1.1rem;
color: var(--primary-color);
margin: 0;
}
.app-job-board__empty-text {
font-size: 0.92rem;
color: var(--text-muted);
max-width: 380px;
margin: 0;
}
/* ── Barra de conteo de vacantes activas ── */
.app-job-board__meta-bar {
display: flex;
justify-content: flex-end;
margin-bottom: 1.5rem;
}
.app-job-board__count {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.82rem;
color: var(--text-muted) !important;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 0.4rem 0.9rem;
}
.app-job-board__count::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--success-color);
}
.app-job-board__count strong {
color: var(--primary-color);
}
/* ═══════════════════════════════════════════════════════════
LÍNEA DE TIEMPO
═══════════════════════════════════════════════════════════ */
.app-job-board__timeline {
position: relative;
padding-left: 2.1rem;
}
.app-job-board__timeline::before {
content: '';
position: absolute;
left: 0.68rem;
top: 0.4rem;
bottom: 0.4rem;
width: 2px;
background: linear-gradient(var(--secondary-color), var(--border-color));
}
.app-job-board__item {
position: relative;
margin-bottom: 1.5rem;
}
.app-job-board__item:last-child {
margin-bottom: 0;
}
.app-job-board__dot {
position: absolute;
left: -2.1rem;
top: 1.35rem;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--surface-color);
border: 2px solid var(--secondary-color);
color: var(--secondary-color);
display: flex;
align-items: center;
justify-content: center;
}
.app-job-board__dot .app-job-board__icon {
width: 12px;
height: 12px;
}
/* ── Tarjeta de vacante ── */
.app-job-board__card {
background: var(--card-bg-color);
border: 1px solid var(--border-color);
border-radius: 18px;
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.app-job-board__card:hover {
box-shadow: var(--shadow-md);
border-color: var(--secondary-color);
}
.app-job-board__header {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.1rem 1.25rem;
}
.app-job-board__date {
flex-shrink: 0;
width: 48px;
text-align: center;
}
.app-job-board__date-day {
display: block;
font-weight: 800;
font-size: 1.25rem;
color: var(--primary-color) !important;
line-height: 1;
}
.app-job-board__date-month {
display: block;
font-size: 0.68rem;
text-transform: uppercase;
color: var(--text-muted) !important;
letter-spacing: 0.06em;
margin-top: 0.2rem;
}
.app-job-board__main {
flex: 1;
min-width: 0;
border-left: 1px dashed var(--border-color);
padding-left: 1rem;
}
.app-job-board__position {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-color);
margin: 0 0 0.2rem 0;
}
.app-job-board__company {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.88rem;
font-weight: 600;
color: var(--secondary-color);
margin: 0;
}
.app-job-board__company .app-job-board__icon {
width: 12px;
height: 12px;
}
.app-job-board__tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
margin-top: 0.65rem;
}
.app-job-board__tag {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.82rem;
color: var(--text-secondary) !important;
background: var(--surface-alt-color);
border: 1px solid var(--border-color);
border-radius: 999px;
padding: 0.3rem 0.8rem;
}
.app-job-board__tag .app-job-board__icon {
width: 12px;
height: 12px;
color: var(--secondary-color);
}
/* ═══════════════════════════════════════════════════════════
DETALLE DE LA VACANTE (AppAccordion)
═══════════════════════════════════════════════════════════ */
.app-job-board__accordion {
border-top: 1px dashed var(--border-color);
}
.app-job-board__accordion .app-accordion__item {
border-bottom: none;
background: transparent;
}
.app-job-board__accordion .app-accordion__header {
background: transparent;
font-size: 0.85rem;
font-weight: 600;
padding: 0.75rem 1.25rem;
}
.app-job-board__accordion .app-accordion__content {
background: var(--surface-alt-color);
padding: 1.25rem;
}
.app-job-board__blocks {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.app-job-board__block-title {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--secondary-color) !important;
margin: 0 0 0.5rem 0;
}
.app-job-board__block-title .app-job-board__icon {
width: 13px;
height: 13px;
}
.app-job-board__block-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.app-job-board__block-list li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.86rem;
color: var(--text-secondary);
}
.app-job-board__block-list .app-job-board__icon {
width: 12px;
height: 12px;
color: var(--success-color);
margin-top: 0.2rem;
}
.app-job-board__block-list-text {
color: var(--text-secondary) !important;
}
.app-job-board__block-text {
font-size: 0.86rem;
color: var(--text-secondary) !important;
margin: 0;
}
.app-job-board__apply {
grid-column: 1 / -1;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 14px;
padding: 1rem 1.15rem;
}
.app-job-board__apply-names {
font-size: 0.86rem;
font-weight: 600;
color: var(--text-color);
margin: 0 0 0.65rem 0;
}
.app-job-board__pills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.app-job-board__pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8rem;
color: var(--link-color);
background: var(--surface-alt-color);
border: 1px solid var(--border-color);
border-radius: 999px;
padding: 0.3rem 0.75rem;
text-decoration: none;
}
.app-job-board__pill .app-job-board__icon {
width: 11px;
height: 11px;
color: var(--secondary-color);
}
.app-job-board__pill:hover {
color: var(--link-hover-color);
border-color: var(--secondary-color);
}
.app-job-board__address {
grid-column: 1 / -1;
display: flex;
align-items: flex-start;
gap: 0.4rem;
font-size: 0.84rem;
color: var(--text-muted);
}
.app-job-board__address .app-job-board__icon {
color: var(--secondary-color);
margin-top: 0.15rem;
}
.app-job-board__address-text {
color: var(--text-muted) !important;
}
/* ═══════════════════════════════════
RESPONSIVE
═══════════════════════════════════ */
@media (max-width: 700px) {
.app-job-board {
padding: 0 1rem 2rem;
}
}
@media (max-width: 620px) {
.app-job-board__header {
flex-wrap: wrap;
}
.app-job-board__main {
border-left: none;
padding-left: 0;
}
.app-job-board__blocks {
grid-template-columns: 1fr;
}
.app-job-board__timeline {
padding-left: 1.6rem;
}
.app-job-board__dot {
left: -1.6rem;
width: 20px;
height: 20px;
}
}
/* P�gina de confirmaci�n de pago exitoso */
.payment-success {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 2rem;
}
.payment-success__card {
background: white;
border-radius: 16px;
padding: 3rem 2rem;
text-align: center;
max-width: 400px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideUp 0.4s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.payment-success__icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
color: #10b981;
}
.payment-success__circle {
stroke-dasharray: 188;
stroke-dashoffset: 188;
animation: drawCircle 0.6s ease-out forwards;
}
@keyframes drawCircle {
to {
stroke-dashoffset: 0;
}
}
.payment-success__check {
stroke-dasharray: 40;
stroke-dashoffset: 40;
animation: drawCheck 0.3s ease-out 0.6s forwards;
}
@keyframes drawCheck {
to {
stroke-dashoffset: 0;
}
}
.payment-success__title {
font-size: 1.75rem;
font-weight: 700;
color: #111827;
margin: 0 0 0.75rem 0;
}
.payment-success__message {
font-size: 1rem;
color: #6b7280;
margin: 0 0 2rem 0;
}
.payment-success__loader {
display: flex;
justify-content: center;
}
.payment-success__spinner {
width: 32px;
height: 32px;
border: 3px solid #e5e7eb;
border-top-color: #667eea;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
.payment-success__card {
background: #1f2937;
}
.payment-success__title {
color: #f9fafb;
}
.payment-success__message {
color: #9ca3af;
}
}
/* Receipt Status Page - Layout estilo Register con 2 columnas */
.receipt-page {
min-height: 100vh;
background: var(--background-color);
padding: 2rem 1rem;
}
/* Loading */
.receipt-page__loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
gap: 1rem;
}
.receipt-page__loading-text {
color: var(--text-color);
font-size: 1.125rem;
}
/* Error */
.receipt-page__error {
max-width: 600px;
margin: 0 auto;
}
.receipt-page__error-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: 2rem;
text-align: center;
}
.receipt-page__error-icon {
width: 80px;
height: 80px;
stroke: var(--error-color);
stroke-width: 2;
fill: none;
}
.receipt-page__error-title {
color: var(--error-color);
font-size: 1.5rem;
margin: 0;
}
.receipt-page__error-message {
color: var(--text-muted);
margin: 0;
}
/* Success View (Recibo Pagado) */
.receipt-page__success {
max-width: 800px;
margin: 0 auto;
}
.receipt-page__success-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: 2rem;
text-align: center;
}
.receipt-page__success-icon {
width: 100px;
height: 100px;
stroke: var(--success-color);
stroke-width: 2;
fill: none;
animation: checkmarkPop 0.5s ease;
}
@keyframes checkmarkPop {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.receipt-page__success-title {
color: var(--success-color);
font-size: 1.75rem;
margin: 0;
}
.receipt-page__success-message {
color: var(--text-color);
font-size: 1.125rem;
margin: 0;
}
.receipt-page__details {
width: 100%;
background: var(--surface-color);
border-radius: 12px;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.receipt-page__detail-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid var(--divider-color);
}
.receipt-page__detail-row:last-child {
border-bottom: none;
}
.receipt-page__detail-label {
color: var(--text-muted);
font-weight: 500;
}
.receipt-page__detail-value {
color: var(--primary-color);
font-weight: 600;
}
.receipt-page__actions {
display: flex;
gap: 1rem;
width: 100%;
flex-wrap: wrap;
}
.receipt-page__actions button {
flex: 1;
min-width: 200px;
}
/* Pending View (Layout 2 columnas como Register) */
.receipt-page__pending {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 400px;
gap: 2rem;
align-items: start;
}
/* Columna Principal (izquierda) */
.receipt-page__main {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.receipt-page__header {
background: var(--card-bg-color);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 8px var(--shadow-color);
}
.receipt-page__title {
color: var(--primary-color);
font-size: 1.75rem;
margin: 0 0 0.5rem 0;
}
.receipt-page__subtitle {
color: var(--text-muted);
font-size: 1rem;
margin: 0;
}
.receipt-page__payment-error {
background: var(--error-background);
border: 1px solid var(--error-color);
border-radius: 8px;
padding: 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.receipt-page__payment-error-icon {
width: 24px;
height: 24px;
stroke: var(--error-color);
stroke-width: 2;
fill: none;
flex-shrink: 0;
}
.receipt-page__payment-error-text {
color: var(--error-color);
margin: 0;
font-weight: 500;
}
.receipt-page__content {
background: var(--card-bg-color);
border-radius: 12px;
padding: 2rem;
box-shadow: 0 2px 8px var(--shadow-color);
}
.receipt-page__section-title {
color: var(--text-color);
font-size: 1.25rem;
margin: 0 0 1.5rem 0;
}
/* Grid de opciones de pago */
.receipt-page__payment-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
/* Estilos base de las tarjetas de pago */
.receipt-page__payment-options .receipt-page__payment-grid .receipt-page__payment-card,
button.receipt-page__payment-card {
all: unset;
box-sizing: border-box;
background: #ffffff !important;
border: 2px solid #e5e7eb !important;
border-radius: 16px;
padding: 1.5rem;
display: flex !important;
flex-direction: column;
align-items: center;
gap: 0.75rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
width: 100%;
position: relative;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* Efecto de brillo sutil en el fondo */
.receipt-page__payment-options .receipt-page__payment-grid .receipt-page__payment-card::before,
button.receipt-page__payment-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.receipt-page__payment-options .receipt-page__payment-grid .receipt-page__payment-card:hover::before,
button.receipt-page__payment-card:hover::before {
opacity: 1;
}
/* Hover general */
.receipt-page__payment-options .receipt-page__payment-grid .receipt-page__payment-card:hover,
button.receipt-page__payment-card:hover {
background: #ffffff !important;
transform: translateY(-4px) scale(1.02);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
/* Active state */
.receipt-page__payment-options .receipt-page__payment-grid .receipt-page__payment-card:active,
button.receipt-page__payment-card:active {
transform: translateY(-2px) scale(1);
}
/* Estilos espec�ficos por motor de pago con bordes de color */
/* OpenPay - Cian */
.receipt-page__payment-card--openpay {
border-color: rgba(0, 217, 255, 0.3) !important;
}
.receipt-page__payment-card--openpay:hover {
border-color: #00D9FF !important;
box-shadow: 0 8px 24px rgba(0, 217, 255, 0.25), 0 0 0 1px rgba(0, 217, 255, 0.1) !important;
}
/* MercadoPago - Azul */
.receipt-page__payment-card--mercadopago {
border-color: rgba(0, 158, 227, 0.3) !important;
}
.receipt-page__payment-card--mercadopago:hover {
border-color: #009EE3 !important;
box-shadow: 0 8px 24px rgba(0, 158, 227, 0.25), 0 0 0 1px rgba(0, 158, 227, 0.1) !important;
}
/* Stripe - Violeta */
.receipt-page__payment-card--stripe {
border-color: rgba(99, 91, 255, 0.3) !important;
}
.receipt-page__payment-card--stripe:hover {
border-color: #635BFF !important;
box-shadow: 0 8px 24px rgba(99, 91, 255, 0.25), 0 0 0 1px rgba(99, 91, 255, 0.1) !important;
}
/* PayPal - Azul oscuro */
.receipt-page__payment-card--paypal {
border-color: rgba(0, 112, 186, 0.3) !important;
}
.receipt-page__payment-card--paypal:hover {
border-color: #0070BA !important;
box-shadow: 0 8px 24px rgba(0, 112, 186, 0.25), 0 0 0 1px rgba(0, 112, 186, 0.1) !important;
}
/* Icono con animaci�n */
.receipt-page__payment-icon {
width: 64px;
height: 48px;
transition: transform 0.3s ease;
}
.receipt-page__payment-card:hover .receipt-page__payment-icon {
transform: scale(1.1);
}
.receipt-page__payment-icon svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
transition: filter 0.3s ease;
}
.receipt-page__payment-card:hover .receipt-page__payment-icon svg {
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}
/* Asegurar que el texto del SVG siempre sea blanco */
.receipt-page__payment-icon svg text {
fill: white !important;
}
/* Textos de las tarjetas con animaci�n */
.receipt-page__payment-card > .receipt-page__payment-name,
button.receipt-page__payment-card > .receipt-page__payment-name,
.receipt-page__payment-options .receipt-page__payment-card .receipt-page__payment-name {
color: #1f2937 !important;
font-weight: 600 !important;
font-size: 1rem !important;
margin: 0;
padding: 0;
transition: color 0.2s ease;
}
.receipt-page__payment-card:hover > .receipt-page__payment-name {
color: #111827 !important;
}
.receipt-page__payment-card > .receipt-page__payment-desc,
button.receipt-page__payment-card > .receipt-page__payment-desc,
.receipt-page__payment-options .receipt-page__payment-card .receipt-page__payment-desc {
color: #6b7280 !important;
font-size: 0.875rem !important;
margin: 0;
padding: 0;
transition: color 0.2s ease;
}
.receipt-page__payment-card:hover > .receipt-page__payment-desc {
color: #4b5563 !important;
}
/* Dark mode con efectos mejorados */
@media (prefers-color-scheme: dark) {
.receipt-page__payment-options .receipt-page__payment-grid .receipt-page__payment-card,
button.receipt-page__payment-card {
background: #1f2937 !important;
border-color: #374151 !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.receipt-page__payment-options .receipt-page__payment-grid .receipt-page__payment-card::before,
button.receipt-page__payment-card::before {
background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
}
.receipt-page__payment-options .receipt-page__payment-grid .receipt-page__payment-card:hover,
button.receipt-page__payment-card:hover {
background: #1f2937 !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
/* OpenPay - Cian en dark */
.receipt-page__payment-card--openpay {
border-color: rgba(0, 217, 255, 0.4) !important;
}
.receipt-page__payment-card--openpay:hover {
border-color: #00D9FF !important;
box-shadow: 0 8px 24px rgba(0, 217, 255, 0.3), 0 0 0 1px rgba(0, 217, 255, 0.2) !important;
}
/* MercadoPago - Azul en dark */
.receipt-page__payment-card--mercadopago {
border-color: rgba(0, 158, 227, 0.4) !important;
}
.receipt-page__payment-card--mercadopago:hover {
border-color: #009EE3 !important;
box-shadow: 0 8px 24px rgba(0, 158, 227, 0.3), 0 0 0 1px rgba(0, 158, 227, 0.2) !important;
}
/* Stripe - Violeta en dark */
.receipt-page__payment-card--stripe {
border-color: rgba(99, 91, 255, 0.4) !important;
}
.receipt-page__payment-card--stripe:hover {
border-color: #635BFF !important;
box-shadow: 0 8px 24px rgba(99, 91, 255, 0.3), 0 0 0 1px rgba(99, 91, 255, 0.2) !important;
}
/* PayPal - Azul oscuro en dark */
.receipt-page__payment-card--paypal {
border-color: rgba(0, 112, 186, 0.4) !important;
}
.receipt-page__payment-card--paypal:hover {
border-color: #0070BA !important;
box-shadow: 0 8px 24px rgba(0, 112, 186, 0.3), 0 0 0 1px rgba(0, 112, 186, 0.2) !important;
}
.receipt-page__payment-card > .receipt-page__payment-name,
button.receipt-page__payment-card > .receipt-page__payment-name,
.receipt-page__payment-options .receipt-page__payment-card .receipt-page__payment-name {
color: #f9fafb !important;
}
.receipt-page__payment-card:hover > .receipt-page__payment-name {
color: #ffffff !important;
}
.receipt-page__payment-card > .receipt-page__payment-desc,
button.receipt-page__payment-card > .receipt-page__payment-desc,
.receipt-page__payment-options .receipt-page__payment-card .receipt-page__payment-desc {
color: #9ca3af !important;
}
.receipt-page__payment-card:hover > .receipt-page__payment-desc {
color: #d1d5db !important;
}
}
/* Animaci�n de entrada para las tarjetas */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.receipt-page__payment-card {
animation: fadeInUp 0.4s ease-out backwards;
}
.receipt-page__payment-card:nth-child(1) { animation-delay: 0.05s; }
.receipt-page__payment-card:nth-child(2) { animation-delay: 0.1s; }
.receipt-page__payment-card:nth-child(3) { animation-delay: 0.15s; }
.receipt-page__payment-card:nth-child(4) { animation-delay: 0.2s; }
/* Columna del Resumen (derecha) */
.receipt-page__summary {
position: sticky;
top: 2rem;
}
.receipt-page__summary-card {
background: var(--card-bg-color);
border-radius: 14px;
box-shadow: 0 2px 12px var(--shadow-color);
padding: 1.5rem;
}
.receipt-page__summary-title {
color: var(--text-color);
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 1rem 0;
}
.receipt-page__summary-event {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem;
margin-bottom: 1rem;
background: var(--primary-background);
border: 1px solid var(--primary-color);
border-radius: 8px;
color: var(--primary-color);
font-weight: 600;
}
.receipt-page__summary-items {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1rem;
}
.receipt-page__summary-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 0.75rem;
background: var(--surface-color);
border-radius: 8px;
}
.receipt-page__summary-item-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.receipt-page__summary-item-name {
color: var(--text-color);
font-weight: 500;
}
.receipt-page__summary-item-qty {
color: var(--text-muted);
font-size: 0.875rem;
}
.receipt-page__summary-item-amount {
color: var(--primary-color);
font-weight: 600;
}
.receipt-page__summary-totals {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-top: 1rem;
border-top: 2px solid var(--divider-color);
}
.receipt-page__summary-row {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--text-muted);
}
.receipt-page__summary-discount {
color: var(--success-color);
}
.receipt-page__summary-total {
font-size: 1.125rem;
font-weight: 700;
color: var(--primary-color);
padding-top: 0.5rem;
border-top: 1px solid var(--divider-color);
}
/* Modal de motor de pago */
.receipt-page__engine-modal {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 1rem;
}
.receipt-page__engine-icon {
display: flex;
justify-content: center;
}
.receipt-page__engine-icon svg {
width: 96px;
height: 64px;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
}
.receipt-page__engine-terms h4 {
color: var(--text-color);
font-size: 1rem;
margin: 0 0 0.75rem 0;
}
.receipt-page__engine-terms-content {
color: var(--text-muted);
line-height: 1.6;
}
.receipt-page__engine-terms-content ul {
margin: 0;
padding-left: 1.5rem;
}
.receipt-page__engine-terms-content li {
margin-bottom: 0.5rem;
}
.receipt-page__engine-amount {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: var(--surface-color);
border-radius: 8px;
font-size: 1.125rem;
}
.receipt-page__engine-amount strong {
color: var(--primary-color);
font-size: 1.25rem;
}
.receipt-page__engine-actions {
display: flex;
gap: 1rem;
justify-content: flex-end;
}
.receipt-page__engine-actions button {
min-width: 120px;
}
/* Alerta de pago pendiente */
.receipt-page__payment-pending-alert {
grid-column: 1 / -1;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 2px solid #f59e0b;
border-radius: 12px;
padding: 1.5rem;
display: flex;
gap: 1rem;
align-items: flex-start;
margin-bottom: 1.5rem;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}
.receipt-page__alert-icon {
width: 32px;
height: 32px;
color: #d97706;
flex-shrink: 0;
}
.receipt-page__alert-content {
flex: 1;
}
.receipt-page__alert-title {
color: #92400e;
font-size: 1.125rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
}
.receipt-page__alert-text {
color: #78350f;
margin: 0 0 0.5rem 0;
line-height: 1.6;
}
.receipt-page__alert-subtext {
color: #92400e;
font-size: 0.875rem;
margin: 0 0 1rem 0;
}
@media (prefers-color-scheme: dark) {
.receipt-page__payment-pending-alert {
background: linear-gradient(135deg, #422006 0%, #78350f 100%);
border-color: #f59e0b;
}
.receipt-page__alert-icon {
color: #fbbf24;
}
.receipt-page__alert-title {
color: #fde68a;
}
.receipt-page__alert-text {
color: #fcd34d;
}
.receipt-page__alert-subtext {
color: #fbbf24;
}
}
/* Responsive */
@media (max-width: 1024px) {
.receipt-page__pending {
grid-template-columns: 1fr;
}
.receipt-page__summary {
position: static;
order: -1; /* Mostrar resumen arriba en m�vil */
}
}
@media (max-width: 640px) {
.receipt-page {
padding: 1rem 0.5rem;
}
.receipt-page__payment-grid {
grid-template-columns: 1fr;
}
.receipt-page__actions {
flex-direction: column;
}
.receipt-page__actions button {
min-width: 100%;
}
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
.receipt-page__payment-card {
background: var(--surface-color-dark);
border-color: var(--divider-color-dark);
}
.receipt-page__payment-card:hover {
border-color: var(--primary-color);
}
}
/* Mensaje de inscripción existente en Register */
.register-already-inscribed {
display: flex;
gap: 0.75rem;
padding: 0.875rem 1rem;
background: var(--info-background);
border: 1px solid var(--info-color);
border-radius: var(--radius-sm);
margin-bottom: 1rem;
}
.register-already-inscribed__icon {
flex-shrink: 0;
width: 1.75rem;
height: 1.75rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--info-color);
color: var(--info-foreground);
border-radius: 50%;
}
.register-already-inscribed__icon svg {
width: 1.125rem;
height: 1.125rem;
}
.register-already-inscribed__content {
flex: 1;
}
.register-already-inscribed__title {
margin: 0 0 0.25rem 0;
font-size: 0.9375rem;
font-weight: 600;
color: var(--info-color);
line-height: 1.3;
}
.register-already-inscribed__message {
margin: 0 0 0.5rem 0;
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.4;
}
.register-already-inscribed__additionals-note {
margin: 0;
padding: 0.5rem 0.625rem;
background: var(--success-background);
border-left: 2px solid var(--success-color);
border-radius: 0.25rem;
color: var(--success-color);
font-weight: 500;
font-size: 0.8125rem;
line-height: 1.4;
}
/* Responsive */
@media (max-width: 640px) {
.register-already-inscribed {
gap: 0.625rem;
padding: 0.75rem 0.875rem;
}
.register-already-inscribed__icon {
width: 1.5rem;
height: 1.5rem;
}
.register-already-inscribed__icon svg {
width: 1rem;
height: 1rem;
}
.register-already-inscribed__title {
font-size: 0.875rem;
}
.register-already-inscribed__message {
font-size: 0.8125rem;
}
.register-already-inscribed__additionals-note {
font-size: 0.75rem;
padding: 0.4375rem 0.5rem;
}
}
/* Event Register - Página de registro de eventos */
.event-register {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
margin: 2rem 0;
width: 100%;
box-sizing: border-box;
}
.event-register__main {
display: flex;
flex-direction: column;
min-width: 0;
background: var(--surface-color);
border-radius: 12px;
box-shadow: var(--shadow-sm);
padding: 2rem 2rem 1.5rem 2rem;
box-sizing: border-box;
gap: 1.5rem;
}
.event-register__summary {
background: var(--card-bg-color);
color: var(--primary-color);
border-radius: 12px;
box-shadow: var(--shadow-sm);
padding: 2rem 1.5rem;
min-width: 250px;
max-width: 400px;
box-sizing: border-box;
align-self: flex-start;
position: sticky;
top: 1rem;
}
.event-register__header {
width: 100%;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0 0.2rem 0;
}
.event-register__title-small {
font-size: 1.18rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 0.05rem;
letter-spacing: 0.01em;
max-width: none;
white-space: normal;
overflow: visible;
text-overflow: unset;
}
.event-register__subtitle-small {
font-size: 0.85rem;
font-weight: 400;
color: var(--text-color);
margin-bottom: 0.05rem;
letter-spacing: 0.01em;
}
.currency-select-mini {
font-size: 0.92rem;
padding: 2px 8px;
border-radius: 4px;
border: 1px solid var(--border-color);
background: var(--surface-alt-color);
min-width: 54px;
max-width: 90px;
margin-left: 1rem;
height: 28px;
color: var(--text-color);
}
.currency-selector-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--surface-alt-color);
border: 1.5px solid var(--primary-color);
border-radius: 10px;
padding: 0.15rem 0.55rem 0.15rem 0.4rem;
margin-left: 1rem;
flex-shrink: 0;
box-shadow: 0 1px 6px rgba(0,0,0,0.07);
transition: border-color 0.2s, box-shadow 0.2s;
}
.currency-selector-wrapper:focus-within {
border-color: var(--accent-color);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 20%, transparent);
}
.currency-selector-wrapper__icon {
width: 18px;
height: 18px;
color: var(--primary-color);
flex-shrink: 0;
stroke: var(--primary-color);
}
.currency-selector-wrapper__inner {
display: flex;
flex-direction: column;
gap: 0;
}
.currency-selector-wrapper__select {
font-size: 0.92rem;
font-weight: 600;
color: var(--text-color);
background: transparent;
border: none;
outline: none;
padding: 0;
cursor: pointer;
min-width: 80px;
appearance: auto;
}
.dashboard {
display: flex;
flex-direction: column;
gap: 2rem;
padding: 2rem;
background: var(--surface-color);
border-radius: 8px;
box-shadow: var(--shadow-md);
}
.dashboard__header {
display: flex;
justify-content: space-between;
align-items: center;
}
.dashboard__title {
font-size: 1.8rem;
font-weight: 700;
color: var(--primary-color);
}
.dashboard__actions {
display: flex;
gap: 1rem;
}
.dashboard__button {
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
font-weight: 500;
color: var(--primary-foreground);
background: var(--primary-color);
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}
.dashboard__button:hover {
background: var(--primary-hover);
}
.dashboard__content {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.dashboard__card {
background: var(--card-bg-color);
border-radius: 8px;
padding: 1.5rem;
box-shadow: var(--shadow-sm);
}
.dashboard__card-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 1rem;
}
.dashboard__card-content {
font-size: 1rem;
color: var(--text-color);
}
.principal-category__fee-badge {
display: inline-block;
background: var(--surface-alt-color);
color: var(--primary-color);
font-size: 0.78rem;
font-weight: 600;
border-radius: 8px;
padding: 1px 8px;
margin-left: 0.5rem;
letter-spacing: 0.02em;
box-shadow: none;
vertical-align: middle;
border: 1px solid var(--primary-color);
}
.principal-category__fee-amount {
font-size: 1.05rem;
font-weight: 700;
color: var(--primary-color);
border-radius: 6px;
padding: 2px 10px;
margin-left: 0.7rem;
letter-spacing: 0.01em;
display: inline-block;
background: none;
box-shadow: none;
}
.principal-category__fee--highlight {
border: 2px solid var(--primary-color);
border-radius: 10px;
box-shadow: var(--shadow-sm);
background: var(--hover-background-color);
padding: 4px 12px;
}
.register-payment-view {
display: flex;
flex-direction: column;
gap: 1.2rem;
padding-bottom: 5rem;
position: relative;
}
.register-payment-summary-mobile {
display: none;
}
.register__terms-block {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-bottom: 0.5em;
background: none;
border: none;
box-shadow: none;
padding: 0;
}
.register__terms-checkbox-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0.8rem;
width: 100%;
margin-bottom: 0;
background: none;
border: none;
box-shadow: none;
padding: 0.5rem 0;
flex-wrap: nowrap;
}
.register__terms-checkbox-large {
appearance: none;
-webkit-appearance: none;
width: 1.8rem !important;
height: 1.8rem !important;
min-width: 1.8rem;
min-height: 1.8rem;
max-width: 1.8rem;
border: 1.5px solid var(--text-color) !important;
border-radius: 6px;
background: var(--surface-color);
cursor: pointer;
margin: 0;
padding: 0;
flex-shrink: 0;
transition:
border-color 0.2s,
background 0.2s,
box-shadow 0.2s;
box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-md);
position: relative;
vertical-align: middle;
display: inline-block;
}
.register__terms-checkbox-large:hover {
border-color: var(--text-color) !important;
box-shadow: 0 0 0 4px var(--focus-ring), var(--shadow-md);
}
.register__terms-checkbox-large:focus-visible {
outline: none;
border-color: var(--text-color) !important;
box-shadow: 0 0 0 4px var(--focus-ring), var(--shadow-md);
}
.register__terms-checkbox-large:checked {
background: var(--primary-color);
border-color: var(--primary-color) !important;
box-shadow: 0 0 0 3px var(--focus-ring), var(--shadow-md);
}
.register__terms-checkbox-large:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0.38rem;
height: 0.7rem;
border: 2.5px solid var(--primary-foreground);
border-top: none;
border-left: none;
transform: translate(-50%, -60%) rotate(45deg);
}
.register__terms-label {
font-size: 1.08rem;
font-weight: 500;
color: var(--primary-color);
vertical-align: middle;
white-space: nowrap;
}
.register__terms-label a {
color: var(--link-color);
text-decoration: underline;
font-weight: 500;
cursor: pointer;
transition: color 0.2s;
}
.register__terms-label a:hover {
color: var(--link-hover-color);
}
.register__back-btn {
position: absolute;
left: 0.5rem;
bottom: 0.5rem;
font-size: 0.92rem;
padding: 0.3rem 1.1rem;
border-radius: 6px;
z-index: 2;
min-width: 90px;
}
.register-payment-card {
max-width: 90%;
min-width: 90%;
margin: 2.5rem auto 0 auto;
background: var(--card-bg-color);
border-radius: 16px;
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
padding: 2rem 2rem 1.5rem 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.2rem;
}
.register-payment-card__content {
width: 100%;
display: flex;
flex-direction: column;
gap: 1.2rem;
align-items: center;
}
.register-payment-card__actions {
width: 100%;
display: flex;
flex-direction: column;
gap: 1.2rem;
align-items: center;
}
.register-payment-card__button {
width: 100%;
max-width: 220px;
margin-top: 0.5rem;
font-size: 1.08rem;
font-weight: 600;
border-radius: 8px;
padding: 0.7rem 0;
}
.register-payment-card__url {
margin-top: 1.2rem;
font-size: 0.98rem;
color: var(--primary-color);
word-break: break-all;
text-align: center;
}
.register-payment-card__message {
margin-top: 1rem;
color: var(--warning-foreground);
font-size: 1.02rem;
text-align: center;
}
.register-payment-card__button-row {
display: flex;
justify-content: center;
width: 100%;
}
.register-payment-back-btn {
position: absolute;
left: 2rem;
bottom: 2rem;
min-width: 70px;
font-size: 0.88rem;
padding: 0.28rem 0.7rem;
border-radius: 7px;
z-index: 10;
}
.register-step-card {
width: 100%;
max-width: 700px;
margin: 0.5rem auto 0 auto;
background: var(--card-bg-color);
border-radius: 16px;
box-shadow: var(--shadow-md);
padding: 2rem 2rem 1.5rem 2rem;
display: flex;
flex-direction: column;
gap: 1.2rem;
align-items: stretch;
}
.register-aditional-categories-row {
width: 100%;
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.app-aditional-category {
width: 100%;
box-sizing: border-box;
margin-bottom: 0.5rem;
border-radius: 12px;
background: var(--card-bg-color);
box-shadow: var(--shadow-sm);
padding: 1.2rem 1.2rem 1rem 1.2rem;
position: relative;
transition: box-shadow 0.2s, border 0.2s;
}
.app-aditional-category--selected {
border: 2.5px solid var(--primary-color);
border-width: 2px;
box-shadow: var(--shadow-md);
}
.app-aditional-category__actions {
display: flex;
align-items: center;
gap: 1.2rem;
margin-top: 0.7rem;
}
.app-aditional-category__qty-btn {
font-size: 1.5rem;
padding: 0.35rem 1.2rem;
border-radius: 8px;
min-width: 44px;
min-height: 44px;
font-weight: 700;
background: var(--secondary-background);
color: var(--primary-color);
border: 2px solid var(--primary-color);
transition: background 0.2s, color 0.2s;
}
.app-aditional-category__qty-btn:active {
background: var(--primary-color);
color: var(--primary-foreground);
}
.app-aditional-category__check {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 1.7rem;
color: var(--primary-color);
background: var(--secondary-background);
border-radius: 50%;
padding: 0.2rem 0.4rem;
box-shadow: var(--shadow-sm);
}
.aditional-category__quantity-btn {
background: var(--surface-color);
border: 2px solid var(--primary-color);
color: var(--primary-color);
border-radius: 50%;
width: 2.6rem;
height: 2.6rem;
font-size: 1.5rem;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
margin: 0 0.15rem;
padding: 0;
}
.aditional-category__quantity-btn:hover:not(:disabled),
.aditional-category__quantity-btn:focus-visible:not(:disabled) {
background: var(--primary-color);
color: var(--primary-foreground);
border-color: var(--primary-color);
}
.aditional-category--selected {
border-color: var(--primary-color);
border-width: 2px;
background: var(--secondary-background);
box-shadow: var(--shadow-md);
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, border-width 0.2s;
}
.aditional-category__selected-mark {
position: absolute;
top: 12px;
right: 18px;
font-size: 2rem;
color: var(--primary-color);
background: var(--surface-color);
border-radius: 50%;
box-shadow: var(--shadow-sm);
padding: 0.15rem 0.4rem;
z-index: 2;
}
.register-step-actions-row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-top: 1rem;
gap: 1rem;
}
.register-step-actions-left, .register-step-actions-right { flex: 1; }
.register-step-actions-right { text-align: right; }
/* Discount section wrapper */
.register-discount-section {
width: 100%;
background: var(--secondary-background);
border: 1px solid var(--primary-color);
border-left: 4px solid var(--primary-color);
border-radius: 12px;
padding: 1.1rem 1.2rem;
box-shadow: 0 0 12px rgba(var(--primary-color-rgb, 99, 102, 241), 0.08);
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.register-discount-section__header {
display: flex;
align-items: center;
gap: 0.5rem;
}
.register-discount-section__icon {
color: var(--primary-color);
flex-shrink: 0;
}
.register-discount-section__title {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-color);
}
/* Discount code block (inside section) */
.register-discount, #divDiscount {
width: 100%;
}
.register-discount__row, #divDiscount .discount-row {
display: flex;
align-items: flex-end;
gap: 0.6rem;
}
.register-discount .app-input-field, #divDiscount .app-input-field {
flex: 1 1 auto;
min-width: 0;
}
.register-discount .app-input__control, #divDiscount .app-input__control {
width: 100%;
height: 42px;
padding: 0.55rem 0.9rem;
border-radius: 8px;
border: 1px solid var(--border-color);
background: var(--surface-color);
color: var(--text-color);
box-shadow: var(--shadow-xs);
}
.register-discount .app-input__control::placeholder, #divDiscount .app-input__control::placeholder {
color: var(--text-muted);
opacity: 1;
}
.register-discount .app-input__control:focus, #divDiscount .app-input__control:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px var(--focus-ring);
}
.register-discount .app-button, #divDiscount .app-button {
height: 42px;
padding: 0 1rem;
border-radius: 8px;
white-space: nowrap;
}
.register-discount__applied, #divDiscount .discount-applied {
margin-top: 0.35rem;
font-size: 0.92rem;
color: var(--success-color);
}
.register-discount__error, #divDiscount .discount-error {
margin-top: 0.35rem;
font-size: 0.92rem;
color: var(--danger-color);
}
.register-discount__benefits {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 0.5rem;
}
.register-discount__benefit-tag {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 600;
background: var(--info-background);
color: var(--info-foreground);
}
.register-buy-for-others {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
padding: 0.6rem 0.8rem;
background: var(--surface-alt-color);
border: 1px dashed var(--primary-color);
border-radius: 8px;
}
.register-buy-for-others__icon {
color: var(--primary-color);
flex-shrink: 0;
}
.register-buy-for-others__text {
font-size: 0.88rem;
color: var(--text-secondary);
}
.register-buy-for-others__link {
font-size: 0.88rem;
font-weight: 600;
color: var(--primary-color);
text-decoration: none;
}
.register-buy-for-others__link:hover {
text-decoration: underline;
}
@media (max-width: 480px) {
.register-discount-section {
padding: 0.9rem;
}
.register-discount__row, #divDiscount .discount-row {
flex-wrap: wrap;
}
.register-discount .app-button, #divDiscount .app-button {
width: 100%;
height: 44px;
}
.register-buy-for-others {
flex-direction: column;
align-items: flex-start;
}
.currency-selector-wrapper__label {
display: none;
}
.currency-selector-wrapper {
padding: 0.3rem 0.5rem;
}
}
@media (max-width: 1024px) {
.event-register {
grid-template-columns: 1fr;
}
.event-register__summary {
width: 100%;
max-width: none;
justify-self: stretch;
margin-top: 1rem;
}
}
@media (max-width: 1024px) {
.register-payment-summary-mobile { display: block; }
:root:has(.register-payment-summary-mobile) .event-register__summary { display: none; }
}
/* Payment styles */
.register-payment-card__button-row {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.register-payment-card__button-row .app-payment-form {
width: 100%;
}
.register-payment-card__alt-row {
margin-top: 8px;
}
.app-payment-form__alt-link {
color: var(--link-color);
text-decoration: underline;
}
.app-payment-form__alt-link:hover {
color: var(--link-hover-color);
}
.register__info-message {
text-align: center;
margin: 0.5rem 0;
font-size: 1rem;
color: var(--text-color);
}
.register-result-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 2rem;
border-radius: 12px;
background: var(--surface-color);
box-shadow: var(--shadow-md);
text-align: center;
max-width: 520px;
margin: 1rem auto;
}
.register-result-card__title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-color);
}
.register-result-card__icon {
width: 84px;
height: 84px;
stroke-width: 2.5;
}
.register-result-card__icon--success {
stroke: var(--success-color);
}
.register-result-card__icon--error {
stroke: var(--danger-color);
}
.register-engine-error {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
margin: .5rem 0;
}
.register-engine-error__icon {
width: 22px;
height: 22px;
stroke: var(--danger-color);
stroke-width: 2.5;
}
.register-payment-card__engine-selector {
display: flex;
gap: .5rem;
flex-wrap: wrap;
justify-content: center;
}
.register-payment-card__alt-row { text-align: center; }
.event-register__header { }
.register-content-card {
width: 100%;
max-width: 580px;
margin: 0.5rem auto 0 auto;
background: var(--card-bg-color);
border-radius: 16px;
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.2rem;
box-sizing: border-box;
}
.register-content-card .register-aditional-categories-row,
.register-content-card .register-fiscal-table-fullwidth,
.register-content-card .fiscal-summary__card {
width: 100%;
}
.event-register__step-container + .register-step-actions-row,
.register-content-card + .register-step-actions-row {
margin-top: 1rem;
}
/* ============================================== */
/* Responsive Breakpoints for register-content-card */
/* ============================================== */
@media (max-width: 419px) {
.register-content-card {
max-width: 100%;
width: 100%;
margin: 0;
padding: 0.875rem;
border-radius: 0.75rem;
gap: 1rem;
}
}
@media (min-width: 420px) and (max-width: 639px) {
.register-content-card {
max-width: 100%;
width: 100%;
padding: 1rem;
gap: 1rem;
}
}
@media (min-width: 640px) and (max-width: 1023px) {
.register-content-card {
max-width: 90%;
padding: 1.25rem;
}
}
@media (min-width: 1024px) {
.register-content-card {
max-width: 680px;
padding: 1.75rem;
}
}
@media (min-width: 1280px) {
.register-content-card {
max-width: 700px;
padding: 2rem;
}
}
/* ============================================== */
/* Fiscal selection hint message */
/* ============================================== */
.register-fiscal-hint {
display: flex;
align-items: flex-start;
gap: 0.75rem;
background: var(--info-background);
border: 1px solid var(--info-color);
border-radius: 10px;
padding: 0.85rem 1rem;
margin-bottom: 0.5rem;
}
.register-fiscal-hint__icon {
width: 22px;
height: 22px;
min-width: 22px;
color: var(--info-foreground);
flex-shrink: 0;
margin-top: 0.1rem;
}
.register-fiscal-hint__text {
color: var(--info-foreground);
font-size: 0.92rem;
line-height: 1.5;
margin: 0;
}
@media (max-width: 640px) {
.register-fiscal-hint {
padding: 0.75rem;
}
}
/* ============================================== */
/* No deseo factura fiscal - Sección y Modal */
/* ============================================== */
.register-no-invoice {
background: var(--warning-background);
border: 2px solid var(--warning-color);
border-radius: 12px;
padding: 1.25rem;
margin-bottom: 1.5rem;
text-align: center;
}
.register-no-invoice__text {
color: var(--warning-foreground);
font-size: 0.95rem;
margin: 0 0 1rem 0;
line-height: 1.5;
}
/* ── Biometric Consent Step ──────────────────────────────────── */
.register-biometric {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
/* Header: icono + título en fila + descripción corta */
.register-biometric__header {
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
.register-biometric__icon {
flex-shrink: 0;
color: var(--accent-color);
margin-top: 0.15rem;
}
.register-biometric__header-text {
flex: 1;
min-width: 0;
}
.register-biometric__header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
flex-wrap: wrap;
}
.register-biometric__title {
font-size: 1rem;
font-weight: 600;
color: var(--primary-foreground);
margin: 0;
}
.register-biometric__description {
font-size: 0.82rem;
color: var(--secondary-foreground);
margin: 0.2rem 0 0 0;
line-height: 1.4;
}
.register-biometric__privacy-link {
font-size: 0.8rem;
white-space: nowrap;
flex-shrink: 0;
}
/* Card horizontal: foto + CTA */
.register-biometric__action-card {
display: flex;
gap: 1.25rem;
align-items: center;
background: var(--surface-alt-color);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 1.1rem 1.25rem;
}
.register-biometric__action-card--loading {
justify-content: center;
flex-direction: column;
padding: 1.5rem;
gap: 0.75rem;
}
/* Columna izquierda: foto circular + badge */
.register-biometric__photo-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.45rem;
flex-shrink: 0;
}
.register-biometric__photo-preview {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
border: 3px solid var(--border-color);
}
/* Columna derecha: texto + botones */
.register-biometric__cta-col {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.register-biometric__cta-title {
font-size: 0.88rem;
font-weight: 500;
color: var(--primary-foreground);
margin: 0;
line-height: 1.35;
}
.register-biometric__cta-btn {
align-self: flex-start;
}
.register-biometric__secondary-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
align-items: center;
}
/* Badge de estado */
.register-biometric__badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.6rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
}
.register-biometric__badge--valid {
background: var(--success-background);
color: var(--success-foreground);
}
.register-biometric__badge--invalid {
background: var(--danger-background);
color: var(--danger-foreground);
}
.register-biometric__reason {
font-size: 0.82rem;
color: var(--danger-foreground);
margin: 0;
}
/* Estado: validando */
.register-biometric__uploading-text {
font-size: 0.88rem;
color: var(--secondary-foreground);
text-align: center;
margin: 0;
}
/* Estado: sin foto — uploader compacto */
.register-biometric__uploader {
max-width: 340px;
margin: 0 auto;
width: 100%;
}
/* Reducir el área de imagen dentro del uploader biométrico */
.register-biometric__uploader .app-user-photo-upload__image {
aspect-ratio: 1 / 1;
max-height: 160px;
}
.register-biometric__uploader .app-user-photo-upload__placeholder svg {
width: 56px;
height: 56px;
}
.register-biometric__uploader .app-user-photo-upload__bottom {
padding: 0.5rem 0.75rem;
gap: 0.4rem;
}
.register-biometric__uploader .app-user-photo-upload__title {
font-size: 0.85rem;
}
.register-biometric__uploader .app-user-photo-upload__hint {
font-size: 0.75rem;
}
/* Mensaje de validación del uploader biométrico: encima del uploader */
.register-biometric__validation-alert {
display: flex;
align-items: flex-start;
gap: 0.55rem;
padding: 0.65rem 0.9rem;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 500;
line-height: 1.4;
max-width: 340px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}
.register-biometric__validation-alert--valid {
background: var(--success-background);
color: var(--success-foreground);
border: 1px solid var(--success-foreground);
}
.register-biometric__validation-alert--invalid {
background: var(--danger-background);
color: var(--danger-foreground);
border: 1px solid var(--danger-foreground);
}
.register-biometric__validation-alert svg {
flex-shrink: 0;
margin-top: 0.1rem;
}
.register-biometric__validation-alert-body {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.register-biometric__validation-alert-title {
font-weight: 700;
font-size: 0.88rem;
}
.register-biometric__validation-alert-reason {
font-size: 0.8rem;
opacity: 0.9;
}
.register-biometric__actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
align-items: center;
}
.register-biometric__actions--decline {
justify-content: flex-end;
}
/* Estado: declinó */
.register-biometric__declined-note {
display: flex;
align-items: flex-start;
gap: 0.6rem;
background: var(--warning-background);
color: var(--warning-foreground);
border-radius: 8px;
padding: 0.75rem 1rem;
font-size: 0.85rem;
line-height: 1.45;
}
.register-biometric__declined-note svg {
flex-shrink: 0;
margin-top: 0.15rem;
}
.register-biometric__declined-body {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.register-biometric__revert-link {
font-size: 0.82rem;
padding: 0;
height: auto;
align-self: flex-start;
}
/* Nota en paso Payment */
.register-biometric__declined-note--payment {
margin-top: 0.75rem;
font-size: 0.8rem;
padding: 0.6rem 0.85rem;
}
@media (max-width: 520px) {
.register-biometric__action-card {
flex-direction: column;
align-items: center;
text-align: center;
}
.register-biometric__cta-col {
align-items: center;
}
.register-biometric__cta-btn {
align-self: stretch;
}
.register-biometric__secondary-actions {
justify-content: center;
}
.register-biometric__header-row {
flex-direction: column;
align-items: flex-start;
}
}
.register-no-invoice__button {
min-width: 220px;
}
.register-no-invoice-confirmed {
display: flex;
align-items: flex-start;
gap: 1rem;
background: var(--info-background);
border: 2px solid var(--info-color);
border-radius: 12px;
padding: 1.25rem;
margin-bottom: 1.5rem;
}
.register-no-invoice-confirmed__icon {
width: 32px;
height: 32px;
color: var(--info-foreground);
flex-shrink: 0;
}
.register-no-invoice-confirmed__content {
flex: 1;
}
.register-no-invoice-confirmed__text {
color: var(--info-foreground);
font-size: 0.95rem;
margin: 0 0 0.75rem 0;
line-height: 1.6;
}
.register-no-invoice-confirmed__text strong {
font-weight: 700;
color: var(--info-foreground);
}
.register-no-invoice-modal {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 1rem;
text-align: center;
}
.register-no-invoice-modal__icon {
width: 64px;
height: 64px;
color: var(--warning-color);
margin-bottom: 0.5rem;
}
.register-no-invoice-modal__text {
color: var(--text-color);
font-size: 1rem;
line-height: 1.6;
margin: 0;
}
.register-no-invoice-modal__text strong {
color: var(--danger-color);
font-weight: 700;
}
.register-no-invoice-modal__question {
color: var(--primary-color);
font-size: 1.05rem;
font-weight: 600;
margin: 0.5rem 0 0 0;
}
@media (max-width: 640px) {
.register-no-invoice,
.register-no-invoice-confirmed {
padding: 1rem;
}
.register-no-invoice__button {
min-width: 100%;
}
.register-no-invoice-modal__icon {
width: 48px;
height: 48px;
}
}
/* ============================================================
Sessions — BEM styles
Solo variables de colors.css, sin colores directos
============================================================ */
/* ================================================================
HEADER estilo magazine
================================================================ */
.app_sessions__header {
background: var(--split-left-bg);
padding: 1.15rem 0;
position: relative;
overflow: hidden;
}
.app_sessions__header::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 50%, var(--primary-color-transparent, rgba(52,152,219,.08)) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, var(--secondary-color-transparent, rgba(155,89,182,.08)) 0%, transparent 50%);
}
.app_sessions__header-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 1;
}
.app_sessions__header-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.25rem;
}
.app_sessions__header-icon {
width: 50px;
height: 50px;
background: rgba(255,255,255,.1);
backdrop-filter: blur(10px);
border-radius: 50%;
border: 2px solid rgba(255,255,255,.2);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.app_sessions__header-icon svg {
width: 26px;
height: 26px;
stroke: var(--text-light);
}
.app_sessions__header-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-light);
margin: 0 0 0.15rem 0;
line-height: 1.2;
letter-spacing: -.3px;
}
.app_sessions__header-subtitle {
font-size: .9rem !important;
font-weight: 400;
color: var(--text-light) !important;
font-style: italic;
margin: 0;
letter-spacing: .2px;
}
/* ================================================================
BODY
================================================================ */
.app_sessions__body {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1.5rem;
width: 100%;
}
/* ================================================================
MAIN TABS (Próximos / Pasados)
================================================================ */
.app_sessions__main-tabs {
margin-bottom: 1.25rem;
}
/* ================================================================
FILTROS MES / AÑO
================================================================ */
.app_sessions__filters {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.app_sessions__filter-select {
min-width: 160px;
flex: 1 1 160px;
max-width: 220px;
}
/* ================================================================
YEAR SECTION
================================================================ */
.app_sessions__year-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.app_sessions__year-badge {
background: var(--accent-dark);
color: var(--primary-foreground);
font-weight: 700;
font-size: 1rem;
padding: .25rem .9rem;
border-radius: 999px;
white-space: nowrap;
}
.app_sessions__year-divider {
flex: 1;
height: 2px;
background: linear-gradient(90deg, var(--accent-color), transparent);
}
/* ================================================================
GRID
================================================================ */
.app_sessions__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.5rem;
}
/* ================================================================
TARJETA DE SESION
================================================================ */
.app_session-card {
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border-color);
display: flex;
flex-direction: column;
transition: box-shadow .2s, transform .2s;
padding: 0 !important;
}
.app_session-card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,.12);
transform: translateY(-2px);
}
.app_session-card--finished {
border-color: var(--border-light);
opacity: .82;
}
.app_session-card__header {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
padding: 1.1rem 1.25rem;
}
.app_session-card--finished .app_session-card__header {
background: var(--app-sidebar-border);
}
.app_session-card__date {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.3rem .6rem;
background: rgba(255, 255, 255, 0.2);
color: var(--text-light);
backdrop-filter: blur(10px);
border-radius: 20px;
font-size: 0.775rem;
font-weight: 700;
margin-bottom: 1rem;
}
.app_session-card--finished .app_session-card__date {
color: var(--text-muted);
}
.app_session-card__date svg {
width: 14px;
height: 14px;
flex-shrink: 0;
stroke: rgba(255,255,255,.85);
}
.app_session-card--finished .app_session-card__date svg {
stroke: var(--text-muted);
}
.app_session-card__theme {
font-size: 1.375rem;
font-weight: 700;
color: var(--text-light);
margin: 0;
line-height: 1.3;
}
.app_session-card--finished .app_session-card__theme {
color: var(--text-color);
}
.app_session-card__body {
padding: 1rem 1.25rem;
flex: 1;
display: flex;
flex-direction: column;
gap: .75rem;
}
.app_session-card__person {
display: flex;
flex-direction: column;
gap: .3rem;
}
.app_session-card__person-label {
display: flex;
align-items: center;
gap: .35rem;
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: var(--accent-dark);
}
.app_session-card__person-label svg {
width: 15px;
height: 15px;
stroke: var(--accent-dark);
flex-shrink: 0;
}
.app_session-card__person-name {
font-size: .92rem;
font-weight: 700;
color: var(--text-color);
}
.app_session-card__person-details {
display: flex;
flex-direction: column;
gap: .15rem;
}
.app_session-card__person-item {
display: flex;
align-items: center;
gap: .35rem;
font-size: .78rem;
font-weight: 600;
color: var(--text-muted);
}
.app_session-card__person-item svg {
width: 14px;
height: 13px;
stroke: var(--accent-dark);
flex-shrink: 0;
}
.app_session-card__divider {
height: 1px;
background: var(--border-color);
}
.app-card-footer {
padding: .85rem 1.25rem;
border-top: 1px solid var(--border-color);
}
.app_session-card__btn {
width: 100%;
}
.app_session-card__btn--enrolled {
background: var(--success-background) !important;
color: var(--success-color) !important;
border-color: var(--success-color) !important;
}
.app_session-card__btn--finished {
cursor: default;
color: var(--text-muted) !important;
}
/* ================================================================
EMPTY STATE
================================================================ */
.app_sessions__empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 4rem 2rem;
text-align: center;
}
.app_sessions__empty-icon {
font-size: 3rem;
}
.app_sessions__empty-text {
color: var(--text-muted);
font-size: .95rem;
}
.app_sessions__clear-btn {
height: 45px;
align-self: stretch;
/*border: 1px solid var(--border-color);*/
border-radius: 8px;
font-size: 0.875rem;
/*background: transparent;*/
/*color: var(--text-muted);*/
padding: 0 1rem;
margin-top: 1px;
white-space: nowrap;
flex-shrink: 0;
}
.app_sessions__clear-btn:hover {
border-color: var(--accent-color) !important;
color: var(--accent-color) !important;
background: transparent !important;
}
/* ================================================================
SESSION REGISTER
================================================================ */
.session-register {
max-width: 700px;
margin: 2.5rem auto;
padding: 0 1.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.session-register__back-btn {
align-self: flex-start;
}
.session-register__summary {
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 12px;
overflow: hidden;
}
.session-register__summary-header {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
padding: 1rem 1.25rem;
}
.session-register__summary-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--text-light);
margin: 0 0 .2rem 0;
}
.session-register__summary-date {
font-size: .8rem;
color: rgba(255,255,255,.8);
margin: 0;
}
.session-register__summary-body {
padding: 1rem 1.25rem;
display: flex;
flex-direction: column;
gap: .5rem;
}
.session-register__summary-row {
display: flex;
flex-direction: column;
}
.session-register__summary-label {
font-size: .7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--primary-color);
}
.session-register__summary-value {
font-size: .9rem;
color: var(--text-color);
}
.session-register__panel {
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.session-register__field-group {
display: flex;
flex-direction: column;
gap: .35rem;
}
.session-register__label {
font-size: .82rem;
font-weight: 600;
color: var(--text-color);
}
.session-register__input {
padding: .6rem .9rem;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--background-color);
color: var(--text-color);
font-size: .9rem;
outline: none;
transition: border-color .2s;
}
.session-register__input:focus {
border-color: var(--primary-color);
}
.session-register__error {
color: var(--error-color);
font-size: .82rem;
}
.session-register__actions {
display: flex;
gap: .75rem;
flex-wrap: wrap;
}
.session-register__result {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 2rem;
text-align: center;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 12px;
}
.session-register__result-icon {
font-size: 3rem;
}
.session-register__result-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--text-color);
margin: 0;
}
.session-register__result-subtitle {
font-size: .9rem;
color: var(--text-muted);
margin: 0;
}
.session-register__result-code {
background: var(--success-background);
color: var(--success-color);
border: 1px solid var(--success-color);
border-radius: 8px;
padding: .75rem 2rem;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 2px;
}
/* ================================================================
RESPONSIVE
================================================================ */
@media (max-width: 768px) {
.app_sessions__body {
padding: 0 1rem;
}
.app_sessions__grid {
grid-template-columns: 1fr;
}
.session-register {
margin: 1.5rem auto;
}
}
.society-events {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1rem 3rem;
color: var(--text-color);
}
.society-events__header { margin-bottom: 1.25rem; }
.society-events__eyebrow {
color: var(--accent-color) !important;
font-size: .8rem !important;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
margin: 0;
}
.society-events__title { margin: .25rem 0; color: var(--text-color); }
.society-events__subtitle { margin: 0; color: var(--text-muted); }
.society-events__filters { display: grid; grid-template-columns: minmax(18rem, 2fr) minmax(12rem, 1fr) minmax(10rem, .8fr) auto; gap: 1rem; align-items: end; padding: 1.25rem; margin-bottom: 1.5rem; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: .75rem; box-shadow: var(--shadow-sm); }
.society-events__filter { min-width: 0; }
.society-events__filter label { display: block; margin-bottom: .35rem; color: var(--text-secondary); font-size: .8rem; font-weight: 600; }
/* AppInputField/AppSelect traen su propio margin-bottom (pensado para formularios apilados);
aquí el gap del grid ya da el espaciado, así que se anula para que el borde inferior visible
del control quede al ras del borde de su celda, igual que los botones. */
.society-events__filter .app-input-field,
.society-events__filter .app-select { margin-bottom: 0; }
.society-events__filter-actions { display: flex; flex-direction: column; }
.society-events__filter-actions-spacer { display: block; margin-bottom: .35rem; font-size: .8rem; font-weight: 600; visibility: hidden; }
.society-events__filter-actions-buttons { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.society-events__filter-actions-buttons .app-button { min-height: 44px; }
.society-events__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem; }
.society-events__card { display: flex; flex-direction: column; overflow: hidden; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: .75rem; box-shadow: var(--shadow-sm); }
.society-events__image { width: 100%; height: 170px; object-fit: cover; background: var(--background-color); }
.society-events__image--placeholder { display: grid; place-items: center; color: var(--text-muted); font-size: .85rem; }
.society-events__body { display: flex; flex: 1; flex-direction: column; gap: .55rem; padding: 1rem; }
.society-events__name { margin: 0; color: var(--text-color); font-size: 1.1rem; }
.society-events__date, .society-events__venue { margin: 0; color: var(--text-muted); font-size: .9rem; }
.society-events__action { margin-top: auto; align-self: flex-start; }
.society-events__message { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 12rem; color: var(--text-muted); text-align: center; }
.society-events__message--error { color: var(--danger-color); }
.society-events__pagination { display: flex; justify-content: center; margin-top: 1.5rem; }
@media (max-width: 900px) { .society-events__filters { grid-template-columns: minmax(0, 1fr) minmax(10rem, 1fr); } .society-events__filter--search, .society-events__filter-actions { grid-column: 1 / -1; } .society-events__filter-actions-spacer { display: none; } }
@media (max-width: 520px) { .society-events { padding: 1.25rem .75rem 2rem; } .society-events__filters { grid-template-columns: 1fr; } .society-events__filter--search, .society-events__filter-actions { grid-column: auto; } .society-events__filter-actions-buttons { justify-content: stretch; } .society-events__filter-actions-buttons > * { flex: 1; } }
/* ========================================================================
PERFIL DE USUARIO - Dise�o Personalizado (BEM)
Clase base: .app-user-profile-custom-sociey
======================================================================== */
/* Contenedor principal */
.app-user-profile-custom-sociey {
max-width: 100%;
margin: 0 auto;
padding: 2rem 1rem;
}
/* Layout 2 columnas: Sidebar + Content */
.app-user-profile-custom-sociey__layout {
display: grid;
grid-template-columns: 350px 1fr;
gap: 2rem;
align-items: start;
}
/* ========================================================================
SIDEBAR - Panel de Foto
======================================================================== */
.app-user-profile-custom-sociey__sidebar {
position: sticky;
top: 2rem;
}
.app-user-profile-custom-sociey__photo-card {
background: rgba(0, 26, 51, 0.25);
border: 2px dashed var(--primary-light);
border-radius: 16px;
padding: 2rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
text-align: center;
backdrop-filter: blur(8px);
}
.app-user-profile-custom-sociey__photo-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-color);
margin: 0 0 1.5rem;
}
/* �rea de la foto */
.app-user-profile-custom-sociey__photo-wrapper {
width: 200px;
height: 200px;
margin: 0 auto 1.5rem;
border-radius: 12px;
overflow: hidden;
border: 3px solid var(--border-color);
background: var(--background-color);
position: relative;
}
.app-user-profile-custom-sociey__photo-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
.app-user-profile-custom-sociey__photo-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
color: var(--text-light);
font-size: 4rem;
font-weight: 700;
}
/* Botones de acci�n de foto */
.app-user-profile-custom-sociey__photo-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.app-user-profile-custom-sociey__photo-btn svg {
width: 18px;
height: 18px;
}
/* Info de formato */
.app-user-profile-custom-sociey__photo-info {
padding: 1rem;
background: rgba(255, 179, 0, 0.11);
border-radius: 8px;
border: 1px dashed var(--warning-color);
margin-bottom: 1rem;
}
.app-user-profile-custom-sociey__photo-info-text {
font-size: 0.8125rem;
color: var(--warning-color);
line-height: 1.5;
margin: 0;
}
/* Aviso de privacidad */
.app-user-profile-custom-sociey__privacy {
font-size: 0.75rem;
color: var(--text-muted);
line-height: 1.5;
text-align: center;
padding-top: 1rem;
border-top: 1px solid var(--border-color);
margin: 0;
}
.app-user-profile-custom-sociey__privacy-link {
color: var(--accent-color);
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.app-user-profile-custom-sociey__privacy-link:hover {
color: var(--secondary-dark);
text-decoration: underline;
}
/* ========================================================================
CONTENT AREA - Tabs + Forms
======================================================================== */
.app-user-profile-custom-sociey__content {
border-radius: 16px;
overflow: visible;
}
/* Tabs Navigation */
.app-user-profile-custom-sociey__tabs {
display: flex;
border-bottom: 2px solid var(--border-color);
background: var(--background-color);
}
.app-user-profile-custom-sociey__tab {
flex: 1;
padding: 1.25rem 1.5rem;
background: transparent;
border: none;
border-bottom: 3px solid transparent;
color: var(--text-muted);
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.app-user-profile-custom-sociey__tab:hover {
color: var(--accent-color);
background: var(--surface-color);
}
.app-user-profile-custom-sociey__tab--active {
color: var(--accent-color);
border-bottom-color: var(--accent-color);
background: var(--surface-color);
}
/* Tab Content */
.app-user-profile-custom-sociey__tab-content {
display: none;
padding: 2.5rem;
}
.app-user-profile-custom-sociey__tab-content--active {
display: block;
animation: fadeInProfile 0.3s ease;
}
@keyframes fadeInProfile {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Form Grid */
.app-user-profile-custom-sociey__form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.app-user-profile-custom-sociey__form-grid--single {
grid-template-columns: 1fr;
}
.app-user-profile-custom-sociey__form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.app-user-profile-custom-sociey__form-group--full {
grid-column: 1 / -1;
}
.app-user-profile-custom-sociey__form-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-color);
}
.app-user-profile-custom-sociey__form-input {
padding: 0.875rem 1rem;
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: 10px;
font-size: 0.9375rem;
color: var(--text-color);
transition: all 0.3s ease;
}
.app-user-profile-custom-sociey__form-input:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(0, 152, 255, 0.1);
background: var(--surface-color);
}
.app-user-profile-custom-sociey__form-input:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* Texto de solo lectura */
.app-user-profile-custom-sociey__form-text {
padding: 0.875rem 1rem;
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: 10px;
font-size: 0.9375rem;
color: var(--text-color);
}
/* Botones del formulario */
.app-user-profile-custom-sociey__form-actions {
margin-top: 2rem;
display: flex;
gap: 1rem;
justify-content: flex-end;
}
.app-user-profile-custom-sociey__form-btn {
padding: 0.875rem 2rem;
border: none;
border-radius: 10px;
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.app-user-profile-custom-sociey__form-btn--primary {
background: var(--accent-color);
color: var(--text-light);
}
.app-user-profile-custom-sociey__form-btn--primary:hover {
background: var(--secondary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.app-user-profile-custom-sociey__form-btn--secondary {
background: transparent;
color: var(--text-muted);
border: 2px solid var(--border-color);
}
.app-user-profile-custom-sociey__form-btn--secondary:hover {
border-color: var(--accent-color);
color: var(--accent-color);
}
/* ========================================================================
RESPONSIVE
======================================================================== */
@media (max-width: 1024px) {
.app-user-profile-custom-sociey__layout {
grid-template-columns: 1fr;
}
.app-user-profile-custom-sociey__sidebar {
position: static;
}
.app-user-profile-custom-sociey__form-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.app-user-profile-custom-sociey {
padding: 1rem;
}
.app-user-profile-custom-sociey__photo-card {
padding: 1.5rem;
}
.app-user-profile-custom-sociey__photo-wrapper {
width: 160px;
height: 160px;
}
.app-user-profile-custom-sociey__photo-placeholder {
font-size: 3rem;
}
.app-user-profile-custom-sociey__tabs {
flex-direction: column;
}
.app-user-profile-custom-sociey__tab {
border-bottom: 1px solid var(--border-color);
border-left: 3px solid transparent;
}
.app-user-profile-custom-sociey__tab--active {
border-bottom-color: var(--border-color);
border-left-color: var(--accent-color);
}
.app-user-profile-custom-sociey__tab-content {
padding: 1.5rem;
}
.app-user-profile-custom-sociey__form-actions {
flex-direction: column;
}
.app-user-profile-custom-sociey__form-btn {
width: 100%;
}
}
/* Input file oculto */
.app-user-profile-custom-sociey__photo-input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
/* Estado dragover del bot�n */
.app-user-profile-custom-sociey__photo-btn--dragover {
opacity: 0.8;
transform: scale(1.02);
box-shadow: 0 0 0 3px rgba(0, 152, 255, 0.3);
}
/* Desactivar overlay del input cuando se usa personalizado */
.app-user-profile-custom-sociey__photo-upload .app-user-photo-upload__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
pointer-events: none;
z-index: -1;
}
/* ========================================================================
PERSONALIZACI�N DE APPTABS PARA PERFIL
======================================================================== */
/* Tabs como pesta�as arriba */
.app-user-profile-custom-sociey__tabs-custom .app-tabs__list {
display: flex;
gap: 0;
border-bottom: 2px solid var(--border-color);
background: var(--background-color);
padding: 0;
}
.app-user-profile-custom-sociey__tabs-custom .app-tabs__tab {
flex: 1;
padding: 1rem 1.5rem;
background: transparent;
border: none;
color: var(--text-muted);
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 0;
}
.app-user-profile-custom-sociey__tabs-custom .app-tabs__tab:hover {
color: var(--text-color);
background: rgba(0, 152, 255, 0.05);
}
.app-user-profile-custom-sociey__tabs-custom .app-tabs__tab.is-active {
color: var(--accent-color);
background: var(--surface-color);
border-bottom: 3px solid var(--accent-color);
}
/* Contenido de los tabs */
/* Campos m�s planos (sin cards oscuros) */
.app-user-profile-custom-sociey__form-text {
padding: 0.875rem 1rem;
background: transparent;
border: 1px solid var(--border-color);
border-radius: 10px;
font-size: 0.9375rem;
color: var(--text-color);
}
/* ========================================================================
RESPONSIVE MOBILE - Ajustes para pantallas peque�as
======================================================================== */
@media (max-width: 767px) {
/* Card con m�s padding */
.app-user-profile-custom-sociey__photo-card {
padding: 1.5rem;
}
/* Foto m�s peque�a */
.app-user-profile-custom-sociey__photo-wrapper {
max-width: 180px;
}
/* Botones lado a lado en mobile */
.app-user-profile-custom-sociey__photo-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin-bottom: 1rem;
}
.app-user-profile-custom-sociey__photo-btn {
padding: 0.75rem 1rem;
font-size: 0.875rem;
}
/* SVG m�s peque�o en botones */
.app-user-profile-custom-sociey__photo-btn svg {
width: 16px;
height: 16px;
}
/* Info de formatos con m�s padding */
.app-user-profile-custom-sociey__photo-info {
padding: 0.875rem;
margin-bottom: 1rem;
}
.app-user-profile-custom-sociey__photo-info-text {
font-size: 0.75rem;
}
/* Privacidad con m�s espacio */
.app-user-profile-custom-sociey__privacy {
padding-top: 1rem;
font-size: 0.6875rem;
}
}
/* Ajustes espec�ficos para pantallas muy peque�as */
@media (max-width: 360px) {
.app-user-profile-custom-sociey__photo-card {
padding: 1rem;
}
.app-user-profile-custom-sociey__photo-wrapper {
max-width: 150px;
}
.app-user-profile-custom-sociey__photo-btn {
font-size: 0.8125rem;
padding: 0.625rem 0.75rem;
}
}
/* Webhook Admin Page Styles - Compatible con WASM/MAUI */
.webhook-page {
padding: 2rem;
max-width: 800px;
margin: 0 auto;
}
.webhook-page__header {
margin-bottom: 2rem;
}
.webhook-page__title {
color: var(--text-color);
font-size: 1.75rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
}
.webhook-page__subtitle {
color: var(--text-muted);
font-size: 0.875rem;
margin: 0;
line-height: 1.6;
}
/* Alertas */
.webhook-page__alert {
padding: 1rem 1.25rem;
border-radius: 8px;
margin-bottom: 1.5rem;
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.webhook-page__alert--error {
background: var(--danger-background);
border: 1px solid var(--danger-color);
color: var(--danger-color);
}
.webhook-page__alert--success {
background: var(--success-background);
border: 1px solid var(--success-color);
color: var(--success-color);
}
.webhook-page__alert--warning {
background: var(--warning-background);
border: 1px solid var(--warning-color);
color: var(--warning-color);
}
.webhook-page__alert-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
}
.webhook-page__alert-text {
flex: 1;
margin: 0;
line-height: 1.5;
}
/* Formulario */
.webhook-form {
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 2rem;
box-shadow: var(--shadow-sm);
}
.webhook-form__section {
margin-bottom: 2rem;
}
.webhook-form__section:last-child {
margin-bottom: 0;
}
.webhook-form__section-title {
color: var(--text-color);
font-size: 1rem;
font-weight: 600;
margin: 0 0 1rem 0;
}
.webhook-form__section-description {
color: var(--text-muted);
font-size: 0.875rem;
margin: 0 0 1rem 0;
line-height: 1.5;
}
.webhook-form__section-description code {
background: var(--secondary-background);
color: var(--primary-color);
padding: 0.125rem 0.375rem;
border-radius: 4px;
font-size: 0.8125rem;
font-family: 'Courier New', monospace;
}
/* Campo de input */
.webhook-form__field {
margin-bottom: 1.5rem;
}
.webhook-form__label {
display: block;
color: var(--text-color);
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.5rem;
}
.webhook-form__label-required {
color: var(--danger-color);
margin-left: 0.25rem;
}
.webhook-form__input {
width: 100%;
padding: 0.75rem 1rem;
font-size: 0.875rem;
color: var(--text-color);
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: 8px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.webhook-form__input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px var(--focus-ring);
}
.webhook-form__input::placeholder {
color: var(--text-muted);
}
.webhook-form__input--error {
border-color: var(--danger-color);
}
.webhook-form__hint {
color: var(--text-muted);
font-size: 0.75rem;
margin-top: 0.5rem;
display: block;
}
/* Checkboxes */
.webhook-form__checkbox-group {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.webhook-form__checkbox-group-title {
color: var(--text-color);
font-size: 0.9375rem;
font-weight: 600;
margin: 1.5rem 0 0.75rem 0;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-light);
}
.webhook-form__checkbox-group-title:first-child {
margin-top: 0;
}
.webhook-form__checkbox-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.webhook-form__checkbox {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--primary-color);
}
.webhook-form__checkbox-label {
color: var(--text-color);
font-size: 0.875rem;
cursor: pointer;
user-select: none;
}
.webhook-form__checkbox-description {
color: var(--text-muted);
font-size: 0.75rem;
margin-left: 1.75rem;
}
/* Botones */
.webhook-form__actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.webhook-form__button {
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
font-weight: 500;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s, transform 0.1s;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.webhook-form__button:hover:not(:disabled) {
transform: translateY(-1px);
}
.webhook-form__button:active:not(:disabled) {
transform: translateY(0);
}
.webhook-form__button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.webhook-form__button--primary {
background: var(--primary-color);
color: var(--primary-foreground);
}
.webhook-form__button--primary:hover:not(:disabled) {
background: var(--primary-hover);
}
.webhook-form__button--secondary {
background: var(--secondary-background);
color: var(--text-color);
border: 1px solid var(--border-color);
}
.webhook-form__button--secondary:hover:not(:disabled) {
background: var(--hover-background-color);
}
.webhook-form__button-icon {
width: 16px;
height: 16px;
}
/* Spinner de carga */
.webhook-form__spinner {
border: 2px solid var(--border-color);
border-top-color: var(--primary-foreground);
border-radius: 50%;
width: 16px;
height: 16px;
animation: spin 0.6s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Resultado */
.webhook-result {
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 1.5rem;
margin-top: 1.5rem;
}
.webhook-result__title {
color: var(--text-color);
font-size: 1rem;
font-weight: 600;
margin: 0 0 1rem 0;
}
.webhook-result__row {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 0.75rem 0;
border-bottom: 1px solid var(--border-light);
gap: 1rem;
}
.webhook-result__row:last-child {
border-bottom: none;
}
.webhook-result__label {
color: var(--text-muted);
font-size: 0.875rem;
font-weight: 500;
flex-shrink: 0;
}
.webhook-result__value {
color: var(--text-color);
font-size: 0.875rem;
font-family: 'Courier New', monospace;
word-break: break-all;
text-align: right;
}
.webhook-result__value--verified {
color: var(--success-color);
}
.webhook-result__value--unverified {
color: var(--warning-color);
}
.webhook-result__events {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: flex-end;
}
.webhook-result__event-badge {
background: var(--primary-color);
color: var(--primary-foreground);
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
}
/* Responsive */
@media (max-width: 640px) {
.webhook-page {
padding: 1rem;
}
.webhook-form {
padding: 1.5rem;
}
.webhook-form__actions {
flex-direction: column;
}
.webhook-form__button {
width: 100%;
justify-content: center;
}
.webhook-result__row {
flex-direction: column;
gap: 0.5rem;
}
.webhook-result__value {
text-align: left;
}
.webhook-result__events {
justify-content: flex-start;
}
}
/* ========================================================================
UNAUTHORIZED (401) PAGE - Acceso solo para la comunidad
Usa exclusivamente las variables de color/sombra/tipografía del proyecto
(wwwroot/css/base/colors.css, typography.css) para heredar tema claro/oscuro.
======================================================================== */
.unauthorized {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 32px;
background: var(--background-color);
background-image: radial-gradient(circle at 1px 1px, var(--texture-dot-color) 1px, transparent 0);
background-size: 26px 26px;
}
.unauthorized__shell {
max-width: 880px;
width: 100%;
text-align: center;
}
/* Anillo con el ícono de escudo */
.unauthorized__icon-ring {
width: 96px;
height: 96px;
border-radius: 28px;
margin: 0 auto 30px;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-foreground);
box-shadow: var(--shadow-xl);
position: relative;
}
.unauthorized__icon-ring::before {
content: '';
position: absolute;
inset: -10px;
border-radius: 34px;
border: 1.5px dashed var(--border-color);
}
.unauthorized__icon-ring svg {
width: 42px;
height: 42px;
}
/* Chip "Error 401 · No autorizado" */
.unauthorized__badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.74rem !important;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--danger-color) !important;
background: color-mix(in srgb, var(--danger-color) 9%, transparent);
padding: 6px 15px;
border-radius: 20px;
margin-bottom: 20px;
}
.unauthorized__badge svg {
width: 14px;
height: 14px;
}
.unauthorized__title {
font-weight: 800;
font-size: clamp(2rem, 4vw, 2.8rem);
color: var(--primary-color);
letter-spacing: -0.02em;
margin-bottom: 0;
}
.unauthorized__text {
color: var(--text-secondary);
font-size: 1.08rem;
max-width: 560px;
margin: 18px auto 0;
line-height: 1.7;
}
/* Nota "sesión iniciada como X" + cambiar de cuenta (usuario logueado sin membresía) */
.unauthorized__session-note {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
color: var(--text-muted);
font-size: 0.9rem;
margin: 10px auto 0;
}
/* Dos rutas de acceso lado a lado */
.unauthorized__options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 48px;
text-align: left;
}
/* Solo queda la tarjeta de membresía (ya inició sesión, le falta ser socio) */
.unauthorized__options--single {
grid-template-columns: 1fr;
max-width: 420px;
margin-left: auto;
margin-right: auto;
}
.unauthorized-card {
background: var(--surface-color);
border: 1.5px solid var(--border-color);
border-radius: 24px;
padding: 34px 30px;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.unauthorized-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
.unauthorized-card--accent {
border-color: var(--accent-color);
background: linear-gradient(160deg, color-mix(in srgb, var(--accent-color) 7%, transparent), var(--surface-color) 60%);
}
.unauthorized-card__tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.68rem !important;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent-color) !important;
background: color-mix(in srgb, var(--accent-color) 8%, transparent);
padding: 5px 12px;
border-radius: 20px;
margin-bottom: 18px;
}
.unauthorized-card__tag svg {
width: 14px;
height: 14px;
}
.unauthorized-card__icon {
width: 54px;
height: 54px;
border-radius: 16px;
background: var(--gradient-primary);
color: var(--primary-foreground);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.unauthorized-card__icon svg {
width: 25px;
height: 25px;
}
.unauthorized-card__icon--outline {
background: var(--surface-alt-color);
color: var(--primary-color);
border: 1px solid var(--border-color);
}
.unauthorized-card__title {
font-family: 'Outfit', 'Segoe UI', 'Roboto', Arial, sans-serif;
font-weight: 800;
font-size: 1.2rem;
color: var(--primary-color);
margin-bottom: 10px;
}
.unauthorized-card__text {
font-size: 0.9rem;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 22px;
}
.unauthorized-card__button {
width: 100%;
}
/* El <svg> del ícono no trae width/height propios: sin esta regla, el
reset global (max-width:100% sin height) lo deja con su tamaño
intrínseco por defecto y el overflow:hidden del botón lo recorta. */
.unauthorized-card__button svg {
width: 18px;
height: 18px;
}
/* Enlaces de ayuda (volver al inicio / teléfono) */
.unauthorized__help {
margin-top: 44px;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
}
.unauthorized__help-button {
border-radius: 20px;
padding: 10px 18px;
}
.unauthorized__help-button svg {
width: 15px;
height: 15px;
}
@media (max-width: 720px) {
.unauthorized__options {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.unauthorized {
padding: 40px 20px;
}
.unauthorized-card {
padding: 26px 22px;
}
}
/* ========================================================================
NOT FOUND (404) PAGE - Diseño moderno y adaptable
======================================================================== */
.not-found {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
background: linear-gradient(135deg, var(--background, #f5f7fa) 0%, var(--background-secondary, #e8ecf1) 100%);
}
.not-found__card {
background: var(--surface-color, #ffffff);
border-radius: 1.5rem;
box-shadow: 0 8px 32px var(--shadow-color, rgba(0, 0, 0, 0.1));
padding: 3rem 2rem;
max-width: 500px;
width: 100%;
text-align: center;
border: 1px solid var(--border-color, #e0e0e0);
}
/* Logo */
.not-found__logo-container {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1.5rem;
opacity: 0.85;
}
.not-found__logo {
max-width: 80px;
height: auto;
object-fit: contain;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}
/* Icono 404 */
.not-found__icon {
display: flex;
justify-content: center;
margin-bottom: 1.5rem;
}
.not-found__icon svg {
filter: drop-shadow(0 4px 8px rgba(229, 57, 53, 0.2));
}
/* Título */
.not-found__title {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-color, #1a1a1a);
margin: 0 0 0.5rem 0;
letter-spacing: -0.02em;
}
/* Nombre de la sociedad */
.not-found__society {
font-size: 0.85rem;
color: var(--text-muted, #6c757d);
font-weight: 500;
margin: 0 0 1.5rem 0;
padding: 0;
background: transparent;
display: block;
}
/* Mensaje */
.not-found__message {
font-size: 1rem;
color: var(--text-muted, #6c757d);
line-height: 1.6;
margin: 0 0 2rem 0;
}
/* Botón */
.not-found__button {
min-width: 200px;
margin-top: 0.5rem;
}
/* ========================================================================
RESPONSIVE
======================================================================== */
@media (max-width: 768px) {
.not-found {
padding: 1.5rem 1rem;
}
.not-found__card {
padding: 2rem 1.5rem;
}
.not-found__logo {
max-width: 70px;
}
.not-found__icon svg {
width: 90px;
height: 90px;
}
.not-found__title {
font-size: 1.5rem;
}
.not-found__society {
font-size: 0.8rem;
}
.not-found__message {
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.not-found__card {
padding: 1.5rem 1rem;
}
.not-found__logo {
max-width: 60px;
}
.not-found__icon svg {
width: 80px;
height: 80px;
}
.not-found__title {
font-size: 1.35rem;
}
.not-found__society {
font-size: 0.75rem;
font-weight: bolder !important;
}
.not-found__message {
font-size: 0.9rem;
}
.not-found__button {
min-width: 100%;
}
}
/* Directory Styles - Redesign 2026 */
.app-directory {
width: 100%;
max-width: 80%;
margin: 0 auto;
padding: 0 1.5rem;
min-height: 100vh;
}
.app-directory__error {
text-align: center;
padding: 4rem 2rem;
color: var(--danger-color, #dc3545);
font-size: 1.125rem;
font-weight: 500;
}
/* ========== HEADER COMPACTO ========== */
.app-directory__header {
padding: 0 2rem;
}
/* ========== CONTENEDOR ========== */
.app-directory__container {
width: 100%;
}
/* ========== TARJETAS DE MIEMBROS ==========
Mismo diseño para las tres categorías (Mesa Directiva, Fundadores,
Expresidentes). La única diferencia posible es un miembro "destacado"
(presidente/a) en Mesa Directiva, vía .app-board-card--featured. */
.app-board {
display: flex;
flex-direction: column;
align-items: center;
gap: 3rem;
width: 100%;
margin-bottom: 3rem;
}
.app-board__featured {
display: flex;
justify-content: center;
width: 100%;
}
.app-board-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
text-align: center;
width: 100%;
}
.app-board-card--featured {
max-width: 280px;
}
/* Foto retrato (no circular) — misma forma/tamaño para todos los miembros */
.app-board-card__photo {
position: relative;
width: 100%;
aspect-ratio: 3 / 4;
border-radius: 1.25rem;
overflow: hidden;
background: var(--surface-alt-color);
box-shadow: var(--shadow-sm);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.app-board-card:hover .app-board-card__photo {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.app-board-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: inherit;
transition: transform 0.3s ease;
}
.app-board-card:hover .app-board-card__photo img {
transform: scale(1.04);
}
.app-board-card__photo--placeholder {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--secondary-background, #edf0f5) 0%, var(--background-color, #f4f6fa) 100%);
}
.app-board-card__photo--placeholder svg {
width: 40%;
height: 40%;
opacity: 0.6;
color: var(--accent-dark);
}
/* Texto */
.app-board-card__name {
font-size: 1rem;
font-weight: 700;
color: var(--text-color);
line-height: 1.35;
margin: 0;
}
.app-board-card--featured .app-board-card__name {
font-size: 1.375rem;
}
.app-board-card__period {
font-size: 0.875rem;
font-weight: 600;
color: var(--accent-color);
margin: 0;
}
.app-board-card--featured .app-board-card__period {
font-size: 0.9375rem;
}
.app-board-card__bio {
font-size: 0.875rem;
color: var(--text-muted, #6c757d);
line-height: 1.6;
margin: 0;
}
/* Badge de cargo */
.app-board-card__badge {
display: inline-flex;
align-items: center;
padding: 0.4rem 1.1rem;
border-radius: 2rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
background: var(--secondary-background);
color: var(--primary-color);
}
.app-board-card__badge--featured {
background: var(--accent-color);
color: var(--accent-foreground, #ffffff);
padding: 0.55rem 1.5rem;
font-size: 0.8125rem;
}
/* Grid del resto de miembros */
.app-board__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 2rem;
width: 100%;
max-width: 1100px;
justify-items: center;
}
/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 768px) {
.app-directory {
padding: 2rem 1rem;
}
.app-directory__header {
padding: 1.25rem 1.5rem;
margin-bottom: 2.5rem;
border-radius: 0.75rem;
gap: 1rem;
}
.app-board {
gap: 2.5rem;
}
.app-board-card--featured {
max-width: 200px;
}
.app-board__grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.app-board__grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ========== PRINT STYLES ========== */
@media print {
.app-directory {
padding: 1rem;
}
.app-directory__header {
background: #001a33 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.app-board-card {
break-inside: avoid;
page-break-inside: avoid;
}
}
/* ─────────────────────────────────────────────
LAYOUT PRINCIPAL
───────────────────────────────────────────── */
.app-book-library {
max-width: 1100px;
margin: 0 auto;
padding: 0 2rem 3rem;
}
.app-book-library__loading,
.app-book-library__error,
.app-book-library__empty {
text-align: center;
padding: 3rem 1rem;
color: var(--text-muted);
}
.app-book-library__list {
display: flex;
flex-direction: column;
gap: 3rem;
}
/* ═══════════════════════════════════════════════════════════
BOOK CARD — tarjeta completa con borde, sombra y acento lateral
═══════════════════════════════════════════════════════════ */
.app-book-library__card {
display: flex;
gap: 2.5rem;
align-items: center;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 16px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
padding: 1.5rem 2rem;
position: relative;
overflow: hidden;
transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.app-book-library__card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--secondary-color);
border-radius: 99px 0 0 99px;
}
.app-book-library__card--reverse::before {
left: auto;
right: 0;
border-radius: 0 99px 99px 0;
}
.app-book-library__card:hover {
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
transform: translateY(-3px);
border-color: var(--secondary-color);
}
.app-book-library__card--reverse {
flex-direction: row-reverse;
}
/* ── Portada — con la textura sutil de cursos-externos solo aquí ── */
.app-book-library__media {
position: relative;
flex-shrink: 0;
width: 370px;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
border-radius: 16px;
background-image: linear-gradient(var(--texture-line-color) 1px, transparent 1px), linear-gradient(to right, var(--texture-line-color) 1px, transparent 1px);
background-size: 24px 24px;
background-color: var(--surface-alt-color);
}
.app-book-library__cover-img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.app-book-library__card:hover .app-book-library__cover-img {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26);
}
/* Logo de la sociedad como sello, superpuesto en la esquina inferior de la portada */
.app-book-library__watermark {
position: absolute;
bottom: 6px;
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: contain;
background: var(--surface-color);
border: 1px solid var(--border-color);
padding: 0.5rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.app-book-library__card:not(.app-book-library__card--reverse) .app-book-library__watermark {
right: 6px;
}
.app-book-library__card--reverse .app-book-library__watermark {
left: 6px;
}
/* ── Texto ── */
.app-book-library__body {
flex: 1;
min-width: 0;
}
.app-book-library__card--reverse .app-book-library__body {
text-align: right;
}
.app-book-library__title {
font-size: 1.85rem;
font-weight: 700;
color: var(--text-color);
line-height: 1.3;
margin: 0 0 0.75rem 0;
}
.app-book-library__subtitle {
font-size: 1.25rem;
font-weight: 600;
color: var(--secondary-color);
line-height: 1.4;
margin: 0 0 1.1rem 0;
}
.app-book-library__comment {
font-size: 1.05rem;
color: var(--text-muted);
line-height: 1.7;
margin: 0;
}
/* ═══════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 900px) {
.app-book-library__media {
width: 220px;
}
.app-book-library__title {
font-size: 1.55rem;
}
.app-book-library__subtitle {
font-size: 1.1rem;
}
}
@media (max-width: 700px) {
.app-book-library {
padding: 0 1rem 2rem;
}
.app-book-library__card,
.app-book-library__card--reverse {
flex-direction: column;
align-items: stretch;
text-align: center;
gap: 1.5rem;
}
.app-book-library__card--reverse .app-book-library__body {
text-align: center;
}
.app-book-library__media {
width: 65%;
margin: 0 auto;
}
.app-book-library__card .app-book-library__watermark,
.app-book-library__card--reverse .app-book-library__watermark {
right: 6px;
left: auto;
}
.app-book-library__title {
font-size: 1.4rem;
}
.app-book-library__subtitle {
font-size: 1.05rem;
}
}
.app-course-external {
/*! background-color: var(--background-color); */
padding: 0 0 3rem;
}
/* ── Anular estilos de AppCard cuando tiene clase app-course-external__card ── */
.app-card.app-course-external__card {
padding: 0 !important;
margin: 0 !important;
/*background-color: var(--card-bg-color) !important;
border: 1px solid var(--glass-border) !important;*/
border-radius: 24px !important;
overflow: hidden !important;
box-shadow: none !important;
display: grid !important;
grid-template-columns: 300px 1fr !important;
align-items: stretch !important;
min-height: 300px !important;
position: relative;
transition: border-color .3s, box-shadow .35s, transform .3s;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
max-width: 860px;
}
.app-card.app-course-external__card:hover {
box-shadow: var(--shadow-glow) !important;
border-color: var(--secondary-color) !important;
transform: translateY(-4px) !important;
}
/* Variante reverse para AppCard */
.app-card.app-course-external__card--reverse {
grid-template-columns: 1fr 322px !important;
grid-template-areas: "body media" !important;
margin-left: 20rem !important;
}
.app-card.app-course-external__card--reverse .app-course-external__media {
grid-area: media;
}
.app-card.app-course-external__card--reverse .app-course-external__body {
grid-area: body;
}
/* Anular los estilos internos de app-card-header y app-card-body */
.app-card.app-course-external__card .app-card-header {
display: none;
}
.app-card.app-course-external__card .app-card-body {
padding: 0 !important;
margin: 0 !important;
border: none !important;
/* display: contents hace que el body no interfiera con el grid del padre */
display: contents !important;
}
.app-card.app-course-external__card .app-card-footer {
display: none;
}
/* ── Contenedor 1200 px ── */
.app-course-external__inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
/* ── Encabezado de página (misma altura en todas las vistas) ── */
.app-course-external__heading {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 3rem;
margin-bottom: 3rem;
}
.app-course-external__heading__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--secondary-color);
margin-bottom: 12px;
}
.app-course-external__heading__eyebrow::before,
.app-course-external__heading__eyebrow::after {
content: '';
display: block;
width: 24px;
height: 1.5px;
background: var(--secondary-color);
opacity: .5;
}
.app-course-external__heading__title {
font-size: 2.55rem;
font-weight: 700;
color: var(--text-color);
letter-spacing: -.03em;
line-height: 1.2;
margin-bottom: 8px;
}
.app-course-external__heading__subtitle {
font-size: 0.9375rem;
color: var(--text-secondary);
margin: 0 auto;
max-width: 520px;
line-height: 1.6;
}
/* ── Variante alineada a la izquierda (headers dentro de layouts en fila) ── */
.app-course-external__heading--left {
text-align: left;
align-items: flex-start;
}
.app-course-external__heading--left .app-course-external__heading__subtitle {
margin: 0;
}
/* ── Grupo de región ── */
.app-course-external__region {
margin-bottom: 5rem;
}
.app-course-external__region:last-child {
margin-bottom: 0;
}
/* Separador de región — futurista */
.app-course-external__region-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 3rem;
}
.app-course-external__region-line {
flex: 1;
height: 1px;
/* Gradiente que desvanece desde el chip hacia los bordes */
background: linear-gradient(to var(--_dir, right), transparent, var(--secondary-color) 40%, var(--border-color));
}
.app-course-external__region-line:first-child {
--_dir: right;
background: linear-gradient(to right, transparent, var(--border-color));
}
.app-course-external__region-line:last-child {
background: linear-gradient(to left, transparent, var(--border-color));
}
.app-course-external__region-name {
font-size: .7rem !important;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-light) !important;
background: var(--primary-color);
border: 1px solid var(--glass-border);
padding: .4rem 1.1rem;
border-radius: 20px;
white-space: nowrap;
position: relative;
}
/* ── Lista de cursos ── */
.app-course-external__list {
display: flex;
flex-direction: column;
gap: 2rem;
}
/* ═══════════════════════════════════════════════════════════
ESTADO VACÍO — sin cursos activos por el momento
═══════════════════════════════════════════════════════════ */
.app-course-external__empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.1rem;
max-width: 860px;
margin: 0 auto 3rem;
padding: 4rem 2.5rem;
background-color: var(--card-bg-color);
/* Misma textura de cuadrícula que .app-course-external__media, para que se sienta parte del mismo sistema */
background-image:
linear-gradient(var(--texture-line-color) 1px, transparent 1px),
linear-gradient(to right, var(--texture-line-color) 1px, transparent 1px);
background-size: 24px 24px;
border: 2px dashed var(--glass-border);
border-radius: 24px;
position: relative;
overflow: hidden;
transition: border-color .3s;
}
.app-course-external__empty:hover {
border-color: var(--secondary-color);
}
/* Glow suave detrás del contenido, igual recurso que .app-course-external__media */
.app-course-external__empty::before {
content: '';
position: absolute;
inset: 15%;
border-radius: 50%;
background: var(--accent-glow);
filter: blur(48px);
pointer-events: none;
}
.app-course-external__empty-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--glass-bg);
border: 1.5px dashed var(--secondary-color);
color: var(--secondary-color);
position: relative;
z-index: 1;
}
.app-course-external__empty-icon svg {
width: 28px;
height: 28px;
}
.app-course-external__empty-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--text-color);
margin: 0;
position: relative;
z-index: 1;
}
.app-course-external__empty-text {
font-size: .92rem;
color: var(--text-secondary);
line-height: 1.6;
max-width: 32rem;
margin: 0;
position: relative;
z-index: 1;
}
/* ═══════════════════════════════════════════════════════════
CARD — el protagonista
═══════════════════════════════════════════════════════════ */
.app-course-external__card{
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 24px;
overflow: hidden;
display: grid;
grid-template-columns: 300px 1fr;
align-items: stretch;
min-height: 300px;
position: relative;
transition: border-color .3s, box-shadow .35s, transform .3s;
/* Backdrop blur solo donde el navegador lo soporte */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
max-width: 860px;
padding: 0;
}
/* Brillo superior de "vidrio" */
.app-course-external__card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 24px;
background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
/* Línea de acento animada en hover */
.app-course-external__card::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(to bottom, var(--secondary-color), var(--secondary-light));
border-radius: 24px 0 0 24px;
opacity: 0;
transition: opacity .3s;
}
.app-course-external__card:hover {
border-color: var(--secondary-color);
box-shadow: var(--shadow-glow);
transform: translateY(-4px);
}
.app-course-external__card:hover::after {
opacity: 1;
}
/* ── Variante REVERSE — imagen derecha ── */
.app-course-external__card--reverse {
grid-template-columns: 1fr 322px;
grid-template-areas: "body media";
margin-left: 20rem;
}
.app-course-external__card--reverse::after {
left: auto;
right: 0;
border-radius: 0 24px 24px 0;
}
.app-course-external__card--reverse .app-course-external__media {
grid-area: media;
}
.app-course-external__card--reverse .app-course-external__body {
grid-area: body;
}
/* ── Contenedor de imagen ── */
.app-course-external__media {
overflow: hidden;
background: var(--card-bg-color);
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
position: relative;
z-index: 1;
/* Patrón de cuadrícula sutil dentro del media */
background-image:
linear-gradient(var(--texture-line-color) 1px, transparent 1px),
linear-gradient(to right, var(--texture-line-color) 1px, transparent 1px);
background-size: 24px 24px;
background-color: var(--card-bg-color);
/*! max-width: 300px; */
}
/* Glow central detrás de la imagen */
.app-course-external__media::before {
content: '';
position: absolute;
inset: 20%;
border-radius: 50%;
background: var(--accent-glow);
filter: blur(24px);
pointer-events: none;
}
.app-course-external__img {
width: 100%;
height: 100%;
max-height: 260px;
object-fit: contain;
object-position: center;
border-radius: var(--r-md);
position: relative;
z-index: 1;
transition: transform .45s cubic-bezier(.4,0,.2,1), filter .3s;
filter: drop-shadow(0 8px 24px rgba(0,0,0,.15));
}
.app-course-external__card:hover .app-course-external__img {
transform: scale(1.04) translateY(-3px);
filter: drop-shadow(0 16px 32px rgba(0,152,255,.18));
}
/* ── Cuerpo ── */
.app-course-external__body {
padding: 2.25rem 2.5rem;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 1;
}
/* Número decorativo de fondo en el body */
.app-course-external__body::before {
content: attr(data-index);
position: absolute;
top: 1rem;
right: 1.5rem;
font-size: 5rem;
font-weight: 600;
color: var(--texture-dot-color);
line-height: 1;
pointer-events: none;
user-select: none;
letter-spacing: -.05em;
}
.app-course-external__org {
font-size: .68rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--secondary-color);
margin-bottom: .6rem;
display: flex;
align-items: center;
gap: .5rem;
}
/* Punto pulsante antes del org */
.app-course-external__org::before {
content: '';
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--secondary-color);
flex-shrink: 0;
}
.app-course-external__title {
font-size: clamp(1.2rem, 2vw, 1.55rem);
font-weight: 700;
color: var(--text-color);
line-height: 1.25;
margin-bottom: 1.1rem;
max-width: 25rem;
}
.app-course-external__meta {
list-style: none;
display: flex;
flex-direction: column;
gap: .45rem;
margin-bottom: 1.1rem;
}
.app-course-external__meta-item {
display: flex;
align-items: flex-start;
gap: .6rem;
font-size: .84rem;
color: var(--text-secondary) !important;
line-height: 1.45;
}
.app-course-external__meta-icon {
width: 15px;
height: 15px;
flex-shrink: 0;
color: var(--secondary-color) !important;
margin-top: 2px;
opacity: .85;
}
.app-course-external__meta-icon svg {
width: 100%;
height: 100%;
}
/* Badge de fecha límite */
.app-course-external__deadline {
display: inline-flex;
align-items: center;
gap: .5rem;
font-size: .8rem;
font-weight: 600;
color: var(--warning-color);
background: rgba(230,162,60,.1);
border: 1px solid rgba(230,162,60,.28);
border-radius: 8px;
padding: .45rem 1rem;
margin-bottom: 1.25rem;
width: fit-content;
letter-spacing: .01em;
}
.app-course-external__deadline svg {
width: 13px;
height: 13px;
flex-shrink: 0;
}
/* ── Acciones ── */
.app-course-external__actions {
display: flex;
gap: .65rem;
flex-wrap: wrap;
margin-top: auto;
padding-top: .75rem;
border-top: 1px solid var(--border-light);
}
.app-course-external__btn {
display: inline-flex;
align-items: center;
gap: .4rem;
font-size: .83rem;
font-weight: 600;
padding: .6rem 1.35rem;
border-radius: 8px;
cursor: pointer;
font-family: inherit;
letter-spacing: .01em;
transition: background .2s, border-color .2s, box-shadow .2s, transform .15s;
}
.app-course-external__btn svg {
width: 13px;
height: 13px;
flex-shrink: 0;
}
/* ═══════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 1024px) {
.app-course-external__card {
grid-template-columns: 300px 1fr;
}
.app-course-external__card--reverse {
grid-template-columns: 1fr 300px;
margin-left: 3rem;
}
}
@media (max-width: 860px) {
.app-course-external__card,
.app-course-external__card--reverse {
grid-template-columns: 260px 1fr;
grid-template-areas: unset;
min-height: 240px;
margin-left: 0;
}
.app-course-external__card--reverse .app-course-external__media {
grid-area: unset;
order: -1;
}
.app-course-external__card--reverse .app-course-external__body {
grid-area: unset;
}
.app-course-external__card--reverse::after {
left: 0;
right: auto;
border-radius: 24px 0 0 24px;
}
.app-course-external__body {
padding: 1.5rem 1.75rem;
}
}
@media (max-width: 620px) {
.app-course-external {
padding: 3rem 0;
}
.app-course-external__card,
.app-course-external__card--reverse {
grid-template-columns: 1fr;
grid-template-areas: unset;
min-height: unset;
}
.app-course-external__media,
.app-course-external__card--reverse .app-course-external__media {
order: -1;
min-height: 220px;
max-height: 240px;
}
.app-course-external__img {
max-height: 190px;
}
.app-course-external__card::after,
.app-course-external__card--reverse::after {
inset: 0;
width: 100%;
height: 3px;
bottom: auto;
border-radius: 24px 24px 0 0;
}
.app-course-external__body {
padding: 1.5rem;
}
.app-course-external__body::before {
font-size: 3.5rem;
}
}
@media (max-width: 480px) {
.app-course-external__inner { padding: 0 1rem; }
.app-course-external__empty {
padding: 2.5rem 1.5rem;
}
}
/* Estructura y estilos base para EventDetail */
.event-detail {
display: flex;
flex-direction: column;
gap: 2rem;
padding: 2rem 1rem;
background: var(--color-bg, #f8f9fa);
min-height: 80vh;
}
.event-detail__header {
text-align: center;
margin-bottom: 2rem;
}
.event-detail__title {
font-size: 2.2rem;
font-weight: 700;
color: var(--color-primary, #1976d2);
margin-bottom: 0.5rem;
}
.event-detail__dates {
font-size: 1.1rem;
color: var(--color-accent, #009ee3);
margin-bottom: 0.25rem;
}
.event-detail__venue {
font-size: 1rem;
color: var(--color-text, #444);
margin-bottom: 0.5rem;
}
.event-detail__main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 2rem;
width: 100%;
justify-items: center;
}
@media (max-width: 900px) {
.event-detail__main {
grid-template-columns: 1fr;
}
}
@media (prefers-color-scheme: dark) {
.event-detail {
background: var(--color-bg-dark, #181A1B);
}
.event-detail__title {
color: var(--color-primary-dark, #90caf9);
}
.event-detail__dates {
color: var(--color-accent-dark, #80deea);
}
.event-detail__venue {
color: var(--color-text-dark, #e0e0e0);
}
}
/* Help page (BEM) - Hero Minimalista Moderno */
.help {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Hero - Diseño Minimalista y Profesional */
.help__hero {
position: relative;
background: var(--surface-color);
border-bottom: 1px solid var(--border-color);
padding: 1.5rem 1.5rem 1rem;
}
.help__hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
}
.help__hero-inner {
max-width: 860px;
margin: 0 auto;
text-align: center;
}
.help__title {
margin: 0 0 0.375rem;
font-size: 1.75rem;
font-weight: 700;
color: var(--text-color) !important;
letter-spacing: -0.02em;
display: inline-flex;
align-items: center;
gap: 0.75rem;
}
.help__title::before {
content: '💬';
font-size: 1.5rem;
opacity: 0.8;
}
.help__subtitle {
margin: 0 auto !important;
max-width: 720px;
color: var(--text-muted) !important;
font-size: 0.938rem !important;
line-height: 1.5;
font-weight: 400;
}
/* Form Section */
.help__form-section {
padding: 2rem 1.5rem 3rem;
}
.help__form-container {
max-width: 720px;
margin: 0 auto;
display: grid;
gap: 1rem;
}
.help__select {
width: 100%;
}
.help__actions {
margin-top: 0.5rem;
display: flex;
justify-content: flex-end;
gap: 0.75rem;
}
/* Textarea */
.help__textarea {
width: 100%;
min-height: 160px;
padding: 0.75rem 0.85rem;
border-radius: 0.5rem;
border: 1px solid var(--border-color);
background: var(--surface-color);
color: var(--text-color);
font: inherit;
resize: vertical;
transition: border-color 0.2s, box-shadow 0.2s;
}
.help__textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px var(--focus-ring);
}
.help__textarea--invalid {
border-color: var(--danger-color);
}
.help__error {
color: var(--danger-color);
font-size: 0.875rem;
margin-top: 0.25rem;
}
/* Open Ticket Card */
.help__open-ticket {
margin-top: 1rem;
}
/* Overlay */
.help__overlay {
position: fixed;
inset: 0;
background: var(--overlay-color);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
z-index: 1000;
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.help__overlay-card {
width: min(680px, 100%);
animation: slideUp 0.3s ease;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive - Tablets */
@media (max-width: 768px) {
.help__hero {
padding: 1.25rem 1rem 0.875rem;
}
.help__title {
font-size: 1.5rem;
}
.help__title::before {
font-size: 1.25rem;
}
.help__subtitle {
font-size: 0.875rem !important;
}
.help__form-section {
padding: 1.75rem 1rem 2.5rem;
}
.help__actions {
flex-direction: column;
}
}
/* Responsive - Móviles */
@media (max-width: 480px) {
.help__title {
font-size: 1.375rem;
}
.help__textarea {
min-height: 140px;
}
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
.help__hero {
background: var(--surface-color);
border-bottom-color: var(--border-color);
}
}
:root[data-theme="dark"] .help__hero,
html[data-theme="dark"] .help__hero,
html.dark .help__hero,
body.dark .help__hero {
background: var(--surface-color);
border-bottom-color: var(--border-color);
}
/* ========================================
Home Page - Redesign
======================================== */
/* ── Shared section layout ── */
.home-section-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem 4rem;
}
/* ─────────────────────────────────────
HERO  (full-width, left-aligned, compacto)
───────────────────────────────────── */
.app-hero__intro {
position: relative;
background: var(--header-bg-banner);
overflow: hidden;
padding: 44px 0 40px;
}
.app-hero__intro::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
background-size: 22px 22px;
opacity: 0.5;
z-index: 0;
}
/* Glow flotante decorativo, aporta profundidad sin ser una textura repetida */
.app-hero__intro::after {
content: '';
position: absolute;
width: 480px;
height: 480px;
right: -140px;
top: -180px;
background: radial-gradient(circle, rgba(0,152,255,0.32), transparent 70%);
border-radius: 50%;
z-index: 0;
pointer-events: none;
animation: app-hero-float 11s ease-in-out infinite;
}
@keyframes app-hero-float {
0%, 100% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(-26px, 22px) scale(1.08);
}
}
.app-hero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 40px;
align-items: end;
}
@keyframes app-hero-fade-up {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.app-hero__eyebrow,
.app-hero__title,
.app-hero__desc,
.app-hero__actions,
.app-hero__panel {
opacity: 0;
animation: app-hero-fade-up .75s cubic-bezier(.22, .61, .36, 1) forwards;
}
.app-hero__eyebrow {
font-family: 'Roboto Mono', ui-monospace, monospace;
animation-delay: .05s;
}
.app-hero__title {
animation-delay: .16s;
}
.app-hero__desc {
animation-delay: .28s;
}
.app-hero__actions {
animation-delay: .4s;
}
.app-hero__panel {
animation-delay: .32s;
}
.app-hero__eyebrow {
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--secondary-light);
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 10px;
}
.app-hero__title {
font-weight: 800;
font-size: clamp(1.9rem, 3.4vw, 2.7rem);
color: #fff;
letter-spacing: -0.02em;
line-height: 1.12;
max-width: 620px;
}
.app-hero__desc {
color: var(--text-muted);
font-size: 0.98rem;
margin-top: 14px;
max-width: 560px;
}
.app-hero__actions {
display: flex;
gap: 12px;
margin-top: 24px;
flex-wrap: wrap;
}
.app-hero__panel {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 14px;
padding: 22px 24px;
backdrop-filter: blur(6px);
transition: border-color .25s ease, background .25s ease;
}
.app-hero__panel:hover {
border-color: rgba(255,255,255,0.28);
background: rgba(255,255,255,0.09);
}
.app-hero__panel-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
font-size: 0.86rem;
}
.app-hero__panel-row:last-child {
border-bottom: none;
}
.app-hero__panel-label {
color: var(--text-muted) !important;
}
.app-hero__panel-value {
color: var(--text-light) !important;
font-weight: 600;
text-align: right;
}
@media (max-width: 860px) {
.app-hero__inner {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.app-hero__eyebrow,
.app-hero__title,
.app-hero__desc,
.app-hero__actions,
.app-hero__panel {
opacity: 1;
animation: none;
}
.app-hero__intro::after {
animation: none;
}
}
/* ─────────────────────────────────────
EVENTOS
───────────────────────────────────── */
.home-events {
background: var(--background-color);
}
.home-events__split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: start;
}
/* ── Próximo evento (card izquierda) ── */
.home-events__next-card {
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--border-color);
background: var(--surface-color);
box-shadow: var(--shadow-md);
transition: box-shadow 0.2s, transform 0.2s;
}
.home-events__next-card:hover {
box-shadow: 0 16px 36px rgba(0, 152, 255, 0.18), var(--shadow-lg);
transform: translateY(-6px);
border-color: var(--accent-color);
}
.home-events__next-poster {
position: relative;
/* Proporción 585 × 365  ≈  1.602 : 1 */
aspect-ratio: 585 / 365;
background: linear-gradient(135deg, #143765, #0098ff);
overflow: hidden;
}
.home-events__next-img {
width: 100%;
height: 100%;
object-fit: contain; /* muestra el cartel completo sin recortar */
display: block;
background: #0b2444; /* fondo para las franjas laterales si las hay */
transition: transform 0.45s cubic-bezier(.22, .61, .36, 1);
}
.home-events__next-card:hover .home-events__next-img {
transform: scale(1.05);
}
.home-events__next-badge {
position: absolute;
top: 10px;
left: 10px;
background: var(--success-background);
color: var(--success-text) !important;
border: 1px solid var(--success-color);
font-size: 0.6875rem !important;
font-weight: 700;
padding: 3px 10px;
border-radius: 99px;
letter-spacing: 0.04em;
text-transform: uppercase;
z-index: 1;
animation: home-badge-pulse 2.2s ease-out infinite;
}
/* Pulso sutil tipo "en vivo" para llamar la atención sobre el evento abierto */
@keyframes home-badge-pulse {
0% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
}
70% {
box-shadow: 0 0 0 9px rgba(16, 185, 129, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.home-events__next-badge {
animation: none;
}
}
.home-events__next-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.home-events__next-placeholder-num {
font-size: 3rem;
font-weight: 900;
color: rgba(255,255,255,0.25);
}
.home-events__next-body {
padding: 1.25rem 1.5rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.home-events__next-title {
font-size: 1.125rem;
font-weight: 700;
color: var(--text-color);
margin: 0;
line-height: 1.3;
}
.home-events__next-date {
font-size: 0.8125rem !important;
color: var(--text-secondary) !important;
margin: 0;
}
.home-events__next-actions {
display: flex;
gap: 0.625rem;
flex-wrap: wrap;
margin-top: 0.75rem;
}
/* ── Eventos anteriores ── */
.home-events__past-col {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.home-events__past-label {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary);
padding-bottom: 0.625rem;
border-bottom: 2px solid var(--border-color);
}
.home-events__past-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
max-height: 480px;
overflow-y: auto;
padding-right: 0.375rem;
}
/* Estilos del scrollbar - Webkit (Chrome, Safari, Edge) */
.home-events__past-list::-webkit-scrollbar {
width: 0.5rem;
}
.home-events__past-list::-webkit-scrollbar-track {
background: var(--background-color);
border-radius: 0.5rem;
margin: 0.25rem 0;
}
.home-events__past-list::-webkit-scrollbar-thumb {
background: var(--accent-color);
border-radius: 0.5rem;
border: 2px solid var(--background-color);
transition: background 0.2s ease;
}
.home-events__past-list::-webkit-scrollbar-thumb:hover {
background: var(--accent-dark);
}
/* Estilos del scrollbar - Firefox */
.home-events__past-list {
scrollbar-width: thin;
scrollbar-color: var(--accent-color) var(--background-color);
}
.home-events__past-card {
display: flex;
gap: 0.875rem;
align-items: flex-start;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 0.75rem;
transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.home-events__past-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--accent-color);
transform: translateX(4px);
}
.home-events__past-poster {
width: 70px;
height: 90px;
border-radius: 8px;
overflow: hidden;
background: linear-gradient(135deg, #143765, #0098ff);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.home-events__past-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s cubic-bezier(.22, .61, .36, 1);
}
.home-events__past-card:hover .home-events__past-img {
transform: scale(1.12);
}
.home-events__past-placeholder-label {
font-size: 0.5625rem;
font-weight: 700;
color: rgba(255,255,255,0.55);
text-align: center;
line-height: 1.2;
padding: 4px;
}
.home-events__past-info {
flex: 1;
min-width: 0;
}
.home-events__past-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-color);
line-height: 1.3;
margin-bottom: 0.2rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.home-events__past-date {
font-size: 0.75rem;
color: var(--text-secondary);
margin-bottom: 0.5rem;
}
.home-events__past-btns {
display: flex;
gap: 0.375rem;
flex-wrap: wrap;
}
/* ── Botones compartidos ── */
.home-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
padding: 0.5rem 1.125rem;
transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
border: none;
cursor: pointer;
}
.home-btn--primary {
background: var(--primary-color);
color: #fff;
}
.home-btn--primary:hover {
background: var(--primary-dark, #0d2b50);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(20,55,101,0.3);
}
.home-btn-micro {
display: inline-flex;
align-items: center;
border-radius: 6px;
font-size: 0.6875rem;
font-weight: 600;
text-decoration: none;
padding: 3px 8px;
border: 1px solid var(--border-color);
background: var(--secondary-background);
color: var(--text-secondary);
transition: background 0.15s, color 0.15s, border-color 0.15s;
white-space: nowrap;
}
.home-btn-micro:hover {
background: var(--accent-color);
border-color: var(--accent-color);
color: #fff;
}
/* ─────────────────────────────────────
PRÓXIMO CURSO (SAVE THE DATE)
───────────────────────────────────── */
.home-nextcourse {
position: relative;
overflow: hidden;
padding: 3.5rem 0 4rem;
}
/* Textura tenue de puntos — misma receta que el resto del sitio (401, cursos externos) */
.home-nextcourse::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, var(--texture-dot-color) 1px, transparent 0);
background-size: 22px 22px;
z-index: 0;
}
.home-nextcourse__glow {
position: absolute;
width: 480px;
height: 480px;
left: -160px;
bottom: -220px;
background: radial-gradient(circle, var(--accent-glow), transparent 70%);
border-radius: 50%;
z-index: 0;
pointer-events: none;
animation: app-hero-float 13s ease-in-out infinite;
}
/* Segundo glow, esquina opuesta, desfasado — da algo de vida sin ser ruidoso */
.home-nextcourse__glow::after {
content: '';
position: absolute;
width: 360px;
height: 360px;
right: -420px;
top: -260px;
background: radial-gradient(circle, var(--accent-glow), transparent 70%);
border-radius: 50%;
animation: app-hero-float 16s ease-in-out infinite reverse;
}
.home-nextcourse__inner {
position: relative;
z-index: 1;
padding-bottom: 0;
display: grid;
grid-template-columns: minmax(240px, 340px) 1fr;
gap: 3rem;
align-items: center;
}
/* ── Poster ── */
.home-nextcourse__poster {
position: relative;
border-radius: 20px;
padding: 10px;
background: var(--surface-color);
border: 1px solid var(--border-color);
box-shadow: var(--shadow-lg), 0 0 46px -12px var(--accent-glow);
transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
animation: home-nextcourse-float 6s ease-in-out infinite;
}
.home-nextcourse__poster:hover {
transform: translateY(-6px) rotate(-1deg) scale(1.02);
box-shadow: var(--shadow-xl), 0 0 60px -8px var(--accent-glow);
animation-play-state: paused;
}
@keyframes home-nextcourse-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.home-nextcourse__poster-img {
display: block;
width: 100%;
height: auto;
border-radius: 13px;
}
.home-nextcourse__poster-badge {
position: absolute;
top: -14px;
right: -10px;
z-index: 2;
background: var(--gradient-accent);
color: #fff !important;
font-size: 0.75rem !important;
font-weight: 700;
letter-spacing: 0.02em;
padding: 7px 14px;
border-radius: 99px;
box-shadow: 0 8px 20px -4px rgba(0,152,255,0.55);
transform: rotate(4deg);
white-space: nowrap;
animation: home-badge-pulse 2.4s ease-out infinite;
}
/* ── Body ── */
.home-nextcourse__body {
position: relative;
z-index: 1;
}
.home-nextcourse__eyebrow {
display: inline-block;
font-family: 'Roboto Mono', ui-monospace, monospace;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent-color) !important;
margin-bottom: 14px;
}
.home-nextcourse__title {
font-weight: 800;
font-size: clamp(1.6rem, 2.8vw, 2.35rem);
color: var(--primary-color);
letter-spacing: -0.01em;
line-height: 1.18;
margin: 0 0 10px;
}
.home-nextcourse__subtitle {
color: var(--text-secondary) !important;
font-size: 1rem;
margin: 0 0 26px;
max-width: 480px;
}
.home-nextcourse__chips {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 22px;
}
.home-nextcourse__chip {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--card-bg-color);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 10px 16px;
font-size: 0.85rem !important;
font-weight: 600;
color: var(--text-color) !important;
box-shadow: var(--shadow-xs);
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.home-nextcourse__chip:hover {
transform: translateY(-2px);
border-color: var(--secondary-color);
box-shadow: var(--shadow-sm);
}
.home-nextcourse__chip svg {
width: 16px;
height: 16px;
color: var(--accent-color);
flex-shrink: 0;
}
.home-nextcourse__soon {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.8125rem !important;
font-weight: 600;
color: var(--text-muted) !important;
font-style: italic;
}
.home-nextcourse__soon-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent-color);
animation: home-badge-pulse 2.2s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.home-nextcourse__glow,
.home-nextcourse__glow::after,
.home-nextcourse__poster,
.home-nextcourse__poster-badge,
.home-nextcourse__soon-dot {
animation: none;
}
}
@media (max-width: 860px) {
.home-nextcourse__inner {
grid-template-columns: 1fr;
gap: 2.5rem;
text-align: center;
}
.home-nextcourse__poster {
max-width: 300px;
margin: 0 auto;
}
.home-nextcourse__subtitle {
max-width: none;
}
.home-nextcourse__chips {
justify-content: center;
}
}
/* ─────────────────────────────────────
CONVOCATORIAS
───────────────────────────────────── */
.home-conv {
background: var(--secondary-background);
}
.home-conv__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.home-conv__card {
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--border-color);
background: var(--surface-color);
box-shadow: var(--shadow-sm);
transition: box-shadow 0.2s, transform 0.2s;
display: flex;
flex-direction: column;
}
.home-conv__card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.home-conv__poster {
aspect-ratio: 16 / 7;
position: relative;
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 14px 16px;
min-height: 120px;
}
.home-conv__poster-label {
font-size: 0.75rem !important;
font-weight: 700;
color: rgba(255,255,255,0.8) !important;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.home-conv__date-badge {
background: var(--badge-overlay-bg);
backdrop-filter: blur(8px);
border: 1px solid var(--badge-overlay-border);
border-radius: 15px;
padding: 3px 10px;
font-size: 0.75rem !important;
font-weight: 600;
color: var(--text-light) !important;
}
.home-conv__body {
padding: 1rem 1.25rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
flex: 1;
}
.home-conv__title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-color);
margin: 0;
line-height: 1.45;
}
.home-conv__link {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.875rem;
font-weight: 600;
color: var(--accent-color);
text-decoration: none;
margin-top: auto;
transition: opacity 0.15s;
}
.home-conv__link:hover {
opacity: 0.72;
}
/* ─────────────────────────────────────
MEMBRESÍA
───────────────────────────────────── */
.app-home-membership {
background: var(--surface-color);
background-image: repeating-linear-gradient(135deg, var(--texture-line-color) 0px, var(--texture-line-color) 1px, transparent 1px, transparent 34px);
padding-top: 2rem;
padding-bottom: 7rem;
}
.app-home-members {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
margin-bottom: 30px;
}
.app-home-members__card {
background: var(--gradient-primary);
border-radius: 24px;
padding: 32px;
color: var(--text-light);
position: relative;
overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease;
}
.app-home-members__card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.app-home-members__card::after {
content: '';
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(255,255,255,0.07);
top: -70px;
right: -70px;
transition: transform .4s ease;
}
.app-home-members__card:hover::after {
transform: scale(1.15);
}
.app-home-members__icon {
width: 46px;
height: 46px;
border-radius: 13px;
background: rgba(255,255,255,0.14);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.app-home-members__card:hover .app-home-members__icon {
transform: scale(1.08) rotate(-4deg);
}
.app-home-members__icon svg {
width: 22px;
height: 22px;
color: var(--text-light);
fill: currentColor;
}
.app-home-members__card .app-button__icon svg {
fill: currentColor;
}
.app-home-members__title {
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 8px;
}
.app-home-members__text {
font-size: 0.85rem;
color: var(--aci-fg);
margin-bottom: 20px;
max-width: 320px;
}
.app-home-members__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 14px;
margin-top: 6px;
}
.app-home-members__button {
display: flex;
align-items: center;
gap: 10px;
background: var(--card-bg-color);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 15px 18px;
font-size: 0.85rem;
font-weight: 500;
color: var(--text-secondary);
transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.app-home-members__button:hover {
border-color: var(--secondary-color);
color: var(--primary-color);
transform: translateY(-2px);
}
.app-home-members__button .app-button__text {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
}
.app-home-members-button__icon {
width: 17px;
height: 17px;
color: var(--secondary-color);
flex-shrink: 0;
}
.app-home-members-button__span {
margin-left: auto;
color: var(--secondary-color);
}
.app-home-members-button__span svg {
width: 14px;
height: 14px;
}
/* ── Winner wrapper ── */
.home-winner-section {
background: var(--secondary-background);
padding: 2rem;
}
/* ─────────────────────────────────────
ESCUELA DE TÉCNICOS EN RADIOLOGÍA (ETR)
───────────────────────────────────── */
.app-home-etr {
background: var(--surface-color);
background-image: repeating-linear-gradient(135deg, var(--texture-line-color) 0px, var(--texture-line-color) 1px, transparent 1px, transparent 34px);
padding-bottom: 2rem;
}
.app-home-etr__intro {
background: var(--card-bg-color);
border: 1px solid var(--border-color);
border-radius: 24px;
padding: 30px 32px;
margin-bottom: 26px;
display: grid;
grid-template-columns: auto 1fr;
gap: 24px;
align-items: flex-start;
}
.app-home-etr__intro-icon {
width: 56px;
height: 56px;
border-radius: 16px;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-light);
flex-shrink: 0;
}
.app-home-etr__intro-icon svg {
width: 26px;
height: 26px;
}
.app-home-etr__intro-title {
font-weight: 700;
color: var(--primary-color);
font-size: 1.05rem;
margin-bottom: 6px;
}
.app-home-etr__intro-text {
font-size: 0.88rem;
color: var(--text-secondary);
}
.app-home-etr__intro-badge {
display: inline-block;
font-family: 'Roboto Mono', ui-monospace, monospace;
font-size: 0.68rem;
color: var(--secondary-color) !important;
background: color-mix(in srgb, var(--accent-color) 7%, transparent);
padding: 3px 10px;
border-radius: 20px;
margin-top: 10px;
}
@media (max-width: 620px) {
.app-home-etr__intro {
grid-template-columns: 1fr;
}
}
.app-home-etr__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.app-home-etr__card {
background: linear-gradient(160deg, color-mix(in srgb, var(--accent-color) 7%, transparent), var(--surface-color) 55%);
border-radius: 20px;
padding: 26px 24px;
border: 1px solid var(--border-color);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.app-home-etr__card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--secondary-color);
}
.app-home-etr__card-icon {
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--surface-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--secondary-color);
margin-bottom: 14px;
box-shadow: var(--shadow-sm);
transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.app-home-etr__card:hover .app-home-etr__card-icon {
transform: scale(1.08) rotate(-4deg);
}
.app-home-etr__card-icon svg {
width: 20px;
height: 20px;
}
.app-home-etr__card-title {
font-weight: 600;
font-size: 1rem;
color: var(--primary-color);
margin-bottom: 8px;
}
.app-home-etr__card-text {
font-size: 0.85rem;
color: var(--text-secondary);
margin-bottom: 14px;
}
.app-home-etr__card-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
font-weight: 600;
color: var(--accent-color);
}
.app-home-etr__card-link:hover {
text-decoration: underline;
}
.app-home-etr__card-link svg {
width: 13px;
height: 13px;
}
.app-home-etr__links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 14px;
margin-top: 6px;
}
.app-home-etr__links .app-button__text {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
}
.app-home-etr__link {
background: var(--card-bg-color);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 15px 18px;
font-size: 0.85rem;
font-weight: 500;
color: var(--text-secondary);
transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.app-home-etr__link:hover {
border-color: var(--secondary-color);
color: var(--primary-color);
transform: translateY(-2px);
}
.app-home-etr__link-icon {
width: 17px;
height: 17px;
color: var(--secondary-color);
flex-shrink: 0;
}
.app-home-etr__link-trail {
margin-left: auto;
color: var(--secondary-color);
}
.app-home-etr__link-trail svg {
width: 14px;
height: 14px;
}
@media (max-width: 520px) {
.app-home-etr__intro {
padding: 24px 20px;
}
}
/* ─────────────────────────────────────
ACCESOS RÁPIDOS
───────────────────────────────────── */
.app-home-quicklinks {
padding-bottom: 2rem;
}
.app-home-quicklinks__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.app-home-quicklinks__card {
position: relative;
display: block;
background: var(--card-bg-color);
border: 1px solid var(--border-color);
border-radius: 26px;
padding: 40px 32px;
text-align: center;
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.app-home-quicklinks__card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--secondary-color);
}
.app-home-quicklinks__card::after {
content: '';
position: absolute;
width: 160px;
height: 160px;
border-radius: 50%;
background: color-mix(in srgb, var(--accent-color) 7%, transparent);
top: -70px;
right: -70px;
transition: transform .3s ease;
}
.app-home-quicklinks__card:hover::after {
transform: scale(1.15);
}
.app-home-quicklinks__icon {
position: relative;
width: 72px;
height: 72px;
border-radius: 22px;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-light);
margin: 0 auto 22px;
box-shadow: var(--shadow-sm);
transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.app-home-quicklinks__card:hover .app-home-quicklinks__icon {
transform: scale(1.08) rotate(-4deg);
}
.app-home-quicklinks__icon svg {
width: 32px;
height: 32px;
}
.app-home-quicklinks__title {
position: relative;
font-weight: 700;
font-size: 1.15rem;
color: var(--primary-color);
margin-bottom: 10px;
}
.app-home-quicklinks__text {
position: relative;
font-size: 0.87rem;
color: var(--text-muted);
max-width: 260px;
margin: 0 auto 20px;
line-height: 1.55;
}
.app-home-quicklinks__cta {
position: relative;
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.84rem;
font-weight: 700;
color: var(--secondary-color) !important;
}
.app-home-quicklinks__cta svg {
width: 14px;
height: 14px;
transition: transform .2s ease;
}
.app-home-quicklinks__card:hover .app-home-quicklinks__cta svg {
transform: translateX(3px);
}
@media (max-width: 900px) {
.app-home-quicklinks__grid {
grid-template-columns: 1fr;
}
}
/* ─────────────────────────────────────
RESPONSIVE
───────────────────────────────────── */
@media (max-width: 960px) {
.home-events__split {
grid-template-columns: 1fr;
}
.home-conv__grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.home-section-container {
padding: 0 1rem 2.5rem;
}
.home-conv__grid {
grid-template-columns: 1fr;
}
.home-membership__badge {
padding: 1rem 1rem 1rem 1.25rem;
gap: 0.875rem;
}
.home-membership__tag {
display: none;
}
}
/* ========================================================================
AUTH PAGE - Card Flotante Unificada
======================================================================== */
.auth-page {
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
background: var(--background-color);
position: relative;
}
.auth-page::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
}
/* ========================================================================
AUTH CARD - Tarjeta Flotante con Dos Secciones
======================================================================== */
.auth-card {
display: flex;
width: 100%;
max-width: 950px;
background: var(--surface-color);
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-xl);
position: relative;
z-index: 1;
}
/* ========================================================================
LADO IZQUIERDO - Branding (40%)
======================================================================== */
.auth-card__branding {
flex: 0 0 50%;
background: var(--split-left-bg);
padding: 3rem 2.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: var(--text-light);
position: relative;
}
/*.auth-card__branding::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}*/
.auth-card__logo {
width: 100px;
height: 100px;
margin-bottom: 1.5rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-lg);
position: relative;
z-index: 1;
}
.auth-card__logo img {
width: 70px;
height: 70px;
object-fit: contain;
}
.auth-card__logo svg {
stroke: var(--text-light);
}
.auth-card__title {
font-size: 1.75rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
color: var(--text-light);
line-height: 1.2;
position: relative;
z-index: 1;
}
.auth-card__subtitle {
font-size: 1rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.9) !important;
margin: 0 0 1.5rem 0;
position: relative;
z-index: 1;
}
.auth-card__divider {
width: 50px;
height: 3px;
background: var(--secondary-dark);
margin: 0 auto 1.5rem;
border-radius: 2px;
position: relative;
z-index: 1;
}
.auth-card__description {
font-size: 0.9rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85) !important;
font-style: italic;
margin: 0;
position: relative;
z-index: 1;
}
/* ========================================================================
LADO DERECHO - Formulario (60%)
======================================================================== */
.auth-card__form {
flex: 1;
padding: 3rem 2.5rem;
display: flex;
flex-direction: column;
justify-content: center;
background: var(--surface-color);
}
.auth-card__form-header {
margin-bottom: 2rem;
text-align: center;
}
.auth-card__form-title {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-color);
margin: 0 0 0.5rem 0;
letter-spacing: -0.3px;
}
.auth-card__form-subtitle {
font-size: 0.95rem;
color: var(--text-muted);
margin: 0;
}
.auth-card__form-content {
width: 100%;
}
/* ========================================================================
RESPONSIVE - TABLET
======================================================================== */
@media (max-width: 968px) {
.auth-page {
padding: 1.5rem;
}
.auth-card {
flex-direction: column;
max-width: 500px;
}
.auth-card__branding {
flex: 0 0 auto;
padding: 2.5rem 2rem;
}
.auth-card__logo {
width: 90px;
height: 90px;
margin-bottom: 1.25rem;
}
.auth-card__logo img {
width: 60px;
height: 60px;
}
.auth-card__title {
font-size: 1.5rem;
}
.auth-card__subtitle {
font-size: 0.95rem;
margin-bottom: 1.25rem;
}
.auth-card__description {
font-size: 0.85rem;
}
.auth-card__form {
padding: 2.5rem 2rem;
}
.auth-card__form-title {
font-size: 1.5rem;
}
.auth-card__form-subtitle {
font-size: 0.9rem;
}
}
/* ========================================================================
RESPONSIVE - MOBILE
======================================================================== */
@media (max-width: 480px) {
.auth-page {
padding: 1rem;
}
.auth-card {
border-radius: 16px;
max-width: 100%;
}
.auth-card__branding {
padding: 2rem 1.5rem;
}
.auth-card__logo {
width: 75px;
height: 75px;
margin-bottom: 1rem;
}
.auth-card__logo img {
width: 50px;
height: 50px;
}
.auth-card__title {
font-size: 1.25rem;
}
.auth-card__subtitle {
font-size: 0.875rem;
}
.auth-card__divider {
margin: 0 auto 1.25rem;
}
.auth-card__description {
display: none;
}
.auth-card__form {
padding: 2rem 1.5rem;
}
.auth-card__form-header {
margin-bottom: 1.75rem;
}
.auth-card__form-title {
font-size: 1.25rem;
}
.auth-card__form-subtitle {
font-size: 0.85rem;
}
}
/* ========================================================================
CONTACT PAGE - Página de Contacto
======================================================================== */
.contact-section {
max-width: 80%;
margin: 0 auto;
padding: 0 3rem 1rem;
}
.contact-section__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
/* Tarjetas */
.contact-section__card {
background: var(--surface-color) !important;
border-radius: 16px;
padding: 2rem;
box-shadow: var(--shadow-lg);
transition: all 0.3s ease;
border: 0;
}
.contact-section__card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.contact-section__card--full {
grid-column: 1 / -1;
}
.contact-section__card-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.contact-section__card-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--accent-color), var(--secondary-light));
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
box-shadow: var(--shadow-sm);
}
.contact-section__card-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-color);
line-height: 1.2;
}
.contact-section__card-content {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Items de información */
.contact-section__info-item {
display: flex;
align-items: center;
gap: 0.875rem;
}
.contact-section__info-icon {
width: 36px;
height: 36px;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
transition: all 0.3s ease;
}
.contact-section__info-item:hover .contact-section__info-icon {
background: var(--accent-color);
border-color: var(--accent-color);
transform: scale(1.1);
}
.contact-section__info-text {
flex: 1;
}
.contact-section__info-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
font-weight: 600;
display: block;
margin-bottom: 0.125rem;
}
.contact-section__info-value {
font-size: 0.9375rem;
color: var(--text-color);
}
.contact-section__info-value a {
color: var(--accent-color);
text-decoration: none;
transition: color 0.3s ease;
}
.contact-section__info-value a:hover {
color: var(--secondary-color);
text-decoration: underline;
}
/* Redes Sociales */
.contact-section__social-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.contact-section__social-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1rem;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 10px;
color: var(--text-color);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.3s ease;
}
.contact-section__social-link:hover {
background: var(--accent-color);
color: var(--text-light);
border-color: var(--accent-color);
transform: translateX(4px);
}
.contact-section__social-icon {
font-size: 1.25rem;
}
/* Sobre nosotros */
.contact-section__about-text {
font-size: 0.9375rem;
line-height: 1.7;
color: var(--text-muted);
}
/* Mapa y horarios */
.contact-section__map-info {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.contact-section__address {
font-size: 0.9375rem;
line-height: 1.7;
color: var(--text-color);
}
.contact-section__map-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.875rem 1.5rem;
background: var(--primary-color);
color: var(--text-light) !important;
border: none;
border-radius: 10px;
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
align-self: flex-start;
}
.contact-section__map-btn:hover {
background: var(--primary-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.contact-section__hours {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.contact-section__hours-item {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
padding: 0.5rem 0;
}
.contact-section__hours-time {
color: var(--text-color);
font-weight: 600;
}
/* Responsive */
@media (max-width: 968px) {
.contact-section__grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.contact-section__card {
padding: 1.5rem;
}
.contact-section__social-grid {
grid-template-columns: 1fr;
}
}
/* Privacy Page - Hero Minimalista Moderno */
.privacy-page {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--background-color);
}
/* Hero - Diseño Minimalista y Profesional */
.privacy-page__hero {
position: relative;
width: 100%;
background: var(--surface-color);
border-bottom: 1px solid var(--border-color);
padding: 1.5rem 1.5rem 1rem;
}
.privacy-page__hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
}
.privacy-page__hero-content {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.privacy-page__hero-title {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-color) !important;
margin: 0 0 0.375rem 0;
letter-spacing: -0.02em;
display: inline-flex;
align-items: center;
gap: 0.75rem;
}
.privacy-page__hero-title::before {
content: '🔒';
font-size: 1.5rem;
opacity: 0.8;
}
.privacy-page__hero-subtitle {
font-size: 0.938rem !important;
color: var(--text-muted) !important;
margin: 0 auto !important;
max-width: 720px;
font-weight: 400;
line-height: 1.5;
}
/* Container */
.privacy-page__container {
flex: 1;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1.5rem 3rem;
}
/* Card */
.privacy-page__card {
background: var(--surface-color);
border-radius: 0.75rem;
box-shadow: var(--shadow-md);
overflow: hidden;
border: 1px solid var(--border-color);
min-height: 500px;
}
/* Responsive - Tablets */
@media (max-width: 768px) {
.privacy-page__hero {
padding: 1.25rem 1rem 0.875rem;
}
.privacy-page__hero-title {
font-size: 1.5rem;
}
.privacy-page__hero-title::before {
font-size: 1.25rem;
}
.privacy-page__hero-subtitle {
font-size: 0.875rem !important;
}
.privacy-page__container {
padding: 1.75rem 1rem 2.5rem;
}
.privacy-page__card {
border-radius: 0.625rem;
}
}
/* Responsive - Móviles */
@media (max-width: 480px) {
.privacy-page__hero {
padding: 1.125rem 1rem 0.75rem;
}
.privacy-page__hero-title {
font-size: 1.375rem;
}
.privacy-page__hero-subtitle {
font-size: 0.813rem !important;
}
.privacy-page__container {
padding: 1.5rem 0.75rem 2rem;
}
.privacy-page__card {
border-radius: 0.5rem;
box-shadow: var(--shadow-sm);
}
}
/* Dark Mode Adjustments */
@media (prefers-color-scheme: dark) {
.privacy-page__hero {
background: var(--surface-color);
border-bottom-color: var(--border-color);
}
.privacy-page__card {
box-shadow: var(--shadow-lg);
border-color: var(--border-color);
}
}
/* Tema oscuro explícito */
:root[data-theme='dark'] .privacy-page__hero,
.dark .privacy-page__hero {
background: var(--surface-color);
border-bottom-color: var(--border-color);
}
:root[data-theme='dark'] .privacy-page__card,
.dark .privacy-page__card {
box-shadow: var(--shadow-lg);
border-color: var(--border-color);
}
/* Servicios (BEM) - Hero Minimalista Moderno */
.services {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Hero - Diseño Minimalista y Profesional */
.services__hero {
position: relative;
background: var(--surface-color);
border-bottom: 1px solid var(--border-color);
padding: 1.5rem 1.5rem 1rem;
}
.services__hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
}
.services__hero-inner {
max-width: 1100px;
margin: 0 auto;
text-align: center;
}
.services__title {
font-size: 1.75rem;
line-height: 1.2;
margin: 0 0 0.375rem;
font-weight: 700;
color: var(--text-color) !important;
letter-spacing: -0.02em;
display: inline-flex;
align-items: center;
gap: 0.75rem;
}
.services__title::before {
content: '⚡';
font-size: 1.5rem;
opacity: 0.8;
}
.services__subtitle {
font-size: 0.938rem !important;
margin: 0 auto !important;
max-width: 680px;
color: var(--text-muted) !important;
line-height: 1.5;
font-weight: 400;
}
/* Grid */
.services__grid {
max-width: 1100px;
margin: 0 auto;
padding: 2rem 1.5rem 1rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.services__grid-item {}
/* Card content inside AppCard */
.services__card {
display: grid;
grid-template-columns: 48px 1fr;
gap: 0.75rem;
align-items: start;
}
.services__card-icon {
width: 48px;
height: 48px;
border-radius: 0.625rem;
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
color: #ffffff;
font-size: 1.5rem;
box-shadow: var(--shadow-sm);
}
.services__card-desc {
margin: 0.25rem 0 0;
color: var(--text-color);
line-height: 1.55;
font-size: 0.938rem;
}
/* Empty state */
.services__empty {
grid-column: 1 / -1;
text-align: center;
color: var(--text-muted);
padding: 2rem;
}
/* CTA */
.services__cta {
padding: 1rem 1.5rem 3rem;
}
.services__cta-inner {
max-width: 980px;
margin: 0 auto;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
color: #ffffff;
border-radius: 1rem;
padding: 2.5rem 2rem;
text-align: center;
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
}
.services__cta-inner::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
pointer-events: none;
}
.services__cta-title {
margin: 0 0 0.75rem;
font-size: 1.5rem;
font-weight: 600;
color: #ffffff !important;
}
.services__cta-text {
margin: 0 0 1.5rem;
color: rgba(255, 255, 255, 0.95) !important;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Responsive */
@media (max-width: 1024px) {
.services__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.services__hero {
padding: 1.25rem 1rem 0.875rem;
}
.services__title {
font-size: 1.5rem;
}
.services__title::before {
font-size: 1.25rem;
}
.services__subtitle {
font-size: 0.875rem !important;
}
.services__cta-inner {
padding: 2rem 1.5rem;
}
}
@media (max-width: 640px) {
.services__title {
font-size: 1.375rem;
}
.services__grid {
grid-template-columns: 1fr;
padding: 1.5rem 1rem 1rem;
}
.services__card {
grid-template-columns: 40px 1fr;
}
.services__card-icon {
width: 40px;
height: 40px;
font-size: 1.25rem;
}
.services__cta-inner {
border-radius: 0.75rem;
padding: 1.75rem 1rem;
}
.services__cta-title {
font-size: 1.25rem;
}
}
/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
.services__hero {
background: var(--surface-color);
border-bottom-color: var(--border-color);
}
.services__card-icon {
background: linear-gradient(135deg, var(--primary-light) 0%, var(--accent-light) 100%);
}
}
:root[data-theme="dark"] .services__hero,
html[data-theme="dark"] .services__hero,
html.dark .services__hero,
body.dark .services__hero {
background: var(--surface-color);
border-bottom-color: var(--border-color);
}
:root[data-theme="dark"] .services__card-icon,
html[data-theme="dark"] .services__card-icon,
html.dark .services__card-icon,
body.dark .services__card-icon {
background: linear-gradient(135deg, var(--primary-light) 0%, var(--accent-light) 100%);
}
/* ============================================
APP ESTATUTOS - Hero + Sidebar + Contenido
Metodología BEM
Variables de /base/colors.css
============================================ */
/* ============================================
BLOQUE: app-statutes-hero (Estilo Awards)
============================================ */
.app-statutes-hero {
padding: 0 2rem;
}
/* ============================================
BLOQUE: app-statutes-page
============================================ */
.app-statutes-page {
max-width: 90rem;
margin: 0 auto;
padding: 0 1.5rem 3rem;
}
/* ============================================
ELEMENTO: app-statutes-page__loading
============================================ */
.app-statutes-page__loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.5rem;
padding: 4rem 2rem;
}
.app-statutes-page__loading-text {
font-size: 1rem;
color: var(--text-muted);
margin: 0;
}
/* ============================================
ELEMENTO: app-statutes-page__empty
============================================ */
.app-statutes-page__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 4rem 2rem;
gap: 1.5rem;
}
.app-statutes-page__empty-icon {
width: 6rem;
height: 6rem;
color: var(--disabled-color);
opacity: 0.5;
}
.app-statutes-page__empty-message {
font-size: 1.125rem;
color: var(--text-muted);
margin: 0;
}
/* ============================================
BLOQUE: app-statutes-layout (Grid Sidebar + Main)
============================================ */
.app-statutes-layout {
display: grid;
grid-template-columns: 18rem 1fr;
gap: 2rem;
align-items: start;
}
/* ============================================
BLOQUE: app-statutes-main
============================================ */
.app-statutes-main {
display: flex;
flex-direction: column;
gap: 2rem;
}
/* ============================================
ELEMENTO: app-statutes-card (AppCard personalizado)
============================================ */
.app-statutes-card {
border: 2px dashed var(--sw-focus) !important;
border-radius: 0.75rem !important;
background: var(--secondary-foreground) !important;
backdrop-filter: blur(10px);
box-shadow: none !important;
transition: all 0.3s ease;
height: 45rem;
overflow: auto;
margin-top: 0;
}
/* Estilos del scrollbar - Webkit (Chrome, Safari, Edge) */
.app-statutes-card::-webkit-scrollbar {
width: 0.75rem;
}
.app-statutes-card::-webkit-scrollbar-track {
background: var(--background-color);
border-radius: 0.5rem;
margin: 0.5rem 0;
}
.app-statutes-card::-webkit-scrollbar-thumb {
background: var(--accent-color);
border-radius: 0.5rem;
border: 2px solid var(--background-color);
transition: background 0.2s ease;
}
.app-statutes-card::-webkit-scrollbar-thumb:hover {
background: var(--accent-dark);
}
.app-statutes-card::-webkit-scrollbar-thumb:active {
background: var(--secondary-dark);
}
/* Estilos del scrollbar - Firefox */
.app-statutes-card {
scrollbar-width: thin;
scrollbar-color: var(--accent-color) var(--background-color);
}
.app-statutes-card .app-card-body {
padding: 0;
}
/* ============================================
ELEMENTO: app-statutes-item
============================================ */
.app-statutes-item {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.app-statutes-item__header {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
border-left: 1px solid var(--accent-dark);
}
.app-statutes-item__title {
font-size: 1.5rem;
font-weight: 700;
color: var(--secondary-dark);
margin: 0;
line-height: 1;
font-style: italic;
}
.app-statutes-item__body {
padding: 1.5rem;
color: var(--text-secondary);
line-height: 1.7;
font-size: 1rem;
text-align: justify;
}
.app-statutes-item__body h2 {
font-size: 1.375rem;
font-weight: 600;
color: var(--text-color);
margin: 0 0 1rem 0;
}
.app-statutes-item__body h3 {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-color);
margin: 1.5rem 0 0.75rem 0;
}
.app-statutes-item__body p {
margin: 0 0 1rem 0;
}
.app-statutes-item__body p:last-child {
margin-bottom: 0;
}
.app-statutes-item__body ul,
.app-statutes-item__body ol {
margin: 0 0 1rem 0;
padding-left: 1.5rem;
}
.app-statutes-item__body li {
margin-bottom: 0.5rem;
}
.app-statutes-item__body strong {
font-weight: 600;
color: var(--text-color);
}
.app-statutes-item__body a {
color: var(--link-color);
text-decoration: underline;
transition: color 0.2s ease;
}
.app-statutes-item__body a:hover {
color: var(--link-hover-color);
}
/* ============================================
RESPONSIVE - Mobile First
============================================ */
@media (max-width: 64rem) {
.app-statutes-layout {
grid-template-columns: 15rem 1fr;
gap: 1.5rem;
}
}
@media (max-width: 48rem) {
.app-statutes-hero {
padding: 0 0.75rem;
}
.app-statutes-page {
padding: 0 1rem 2rem;
}
.app-statutes-layout {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.app-statutes-main {
order: 1;
}
.app-statutes-item__header {
padding: 1rem;
}
.app-statutes-item__title {
font-size: 1.25rem;
}
.app-statutes-item__body {
padding: 1rem;
font-size: 0.9375rem;
}
.app-statutes-item__body h2 {
font-size: 1.25rem;
}
.app-statutes-item__body h3 {
font-size: 1.0625rem;
}
}
/* ============================================
PRINT STYLES
============================================ */
@media print {
.app-statutes-hero {
background: none;
color: #000;
border-bottom: 2px solid #000;
padding: 1rem 0;
}
.app-statutes-page {
max-width: 100%;
padding: 0;
}
.app-statutes-layout {
display: block;
}
.app-statutes-card {
border: 1px solid #000 !important;
background: transparent !important;
page-break-inside: avoid;
margin-bottom: 1rem;
}
.app-statutes-item__header {
background-color: transparent !important;
border-bottom: 1px solid #000;
}
.app-statutes-item__body {
color: #000;
}
}
/* Listado del comite Estatuto Comite de Revision */
.app-statutes-comit_list {
list-style: none;
padding: 0;
margin: 0;
}
.app-statutes-comit_list li {
display: flex;
align-items: center;
margin: 6px 0;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
}
.app-statutes-comit_list li svg {
margin-right: 8px;
flex-shrink: 0;
color: var(--secondary-dark)
}
/* Layout base */
.support {
max-width: 1200px;
margin: 0 auto;
padding: 16px;
color: var(--clr-text, #222);
background: var(--clr-bg, #fff);
}
.support__loading {
display: flex;
gap: 8px;
align-items: center;
}
.support__loading-text { color: var(--clr-muted, #555); }
.support__error {
background: var(--clr-danger-bg, #fdecea);
color: var(--clr-danger-text, #611a15);
padding: 12px;
border-radius: 8px;
margin: 8px 0;
}
/* Grid principal */
.support__grid { display: grid; grid-template-columns: 360px 1fr; gap: 16px; }
.support__col {
background: var(--clr-card-bg, #fff);
color: var(--clr-text, #222);
border: 1px solid var(--clr-card-border, #eee);
border-radius: 10px;
padding: 12px;
}
.support__col--info { position: sticky; top: 10px; align-self: start; }
.support__title { margin: 0 0 8px; color: var(--clr-text, #222); }
/* Staff badge */
.support__staff-badge {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
padding: 8px 12px;
border-radius: 8px;
margin-bottom: 12px;
font-size: 0.9rem;
text-align: center;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
/* User badge */
.support__user-badge {
background: linear-gradient(135deg, #20bf6b 0%, #26a69a 100%);
color: #fff;
padding: 8px 12px;
border-radius: 8px;
margin-bottom: 12px;
font-size: 0.9rem;
text-align: center;
box-shadow: 0 2px 8px rgba(32, 191, 107, 0.3);
}
/* Closed badge */
.support__closed-badge {
background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
color: #fff;
padding: 8px 12px;
border-radius: 8px;
margin-bottom: 12px;
font-size: 0.9rem;
text-align: center;
box-shadow: 0 2px 8px rgba(127, 140, 141, 0.3);
}
.support__meta { display: grid; grid-template-columns: 1fr; gap: 8px; font-size: .95rem; color: var(--clr-text, #333); }
.support__actions { display: flex; gap: 12px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.support__rate { display: flex; align-items: center; gap: 6px; }
.support__rate-star { background: transparent; border: none; font-size: 20px; cursor: pointer; color: #bbb; padding: 4px; transition: color 0.2s; }
.support__rate-star:hover { color: var(--clr-warning, #f6b800); }
.support__rate-readonly { color: var(--clr-warning, #f6b800); font-size: 18px; }
/* Columna de mensajes dividida en header (paginación), historial y composer fijo */
.support__col--messages { display: grid; grid-template-rows: auto 1fr auto; min-height: 70vh; }
.support__messages-header { padding-bottom: 8px; border-bottom: 1px solid var(--clr-card-border, #eee); color: var(--clr-text, #222); }
/* FIXED HEIGHT + SCROLL: el contenedor de mensajes tiene alto fijo y scroll interno */
.support__messages-wrapper {
height: 420px;               /* alto fijo para evitar desfase */
overflow-y: auto;            /* scroll interno vertical */
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;     /* scroll suave */
}
.support__messages {
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 4px;
min-height: 100%;           /* asegurar que ocupe todo el alto disponible */
}
.support__messages-empty { color: var(--clr-muted, #666); font-style: italic; }
/* Composer fijo al fondo de la columna de mensajes */
.support__composer {
position: sticky;
bottom: 0;
background: var(--clr-card-bg, #fff);
padding-top: 8px;
border-top: 1px solid var(--clr-card-border, #eee);
display: grid;
gap: 8px;
}
.support__composer-label { font-weight: 600; color: var(--clr-text, #222); }
.support__composer-input {
min-height: 100px;
max-height: 30vh;
resize: vertical;
padding: 10px;
border: 1px solid var(--clr-input-border, #ddd);
border-radius: 8px;
font: inherit;
color: var(--clr-text, #222);
background: var(--clr-bg, #fff);
}
.support__composer-hint {
background: #fff3cd;
color: #856404;
padding: 8px 12px;
border-radius: 6px;
font-size: 0.9rem;
border-left: 4px solid #ffc107;
}
.support__composer-hint--closed {
background: #f8d7da;
color: #721c24;
border-left-color: #f5c6cb;
}
.support__composer-actions { display: flex; justify-content: flex-end; }
/* Responsive: 1 columna y reordenamos para que mensajes vayan primero */
@media (max-width: 768px) {
.support__grid { grid-template-columns: 1fr; }
.support__col--messages { order: 2; }
.support__col--info { order: 1; position: static; }
.support__messages-wrapper {
height: 300px; /* altura menor en móviles */
}
}
/* Dark mode support using prefers-color-scheme */
@media (prefers-color-scheme: dark) {
.support { color: var(--clr-text, #eaeaea); background: var(--clr-bg, #0e0e0e); }
.support__col { background: var(--clr-card-bg, #121212); border-color: var(--clr-card-border, #2a2a2a); color: var(--clr-text, #eaeaea); }
.support__title { color: var(--clr-text, #eaeaea); }
.support__meta { color: var(--clr-text, #eaeaea); }
.support__error { background: var(--clr-danger-bg, #3b1110); color: var(--clr-danger-text, #ffd1cf); }
.support__messages-header { border-color: var(--clr-card-border, #2a2a2a); color: var(--clr-text, #eaeaea); }
.support__composer { background: var(--clr-card-bg, #121212); border-color: var(--clr-card-border, #2a2a2a); }
.support__composer-input { background: #0e0e0e; color: var(--clr-text, #eaeaea); border-color: var(--clr-input-border-strong, #e5e7eb); }
.support__composer-hint { background: #4a3f1c; color: #ffeaa7; border-color: #ffc107; }
.support__composer-hint--closed { background: #3b1110; color: #ffd1cf; border-color: #f5c6cb; }
.support__messages-empty { color: var(--clr-muted, #aaa); }
}
.terms {
width: 100%;
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-alt-color, #f6f8fa);
padding: 3rem 0;
}
.terms__container {
width: 100%;
max-width: 600px;
margin: 0 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: transparent;
box-shadow: none;
border-radius: 0;
padding: 0;
}
@media (max-width: 700px) {
.terms {
padding: 1.2rem 0;
}
.terms__container {
max-width: 100%;
margin: 0;
}
}
/* ─────────────────────────────────────────────
LAYOUT PRINCIPAL
───────────────────────────────────────────── */
.app-videoteca {
display: grid;
grid-template-columns: 260px 1fr;
gap: 1.5rem;
align-items: start;
max-width: 1440px;
margin: 0 auto;
padding: 1.5rem;
}
.app-videoteca__year-count {
display: flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
height: 1.5rem;
padding: 0 0.4rem;
border-radius: 999px;
background: var(--hover-background-color);
color: var(--secondary-color) !important;
font-size: 0.7rem;
font-weight: 700;
}
.app-videoteca__loading,
.app-videoteca__error {
grid-column: 1 / -1;
text-align: center;
padding: 3rem 1rem;
color: var(--text-muted);
}
/* ─────────────────────────────────────────────
SIDEBAR
───────────────────────────────────────────── */
.app-videoteca__sidebar-inner {
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 0.75rem;
padding: 1rem;
}
.app-videoteca__sidebar-title {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 0.75rem;
padding: 0 0.5rem;
}
.app-videoteca__sidebar-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.app-videoteca__sidebar-item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.55rem 0.75rem;
border-radius: 0.5rem;
border: none;
background: transparent;
color: var(--text-color);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s, color 0.2s;
text-decoration: none;
}
.app-videoteca__sidebar-item:hover {
background: var(--hover-background-color);
}
.app-videoteca__sidebar-item--active {
background: var(--secondary-color);
color: #fff;
}
.app-videoteca__sidebar-item--active .app-videoteca__year-count {
background: rgba(255, 255, 255, 0.2);
color: #fff !important;
}
/* ─────────────────────────────────────────────
ÁREA PRINCIPAL
───────────────────────────────────────────── */
.app-videoteca__main {
display: flex;
flex-direction: column;
min-width: 0;
}
.app-videoteca__header {
padding: 1.5rem 1.5rem 1.25rem;
border-bottom: 1px solid var(--border-color);
background: var(--surface-color);
border-radius: 0.75rem 0.75rem 0 0;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
box-shadow: var(--shadow-sm);
}
.app-videoteca__overline {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--secondary-color);
display: flex;
align-items: center;
gap: 0.45rem;
margin-bottom: 0.5rem;
}
.app-videoteca__overline::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--secondary-color);
box-shadow: 0 0 8px var(--secondary-color);
display: block;
}
.app-videoteca__page-title {
font-size: clamp(1.4rem, 3vw, 1.9rem);
font-weight: 700;
color: var(--text-color);
line-height: 1.2;
}
.app-videoteca__page-sub {
font-size: 0.85rem;
color: var(--text-muted);
margin-top: 0.35rem;
}
/* ─────────────────────────────────────────────
PLAYER ACTIVO
───────────────────────────────────────────── */
.app-videoteca__player-wrap {
background: var(--primary-color);
border-radius: 0.75rem;
margin-top: 1rem;
overflow: hidden;
}
.app-videoteca__player-wrap--hidden {
display: none;
}
.app-videoteca__player-inner {
padding: 1.5rem;
}
.app-videoteca__player-iframe-wrap {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 0.75rem;
overflow: hidden;
background: #000;
box-shadow: var(--shadow-lg);
margin-bottom: 1.25rem;
}
.app-videoteca__player-iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
.app-videoteca__player-meta {
display: grid;
grid-template-columns: 1fr auto;
gap: 1.5rem;
align-items: start;
}
.app-videoteca__player-badge {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--secondary-light);
margin-bottom: 0.6rem;
}
.app-videoteca__player-title {
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
font-weight: 600;
color: #fff;
line-height: 1.3;
margin-bottom: 0.6rem;
}
.app-videoteca__player-desc {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.6);
line-height: 1.6;
max-width: 580px;
}
.app-videoteca__player-close {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.8);
border-radius: 0.5rem;
padding: 0.5rem 0.9rem;
font-size: 0.78rem;
display: flex;
align-items: center;
gap: 0.4rem;
transition: background 0.2s, color 0.2s;
white-space: nowrap;
cursor: pointer;
}
.app-videoteca__player-close:hover {
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
.app-videoteca__player-close svg {
width: 14px;
height: 14px;
}
/* ─────────────────────────────────────────────
CONTENIDO
───────────────────────────────────────────── */
.app-videoteca__content {
padding: 1.5rem 0;
}
.app-videoteca__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.1rem;
}
/* ─────────────────────────────────────────────
VIDEO CARD
───────────────────────────────────────────── */
.app-videoteca__card {
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 0.85rem;
overflow: hidden;
display: flex;
flex-direction: column;
cursor: pointer;
transition: border-color 0.25s, box-shadow 0.3s, transform 0.25s;
text-decoration: none;
color: inherit;
}
.app-videoteca__card:hover {
border-color: var(--secondary-color);
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.app-videoteca__card--active {
border-color: var(--secondary-color);
box-shadow: var(--shadow-md);
}
.app-videoteca__card-thumb {
width: 100%;
aspect-ratio: 16 / 9;
position: relative;
overflow: hidden;
flex-shrink: 0;
}
/* ── Placeholder opción C ── */
.app-videoteca__card-thumb-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #143765;
position: relative;
overflow: hidden;
}
.app-videoteca__card-thumb-placeholder::before {
content: '';
position: absolute;
right: -30px;
top: -30px;
width: 160px;
height: 160px;
border-radius: 50%;
background: rgba(77, 122, 176, 0.15);
pointer-events: none;
}
.app-videoteca__card-thumb-placeholder::after {
content: '';
position: absolute;
left: -20px;
bottom: -40px;
width: 120px;
height: 120px;
border-radius: 50%;
background: rgba(0, 152, 255, 0.08);
pointer-events: none;
}
.app-videoteca__card-ph-controls {
display: flex;
align-items: center;
gap: 20px;
z-index: 1;
}
.app-videoteca__card-ph-skip {
display: flex;
align-items: center;
justify-content: center;
}
.app-videoteca__card-ph-skip svg {
width: 24px;
height: 24px;
color: rgba(255, 255, 255, 0.25);
}
.app-videoteca__card-ph-logo {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
border: 1.5px solid rgba(255, 255, 255, 0.15);
opacity: 0.5;
z-index: 1;
}
.app-videoteca__card-ph-title {
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: 12px;
text-align: center;
padding: 0 1.5rem;
max-width: 90%;
line-height: 1.4;
z-index: 1;
color: rgba(255, 255, 255, 0.4) !important;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.app-videoteca__card-ph-sub {
font-size: 0.55rem;
color: rgba(255, 255, 255, 0.25) !important;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: 4px;
z-index: 1;
}
.app-videoteca__card-ph-corner {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 1;
}
.app-videoteca__card-ph-corner-line-1 {
display: block;
width: 32px;
height: 1px;
background: rgba(255, 255, 255, 0.1);
margin-bottom: 3px;
}
.app-videoteca__card-ph-corner-line-2 {
display: block;
width: 22px;
height: 1px;
background: rgba(255, 255, 255, 0.1);
margin-bottom: 3px;
}
.app-videoteca__card-ph-corner-line-3 {
display: block;
width: 14px;
height: 1px;
background: rgba(255, 255, 255, 0.1);
}
/* ── Play overlay ── */
.app-videoteca__card-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 26, 51, 0.35);
opacity: 0;
transition: opacity 0.25s;
}
.app-videoteca__card:hover .app-videoteca__card-play,
.app-videoteca__card--active .app-videoteca__card-play {
opacity: 1;
}
.app-videoteca__card-play-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--secondary-color);
box-shadow: 0 0 0 8px rgba(0, 152, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s;
}
.app-videoteca__card:hover .app-videoteca__card-play-btn {
transform: scale(1.08);
}
.app-videoteca__card-play-btn svg {
width: 16px;
height: 16px;
color: #fff;
margin-left: 2px;
}
.app-videoteca__card-now-playing {
position: absolute;
top: 0.6rem;
left: 0.6rem;
background: var(--secondary-color);
color: #fff;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.25rem 0.6rem;
border-radius: 999px;
display: none;
align-items: center;
gap: 0.3rem;
}
.app-videoteca__card--active .app-videoteca__card-now-playing {
display: flex;
}
.app-videoteca__card-body {
padding: 1rem 1.1rem 1.1rem;
display: flex;
flex-direction: column;
flex: 1;
}
.app-videoteca__card-session {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--secondary-color);
margin-bottom: 0.35rem;
}
.app-videoteca__card-title {
font-size: 0.92rem;
font-weight: 600;
color: var(--text-color);
line-height: 1.35;
margin-bottom: 0.5rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.app-videoteca__card-desc {
font-size: 0.8rem;
color: var(--text-muted);
line-height: 1.5;
margin-bottom: 0.75rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
.app-videoteca__card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding-top: 0.65rem;
border-top: 1px solid var(--border-light);
margin-top: auto;
}
.app-videoteca__card-year {
font-size: 0.75rem;
color: var(--text-muted) !important;
font-weight: 600;
}
.app-videoteca__card-cta {
font-size: 0.75rem;
font-weight: 600;
color: var(--secondary-color) !important;
display: flex;
align-items: center;
gap: 0.3rem;
}
.app-videoteca__card-cta svg {
width: 12px;
height: 12px;
}
/* ─────────────────────────────────────────────
EMPTY STATE
───────────────────────────────────────────── */
.app-videoteca__empty {
padding: 4rem 2rem;
text-align: center;
}
.app-videoteca__empty svg {
width: 48px;
height: 48px;
color: var(--border-color);
margin: 0 auto 1rem;
}
.app-videoteca__empty p {
font-size: 0.9rem;
color: var(--text-muted);
}
/* ─────────────────────────────────────────────
PAGINACIÓN
───────────────────────────────────────────── */
.app-videoteca__pagination {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
margin-top: 2rem;
}
.app-videoteca__pagination-group {
display: inline-flex;
align-items: center;
border-radius: 0.65rem;
overflow: hidden;
background: var(--surface-color);
border: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
}
.app-videoteca__pagination-btn {
width: 2.8rem;
height: 2.8rem;
border: none;
background: var(--surface-color);
color: var(--primary-color);
cursor: pointer;
transition: background 0.2s;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.app-videoteca__pagination-btn:hover {
background: var(--hover-background-color);
}
.app-videoteca__pagination-btn--disabled {
color: var(--border-color);
cursor: default;
pointer-events: none;
}
.app-videoteca__pagination-btn svg {
pointer-events: none;
}
.app-videoteca__pagination-current {
height: 2.8rem;
padding: 0 1.4rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 700;
color: var(--primary-color);
letter-spacing: 0.06em;
user-select: none;
white-space: nowrap;
border-left: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
}
.app-videoteca__pagination-info {
font-size: 0.72rem;
color: var(--text-muted);
font-weight: 500;
letter-spacing: 0.04em;
}
/* ─────────────────────────────────────────────
RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 1024px) {
.app-videoteca {
grid-template-columns: 220px 1fr;
}
}
@media (max-width: 768px) {
.app-videoteca {
grid-template-columns: 1fr;
padding: 1rem;
gap: 1rem;
}
.app-videoteca__header {
padding: 1.25rem 1rem 1rem;
align-items: flex-start;
}
.app-videoteca__grid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.app-videoteca__sidebar-inner {
border-radius: 0.5rem;
}
.app-videoteca__sidebar-list {
flex-direction: row;
flex-wrap: wrap;
gap: 0.3rem;
}
.app-videoteca__sidebar-item {
padding: 0.4rem 0.65rem;
font-size: 0.8rem;
}
.app-videoteca__pagination-btn {
width: 2.5rem;
height: 2.5rem;
}
.app-videoteca__pagination-current {
height: 2.5rem;
padding: 0 1rem;
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.app-videoteca__grid {
grid-template-columns: 1fr;
}
}
/* MainLayout adjustments for AppSideBar */
:root {
--layout-content-padding: clamp(12px, 2vw, 20px);
--layout-sidebar-width: min(320px, 90vw);
/* Altura global del TopBar para coordinar layout */
--layout-topbar-height: 64px; /* ajustable desde el componente si fuera necesario */
/* EnvironmentBar (aviso modo prueba/producción) apilado arriba del TopBar */
--env-bar-height: 30px;
}
/* EnvironmentBar + TopBar viajan juntos como un solo encabezado fijo.
Al ser "sticky" (no "fixed") siguen ocupando su espacio en el flujo normal,
así que el contenido de abajo no necesita padding-top adicional. */
.app-header-stack {
position: sticky;
top: 0;
z-index: 985;
width: 100%;
}
/* El header es sticky: no necesitamos reservar espacio extra en el contenido */
.main-layout > main.content-area {
padding-top: 0 !important;
margin-top: 0 !important;
}
.main-layout {
position: relative;
min-height: 100dvh;
display: flex;
flex-direction: column;
background: var(--surface-0, transparent);
}
/* content area spacing below topbar */
.content-area {
/*padding: var(--layout-content-padding);*/
padding-top: calc(var(--layout-content-padding) + var(--layout-topbar-height));
transition: margin-left .28s ease;
/* Permite que el �rea de contenido se desplace correctamente bajo topbar sticky */
display: block;
}
/* Asegura espacio bajo el TopBar para el contenido principal */
main.content-area {
padding-top: var(--layout-topbar-height);
min-height: calc(100dvh - var(--layout-topbar-height));
}
/* Shift when sidebar open on large screens */
@media (min-width: 1024px) {
.content-area--shifted {
margin-left: var(--layout-sidebar-width);
}
}