/*
 * Aiden UI · expandable-card — CSS module de Arc (expandable-card.module.css) traducido a clases
 * aui-expandable-card-<parte>, con las MISMAS variables de Arc (kit/foundation.css). Sin colores propios.
 *
 *   Arc               → aquí
 *   .track            → .aui-expandable-card            (el grupo: centra y mide el sitio para crecer)
 *   .card             → .aui-expandable-card-card       (cada <details>)
 *   .trigger          → .aui-expandable-card-trigger    (el <summary>)
 *   .copy / strong    → .aui-expandable-card-copy / -title
 *   .description      → .aui-expandable-card-description (+ -roll, -word, -sr-only)
 *   .arrow            → .aui-expandable-card-arrow
 *   .panel / .panelInner → .aui-expandable-card-panel / -panel-inner
 *
 * Dos estados del mismo marcado:
 *   - sin JavaScript: [data-aui="expandable-card"] > details > summary + respuesta, con el <details> nativo;
 *   - con JavaScript: el grupo lleva .aui-expandable-card-enhanced y las clases de arriba.
 */

/* ── Grupo (track de Arc) ───────────────────────────────────────────────────────────────────────────────── */
.aui-expandable-card,
[data-aui="expandable-card"] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-family: var(--font-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--foreground);
}

/* ── Tarjeta ────────────────────────────────────────────────────────────────────────────────────────────── */
.aui-expandable-card-card,
[data-aui="expandable-card"] > details {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--expandable-card-width, 100%);
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-surface);
  background: var(--surface);
  box-shadow: var(--shadow-resting);
  color: var(--foreground);
}
[data-aui="expandable-card"]:not(.aui-expandable-card-enhanced) > details[open],
.aui-expandable-card-card[data-expanded="true"] {
  max-width: var(--expandable-card-expanded-width, var(--expandable-card-width, 100%));
}
/* Una vez medido, el ancho se anima en px: el tope de CSS se aparta y no recorta el morph. */
.aui-expandable-card-card[data-measured] { max-width: 100%; }

/* ── Cabecera (el <summary> hace de botón; toda ella conmuta, 64 px mínimo) ─────────────────────────────── */
.aui-expandable-card-trigger,
[data-aui="expandable-card"] > details > summary {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin: 0;
  border: 0;
  padding: var(--space-4) var(--space-5);
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.aui-expandable-card-trigger::-webkit-details-marker,
[data-aui="expandable-card"] > details > summary::-webkit-details-marker { display: none; }
.aui-expandable-card-trigger::marker,
[data-aui="expandable-card"] > details > summary::marker { content: ""; }
/* Sin anillos de foco (regla de Arc): el resalte de la cabecera hace de foco. */
.aui-expandable-card-trigger:focus,
[data-aui="expandable-card"] > details > summary:focus { outline: none; }
.aui-expandable-card-trigger:focus-visible,
[data-aui="expandable-card"] > details > summary:focus-visible { background: var(--surface-muted); }
@media (hover: hover) and (pointer: fine) {
  .aui-expandable-card-trigger:hover,
  [data-aui="expandable-card"] > details > summary:hover { background: var(--surface-muted); }
  .aui-expandable-card-trigger:hover .aui-expandable-card-arrow,
  [data-aui="expandable-card"]:not(.aui-expandable-card-enhanced) > details > summary:hover::after { color: var(--foreground); }
}
.aui-expandable-card-trigger:active,
[data-aui="expandable-card"] > details > summary:active { background: var(--surface-muted); }

.aui-expandable-card-copy { min-width: 0; flex: 1 1 auto; }
.aui-expandable-card-title { display: block; font-size: var(--text-sm); font-weight: 500; }
/* Si la pregunta trae su propio encabezado (h3…), se queda con el aspecto de Arc. */
.aui-expandable-card-trigger :is(h1, h2, h3, h4, h5, h6, p),
[data-aui="expandable-card"] > details > summary :is(h1, h2, h3, h4, h5, h6, p) {
  margin: 0; font: inherit; color: inherit; letter-spacing: inherit;
}
.aui-expandable-card-description { display: block; margin-top: 4px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; font-variant-numeric: tabular-nums; }
.aui-expandable-card-roll { position: relative; display: block; }
.aui-expandable-card-word { display: inline-block; white-space: pre; }
.aui-expandable-card-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Flecha ─────────────────────────────────────────────────────────────────────────────────────────────── */
.aui-expandable-card-arrow {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-standard);
}
.aui-expandable-card-arrow svg { display: block; width: 18px; height: 18px; }
.aui-expandable-card-card[data-expanded="true"] .aui-expandable-card-arrow { color: var(--foreground); }
/* Sin JS no hay span: la misma flecha de Arc (lucide ChevronDown) con una máscara. */
[data-aui="expandable-card"]:not(.aui-expandable-card-enhanced) > details > summary::after {
  content: "";
  flex: 0 0 18px; width: 18px; height: 18px;
  background-color: currentColor;
  color: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  transition: color var(--duration-fast) var(--ease-standard), transform var(--duration-considered) var(--ease-standard);
}
[data-aui="expandable-card"]:not(.aui-expandable-card-enhanced) > details[open] > summary::after { color: var(--foreground); transform: rotate(180deg); }

/* ── Panel (la línea es una sombra interior, no un borde: cerrado mide 0 de verdad) ─────────────────────── */
.aui-expandable-card-panel,
[data-aui="expandable-card"]:not(.aui-expandable-card-enhanced) > details > :not(summary) {
  overflow: hidden;
  box-shadow: inset 0 1px 0 var(--border);
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 400;
}
.aui-expandable-card-panel-inner,
[data-aui="expandable-card"]:not(.aui-expandable-card-enhanced) > details > :not(summary) {
  box-sizing: border-box;
  max-width: none;
  padding: var(--space-4) var(--space-5) var(--space-5);
}
/* La respuesta se funde: aparece cuando la caja ya ha hecho sitio y se va antes de encoger (tiempos en el JS). */
.aui-expandable-card-panel-inner { opacity: 0; }
.aui-expandable-card-card[data-expanded="true"] .aui-expandable-card-panel-inner { opacity: 1; }
/* Márgenes del contenido que trae cada web (párrafos de WordPress) dentro del relleno de Arc. */
.aui-expandable-card-panel-inner > :first-child,
.aui-expandable-card-panel-inner > :first-child > :first-child,
[data-aui="expandable-card"]:not(.aui-expandable-card-enhanced) > details > :not(summary) > :first-child { margin-top: 0; }
.aui-expandable-card-panel-inner > :last-child,
.aui-expandable-card-panel-inner > :last-child > :last-child,
[data-aui="expandable-card"]:not(.aui-expandable-card-enhanced) > details > :not(summary) > :last-child { margin-bottom: 0; }
.aui-expandable-card-panel-inner a,
[data-aui="expandable-card"]:not(.aui-expandable-card-enhanced) > details > :not(summary) a { color: var(--foreground); }

@media (prefers-reduced-motion: reduce) {
  .aui-expandable-card-trigger,
  .aui-expandable-card-arrow,
  [data-aui="expandable-card"] > details > summary,
  [data-aui="expandable-card"] > details > summary::after { transition: none; }
}