/* =====================================================================
   REDES SOCIALES — los iconitos de Instagram y Facebook
   ---------------------------------------------------------------------
   El HTML de estos iconitos está en templates/fragmentos/redes.html y se
   usa en dos lugares con fondos opuestos: el encabezado (claro) y el pie
   (oscuro). El dibujo es exactamente el mismo; lo único que cambia es el
   color, y de eso se encarga este archivo.

   Los colores salen de las variables de tienda.css (--tinta, --marca,
   --gris…). Acá NO se define ningún color nuevo a mano: si mañana el
   violeta de la marca cambia, cambia en un solo lugar y esto lo sigue.
   ===================================================================== */


/* --- El renglón de iconitos ------------------------------------------- */

.redes {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Si no hay ninguna red cargada en la configuración, el fragmento no dibuja
   ningún link y este contenedor queda sin iconitos. :has() pregunta
   justamente eso: "¿este elemento tiene adentro algún .red?". Si no tiene,
   se saca del medio.

   El primer intento acá fue `.redes:empty`, y NO funcionaba. La trampa es
   que para el CSS un elemento sólo está "vacío" si no tiene absolutamente
   nada adentro, y los saltos de línea y la sangría que deja Thymeleaf al
   armar el HTML cuentan como contenido. O sea que el div parece vacío
   mirándolo, pero para `:empty` no lo está. Es un clásico y cuesta darse
   cuenta, porque en el navegador no se ve ningún espacio.

   Si algún navegador viejo no entendiera :has(), tampoco pasa nada grave:
   un contenedor flex sin hijos mide cero y no deja hueco. Esta regla es
   para que no quede ni el rastro. */
.redes:not(:has(.red)) { display: none; }


/* --- Cada iconito ----------------------------------------------------- */

.redes .red {
    /* 44x44 es el mínimo que recomiendan Apple y las guías de
       accesibilidad para cualquier cosa que se toque con el dedo. La yema
       de un dedo mide más o menos eso, y un blanco más chico se falla
       seguido: el cliente le pega al de al lado y termina en Facebook
       queriendo ir a Instagram.

       El dibujo adentro mide 20px. Los 24px que sobran son aire invisible
       que igual recibe el toque. O sea: se ve chiquito y prolijo, pero se
       toca grande. Es la diferencia entre "el tamaño que se ve" y "el
       tamaño que responde", y casi siempre conviene que no sean el mismo. */
    width: 44px;
    height: 44px;

    /* grid + place-items:center es la forma más corta de centrar algo en
       los dos ejes a la vez, horizontal y vertical. */
    display: grid;
    place-items: center;

    border-radius: 50%;
    /* El color no se pone acá porque depende del fondo; lo eligen las dos
       reglas de más abajo. El dibujo lo hereda solo, porque adentro del
       <svg> el trazo está puesto como "currentColor". */
    transition: color var(--transicion), background-color var(--transicion);
}

/* Los <a> de la tienda vienen con subrayado al pasar el mouse. En un
   iconito el subrayado aparece como una rayita suelta abajo, que parece un
   error de dibujo. */
.redes .red:hover { text-decoration: none; }

/* Que el dibujo no se achique ni se estire si el lugar queda justo. */
.redes .red svg {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}


/* --- Foco del teclado -------------------------------------------------
   Mucha gente navega con la tecla Tab en vez del mouse (por costumbre, o
   porque no puede usar un mouse). Si el navegador no marca dónde está
   parado, esa persona queda a ciegas.

   :focus-visible es la versión educada de :focus: el anillo aparece
   cuando el foco llegó por teclado, y NO aparece cuando llegó por un
   click del mouse, donde molestaría sin aportar nada.

   El outline se dibuja SIN offset negativo y con el redondeo del propio
   círculo, así el anillo queda pegado al área tocable y se ve entero
   incluso cuando el iconito está contra el borde del encabezado.
   -------------------------------------------------------------------- */

.redes .red:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 2px;
    border-radius: 50%;
}


/* --- Sobre fondo CLARO (el encabezado) --------------------------------
   Gris parejo en reposo para que los logos no le compitan al logo de
   goodlook, que es lo que tiene que mandar en el encabezado; violeta de
   la marca al pasar por encima, que es la misma señal que ya usan los
   otros links del sitio.
   -------------------------------------------------------------------- */

.redes-claro .red {
    color: var(--tinta-suave);
}

.redes-claro .red:hover {
    color: var(--marca);
    background: var(--fondo-suave);
}

/* En el encabezado el foco se ve mejor con el violeta de la marca, que
   contrasta contra el fondo casi blanco. */
.redes-claro .red:focus-visible {
    outline-color: var(--marca);
}


/* --- La variante 'oscuro' (el pie) ------------------------------------
   CUIDADO CON EL NOMBRE, que engaña. El contrato entre los agentes dice
   que el pie se llama con 'oscuro', y así quedó. Pero el pie de goodlook
   NO es oscuro: es --fondo-suave, un gris azulado bien claro (mirá .pie
   en tienda.css). O sea que 'oscuro' hay que leerlo como "la variante del
   pie", no como "sobre fondo negro".

   Si esto se hubiera escrito pintando los iconitos de blanco —que es lo
   que uno haría por reflejo al leer 'oscuro'— habrían quedado blancos
   sobre gris casi blanco: invisibles. Es el tipo de error que no se ve
   escribiendo el CSS, sólo abriendo la página.

   Entonces la diferencia real con el encabezado no es "claro contra
   oscuro" sino el LUGAR: en el pie los textos ya son grises apagados, así
   que los iconitos van del mismo gris para no gritar más que el resto, y
   al pasar por encima se paran sobre un círculo blanco que los levanta
   del gris del fondo.

   Si algún día el pie sí se vuelve oscuro, se cambian estas tres reglas y
   nada más; el HTML no se toca.
   -------------------------------------------------------------------- */

.redes-oscuro .red {
    /* --gris tiene 5,5:1 de contraste: entra cómodo en el mínimo de
       accesibilidad (4,5:1) sin competirle a los títulos del pie. */
    color: var(--gris);
}

.redes-oscuro .red:hover {
    color: var(--marca);
    /* --fondo es blanco: contra el gris del pie se nota el círculo, cosa
       que en el encabezado (que ya es casi blanco) no pasaría. */
    background: var(--fondo);
}

.redes-oscuro .red:focus-visible {
    outline-color: var(--marca);
}


/* --- Encaje en el pie -------------------------------------------------
   El contenedor .pie-redes es del encabezado (encabezado.css) y ya trae
   la separación de arriba; acá sólo se corrige la alineación horizontal.

   Los 44px de área tocable son más anchos que el dibujo de 20px, así que
   sobran unos 12px de aire invisible a cada lado. Sin compensarlos, el
   primer iconito arranca 12px más adentro que los textos de su columna y
   la columna se ve torcida. El margen negativo devuelve exactamente ese
   aire: el dibujo queda a plomo con el texto de arriba y el área tocable
   sigue midiendo 44px.
   -------------------------------------------------------------------- */

.pie-redes .redes {
    margin-left: -12px;
}

/* En celular no hace falta ningún ajuste extra: los 44px de área tocable
   ya son la respuesta al dedo, y valen igual en el teléfono que en la
   compu. Por eso acá no hay ninguna media query de tamaño. */


/* --- Movimiento reducido ---------------------------------------------
   Hay gente a la que las transiciones le producen mareo, y avisa de eso
   desde la configuración del sistema operativo. tienda.css ya apaga las
   animaciones en general; esto es por si acaso, para que este archivo se
   pueda leer solo y no dependa de que el otro siga estando.
   -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .redes .red { transition: none; }
}