/* ============================================================================
   Paleta y primitivas de marca de RigoSoft.

   Único lugar donde viven los colores. Lo cargan las DOS mitades del sitio:
   la landing pública (layouts/head.blade.php, CSS plano de /public/css) y las
   pantallas de sesión (layouts/guest.blade.php, que por lo demás va con
   Tailwind). Antes la landing definía sus colores inline en el <head> y el
   /login se quedaba con el índigo y el gris claro que trae Jetstream de
   fábrica: dos identidades distintas en el mismo dominio. Tocando este archivo
   cambian las dos a la vez.

   La marca es monocroma a propósito — el logo es blanco sobre negro y el único
   color de acento que existía era el #dadada de los botones. El relieve sale de
   la tipografía, el espaciado y los bordes, no de saturación.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Base de la escala: 1rem = 10px.

   Tiene que estar acá y no en estilos.css porque las pantallas de sesión NO cargan
   estilos.css, y todo el CSS del proyecto está escrito con esta convención. Sin esto
   el /login renderizaba con 1rem = 16px: la tarjeta salía de 688px en vez de 430 y
   cada tamaño de fuente quedaba un 60% más grande.
   ------------------------------------------------------------------------- */
html {
    font-size: 62.5%;
}

:root {
    /* ---- Superficies, de más oscura a más clara ---- */
    --rs-fondo: #0a0b0d;
    --rs-superficie: #131519;
    --rs-superficie-alta: #1b1e24;

    /* ---- Bordes (blanco translúcido: se apoyan en la superficie que tengan
            debajo en vez de ser un gris fijo que sólo calza en un fondo) ---- */
    --rs-borde: rgba(255, 255, 255, 0.09);
    --rs-borde-fuerte: rgba(255, 255, 255, 0.18);

    /* ---- Texto ---- */
    --rs-texto: #f4f5f7;
    --rs-texto-suave: #a2a8b3;
    --rs-texto-tenue: #6f7681;

    /* ---- Acento: el gris claro histórico de los botones y del subrayado de
            los títulos. Es el color de marca, se mantiene. ---- */
    --rs-acento: #dadada;
    --rs-acento-hover: #ffffff;
    --rs-sobre-acento: #0a0b0d;

    /* ---- Estados ---- */
    --rs-ok: #4ade80;
    --rs-error: #f87171;
    --rs-foco: rgba(218, 218, 218, 0.55);

    /* ---- Tipografía ---- */
    --rs-fuente: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
        Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* ---- Radios y sombras ---- */
    --rs-radio: 0.6rem;
    --rs-radio-lg: 1.2rem;
    --rs-sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    --rs-sombra-alta: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 50px rgba(0, 0, 0, 0.55);

    /* ---- Transición base ---- */
    --rs-transicion: 160ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Alias heredados ----
       El CSS viejo (header.css, main.css) referencia estos nombres. Se dejan
       apuntando a los tokens nuevos para no tener que reescribir cada regla ni
       arriesgar que quede una sin migrar. */
    --colorPrincipal: var(--rs-fondo);
    --colorSecundario: var(--rs-texto);
    --colorBlanco: var(--rs-texto);
    --fuentePrincipal: var(--rs-fuente);
    --bgHover: rgba(255, 255, 255, 0.06);
}

/* ---------------------------------------------------------------------------
   Foco visible, global.
   Se usa :focus-visible y no :focus para que el anillo aparezca al navegar con
   teclado pero no al hacer clic con el mouse.
   ------------------------------------------------------------------------- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--rs-foco);
    outline-offset: 2px;
    border-radius: var(--rs-radio);
}

/* Respeta a quien pidió menos animación en el sistema operativo. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   Primitivas compartidas.

   Viven acá y no en main.css porque las usan las dos mitades: la landing y las
   pantallas de sesión. Un botón de RigoSoft se ve igual en /#contacto que en
   /login, y se cambia en un solo lugar.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Botones
   ------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    /* Mínimo táctil: 44px de alto es la recomendación de accesibilidad para
       algo que se toca con el dedo. */
    min-height: 4.4rem;
    padding: 1.1rem 2.4rem;
    border: 1px solid transparent;
    border-radius: var(--rs-radio);
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--rs-transicion),
        border-color var(--rs-transicion), color var(--rs-transicion),
        transform var(--rs-transicion), box-shadow var(--rs-transicion);
}

/* Acción principal: claro sobre fondo oscuro. Es el #dadada histórico. */
.btn,
.btn--acento {
    background-color: var(--rs-acento);
    color: var(--rs-sobre-acento);
}

.btn:hover,
.btn--acento:hover {
    background-color: var(--rs-acento-hover);
    /* Antes el hover bajaba el fondo a #dadada8a y ponía el texto en blanco:
       gris claro translúcido con texto blanco encima quedaba casi ilegible. */
    color: var(--rs-sobre-acento);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.btn:active,
.btn--acento:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Acción secundaria: sólo borde. */
.btn--fantasma {
    background-color: transparent;
    color: var(--rs-texto);
    border-color: var(--rs-borde-fuerte);
}

.btn--fantasma:hover {
    background-color: rgba(255, 255, 255, 0.07);
    border-color: var(--rs-acento);
    color: var(--rs-acento-hover);
    transform: translateY(-1px);
}

.btn--bloque {
    width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Campos de formulario
   ------------------------------------------------------------------------- */

.campo {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.campo__label {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--rs-texto-suave);
}

.campo__input {
    /* Sin width:100% el input/textarea se quedaba con el ancho angosto por
       defecto del navegador en vez de ocupar el contenedor. */
    width: 100%;
    font-family: inherit;
    font-size: 1.6rem;
    color: var(--rs-texto);
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--rs-borde);
    border-radius: var(--rs-radio);
    padding: 1.2rem 1.4rem;
    transition: border-color var(--rs-transicion),
        background-color var(--rs-transicion), box-shadow var(--rs-transicion);
}

.campo__input::placeholder {
    color: var(--rs-texto-tenue);
}

.campo__input:hover {
    border-color: var(--rs-borde-fuerte);
}

.campo__input:focus {
    outline: none;
    border-color: var(--rs-acento);
    background-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px var(--rs-foco);
}

/* Autofill de Chrome: pinta el fondo de amarillo y el texto de negro, lo que
   sobre un formulario oscuro queda ilegible. No hay forma de sobreescribir el
   background directamente, el truco es una sombra interna del tamaño del campo
   más el color de texto forzado. */
.campo__input:-webkit-autofill,
.campo__input:-webkit-autofill:hover,
.campo__input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100rem var(--rs-superficie-alta) inset;
    -webkit-text-fill-color: var(--rs-texto);
    caret-color: var(--rs-texto);
}

textarea.campo__input {
    resize: vertical;
    min-height: 12rem;
    line-height: 1.6;
}

.campo__ayuda {
    font-size: 1.3rem;
    color: var(--rs-texto-tenue);
}

/* ---------------------------------------------------------------------------
   Mensajes
   ------------------------------------------------------------------------- */

.aviso {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 1.5rem;
    padding: 1.3rem 1.6rem;
    border: 1px solid transparent;
    border-radius: var(--rs-radio);
}

.aviso--ok {
    color: var(--rs-ok);
    background-color: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.28);
}

.aviso--error {
    color: var(--rs-error);
    background-color: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.28);
}

.aviso p {
    margin: 0;
    max-width: none;
}