/* Copia de 00 ICONOS AFB — generada el 2026-08-18 por llevar-al-sitio.js.
   NO EDITAR AQUÍ: se edita en 00 ICONOS AFB y se vuelve a copiar. */

/* ============================================================================
   ICONOS AFB — hoja de estilo del juego de iconos
   ----------------------------------------------------------------------------
   Va junto con `iconos.js`. Pégala dentro del <style> de las apps de un solo
   archivo, o enlázala con <link rel="stylesheet" href="iconos.css">.

   El icono hereda `currentColor`: no se pinta, se le cambia el color al texto
   y el icono lo sigue solo, sin variantes de archivo. Por eso un botón
   deshabilitado, en hover o en estado de error no necesita otro icono.

   `stroke-width` va aquí y no en el sprite para que un icono grande no salga
   con el trazo engordado: el vector escala, el grosor se mantiene igual de
   fino a la vista.
   ========================================================================== */

.ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.18em;
  pointer-events: none;
}

/* Los tamaños compensan el grosor: entre más chico, más grueso el trazo, o
   se deshilacha. Entre más grande, más fino, o se ve pesado. */
.ico-sm { width: 13px; height: 13px; stroke-width: 2; }
.ico-lg { width: 18px; height: 18px; stroke-width: 1.6; }
.ico-xl { width: 24px; height: 24px; stroke-width: 1.5; }
.ico-2x { width: 32px; height: 32px; stroke-width: 1.35; }
/* Para los estados vacíos: «Sin fotos todavía», «Captura las medidas». */
.ico-vacio {
  width: 56px; height: 56px; stroke-width: 1.1;
  opacity: .38; vertical-align: middle;
}

/* El sprite no se ve nunca. */
#sprite-iconos-afb { display: none !important; }

/* ── Modificadores de estado ────────────────────────────────────────────── */

/* La estrella del catálogo activo, el corazón, cualquier marca de encendido:
   contorno = inactivo, lleno = activo. */
.ico-lleno { fill: currentColor; }

/* Un icono que gira mientras algo carga. */
.ico-girando { animation: ico-giro 1.1s linear infinite; }
@keyframes ico-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ico-girando { animation: none; }
}

/* Chevron que se abre al desplegar. */
.ico-flecha { transition: transform .15s ease; }
.abierta > .ico-flecha,
[aria-expanded="true"] .ico-flecha { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .ico-flecha { transition: none; }
}

/* ── Botón de sólo icono ────────────────────────────────────────────────── */

/* Los 40px son el mínimo que se puede picar con el dedo, con guante, parado
   en una obra. No los bajes en la vista de celular. */
.btn-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-ico:hover { background: rgba(127, 127, 127, .14); }
.btn-ico:active { background: rgba(127, 127, 127, .22); }
.btn-ico:disabled { opacity: .4; cursor: default; }
.btn-ico:disabled:hover { background: transparent; }
.btn-ico:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Icono dentro de un botón con texto: separación fija, sin depender de
   espacios en el HTML. */
.btn > .ico,
button > .ico { margin-right: .45em; }
.btn > .ico:only-child,
button > .ico:only-child { margin-right: 0; }