/* ============================================================================
   CUSTODE · 02-chrome.css — la capa del cromo del sitio
   ----------------------------------------------------------------------------
   Otro hueco que estaba declarado y vacio en `CUSTODE_STYLESHEETS`
   (functions.php), reservado para lo que acompana a TODAS las paginas sin
   pertenecer a ninguna. Hoy tiene un solo inquilino: el boton flotante de
   WhatsApp (inc/whatsapp.php).

   Entra en la cascada ANTES que 03/04/05, asi que nada de aqui puede pisar a
   una pagina concreta — y no lo intenta: todo cuelga de `.c-wa`, que no existe
   en ninguna otra hoja.

   SOBRE EL COLOR, QUE ES LA DECISION DISCUTIBLE DE ESTE ARCHIVO
   El boton NO va en el verde de WhatsApp (#25D366). Este sitio tiene una paleta
   de tinta, papel y laton, y un disco verde fosforescente fijo en la esquina se
   lee como un plugin pegado encima, no como parte de la casa. Va en tinta con el
   glifo en laton, que es el par que ya usan la cabecera y el pie.

   Lo que SI se conserva es el glifo oficial, en linea: la forma es lo que hace
   que el boton se reconozca al instante, y esa parte no se estiliza.

   Si algun dia se prefiere el verde de la marca —es una decision de conversion,
   no de diseno—, se cambian las dos declaraciones marcadas abajo y nada mas.
   ========================================================================= */

/* ── §1 · El boton flotante ───────────────────────────────────────────────── */

.c-wa               { position: fixed;
                      inset-block-end: var(--c-sp-5);
                      inset-inline-end: var(--c-sp-5);
                      z-index: var(--c-z-drop);
                      display: inline-flex; align-items: center; gap: var(--c-sp-3);
                      padding: var(--c-sp-3);
                      border-radius: 999px;
                      border: var(--c-hair-w) solid var(--c-brass-a42);

                      /* ← el color, si algun dia se quiere el verde de WhatsApp */
                      background: var(--c-ink);
                      color: var(--c-brass-hi);

                      text-decoration: none;
                      box-shadow: 0 2px 18px var(--c-veil-28);
                      transition: color      var(--c-dur-hover) var(--c-ease-ink),
                                  border-color var(--c-dur-hover) var(--c-ease-ink),
                                  transform  var(--c-dur-hover) var(--c-ease-plate); }

.c-wa:hover,
.c-wa:focus-visible { color: var(--c-inv-000);
                      border-color: var(--c-brass);
                      transform: translateY(-2px); }

.c-wa:focus-visible { outline: var(--c-hair-w) solid var(--c-brass-ring);
                      outline-offset: var(--c-close-gap); }

.c-wa__glyph        { display: block; flex: none; }

/* ── §2 · El rotulo, que solo aparece cuando se le presta atencion ────────── */

/* En reposo el boton es un disco: `max-inline-size: 0` con `overflow: hidden`
   deja el rotulo en el arbol —lo lee un lector de pantalla— pero sin ocupar
   ancho. Al pasar por encima o al recibir el foco se abre. Se anima el ancho
   maximo y no `display`, porque `display` no transiciona. */
.c-wa__note         { max-inline-size: 0; overflow: hidden; white-space: nowrap;
                      font-family: var(--c-font-label);
                      font-size: var(--c-fs-l2); font-weight: var(--c-fw-label);
                      letter-spacing: .10em; text-transform: uppercase;
                      transition: max-inline-size var(--c-dur-hover) var(--c-ease-plate),
                                  padding-inline-end var(--c-dur-hover) var(--c-ease-plate); }

.c-wa:hover .c-wa__note,
.c-wa:focus-visible .c-wa__note { max-inline-size: 12ch; padding-inline-end: var(--c-sp-2); }

/* ── §3 · Pantallas estrechas ─────────────────────────────────────────────── */

/* En el movil el rotulo no se abre nunca —no hay hover, y el foco llega justo
   antes de pulsar—, asi que se retira del todo y el boton queda como disco. El
   margen baja para no comerse el pulgar sobre la barra del navegador. */
@media (max-width: 640px) {
    .c-wa           { inset-block-end: var(--c-sp-4); inset-inline-end: var(--c-sp-4); }
    .c-wa__note     { display: none; }
}

/* ── §4 · Cuando el visor de fotografia esta abierto ──────────────────────── */

/* El `<dialog>` de la ficha se pinta en `--c-z-modal` (100) con fondo solido, y
   este boton en `--c-z-drop` (90), asi que ya queda tapado. Se oculta ademas de
   forma explicita para que no lo alcance el tabulador por detras del visor. */
html.has-lb .c-wa   { display: none; }