/*
 * Aiden UI · base común de los BLOQUES (secciones de web de Arc UI) — sin dependencias.
 *
 * Las webs comerciales de Aiden no se rediseñan: los bloques se insertan sueltos dentro de páginas de WordPress
 * que conservan su tema. Por eso TODO lo de aquí está acotado a `.aui-bloque` (nada global, ni tipografía del
 * resto de la página, ni la regla de Arc que quita el foco a toda la página). Las variables de Arc las pone
 * `kit/foundation-web.css` en `.aui-scope`: cada bloque lleva las dos clases en su raíz:
 *
 *   <section class="aui-scope aui-bloque aui-<bloque>" data-aui="<bloque>"> … </section>
 *
 * Además, los controles de Arc que componen varios bloques y que todavía no están en el kit como componente
 * propio (son de otras tandas): Button, SegmentedControl, Switch, Input, Textarea y SearchField. Son el CSS module
 * de Arc traducido con sus mismos valores, con prefijo `aui-b-` para no chocar con un futuro `kit/button/`.
 * Cuando existan en el kit, se sustituyen aquí por los suyos.
 */

/* ── Raíz de cada bloque ──────────────────────────────────────────────────────────────────────────────── */
.aui-bloque {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0;
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.aui-bloque *, .aui-bloque *::before, .aui-bloque *::after { box-sizing: border-box; }
/* Los temas de WordPress ponen márgenes, colores y subrayados a encabezados, párrafos, listas y enlaces:
   dentro del bloque manda Arc. Solo lo imprescindible, con la especificidad justa para ganar a un tema. */
.aui-bloque :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt, figure, blockquote, table, form, fieldset) { margin: 0; padding: 0; }
.aui-bloque :is(h1, h2, h3, h4, h5, h6) { color: inherit; font-family: var(--font-display); font-weight: 500; letter-spacing: var(--tracking-display); line-height: var(--leading-display); text-transform: none; }
.aui-bloque :is(ul, ol) { list-style: none; }
.aui-bloque fieldset { border: 0; min-width: 0; }
.aui-bloque a { color: inherit; text-decoration: none; background: none; box-shadow: none; }
.aui-bloque img, .aui-bloque svg { display: block; max-width: 100%; }
.aui-bloque svg { flex: none; }
.aui-bloque :is(button, input, textarea, select) { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; text-transform: none; }
.aui-bloque button { -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; box-shadow: none; border-radius: 0; min-height: 0; height: auto; width: auto; line-height: inherit; cursor: pointer; text-shadow: none; }
/* Sin anillos de foco (regla de Arc): cada control lleva su resalte de :hover también en :focus-visible.
   Acotado al bloque: el resto de la página conserva su foco. */
.aui-bloque :focus { outline: none; }
.aui-bloque :focus-visible { outline: none; }
.aui-bloque [hidden] { display: none !important; }

/* Oculto a la vista, leído por el lector de pantalla. */
.aui-b-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Button de Arc (registry/components/button) ─────────────────────────────────────────────────────── */
/* La escala al pulsar (whileTap .97 / .985 si >220 px) la pone bloques.js; aquí solo color y forma. */
.aui-bloque .aui-b-btn {
  position: relative; display: inline-flex; min-height: var(--control-height-md); align-items: center; justify-content: center; gap: var(--space-2);
  border: 1px solid transparent; border-radius: var(--radius-control); padding: 0 var(--space-4);
  font: inherit; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); white-space: nowrap; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.aui-bloque .aui-b-btn:disabled, .aui-bloque .aui-b-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .52; }
.aui-bloque .aui-b-btn[aria-busy="true"] { cursor: progress; }
.aui-bloque .aui-b-btn svg { width: 16px; height: 16px; }
.aui-bloque .aui-b-btn--primary { color: var(--background); background: var(--foreground); border-color: var(--foreground); }
.aui-bloque .aui-b-btn--secondary { color: var(--foreground); background: var(--surface); border-color: var(--border); }
.aui-bloque .aui-b-btn--ghost { color: var(--text-secondary); background: transparent; border-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .aui-bloque .aui-b-btn--primary:hover:not(:disabled) { opacity: .91; box-shadow: var(--shadow-resting); }
  .aui-bloque .aui-b-btn--secondary:hover:not(:disabled) { background: var(--surface-muted); box-shadow: var(--shadow-resting); }
  .aui-bloque .aui-b-btn--ghost:hover:not(:disabled) { color: var(--foreground); background: var(--surface-muted); }
}
.aui-bloque .aui-b-btn--primary:focus-visible { opacity: .91; box-shadow: var(--shadow-resting); }
.aui-bloque .aui-b-btn--secondary:focus-visible { background: var(--surface-muted); box-shadow: var(--shadow-resting); }
.aui-bloque .aui-b-btn--ghost:focus-visible { color: var(--foreground); background: var(--surface-muted); }
.aui-bloque .aui-b-btn--primary:active:not(:disabled) { opacity: .84; }
.aui-bloque .aui-b-btn--secondary:active:not(:disabled), .aui-bloque .aui-b-btn--ghost:active:not(:disabled) { color: var(--foreground); background: var(--surface-muted); }
.aui-bloque .aui-b-btn--sm { min-height: var(--control-height-sm); padding-inline: var(--space-3); }
.aui-bloque .aui-b-btn--lg { min-height: var(--control-height-lg); padding-inline: var(--space-5); }
.aui-bloque .aui-b-spinner { width: 16px; height: 16px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: aui-b-spin .7s linear infinite; }
@keyframes aui-b-spin { to { transform: rotate(360deg); } }

/* ── SegmentedControl de Arc ─────────────────────────────────────────────────────────────────────────── */
/* Marcado: <div class="aui-b-seg" role="group" aria-label="…"><div class="aui-b-seg-track">
             <button type="button" class="aui-b-seg-btn" aria-pressed="true">…</button>…</div></div>
   Sin JS el seleccionado lleva su fondo; con JS el resalte (.aui-b-seg-sel) viaja con el muelle «morph». */
.aui-bloque .aui-b-seg { display: inline-flex; min-width: 0; max-width: 100%; flex-shrink: 1; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-muted); }
.aui-bloque .aui-b-seg-track { --fade-start: 0px; --fade-end: 0px; position: relative; isolation: isolate; display: flex; min-width: 0; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain; padding: 3px; border-radius: inherit; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent); }
.aui-bloque .aui-b-seg-track::-webkit-scrollbar { display: none; }
.aui-bloque .aui-b-seg-track[data-fade-start] { --fade-start: 20px; }
.aui-bloque .aui-b-seg-track[data-fade-end] { --fade-end: 20px; }
.aui-bloque .aui-b-seg-btn { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 6px; min-height: var(--control-height-sm); border: 0; border-radius: calc(var(--radius-control) - 4px); padding: 0 12px; background: transparent; color: var(--text-muted); font: inherit; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .aui-bloque .aui-b-seg-btn:hover { color: var(--foreground); } }
.aui-bloque .aui-b-seg-btn:focus-visible, .aui-bloque .aui-b-seg-btn:active, .aui-bloque .aui-b-seg-btn[aria-pressed="true"], .aui-bloque .aui-b-seg-btn[aria-selected="true"] { color: var(--foreground); }
/* Sin JS (o antes de montar): el seleccionado se pinta con el mismo aspecto que el resalte. */
.aui-bloque .aui-b-seg:not([data-aui-seg]) .aui-b-seg-btn:is([aria-pressed="true"], [aria-selected="true"]) { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), var(--shadow-resting); }
.aui-bloque .aui-b-seg-sel { position: absolute; z-index: -1; top: 0; left: 0; border: 1px solid var(--border); border-radius: calc(var(--radius-control) - 4px); background: var(--surface); box-shadow: var(--shadow-resting); pointer-events: none; }
@media (max-width: 380px) { .aui-bloque .aui-b-seg-btn { padding: 0 10px; } }

/* ── Switch de Arc ───────────────────────────────────────────────────────────────────────────────────── */
/* Marcado: <label class="aui-b-switch"><input type="checkbox" name="…"><span class="aui-b-switch-track"><span class="aui-b-switch-thumb"></span></span><span>texto</span></label>
   Es un checkbox de verdad (se envía con el formulario y funciona sin JS); role="switch" lo pone el marcado. */
.aui-bloque .aui-b-switch { position: relative; display: inline-flex; min-height: var(--control-height-md); align-items: center; gap: var(--space-3); color: var(--foreground); font-size: var(--text-sm); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.aui-bloque .aui-b-switch > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.aui-bloque .aui-b-switch-track { position: relative; display: flex; flex: 0 0 auto; width: 42px; height: 24px; align-items: center; padding: 3px; border-radius: var(--radius-pill); background: var(--control-track); isolation: isolate; transition: background-color var(--duration-fast) var(--ease-standard); }
.aui-bloque .aui-b-switch-track::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--control-on); opacity: 0; transition: opacity var(--duration-standard) var(--ease-standard); }
.aui-bloque .aui-b-switch-thumb { flex: 0 0 auto; width: 18px; height: 18px; border-radius: var(--radius-pill); background: var(--control-thumb); box-shadow: var(--control-thumb-shadow); transition: transform var(--duration-spring) var(--ease-spring), background-color var(--duration-standard) var(--ease-standard); }
.aui-bloque .aui-b-switch > input:checked + .aui-b-switch-track::before { opacity: 1; }
.aui-bloque .aui-b-switch > input:checked + .aui-b-switch-track .aui-b-switch-thumb { transform: translateX(18px); background: var(--control-thumb-on); }
@media (hover: hover) and (pointer: fine) { .aui-bloque .aui-b-switch:hover > input:not(:checked) + .aui-b-switch-track { background: var(--control-track-hover); } }
.aui-bloque .aui-b-switch > input:focus-visible:not(:checked) + .aui-b-switch-track { background: var(--control-track-hover); }

/* ── Input / Textarea / SearchField de Arc ───────────────────────────────────────────────────────────── */
.aui-bloque .aui-b-field { display: grid; min-width: 0; }
.aui-bloque .aui-b-label { margin-bottom: var(--space-2); color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
.aui-bloque .aui-b-input, .aui-bloque .aui-b-textarea {
  width: 100%; min-height: var(--control-height-md); padding: 0 var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--foreground);
  font: inherit; font-size: var(--text-sm); line-height: var(--leading-body); letter-spacing: var(--tracking-body); outline: none; box-shadow: none;
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.aui-bloque .aui-b-textarea { min-height: 110px; padding: var(--space-3); resize: vertical; }
.aui-bloque :is(.aui-b-input, .aui-b-textarea)::placeholder { color: var(--text-muted); opacity: 1; }
@media (hover: hover) and (pointer: fine) { .aui-bloque :is(.aui-b-input, .aui-b-textarea):hover:not(:disabled, [aria-invalid="true"]) { border-color: var(--foreground); } }
.aui-bloque :is(.aui-b-input, .aui-b-textarea):focus { border-color: var(--foreground); }
.aui-bloque :is(.aui-b-input, .aui-b-textarea)[aria-invalid="true"] { border-color: var(--danger); }
.aui-bloque .aui-b-msg { display: block; overflow: hidden; }
.aui-bloque .aui-b-hint, .aui-bloque .aui-b-error { display: block; padding-top: var(--space-2); font-size: var(--text-xs); line-height: var(--leading-body); }
.aui-bloque .aui-b-hint { color: var(--text-muted); }
.aui-bloque .aui-b-error { color: var(--danger); }
.aui-bloque .aui-b-search { display: flex; min-height: var(--control-height-md); align-items: center; gap: var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-control); padding: 0 var(--space-3); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .aui-bloque .aui-b-search:hover:not(:focus-within) { border-color: var(--foreground); } }
.aui-bloque .aui-b-search:focus-within { border-color: var(--foreground); }
.aui-bloque .aui-b-search > svg { width: 18px; height: 18px; color: var(--text-muted); transition: color var(--duration-fast) var(--ease-standard); }
.aui-bloque .aui-b-search:focus-within > svg, .aui-bloque .aui-b-search[data-filled="true"] > svg { color: var(--foreground); }
.aui-bloque .aui-b-search > input { width: 100%; min-width: 0; min-height: 0; height: auto; border: 0; padding: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); outline: 0; box-shadow: none; -webkit-appearance: none; appearance: none; }
.aui-bloque .aui-b-search > input::placeholder { color: var(--text-muted); opacity: 1; }
.aui-bloque .aui-b-search > input::-webkit-search-cancel-button { display: none; }
.aui-bloque .aui-b-search-clear { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; }
.aui-bloque .aui-b-search button { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border-radius: var(--radius-control); color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.aui-bloque .aui-b-search button svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .aui-bloque .aui-b-search button:hover { background: var(--surface-muted); color: var(--foreground); } }

@media (prefers-reduced-motion: reduce) {
  .aui-bloque .aui-b-btn, .aui-bloque .aui-b-seg-btn, .aui-bloque :is(.aui-b-input, .aui-b-textarea, .aui-b-search, .aui-b-search > svg, .aui-b-search button) { transition: none; }
  .aui-bloque :is(.aui-b-switch-track, .aui-b-switch-track::before, .aui-b-switch-thumb) { transition: none; }
  .aui-bloque .aui-b-spinner { animation-duration: .01ms; animation-iteration-count: 1; }
}