/* Utilidades puntuales que no vienen en el bundle de Tailwind que trae Unfold (viene recortado a las clases que Unfold mismo usa, no es un build propio del proyecto) — para avisos que no calzan en la paleta base/primary. */ .alert-warning { background-color: rgba(139, 67, 64, 0.07); border-color: rgba(139, 67, 64, 0.25); } .text-alert-warning { color: #8b4340; } /* El navy (#0F3654, ver unfold_config.py) es el color principal y ya vive en `primary`. El teal queda reservado como acento puntual para un par de botones CTA específicos (no es un token global). `!important` porque este archivo se carga antes que el bundle de Tailwind de Unfold en el (ver unfold/templates/unfold/layouts/skeleton.html), así que sin esto el `.bg-primary-600` del componente de botón gana el empate de especificidad. */ .btn-cta-teal { background-color: #0d9488 !important; border-color: #0d9488 !important; } .btn-cta-teal:hover { background-color: #0b7a72 !important; } /* Botón de mostrar/ocultar contraseña del login (ver `core/templates/admin/login.html`). Va a mano y no con utilidades de Tailwind porque el bundle recortado de Unfold no trae `-translate-y-1/2` ni valores arbitrarios; las variables `--color-base-*` sí existen (las inyecta el skeleton de Unfold a partir de `UNFOLD["COLORS"]`). */ .password-field input { padding-right: 2.75rem; } .password-toggle { align-items: center; color: var(--color-base-500); cursor: pointer; display: flex; position: absolute; right: 0.625rem; top: 50%; transform: translateY(-50%); } .password-toggle:hover { color: var(--color-base-700); } .password-toggle .material-symbols-outlined { font-size: 1.25rem; } /* Sube ~4px cada escalón del tipo (text-xs...text-6xl) para que todo se lea más grande — pedido explícito, pensando en coordinadoras que no son muy tech-savvy (esto ya va en la tercera subida). Solo se tocan los tamaños de fuente, no `--spacing`, así que el espaciado/padding no cambia, nada más el texto se ve más grande. Los line-height (--text-*--line-height) son ratios unitless relativos al tamaño de fuente, así que escalan solos sin tocarlos. No hace falta `!important` ni preocuparse por el orden de carga: Tailwind define estas variables dentro de `@layer theme`, y una regla fuera de cualquier `@layer` (como esta) siempre gana sobre una dentro de un layer, sin importar el orden en el documento. */ :root { --text-xs: 0.9875rem; --text-sm: 1.125rem; --text-base: 1.25rem; --text-lg: 1.375rem; --text-xl: 1.5rem; --text-2xl: 1.75rem; --text-3xl: 2.125rem; --text-4xl: 2.5rem; --text-5xl: 3.25rem; --text-6xl: 4rem; } /* Spinner del overlay de "enviando correo" (ver resumen.html). No hay .border-t-transparent en el bundle recortado de Unfold para armar el anillo parcial con utilidades, así que el borde se define a mano; se combina con la utilidad `.animate-spin` (esa sí viene en el bundle). */ .spinner { width: 2.5rem; height: 2.5rem; border-radius: 9999px; border: 4px solid rgba(255, 255, 255, 0.25); border-top-color: #ffffff; }