/* =========================================================================
   SCORT — Design tokens
   =========================================================================
   Un solo sitio donde vive el color, el espacio, el radio y la sombra. Si un
   valor se repite en un componente, es que falta un token.

   El tema (mujeres / hombres / todos) cambia UNICAMENTE el acento y su glow.
   La base oscura no cambia: es la identidad de SCORT, no del tema.
   ========================================================================= */

:root {
    /* --- Base oscura -------------------------------------------------- */
    /* Negro azulado, no gris neutro: el azul frio hace que el acento
       magenta o cyan parezca mas luminoso sin subirle la saturacion. */
    --scort-bg: #050509;
    --scort-bg-soft: #080810;
    --scort-bg-deep: #0b0a12;
    --scort-surface: #10101a;
    --scort-surface-hover: #14131f;
    --scort-surface-elevated: #181622;

    /* El cristal de los paneles flotantes: barra superior, garantias del hero y
       barra de filtros. Un solo sitio, para que los tres se vean IGUAL. */
    --scort-glass: rgba(16, 16, 26, 0.72);
    --scort-glass-strong: rgba(11, 10, 18, 0.86);
    --scort-glass-blur: 18px;

    --scort-border: rgba(255, 255, 255, 0.07);
    --scort-border-strong: rgba(255, 255, 255, 0.14);

    /* El borde de los componentes de control —selectores, campos, chips—. Un gris
       azulado sólido, no un blanco translúcido: sobre el cristal de la barra de
       filtros un `rgba` blanco se aclara con lo que haya detrás y los cuatro campos
       acababan con bordes de distinta intensidad. */
    --scort-border-control: #252538;

    --scort-text: #f8fafc;
    --scort-text-muted: #94a3b8;
    /* #6e6e80 daba 3,72:1 sobre --scort-surface: por debajo del 4,5:1 de AA, y se usa
       para frases con significado —«edad declarada», «Todavia sin resenas», la nota
       que explica por que hay botones apagados—, no solo para separadores. */
    --scort-text-dim: #85859a;

    /* --- Acento: lo sobreescribe el tema ------------------------------ */
    /* Por defecto, magenta. `_Layout` pone data-scort-theme en <html>.
       Sale del color de audiencia de mas abajo: una propiedad personalizada
       se resuelve al USARLA, no al declararla, asi que el orden da igual. */
    --scort-accent: var(--scort-audiencia-women);
    --scort-accent-hover: #f472b6;

    /* El tinte del acento: fondo de estados activos y de pastillas suaves.
       Estaba al 14 % y sobre el cristal de la barra dejaba el enlace ACTIVO
       --texto de acento sobre su propio tinte-- en 4,40:1, por debajo de AA. Se
       veia solo en el tema violeta, que es el mas justo de los tres, y solo en
       produccion: en local estaba puesto el azul. Al 9 % da 4,65 y el tinte se
       sigue notando. */
    --scort-accent-soft: rgba(var(--scort-audiencia-women-rgb), 0.09);
    --scort-accent-rgb: var(--scort-audiencia-women-rgb);

    /* DOS tintas sobre acento, y elegir mal es un fallo de contraste, no de gusto.

       `contrast` es blanco y vale sobre los tonos PROFUNDOS: el degradado del boton
       primario, el enlace de salto. Sobre el acento vivo da entre 3,53 y 3,96, por
       debajo del 4,5 de AA.

       `ink` es el negro del fondo y vale sobre el acento VIVO: pastillas, pestanas,
       insignias, cualquier cosa pequena que quiera verse de neon. Da entre 5,14 y
       5,53 en los tres temas.

       Regla: acento vivo -> `ink`. Degradado profundo -> `contrast`. */
    --scort-accent-contrast: #ffffff;
    --scort-accent-ink: #050509;

    /* --- Estado ------------------------------------------------------- */
    --scort-success: #2ed19a;
    --scort-warning: #ffb020;
    --scort-danger: #ff4d5e;
    --scort-online: #2ed19a;

    /* --- Radios ------------------------------------------------------- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-pill: 999px;

    /* --- Sombras ------------------------------------------------------ */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);

    /* El glow es lo que separa «oscuro» de «premium». Se usa con
       moderacion: en el acento, en el hover de una card y poco mas. */
    --shadow-glow: 0 0 24px rgba(var(--scort-accent-rgb), 0.35);
    --shadow-glow-strong: 0 0 44px rgba(var(--scort-accent-rgb), 0.5);

    /* --- EL MARCO DE ACENTO, EN TRES NIVELES ---------------------------
       Todo panel lleva marco del color del tema. Pero en TRES intensidades, y
       no en una, porque este marco no es solo decoracion: es tambien como se
       dice «esto esta elegido».

         1. PANEL     — todo lo que es una superficie: paneles, metricas,
                        tarjetas del panel, barra de filtros, dialogos.
         2. DESTACADO — la tarjeta de perfil, que es el producto.
         3. ELEGIDO   — lo que esta seleccionado ahora mismo. Vive en su
                        componente, no aqui, porque lleva ademas anillo interior.

       Con un solo nivel para los tres, la opcion marcada del dialogo de entrada
       y el elemento actual del menu se veian igual que el panel de al lado, y
       «seleccionado» dejaba de significar nada. */
    --marco-panel: rgba(var(--scort-accent-rgb), 0.20);
    --marco-panel-halo: 0 0 26px rgba(var(--scort-accent-rgb), 0.07);

    --marco-destacado: rgba(var(--scort-accent-rgb), 0.45);
    --marco-destacado-halo: 0 0 32px rgba(var(--scort-accent-rgb), 0.16);

    /* --- Espaciado ---------------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* --- Tipografia --------------------------------------------------- */
    /* Sin Google Fonts: una dependencia externa en el camino critico de
       renderizado es una peticion a un tercero en cada carga, y CLAUDE.md
       §5 prohibe sacar nada del equipo. La pila del sistema en Windows
       resuelve a Segoe UI Variable, que es moderna y muy legible. */
    --font-sans:
        "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI",
        -apple-system, BlinkMacSystemFont, "Inter", Roboto,
        "Helvetica Neue", Arial, sans-serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-base: 0.9375rem;
    --font-size-md: 1.0625rem;
    --font-size-lg: 1.375rem;
    --font-size-xl: 1.875rem;
    --font-size-2xl: 2.5rem;
    --font-size-3xl: 3.25rem;
    --font-size-4xl: 4rem;

    --line-tight: 1.1;
    --line-snug: 1.3;
    --line-normal: 1.6;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 800;

    /* --- Disposicion -------------------------------------------------- */
    --container-max: 1480px;
    --navbar-height: 72px;

    /* --- Movimiento --------------------------------------------------- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 120ms;
    --duration-base: 220ms;
    --duration-slow: 400ms;
}

/* =========================================================================
   EL COLOR DE CADA AUDIENCIA
   =========================================================================
   Los tres colores, disponibles SIEMPRE y a la vez, independientemente de
   cual este elegido.

   Hacen falta aparte de --scort-accent porque hay sitios donde se ven los
   tres juntos —el conmutador de la barra y el dialogo de eleccion— y ahi el
   acento no sirve: el acento es UNO, el que este activo, y pintar con el las
   tres opciones las dejaria del mismo color.

   Estaban escritos a mano en scort-home.css y volvian a estarlo mas abajo en
   este archivo. Tres copias del mismo rosa es como acaban discrepando.
   ========================================================================= */

:root {
    --scort-audiencia-women: #ec4899;
    --scort-audiencia-women-rgb: 236, 72, 153;

    --scort-audiencia-men: #3b82f6;
    --scort-audiencia-men-rgb: 59, 130, 246;

    /* Violeta, y NO el #8b5cf6 de la referencia.
       El acento se usa como TEXTO —enlaces, cifras, etiquetas— y #8b5cf6 da 4,39:1
       sobre los paneles: por debajo del 4,5 de AA. Eso habria dejado texto ilegible
       en todo el sitio, no solo aqui. Este es el «violeta brillante» de la misma
       paleta y llega a 4,7. El #8b5cf6 sigue usandose donde no hay texto encima:
       degradados, bordes y halos. */
    --scort-audiencia-all: #a855f7;
    --scort-audiencia-all-rgb: 168, 85, 247;

    /* --- El color de BOTÓN de cada audiencia ----------------------------

       Los `--scort-audiencia-*` de arriba son el color de IDENTIDAD: el que tiñe
       una píldora de género, un aro o un borde. Éstos son el color de BOTÓN —el
       mismo que usan «Publicar anuncio» y «BUSCAR» cuando el tema está en esa
       audiencia— y son un tono más hondo.

       Hacían falta los dos, y estaban duplicados: cada bloque de tema repetía su
       propio hexadecimal, así que los tres botones grandes de la portada salían
       en el tono claro mientras el resto de la página iba en el hondo. Se veía, y
       el cliente lo señaló con una flecha.

       Declarados aquí arriba, los tres existen A LA VEZ: la portada necesita
       pintar morado, azul y rosa en la misma fila, y un token de tema solo tiene
       un valor cada vez.

       SOBRE ESTOS RELLENOS EL TEXTO VA EN BLANCO, y es al revés que con los de
       identidad. Medido: el blanco da 5,7:1 en el morado, 5,1 en el azul y 4,6 en
       el rosa —pasan AA—, mientras que la tinta oscura se queda en 3,4 / 3,8 /
       4,2 y no pasa. Con los colores claros de identidad ocurre justo lo
       contrario, y por eso allí la tinta es oscura. */
    --scort-cta-women: #db2777;
    --scort-cta-women-a: #be185d;

    --scort-cta-men: #2563eb;
    --scort-cta-men-a: #1d4ed8;

    --scort-cta-all: #7c3aed;
    --scort-cta-all-a: #6d28d9;

    /* --- El dorado de la membresia -------------------------------------
       UN SOLO DORADO en todo el sitio, y aqui declarado: el marco de la tarjeta, el
       sello VIP y la insignia «Premium» tienen que ser exactamente el mismo color, o
       dejan de leerse como la misma cosa. Estaba escrito a mano —#e8b44a— en la hoja
       de tarjetas, y ahi es donde empiezan los tres dorados parecidos.

       Sobre este relleno la tinta oscura da 10:1, asi que el sello VIP se lee sin
       ninguna duda a cualquier tamano. */
    --scort-vip: #e8b44a;
    --scort-vip-rgb: 232, 180, 74;

    /* --- Degradados ----------------------------------------------------
       Son TRES y la diferencia no es estetica: es si encima va texto o no.

       DECORATIVO — el vivo. Filetes, barras de progreso, halos, fondos. Nada de
       texto encima, asi que puede ser tan brillante como quiera.

       MARCA — violeta->magenta, oscurecido, para los momentos de marca que no
       dependen del tema (el dialogo de entrada, donde todavia no se ha elegido).

       CTA — el del boton primario, y lo sobreescribe cada tema mas abajo.

       Los oscurecidos existen porque los vivos NO valen con texto blanco: sobre el
       boton primario daban entre 2,54 y 3,96 segun el tema, y AA pide 4,5. Ese era
       el boton mas repetido del sitio --«Explorar perfiles», «Ver perfil», «Crear
       perfil», «Crear cuenta»--. Los de aqui van de 4,6 a 7,1, comprobados
       recorriendo la rampa entera y no solo los extremos.

       Regla: si hay texto encima, `--scort-cta-*` o `--scort-marca-*`. Si no,
       `--scort-degradado-*`. */
    --scort-degradado-de: #8b5cf6;
    --scort-degradado-a: #ec4899;

    --scort-marca-de: #7c3aed;
    --scort-marca-a: #db2777;

    /* Por defecto los del tema magenta, que es el `:root`.

       Por referencia y no repitiendo el hexadecimal: escrito dos veces, los botones
       de género de la portada y los CTA del sitio se separan en cuanto alguien toca
       uno de los dos — que es exactamente lo que había pasado. */
    --scort-cta-de: var(--scort-cta-women);
    --scort-cta-a: var(--scort-cta-women-a);
}

/* =========================================================================
   TEMAS
   =========================================================================
   Solo cambia el acento. Se aplica con data-scort-theme en <html>, de modo
   que basta un atributo para repintar toda la pagina — sin duplicar hojas de
   estilo, sin duplicar vistas.

   El acento de cada tema ES el color de su audiencia: se toma del bloque de
   arriba en lugar de repetir el hexadecimal.
   ========================================================================= */

[data-scort-theme="women"] {
    --scort-accent: var(--scort-audiencia-women);
    --scort-accent-hover: #f472b6;
    --scort-accent-soft: rgba(var(--scort-audiencia-women-rgb), 0.09);
    --scort-accent-rgb: var(--scort-audiencia-women-rgb);
    --scort-cta-de: var(--scort-cta-women);
    --scort-cta-a: var(--scort-cta-women-a);
}

[data-scort-theme="men"] {
    --scort-accent: var(--scort-audiencia-men);
    --scort-accent-hover: #60a5fa;
    --scort-accent-soft: rgba(var(--scort-audiencia-men-rgb), 0.09);
    --scort-accent-rgb: var(--scort-audiencia-men-rgb);
    --scort-cta-de: var(--scort-cta-men);
    --scort-cta-a: var(--scort-cta-men-a);
}

/* «Todos»: violeta, que es el punto medio real entre los dos acentos y no
   una tercera identidad inventada. */
[data-scort-theme="all"] {
    --scort-accent: var(--scort-audiencia-all);
    --scort-accent-hover: #c084fc;
    --scort-accent-soft: rgba(var(--scort-audiencia-all-rgb), 0.09);
    --scort-accent-rgb: var(--scort-audiencia-all-rgb);
    --scort-cta-de: var(--scort-cta-all);
    --scort-cta-a: var(--scort-cta-all-a);
}

/* =========================================================================
   MOVIMIENTO REDUCIDO
   =========================================================================
   No es un detalle de accesibilidad opcional: para alguien con trastorno
   vestibular, una animacion de entrada puede provocar mareo real.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-slow: 0ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}