/* ============================================================
   NEXSYAN — Lo compartido por las dos superficies públicas

   Son dos y tienen naturalezas distintas:

     · nexsyan.com          — el sitio de marca. Su sistema es landing.css.
     · el acceso al tenant  — login, recuperación de clave, registro por
                              invitación, proyecto detenido y errores.
                              Su sistema es publico.css, sobre Bootstrap.

   Aquí vive solo lo que ambas comparten de verdad y tiene que verse
   idéntico: el botón, la alerta y cuatro reglas de base. Nada más entra:
   un componente que solo usa una de las dos va en la hoja de esa.

   Gestión NO carga esta hoja. Su interfaz es de trabajo interno y tiene
   sus propios controles.

   Depende de nx-brand.css, que se carga antes.
   ============================================================ */

* { box-sizing: border-box; }

img { max-width: 100%; display: block; }

a { color: var(--brand); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--brand-soft); }

/* `hidden` tiene que ganarle a cualquier componente con display propio: sin
   esto un elemento oculto con `display: flex` se muestra igual. */
[hidden] { display: none !important; }

/* ============================================================
   Botón
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--t);
    text-decoration: none;
    line-height: 1.3;
}

.btn i { font-size: 15px; }

.btn--block { width: 100%; justify-content: center; }

/* Bootstrap pone outline:0 en .btn:focus-visible y no lo reemplaza por nada.
   Sin esto, quien navega con teclado no ve dónde está parado. */
.btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

.btn--primary {
    background: linear-gradient(135deg, #5BB4F0 0%, var(--brand) 46%, #2F86CE 100%);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset,
                0 10px 26px -10px rgba(75, 163, 227, 0.55);
}

.btn--primary:hover {
    background: linear-gradient(135deg, #6FC0F5 0%, #55AAEA 46%, #3B92D8 100%);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
                0 16px 34px -12px rgba(75, 163, 227, 0.65);
}

/* El anillo genérico es var(--brand), el mismo color del relleno: sobre el
   primario quedaba invisible. Claro, y con halo para que se vea sobre foto. */
.btn--primary:focus-visible {
    outline-color: var(--text);
    box-shadow: 0 0 0 5px rgba(9, 15, 23, 0.85);
}

.btn--ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border-strong);
}

.btn--ghost:hover {
    background: var(--bg-hover);
    border-color: var(--text-soft);
    color: var(--text);
}

/* ============================================================
   Alerta
   ============================================================ */

.alert-ok, .alert-err, .alert-info {
    padding: 12px 14px;
    border-radius: var(--r-sm);
    margin-bottom: 18px;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-ok {
    background: rgba(61, 214, 140, 0.08);
    border: 1px solid var(--success);
    color: var(--success);
}

.alert-err {
    background: rgba(244, 117, 117, 0.08);
    border: 1px solid var(--danger);
    color: var(--danger);
}

.alert-info {
    background: var(--brand-fade);
    border: 1px solid var(--brand);
    color: var(--brand);
}