/** * ============================================================================ * BRAND VARIANTS * ============================================================================ * Overrides visuales por marca. Cada marca aplica su clase en * (definida en brand-config.ftl) y redefine aquí lo que se aparta del * design system base. Este archivo se carga ÚLTIMO en theme.properties * para que sus reglas ganen por orden de cascada. * ============================================================================ */ /* ============================================================================ LAYOUT CENTRADO (marcas sin brand-panel ni header full-width) ============================================================================ */ .auth-container--centered { justify-content: center; min-height: 100vh; } .auth-container--centered .content-panel__wrapper { justify-content: center; } /* Logo de marca dentro del card */ .auth-card__brand-logo { display: flex; justify-content: center; margin-bottom: var(--spacing-xl); } .auth-card__brand-logo-img { max-width: 140px; height: auto; } /* ============================================================================ MARCA: COMITÉ OLÍMPICO COLOMBIANO (brand--coc) ============================================================================ */ .brand--coc { --coc-accent: #4F46E5; /* Card más ancho que el resto de marcas: sin panel lateral, el formulario es lo único en pantalla y a 457px se ve pequeño en desktop. */ --form-max-width: 520px; } /* En `logo/coc.png` la marca ocupa 249x200 de un cuadrado de 447x447. Ese aire se recorta con clip-path y se saca del layout con márgenes negativos. Los factores son proporciones de ESTE PNG: con un asset recortado, este bloque se borra y queda solo el ancho. */ .brand--coc .auth-card__brand-logo-img { --logo-box: 400px; width: var(--logo-box); max-width: none; clip-path: inset(27.29% 22.6% 27.96% 21.7%); margin: calc(var(--logo-box) * -0.2729) calc(var(--logo-box) * -0.226) calc(var(--logo-box) * -0.2796) calc(var(--logo-box) * -0.217); } .brand--coc .auth-card__brand-logo { margin-top: var(--spacing-4xl); margin-bottom: var(--spacing-3xl); } .brand--coc .auth-card__title { font-size: 24px; line-height: 32px; font-weight: 700; } /* Campos más altos, para equilibrar el ancho del card */ .brand--coc .auth-form__input { padding: 12px 16px; } /* Botón primario oscuro (mockup) */ .brand--coc .auth-form__button--primary { background: var(--color-gray-800); } .brand--coc .auth-form__button--primary:hover { background: var(--color-gray-900); } .brand--coc .auth-form__button--primary:focus { box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.3); } .brand--coc .forgot-password-link a { color: var(--color-gray-900); text-decoration: none; } .brand--coc .forgot-password-link a:hover { color: var(--color-gray-900); text-decoration: none; } .brand--coc .auth-form__group--submit { margin-top: var(--spacing-4xl); } .brand--coc .footer-links { font-size: var(--font-size-xs); } .brand--coc .footer-link { color: var(--coc-accent); text-decoration: none; } .brand--coc .footer-link:hover { text-decoration: underline; } /* Responsive: en mobile el card ocupa el ancho con padding del wrapper */ @media (max-width: 768px) { .auth-card__brand-logo-img { max-width: 120px; } .brand--coc .auth-card__brand-logo-img { --logo-box: 340px; } }