/* =========================================================================
   lc-iconbtn · Botón de ícono
   -------------------------------------------------------------------------
   Átomo. 2026-08-31. El octavo — no estaba en la lista original del
   inventario; salió al barrer el código buscando lo que la lista no cubría.

   Un control cuadrado cuya única etiqueta es un ícono: las flechas de un
   carrusel, el cerrar de un panel. NO es un lc-btn pequeño: un botón tiene
   texto y su ancho lo decide el texto; este es un área táctil fija.

   Unifica tres:
     · .lc-edu-months__arrow  44px, círculo outline, hover TIÑE
     · .lc-carousel__arrow           42px, círculo outline, hover INVIERTE
     · .lc-mobile-bottom-nav__close  48px, sin caja, sobre oscuro

   Dos decisiones:

   1. HOVER = invierte (fondo navy, ícono blanco). Había dos respuestas;
      gana la que ya da .lc-btn--outline, para que outline signifique lo
      mismo en todo el sistema.
   2. TAMAÑO base 44px, no 42. No es por redondear: 44×44 es el mínimo de
      área táctil que pide WCAG 2.5.5 (y la guía de iOS). 42 se queda corto
      por 2px, así que el que sube es el que estaba mal.

   El borde va en --lc-border-default (neutro) y no en navy como el botón de
   texto: esto es cromo de navegación, no una llamada a la acción, y un
   círculo de 44px con borde navy pesa demasiado en la página.

   ACCESIBILIDAD — no es opcional: al no haber texto, el nombre del control
   va SIEMPRE en aria-label, y el SVG de dentro en aria-hidden="true".

   API:
     <button class="lc-iconbtn" aria-label="Mes anterior">
       <svg class="lc-icon" aria-hidden="true">…</svg>
     </button>
   ========================================================================= */

.lc-iconbtn {
  --iconbtn-size: 44px;
  --iconbtn-bg: var(--lc-bg-surface);
  --iconbtn-color: var(--lc-brand-primary);
  --iconbtn-border: var(--lc-border-default);

  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--iconbtn-size);
  height: var(--iconbtn-size);
  padding: 0;
  box-sizing: border-box;

  color: var(--iconbtn-color);
  background: var(--iconbtn-bg);
  border: 1px solid var(--iconbtn-border);
  border-radius: var(--lc-radius-full);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.lc-iconbtn:hover {
  --iconbtn-bg: var(--lc-brand-primary);
  --iconbtn-color: var(--lc-text-on-brand);
  --iconbtn-border: var(--lc-brand-primary);
}

.lc-iconbtn:focus-visible {
  outline: 2px solid var(--lc-brand-primary);
  outline-offset: 2px;
}

.lc-iconbtn:disabled,
.lc-iconbtn[aria-disabled="true"] {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}


/* — Tamaños ——————————————————————————————————————————————————————— */
/* 44px es el suelo accesible, así que no hay --sm por debajo. */
.lc-iconbtn--lg { --iconbtn-size: 48px; }


/* — Sin caja · el cerrar de un panel, sobre foto o banda oscura ————— */
.lc-iconbtn--ghost {
  --iconbtn-bg: transparent;
  --iconbtn-border: transparent;
  --iconbtn-color: currentColor;
}
.lc-iconbtn--ghost:hover {
  --iconbtn-bg: rgba(255, 255, 255, 0.14);
  --iconbtn-border: transparent;
  --iconbtn-color: currentColor;
}
.lc-iconbtn--ghost:focus-visible { outline-color: currentColor; }