/*!
 * KAMU UI: componentes de shadcn/ui (estilo "vega", github.com/shadcn-ui/ui @ 25af02b) pasados a CSS simple,
 * sin React ni Tailwind. Licencia MIT, Copyright (c) 2023 shadcn.
 *
 * Cambios de KAMU: campos y botones de 44px, texto de 16px, foco con anillo de 3px, bordes de campo con
 * contraste 3:1, rojo de error más oscuro (4.5:1), acordeón con <details> (sin JS), sin transiciones (el movimiento lo pone GSAP).
 * Todo vive en @layer kamu-ui: cualquier CSS del sitio le gana sin pelear especificidad.
 * Cada sitio cambia los colores redefiniendo los tokens en su propio :root.
 */
@layer kamu-ui {
  :root {
    --radius: 0.625rem;
    --background: oklch(1 0 0);
    --foreground: oklch(0% 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0% 0 0);
    --primary: oklch(0% 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --destructive: oklch(0.505 0.19 27.5);
    --border: oklch(0.922 0 0);
    --input: oklch(0.556 0 0); /* shadcn usa 0.922: no llega a 3:1 en bordes de campo */
    --ring: var(--primary);

    /* El formulario y las demás piezas del molde toman estos colores. */
    --kamu-texto: var(--foreground);
    --kamu-fondo: var(--background);
    --kamu-acento: var(--primary);
    --kamu-error: var(--destructive);
    --kamu-borde: var(--input);
  }

  /* Botón: <a class="ui-btn"> o <button class="ui-btn ui-btn--outline ui-btn--lg"> */
  .ui-btn, .ui-input, .ui-textarea { box-sizing: border-box; }
  .ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) - 2px);
    background: var(--primary);
    color: var(--primary-foreground);
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
  }
  .ui-btn:hover { background: color-mix(in oklch, var(--primary), transparent 20%); }
  .ui-btn--secondary { background: var(--secondary); color: var(--secondary-foreground); }
  .ui-btn--secondary:hover { background: color-mix(in oklch, var(--secondary), var(--foreground) 5%); }
  .ui-btn--outline { border-color: var(--border); background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
  .ui-btn--ghost { background: transparent; color: var(--foreground); }
  .ui-btn--outline:hover, .ui-btn--ghost:hover { background: var(--muted); color: var(--foreground); }
  .ui-btn--link { background: transparent; color: var(--primary); text-underline-offset: 4px; }
  .ui-btn--link:hover { background: transparent; text-decoration: underline; }
  .ui-btn--sm { padding: 0 12px; } /* sigue en 44px: es lo mínimo para el dedo */
  .ui-btn--lg { min-height: 52px; padding: 0 24px; font-size: 1.125rem; }
  .ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
  .ui-btn:active { translate: 0 1px; }

  /* Tarjeta: .ui-card > .ui-card-header (.ui-card-title, .ui-card-description), .ui-card-content, .ui-card-footer */
  .ui-card {
    --card-spacing: 24px;
    display: flex;
    flex-direction: column;
    gap: var(--card-spacing);
    padding: var(--card-spacing) 0;
    overflow: hidden;
    border-radius: calc(var(--radius) + 4px);
    background: var(--card);
    color: var(--card-foreground);
    box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground), transparent 90%), 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }
  .ui-card--sm { --card-spacing: 16px; }
  .ui-card:has(> img:first-child) { padding-top: 0; }
  .ui-card > img { display: block; width: 100%; height: auto; }
  .ui-card-header { display: grid; gap: 4px; padding: 0 var(--card-spacing); }
  .ui-card-title { margin: 0; font-size: 1.125rem; font-weight: 500; line-height: 1.4; }
  .ui-card-description { margin: 0; color: var(--muted-foreground); }
  .ui-card-content { padding: 0 var(--card-spacing); }
  .ui-card-footer { display: flex; align-items: center; gap: 8px; padding: 0 var(--card-spacing); }

  /* Etiqueta pequeña (precio, "nuevo", "picante"): <span class="ui-badge ui-badge--secondary"> */
  .ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    padding: 2px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
  }
  .ui-badge--secondary { background: var(--secondary); color: var(--secondary-foreground); }
  .ui-badge--outline { border-color: var(--border); background: transparent; color: var(--foreground); }

  /* Campos: <label class="ui-label"> + <input class="ui-input"> / <textarea class="ui-textarea"> */
  .ui-label { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 500; line-height: 1.5; }
  .ui-input, .ui-textarea {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--input);
    border-radius: calc(var(--radius) - 2px);
    background: transparent;
    color: var(--foreground);
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }
  .ui-textarea { min-height: 96px; field-sizing: content; }
  .ui-input::placeholder, .ui-textarea::placeholder { color: var(--muted-foreground); }
  .ui-input[aria-invalid="true"], .ui-textarea[aria-invalid="true"] { border-color: var(--destructive); }
  .ui-input:disabled, .ui-textarea:disabled { opacity: 0.5; cursor: not-allowed; }

  /* Preguntas frecuentes: .ui-accordion > <details class="ui-accordion-item"><summary>…</summary><div>…</div></details> */
  .ui-accordion { display: flex; flex-direction: column; width: 100%; }
  .ui-accordion-item:not(:last-child) { border-bottom: 1px solid var(--border); }
  .ui-accordion-item > summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding: 16px 0;
    border-radius: calc(var(--radius) - 2px);
    font-weight: 500;
    list-style: none;
    cursor: pointer;
  }
  .ui-accordion-item > summary::-webkit-details-marker { display: none; }
  .ui-accordion-item > summary:hover { text-decoration: underline; }
  .ui-accordion-item > summary::after {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin: 8px 4px 0 0;
    border-right: 2px solid var(--muted-foreground);
    border-bottom: 2px solid var(--muted-foreground);
    rotate: 45deg;
  }
  .ui-accordion-item[open] > summary::after { rotate: -135deg; margin-top: 12px; }
  .ui-accordion-item > :not(summary) { padding-bottom: 16px; }

  /* Línea divisoria: <hr class="ui-separator"> */
  .ui-separator { height: 1px; margin: 0; border: 0; background: var(--border); }

  /* Foco igual al del molde en todo lo de arriba. */
  .ui-btn:focus-visible, .ui-input:focus-visible, .ui-textarea:focus-visible, .ui-accordion-item > summary:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 2px;
  }
}