/* ===== Animaciones ===== */
@keyframes q_spin { to { transform: rotate(360deg); } }
@keyframes q_pulse { 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
@keyframes q_bounce { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-20%) } }
@keyframes q_wiggle { 0%,100%{ transform: rotate(0) } 25%{ transform: rotate(-8deg) } 75%{ transform: rotate(8deg) } }

/* NUEVO: efectos de feedback */ 
@keyframes q_flashGreen { 0%{ box-shadow:0 0 0 0 rgba(16,185,129,.0) } 30%{ box-shadow:0 0 0 .45rem rgba(16,185,129,.25) } 100%{ box-shadow:0 0 0 0 rgba(16,185,129,.0) } }
@keyframes q_shake {
  0%,100% { transform: translateX(0) }
  20% { transform: translateX(-3px) }
  40% { transform: translateX(3px) }
  60% { transform: translateX(-2px) }
  80% { transform: translateX(2px) }
}

/* Velocidades */
.q_icon.anim-slow   svg { animation-duration: 1.6s; }
.q_icon.anim-normal svg { animation-duration: 1.0s; } /* DEFAULT */
.q_icon.anim-fast   svg { animation-duration: .6s; }

/* Efectos (vía clase) - con duración por defecto */
.q_icon.spin   svg { animation-name: q_spin;   animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; }
.q_icon.pulse  svg { animation-name: q_pulse;  animation-duration: 1s; animation-iteration-count: infinite; }
.q_icon.bounce svg { animation-name: q_bounce; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.q_icon.wiggle svg { animation-name: q_wiggle; animation-duration: 1s; animation-iteration-count: infinite; }

/* Declarativo (vía atributos) - con duración por defecto */
.q_icon[data-anim="spin"]   svg { animation-name: q_spin;   animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; }
.q_icon[data-anim="pulse"]  svg { animation-name: q_pulse;  animation-duration: 1s; animation-iteration-count: infinite; }
.q_icon[data-anim="bounce"] svg { animation-name: q_bounce; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.q_icon[data-anim="wiggle"] svg { animation-name: q_wiggle; animation-duration: 1s; animation-iteration-count: infinite; }

/* data-anim-speed: slow | normal | fast */
.q_icon[data-anim-speed="slow"]   svg { animation-duration: 1.6s; }
.q_icon[data-anim-speed="normal"] svg { animation-duration: 1.0s; }
.q_icon[data-anim-speed="fast"]   svg { animation-duration: .6s; }

/* Transform helpers: data-rotate (grados) + data-flip (x|y|both) */
.q_icon[data-rotate] svg { transform-origin: 50% 50%; }
.q_icon[data-flip="x"]    svg { transform: scaleX(-1); }
.q_icon[data-flip="y"]    svg { transform: scaleY(-1); }
.q_icon[data-flip="both"] svg { transform: scale(-1,-1); }

/* ===== Feedback visual (añadidos) ===== */
.q_icon.effect-success { animation: q_flashGreen .8s ease-out; border-radius: .5rem; }
.q_icon.effect-error   { animation: q_shake .35s ease-in-out; }

/* Accesibilidad: respeta reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .q_icon svg { animation: none !important; transition: none !important; }
  .q_icon.effect-success, .q_icon.effect-error { animation: none !important; }
}
/* Auto-generado por icon.py */
/* ===== Variables base ===== */
:root {
  --q_icon-size-base: 1rem;            /* base unit */
  --q_icon-scale-default: 1.5;         /* *** DEFAULT = md (150%) *** */
  --q_form-icon-pad-left: 40px;        /* padding para icon-left */
  --q_form-icon-pad-right: 40px;       /* padding para icon-right */

  /* ===== Tokens de tema (auto light/dark) ===== */
  --q_theme-text:  #111827;
  --q_theme-muted: #6b7280;
  --q_theme-panel: #ffffff;
  --q_theme-border:#e5e7eb;

  --q_color-text-muted: var(--q_theme-muted);
}

@media (prefers-color-scheme: dark) {
  :root {
    --q_theme-text:  #e6edf3;
    --q_theme-muted: #9ca3af;
    --q_theme-panel: #0b1220;
    --q_theme-border:#2b3340;
    --q_color-text-muted: var(--q_theme-muted);
  }
}

:root.dark, [data-theme="dark"] {
  --q_theme-text:  #e6edf3;
  --q_theme-muted: #9ca3af;
  --q_theme-panel: #0b1220;
  --q_theme-border:#2b3340;
  --q_color-text-muted: var(--q_theme-muted);
}
:root.light, [data-theme="light"] {
  --q_theme-text:  #111827;
  --q_theme-muted: #6b7280;
  --q_theme-panel: #ffffff;
  --q_theme-border:#e5e7eb;
  --q_color-text-muted: var(--q_theme-muted);
}

/* Base del icono (inyector SVG) */
.q_icon, .q_icon svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
  stroke: none;
  overflow: visible;
}

.q_icon {
  --q_icon-scale: var(--q_icon-scale-default);
  font-size: calc(var(--q_icon-size-base) * var(--q_icon-scale));
  line-height: 1;
}

.q_icon + .q_icon { margin-left: .5em; }
.q_icon-group { display:inline-flex; align-items:center; gap:.6em; flex-wrap:wrap; }

/* Tamaños */
.q_icon.x100 { --q_icon-scale: 1; }
.q_icon.x150 { --q_icon-scale: 1.5; }
.q_icon.x200 { --q_icon-scale: 2; }
.q_icon.x250 { --q_icon-scale: 2.5; }

/* Alias semánticos */
.q_icon.sm { --q_icon-scale: 1; }
.q_icon.md { --q_icon-scale: 1.5; }
.q_icon.lg { --q_icon-scale: 2; }
.q_icon.xl { --q_icon-scale: 2.5; }

/* Fit */
.q_icon-fit, .q_icon-fit svg { width:100%; height:100%; display:block; }

/* Alineación absoluta */
.q_icon.left  { position:absolute; left: var(--q_icon-offset-x,10px);  top:50%; transform:translateY(-50%); pointer-events:none; }
.q_icon.right { position:absolute; right: var(--q_icon-offset-x,10px); top:50%; transform:translateY(-50%); pointer-events:none; }
.q_icon[data-align="left"]  { position:absolute; left: var(--q_icon-offset-x,10px);  top:50%; transform:translateY(-50%); pointer-events:none; }
.q_icon[data-align="right"] { position:absolute; right: var(--q_icon-offset-x,10px); top:50%; transform:translateY(-50%); pointer-events:none; }

/* Helpers .q_form */
.q_form .input-container { position: relative; display:flex; align-items:center; }
.q_form .input-container .q_icon {
  position:absolute; top:50%; transform:translateY(-50%);
  font-size: var(--q_form-icon-size, inherit);
  pointer-events:none;
  color: var(--q_color-text-muted, #6b7280);
}
.q_form .input-container.icon-left  .q_icon { left: 10px; }
.q_form .input-container.icon-right .q_icon { right: 10px; }

/* Toggler clickable */
.q_form .input-container .q_icon[data-toggle] { pointer-events:auto; cursor:pointer; z-index:2; }
.q_form .input-container .q_icon:not([data-toggle]) { pointer-events:none; }

/* Padding automático */
.q_form .input-container.icon-left  > input:not([type=checkbox]):not([type=radio]),
.q_form .input-container.icon-left  > textarea,
.q_form .input-container.icon-left  > select { padding-left: var(--q_form-icon-pad-left); }

.q_form .input-container.icon-right > input:not([type=checkbox]):not([type=radio]),
.q_form .input-container.icon-right > textarea,
.q_form .input-container.icon-right > select { padding-right: var(--q_form-icon-pad-right); }

/* Compat si convive .icon antiguo con .q_icon */
.q_form .input-container .icon.q_icon { position:absolute; top:50%; transform:translateY(-50%); }


/* Estado ocupado / reentrancia bloqueada */
.q_icon.is-busy,
.q_icon[aria-busy="true"] {
  cursor: progress;
}


/* ============================================================
   ICON UTILITIES (.with-icon) - genérica para cualquier componente
   ============================================================ */
.with-icon {
  --icon-gap: .38em;
  --icon-size: 1.125em;
  --icon-nudge-y: .02em;
  --icon-inline: inline-flex;

  display: var(--icon-inline);
  align-items: center;
  gap: var(--icon-gap);
  vertical-align: middle;
  line-height: 1.2;
  text-decoration: none;
}
.with-icon.icon-right,
.with-icon[data-icon="end"],
.with-icon[data-icon="right"] { flex-direction: row-reverse; }
.with-icon .icon,
.with-icon i,
.with-icon svg {
  font-size: var(--icon-size);
  inline-size: auto;
  block-size: auto;
  line-height: 1;
  display: inline-block;
  transform: translateY(var(--icon-nudge-y));
}
.with-icon [class^="fa-"],
.with-icon [class*=" fa-"] { font-size: var(--icon-size); line-height: 1; transform: translateY(var(--icon-nudge-y)); }
.with-icon svg { width: calc(var(--icon-size) * 1em); height: calc(var(--icon-size) * 1em); }

.with-icon.icon-xs { --icon-size: .875;  --icon-gap: .28em; }
.with-icon.icon-sm { --icon-size: 1.0;   --icon-gap: .32em; }
.with-icon.icon-md { --icon-size: 1.125; --icon-gap: .38em; }
.with-icon.icon-lg { --icon-size: 1.25;  --icon-gap: .44em; }
.with-icon.icon-xl { --icon-size: 1.375; --icon-gap: .48em; }
.with-icon.icon-2xl{ --icon-size: 1.5;   --icon-gap: .52em; }

.only-icon {
  --icon-gap: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: .75rem; line-height: 1; padding: 0;
}
.only-icon > .icon,
.only-icon > i,
.only-icon > svg,
.only-icon [class^="fa-"],
.only-icon [class*=" fa-"] { font-size: 1.125em; transform: translateY(var(--icon-nudge-y)); }

.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

/* Alias opcional de compatibilidad (migración) */

.q_link-with-icon {
  /* DEPRECATED: usar .with-icon */
  display: inline-flex;
  align-items: center;
  gap: .38em;
  vertical-align: middle;
  line-height: 1.2;
  text-decoration: none;
}

/* Integración con tus componentes Q */
.q_button.with-icon,
.q_link.with-icon,
.q_badge.with-icon,
.q_nav-item.with-icon,
.q_dropdown_toggle.with-icon { display:inline-flex; align-items:center; }

/* Input con icono embebido */
.q_input.with-icon { display:inline-flex; align-items:center; gap:var(--icon-gap); padding-inline:.75rem; }
.q_input.with-icon .icon,
.q_input.with-icon i,
.q_input.with-icon svg { opacity:.85; }
.q_input.with-icon.trail { flex-direction: row-reverse; }
.with-icon.block { display:flex; flex-wrap:wrap; }
.with-icon[disabled], .only-icon[disabled] { opacity:.6; cursor:not-allowed; pointer-events:none; }