/* ═══════════════════════════════════════════════════════════════════════
   PANTALLAS SIN SESIÓN (layouts.auth) — anula el TOAST FLOTANTE legacy
   ------------------------------------------------------------------------
   `public/css/app.css` redefine `.alert` como un toast FLOTANTE a media
   pantalla, y esa regla es la ÚLTIMA global del bundle, así que gana:

       .alert { position:absolute; float:right; width:30%; right:2rem;
                margin-top:2rem; z-index:100; color:#fff; line-height:2.2 }
       .alert-danger { background:#ff3547 !important }

   Ese patrón está PROHIBIDO en el proyecto (ver CLAUDE.md). El panel del gestor
   lo neutraliza en `copilot-ui.css` y el portal del cliente en
   `portal-alert-inline.css`, pero `layouts.auth` no cargaba ninguna de las dos:
   acceso, recuperar contraseña, restablecerla, confirmar, verificar email y la
   activación de un miembro de equipo mostraban sus errores de validación
   flotando fuera del flujo, tapando el formulario que hay que corregir.

   La clase `alert-login` que usaban esas pantallas NO lo arreglaba: solo tocaba
   `right`, `width` y `top`, dejando intactos `position:absolute` y `float`.

   ⚠️ Los colores van con `!important` A PROPÓSITO: `.alert-danger` de `app.css`
   trae `background:#ff3547!important` (pensado para texto blanco). Sin el
   `!important` aquí, un texto oscuro sobre ese rojo saturado da ~2,6:1 de
   contraste, por debajo de AA.

   Mismo contenido que el bloque equivalente del portal, para que las tres áreas
   se vean igual. jul-2026.
   ═══════════════════════════════════════════════════════════════════════ */
.alert {
    position: relative !important;
    float: none !important;
    width: auto !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin-top: 0 !important;
    z-index: auto !important;
    color: inherit;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    box-shadow: none;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
}

.alert.alert-info    { background: #eff6ff !important; color: #1e3a8a !important; border-color: #bfdbfe !important; border-left: 3px solid #3b82f6 !important; }
.alert.alert-success { background: #f0fdf4 !important; color: #14532d !important; border-color: #bbf7d0 !important; border-left: 3px solid #22c55e !important; }
.alert.alert-warning { background: #fffbeb !important; color: #78350f !important; border-color: #fde68a !important; border-left: 3px solid #f59e0b !important; }
.alert.alert-danger  { background: #fef2f2 !important; color: #7f1d1d !important; border-color: #fecaca !important; border-left: 3px solid #ef4444 !important; }

/* ── Modo oscuro ───────────────────────────────────────────────────────────
   `dark-mode.css` define `[data-theme="dark"] .alert-danger` con la misma
   especificidad (0-2-0) que las reglas de arriba, pero se carga ANTES, así que
   perdía: en tema oscuro los avisos salían como cajas claras sobre fondo
   oscuro. Legibles, pero rompiendo el tema. Con `[data-theme]` delante suben a
   0-3-0 y vuelven a mandar. Se conservan los `!important` por el mismo motivo
   que arriba (`app.css` los trae en las variantes). */
[data-theme="dark"] .alert.alert-info    { background: #172554 !important; color: #dbeafe !important; border-color: #1e40af !important; border-left-color: #60a5fa !important; }
[data-theme="dark"] .alert.alert-success { background: #14251a !important; color: #dcfce7 !important; border-color: #166534 !important; border-left-color: #4ade80 !important; }
[data-theme="dark"] .alert.alert-warning { background: #2a1f05 !important; color: #fef3c7 !important; border-color: #92400e !important; border-left-color: #fbbf24 !important; }
[data-theme="dark"] .alert.alert-danger  { background: #2b1214 !important; color: #fee2e2 !important; border-color: #991b1b !important; border-left-color: #f87171 !important; }

/* Ancho y título de las pantallas propias de este layout (activación de equipo).
   Estaban como `style` en línea; la norma del proyecto pide clase reutilizable. */
.cg-auth-page  { max-width: 480px; }
.cg-auth-title { font-weight: 600; }