/* ============================================================
   Picnic UI — kit de piezas comunes (clases pui-*).

   LATENTE: cargar este archivo no cambia NADA de lo que ya existe.
   Sólo toca lo que se suma a propósito:
     · class="pui" en la raíz de una sección (la vista),
     · class="pui-layer" en lo que cuelga de <body> (modales, popovers, toasts),
     · o cualquier clase pui-* suelta.
   No hay reglas sobre :root/html/body ni sobre elementos sueltos, y nada
   pisa Bootstrap ni layout.css: TODO selector lleva "pui".

   Colores, radios, tipografías y tiempos salen SOLO de tokens.css (--pui-*),
   así que todo se ve bien en oscuro y en claro. Nada de hex acá.

   Variables locales (no son tokens, las setea el propio kit):
     --pui-pc  color de prioridad  (lo pone data-p="critical|high|medium|low")
     --pui-sc  color de estado     (lo pone data-s="new|seen|progress|review|done|canceled")
     --pui-uc  color de urgencia   (anillo; data-u="calm|soon|warm|hot|over")
     --pui-tone color de aviso     (callout, toast, progreso)
     --pui-avc color del avatar    (se pasa inline: style="--pui-avc:var(--pui-lilac)")

   Portado de Pedidos de Diseño (components/pedidos-diseno/styles.css),
   que a su vez sale del prototipo "Propuesta C · Estantes".
   Referencia viva: /picnic-ui.html · Guía: css/picnic-ui/README.md
   ============================================================ */

/* ============ 1. Ámbitos (.pui vista · .pui-layer overlays) ============ */
.pui, .pui-layer {
  font: var(--pui-fs)/var(--pui-lh) var(--pui-f-body);
  color: var(--pui-fg);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: dark;
}
:root[data-theme="light"] .pui, :root[data-theme="light"] .pui-layer { color-scheme: light; }

/* ---- reset contra Bootstrap / layout.css: SOLO adentro del ámbito y de baja especificidad ---- */
:where(.pui, .pui-layer), :where(.pui, .pui-layer) *, :where(.pui, .pui-layer) *::before, :where(.pui, .pui-layer) *::after { box-sizing: border-box; }
.pui :where(h1, h2, h3, h4, h5, h6, p, ol, ul, dl, dd, dt, figure, blockquote, pre, fieldset, legend),
.pui-layer :where(h1, h2, h3, h4, h5, h6, p, ol, ul, dl, dd, dt, figure, blockquote, pre, fieldset, legend) { margin: 0; padding: 0; color: inherit; font-weight: inherit; line-height: inherit; font-size: inherit; }
.pui :where(ol, ul), .pui-layer :where(ol, ul) { list-style: none; }
.pui :where(fieldset), .pui-layer :where(fieldset) { border: 0; min-width: 0; }
.pui :where(legend), .pui-layer :where(legend) { float: none; width: auto; }
.pui :where(b, strong), .pui-layer :where(b, strong) { font-weight: 700; }
.pui :where(label), .pui-layer :where(label) { display: inline; margin: 0; }
.pui :where(a), .pui-layer :where(a) { color: inherit; text-decoration: none; }
.pui :where(button, input, select, textarea), .pui-layer :where(button, input, select, textarea) { font: inherit; color: inherit; margin: 0; letter-spacing: inherit; }
.pui :where(button), .pui-layer :where(button) { cursor: pointer; }
.pui :where(button:disabled), .pui-layer :where(button:disabled) { cursor: not-allowed; opacity: .5; }
.pui :where(img, svg), .pui-layer :where(img, svg) { vertical-align: initial; }
.pui :where(code, kbd, samp, pre), .pui-layer :where(code, kbd, samp, pre) { font-family: var(--pui-f-mono); font-variant-ligatures: none; }
.pui :where(code), .pui-layer :where(code) { color: inherit; font-size: .92em; }
.pui ::placeholder, .pui-layer ::placeholder { color: var(--pui-muted); opacity: 1; }
/* layout.css pinta TODOS los textarea con !important: acá le ganamos sólo adentro del ámbito */
.pui :where(textarea), .pui-layer :where(textarea) { background-color: var(--pui-input) !important; border-color: var(--pui-line-strong) !important; color: var(--pui-fg) !important; }
.pui :where(textarea:focus), .pui-layer :where(textarea:focus) { border-color: var(--pui-accent) !important; }
.pui :where(textarea[aria-invalid="true"], textarea.is-invalid), .pui-layer :where(textarea[aria-invalid="true"], textarea.is-invalid) { border-color: var(--pui-danger) !important; }
.pui :where([hidden]), .pui-layer :where([hidden]) { display: none !important; }
.pui :where(:focus-visible), .pui-layer :where(:focus-visible) { outline: 2px solid var(--pui-accent); outline-offset: 2px; }

/* ============ 2. Ayudantes ============ */
.pui-ic { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; stroke-width: 2; }
.pui-spin { animation: puiSpin 1s linear infinite; }
@keyframes puiSpin { to { transform: rotate(360deg); } }

.pui-display { font-family: var(--pui-f-display); font-weight: 700; line-height: 1.05; letter-spacing: .02em; }
.pui-display-up { font-family: var(--pui-f-display); font-weight: 700; line-height: 1.05; letter-spacing: .05em; text-transform: uppercase; }
.pui-mono { font-family: var(--pui-f-mono); font-variant-numeric: tabular-nums; font-variant-ligatures: none; letter-spacing: -.01em; }
.pui-num { font-variant-numeric: tabular-nums; }
.pui-label { display: block; font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--pui-muted); }
.pui-muted { color: var(--pui-muted); }
.pui :where(kbd), .pui-layer :where(kbd), .pui-kbd { display: inline-block; font-family: var(--pui-f-mono); font-variant-ligatures: none; font-size: 10.5px; font-weight: 500; line-height: 1.3; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--pui-line-strong); background: var(--pui-input); color: var(--pui-muted); font-variant-numeric: tabular-nums; box-shadow: none; }
.pui-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pui-scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--pui-line-strong) transparent; }
.pui-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.pui-scroll::-webkit-scrollbar-track { background: transparent; }
.pui-scroll::-webkit-scrollbar-thumb { background: var(--pui-line-strong); border-radius: 8px; }
.pui-scroll::-webkit-scrollbar-thumb:hover { background: var(--pui-muted); }

/* armado rápido */
.pui-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pui-stack { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pui-grow { flex: 1 1 auto; min-width: 0; }
.pui-dsep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--pui-line-strong); flex: none; vertical-align: middle; }
.pui-divider { display: block; height: 1px; border: 0; margin: 12px 0; background: var(--pui-line); }
/* la vista se come el padding de .content-area y va a sangre (opcional) */
.pui-bleed { margin: -1.5rem; min-height: calc(100vh - 110px); background: var(--pui-bg); overflow-x: clip; }
@media (max-width: 768px) { .pui-bleed { margin: -.75rem; } }
/* trabar el scroll de la página mientras hay un modal (lo pone/saca ui.js) */
html.pui-lock, body.pui-lock { overflow: hidden !important; }

/* foco visible también cuando la pieza vive fuera de un ámbito .pui */
:is(.pui-btn, .pui-icon-btn, .pui-link, .pui-link-muted, .pui-chip, .pui-seg > button, .pui-tabs > button, .pui-pchip, .pui-spill, .pui-pop-item, .pui-toast-act, .pui-step, .pui-drop):focus-visible { outline: 2px solid var(--pui-accent); outline-offset: 2px; }

/* ============ 3. Botones ============ */
.pui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--pui-r-sm); border: 1px solid var(--pui-line-strong); background: var(--pui-card-2); color: var(--pui-fg); font-family: inherit; font-weight: 600; font-size: 13.5px; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background var(--pui-t-fast), border-color var(--pui-t-fast), color var(--pui-t-fast), box-shadow var(--pui-t-fast), transform .1s; }
.pui-btn:hover:not(:disabled) { border-color: var(--pui-muted); color: var(--pui-fg); }
.pui-btn:active:not(:disabled) { transform: translateY(1px); }
.pui-btn:disabled { cursor: not-allowed; opacity: .5; }
.pui-btn .pui-ic { width: 16px; height: 16px; }
.pui-btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.pui-btn-sm .pui-ic { width: 15px; height: 15px; }
.pui-btn-lg { height: 44px; padding: 0 18px; font-size: 14.5px; border-radius: 12px; }
.pui-btn-block { display: flex; width: 100%; }
.pui-btn-primary { background: var(--pui-accent); border-color: transparent; color: var(--pui-on-accent); }
.pui-btn-primary:hover:not(:disabled) { background: var(--pui-accent-2); border-color: transparent; color: var(--pui-on-accent); }
.pui-btn-ghost { background: transparent; border-color: transparent; color: var(--pui-muted); }
.pui-btn-ghost:hover:not(:disabled) { background: var(--pui-card-2); border-color: transparent; color: var(--pui-fg); }
.pui-btn-danger { background: var(--pui-danger); border-color: transparent; color: var(--pui-on-scrim); }
.pui-btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--pui-danger) 86%, var(--pui-fg)); border-color: transparent; color: var(--pui-on-scrim); }
.pui-btn-danger-o { background: transparent; border-color: color-mix(in srgb, var(--pui-danger) 55%, transparent); color: var(--pui-danger); }
.pui-btn-danger-o:hover:not(:disabled) { background: color-mix(in srgb, var(--pui-danger) 12%, transparent); border-color: var(--pui-danger); color: var(--pui-danger); }
.pui-btn-ok { background: color-mix(in srgb, var(--pui-ok) 14%, transparent); border-color: color-mix(in srgb, var(--pui-ok) 50%, transparent); color: var(--pui-ok); }
.pui-btn-ok:hover:not(:disabled) { background: color-mix(in srgb, var(--pui-ok) 22%, transparent); border-color: var(--pui-ok); color: var(--pui-ok); }
.pui-btn-ok.is-strong { background: var(--pui-ok); border-color: transparent; color: var(--pui-bg); }
.pui-btn-warn-o { background: transparent; border-color: color-mix(in srgb, var(--pui-warn) 55%, transparent); color: var(--pui-warn); }
.pui-btn-warn-o:hover:not(:disabled) { background: color-mix(in srgb, var(--pui-warn) 12%, transparent); border-color: var(--pui-warn); color: var(--pui-warn); }
/* botón que queda prendido (toggle) */
.pui-btn[aria-pressed="true"], .pui-btn.is-on { background: var(--pui-accent-soft); border-color: var(--pui-accent); color: var(--pui-fg); }

.pui-icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: var(--pui-r-sm); border: 1px solid transparent; background: transparent; color: var(--pui-muted); flex: none; cursor: pointer; transition: background var(--pui-t-fast), color var(--pui-t-fast); }
.pui-icon-btn:hover:not(:disabled) { background: var(--pui-card-2); color: var(--pui-fg); }
.pui-icon-btn:disabled { cursor: not-allowed; opacity: .5; }
.pui-icon-btn[aria-pressed="true"], .pui-icon-btn.is-on { background: var(--pui-accent-soft); color: var(--pui-accent); }
.pui-icon-btn-sm { width: 28px; height: 28px; border-radius: 8px; }
.pui-icon-btn-sm .pui-ic { width: 15px; height: 15px; }

.pui-link { display: inline; background: none; border: 0; padding: 0; color: var(--pui-accent); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pui-link:hover { color: var(--pui-fg); }
.pui-link-muted { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 2px 0; color: var(--pui-muted); font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.pui-link-muted:hover { color: var(--pui-fg); }
.pui-link-muted .pui-ic { width: 14px; height: 14px; }

/* ============ 4. Segmentado · pestañas · chips ============ */
.pui-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--pui-input); border: 1px solid var(--pui-line); flex: none; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pui-seg::-webkit-scrollbar { display: none; }
.pui-seg > button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: var(--pui-muted); font-weight: 600; font-size: 13px; white-space: nowrap; cursor: pointer; transition: background var(--pui-t-fast), color var(--pui-t-fast), box-shadow var(--pui-t-fast); }
.pui-seg > button:hover:not(:disabled) { color: var(--pui-fg); }
.pui-seg > button[aria-pressed="true"] { background: var(--pui-card-2); color: var(--pui-fg); box-shadow: 0 0 0 1px var(--pui-line-strong), var(--pui-shadow); }
.pui-seg > button .pui-ic { width: 15px; height: 15px; }

.pui-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--pui-line); overflow-x: auto; scrollbar-width: none; }
.pui-tabs::-webkit-scrollbar { display: none; }
.pui-tabs > button { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--pui-muted); font-weight: 650; font-size: 13.5px; white-space: nowrap; cursor: pointer; transition: color var(--pui-t-fast), border-color var(--pui-t-fast); }
.pui-tabs > button:hover { color: var(--pui-fg); }
.pui-tabs > button[aria-selected="true"] { color: var(--pui-fg); border-bottom-color: var(--pui-accent); }
.pui-tabs > button .pui-count { height: 18px; min-width: 20px; padding: 0 6px; font-size: 11px; }

.pui-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--pui-r-pill); border: 1px solid var(--pui-line-strong); background: transparent; color: var(--pui-fg); font-weight: 600; font-size: 12.5px; line-height: 1; white-space: nowrap; cursor: pointer; transition: background var(--pui-t-fast), border-color var(--pui-t-fast); }
.pui-chip:hover:not(:disabled) { border-color: var(--pui-muted); }
.pui-chip[aria-pressed="true"], .pui-chip.is-on { background: var(--pui-accent-soft); border-color: var(--pui-accent); }
.pui-chip .pui-ic { width: 14px; height: 14px; }
.pui-chip-sm { height: 26px; padding: 0 10px; font-size: 12px; }
.pui-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* etiqueta neutra, sin acción */
.pui-tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--pui-r-pill); background: var(--pui-card-2); border: 1px solid var(--pui-line); color: var(--pui-fg); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.pui-tag .pui-ic { width: 13px; height: 13px; }

/* ============ 5. Prioridad · estado · avatares ============ */
.pui-pchip { --pui-pc: var(--pui-p-medium); display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: var(--pui-r-pill); border: 1px solid color-mix(in srgb, var(--pui-pc) 42%, transparent); background: color-mix(in srgb, var(--pui-pc) 16%, transparent); color: var(--pui-pc); font-weight: 700; font-size: 11.5px; letter-spacing: .02em; line-height: 1; white-space: nowrap; flex: none; }
button.pui-pchip { cursor: pointer; padding-right: 6px; }
button.pui-pchip:hover { background: color-mix(in srgb, var(--pui-pc) 26%, transparent); }
.pui-pchip .pui-ic { width: 13px; height: 13px; }
.pui-pchip small { font-family: var(--pui-f-mono); font-weight: 500; font-size: 10.5px; opacity: .85; }
.pui-pdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pui-pc, var(--pui-p-medium)); flex: none; }

.pui-spill { --pui-sc: var(--pui-muted); display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border: 0; border-radius: var(--pui-r-pill); background: color-mix(in srgb, var(--pui-sc) 15%, transparent); color: var(--pui-sc); font-weight: 700; font-size: 11.5px; line-height: 1; white-space: nowrap; flex: none; }
.pui-spill .pui-ic { width: 13px; height: 13px; }
button.pui-spill { cursor: pointer; }
button.pui-spill:hover { background: color-mix(in srgb, var(--pui-sc) 24%, transparent); }
.pui-sdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pui-sc, var(--pui-muted)); flex: none; }
/* sobre una imagen (miniatura de pieza): va arriba a la izquierda */
.pui-spill-scrim { position: absolute; top: 8px; left: 8px; z-index: 2; background: var(--pui-scrim); color: var(--pui-on-scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); height: 22px; font-size: 11px; }
.pui-spill-scrim .pui-sdot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pui-sc) 35%, transparent); }

.pui-av { --pui-avc: var(--pui-accent); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--pui-card); background: color-mix(in srgb, var(--pui-avc) 24%, var(--pui-card)); color: var(--pui-avc); font: 700 9.5px/1 var(--pui-f-body); letter-spacing: .02em; text-transform: uppercase; flex: none; overflow: hidden; }
.pui-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pui-avs { display: inline-flex; align-items: center; }
.pui-avs > .pui-av + .pui-av { margin-left: -7px; }
.pui-av-empty { border: 1.5px dashed var(--pui-line-strong); background: transparent; color: var(--pui-muted); }
.pui-av-empty .pui-ic { width: 12px; height: 12px; }
.pui-av-sm { width: 20px; height: 20px; font-size: 8.5px; border-width: 1.5px; }
.pui-av-lg { width: 32px; height: 32px; font-size: 11px; }

/* ============ 6. Tarjetas y títulos de sección ============ */
.pui-card { position: relative; background: var(--pui-card); border: 1px solid var(--pui-line); border-radius: var(--pui-r); color: var(--pui-fg); min-width: 0; }
.pui-card-h { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 14px 16px 12px; border-bottom: 1px solid var(--pui-line); }
.pui-card-h > :is(h2, h3, h4, .pui-card-title) { font: 700 18px/1.05 var(--pui-f-display); letter-spacing: .05em; text-transform: uppercase; }
.pui-card-h > .pui-card-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.pui-card-b { padding: 16px; }
.pui-card-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--pui-line); background: var(--pui-card-2); border-radius: 0 0 var(--pui-r) var(--pui-r); }
/* tarjeta con barra de prioridad arriba: <article class="pui-card" data-p="high"> */
.pui-card[data-p] { overflow: hidden; }
.pui-card[data-p]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--pui-pc); z-index: 1; }
/* tarjeta clickeable */
.pui-card-hover { cursor: pointer; transition: transform var(--pui-t) var(--pui-ease), box-shadow var(--pui-t), border-color var(--pui-t); }
.pui-card-hover:hover { border-color: var(--pui-line-strong); box-shadow: var(--pui-shadow); transform: translateY(-3px); }
.pui-card.is-cur { border-color: var(--pui-accent); box-shadow: 0 0 0 2px var(--pui-accent-soft), var(--pui-shadow); }

.pui-section-title { display: flex; align-items: center; gap: 10px; min-height: 32px; margin-bottom: 8px; font: 700 21px/1 var(--pui-f-display); letter-spacing: .05em; text-transform: uppercase; color: var(--pui-fg); }
.pui-section-title > .pui-section-actions { margin-left: auto; display: flex; gap: 4px; font: 600 13px/1 var(--pui-f-body); letter-spacing: 0; text-transform: none; }
.pui-section-bar { width: 4px; height: 22px; border-radius: 2px; background: var(--pui-pc, var(--pui-accent)); flex: none; }
.pui-count { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: var(--pui-r-pill); background: color-mix(in srgb, var(--pui-pc, var(--pui-muted)) 18%, transparent); color: var(--pui-pc, var(--pui-muted)); font: 600 12px/1 var(--pui-f-mono); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }

/* ============ 7. Formularios ============ */
.pui-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.pui-field > label, .pui-field-label { display: block; font-size: 12.5px; font-weight: 650; color: var(--pui-fg); }
.pui-hint { font-size: 12px; font-weight: 500; color: var(--pui-muted); }
.pui-error { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--pui-danger); }
.pui-error .pui-ic { width: 14px; height: 14px; }
.pui-input, .pui-select, .pui-textarea { display: block; width: 100%; min-height: 40px; padding: 9px 12px; border-radius: var(--pui-r-sm); border: 1px solid var(--pui-line-strong); background: var(--pui-input); color: var(--pui-fg); font: inherit; font-size: 14px; line-height: 1.35; outline: none; box-shadow: none; transition: border-color var(--pui-t-fast), box-shadow var(--pui-t-fast); }
.pui-input:hover, .pui-select:hover, .pui-textarea:hover { border-color: color-mix(in srgb, var(--pui-muted) 60%, var(--pui-line-strong)); }
.pui-input:focus, .pui-select:focus, .pui-textarea:focus { border-color: var(--pui-accent); box-shadow: 0 0 0 3px var(--pui-accent-soft); outline: none; }
.pui-input:disabled, .pui-select:disabled, .pui-textarea:disabled { opacity: .6; cursor: not-allowed; }
:is(.pui-input, .pui-select, .pui-textarea):is([aria-invalid="true"], .is-invalid) { border-color: var(--pui-danger); }
:is(.pui-input, .pui-select, .pui-textarea):is([aria-invalid="true"], .is-invalid):focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pui-danger) 18%, transparent); }
.pui-textarea { min-height: 84px; resize: vertical; line-height: var(--pui-lh); }
/* textarea fuera de un ámbito: layout.css lo pinta con !important */
textarea.pui-textarea { background-color: var(--pui-input) !important; border-color: var(--pui-line-strong) !important; color: var(--pui-fg) !important; }
textarea.pui-textarea:focus { border-color: var(--pui-accent) !important; }
textarea.pui-textarea:is([aria-invalid="true"], .is-invalid) { border-color: var(--pui-danger) !important; }
/* select con flecha dibujada con tokens (sin imágenes) */
.pui-select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--pui-muted) 50%), linear-gradient(135deg, var(--pui-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.pui-select option { background: var(--pui-card); color: var(--pui-fg); }
.pui-input-sm { min-height: 32px; padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
.pui-select.pui-input-sm { padding-right: 30px; }
/* input con ícono adelante (buscador) */
.pui-input-wrap { position: relative; display: block; min-width: 0; }
.pui-input-wrap > .pui-ic { position: absolute; left: 12px; top: 50%; margin-top: -8px; color: var(--pui-muted); pointer-events: none; }
.pui-input-wrap > .pui-input { padding-left: 36px; }
.pui-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
@media (max-width: 620px) { .pui-grid2 { grid-template-columns: minmax(0, 1fr); } }

/* casilla: <label class="pui-check"><input type="checkbox"> Texto</label> */
.pui-check { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; font-size: 13.5px; color: var(--pui-fg); cursor: pointer; user-select: none; -webkit-user-select: none; }
.pui-check > input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--pui-accent); cursor: pointer; }
.pui-check:has(> input:disabled) { opacity: .55; cursor: not-allowed; }
/* interruptor: <label class="pui-switch"><input type="checkbox" role="switch"><span class="pui-switch-track"></span> Texto</label> */
.pui-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 28px; font-size: 13.5px; color: var(--pui-fg); cursor: pointer; user-select: none; -webkit-user-select: none; }
.pui-switch > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pui-switch-track { position: relative; width: 36px; height: 20px; border-radius: var(--pui-r-pill); background: var(--pui-line-strong); flex: none; transition: background var(--pui-t) var(--pui-ease); }
.pui-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--pui-fg); transition: transform var(--pui-t) var(--pui-ease), background var(--pui-t); }
.pui-switch > input:checked + .pui-switch-track { background: var(--pui-accent); }
.pui-switch > input:checked + .pui-switch-track::after { transform: translateX(16px); background: var(--pui-on-accent); }
.pui-switch > input:focus-visible + .pui-switch-track { outline: 2px solid var(--pui-accent); outline-offset: 2px; }
.pui-switch > input:disabled + .pui-switch-track { opacity: .5; }
.pui-switch:has(> input:disabled) { cursor: not-allowed; }

/* ============ 8. Avisos (callout) ============ */
.pui-callout { --pui-tone: var(--pui-accent); display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--pui-r-sm); border: 1px solid color-mix(in srgb, var(--pui-tone) 40%, transparent); background: color-mix(in srgb, var(--pui-tone) 12%, transparent); color: var(--pui-fg); font-size: 13px; line-height: 1.45; }
.pui-callout > .pui-ic { color: var(--pui-tone); margin-top: 1px; }
.pui-callout-t { display: block; font-weight: 700; }
.pui-callout > .pui-grow > .pui-btn, .pui-callout > .pui-btn { margin-top: 6px; }
.pui-callout-info { --pui-tone: var(--pui-info); }
.pui-callout-ok { --pui-tone: var(--pui-ok); }
.pui-callout-warn { --pui-tone: var(--pui-warn); }
.pui-callout-danger { --pui-tone: var(--pui-danger); }

/* ============ 9. Modal ============ */
.pui-overlay { position: fixed; inset: 0; z-index: 1700; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--pui-backdrop); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overscroll-behavior: contain; animation: puiFadeIn var(--pui-t) ease-out; }
.pui-overlay:has(.pui-modal-sm) { z-index: 1750; }
@keyframes puiFadeIn { from { opacity: 0; } }
.pui-modal { display: flex; flex-direction: column; width: min(920px, 100%); max-height: min(880px, 100%); min-height: 0; background: var(--pui-card); border: 1px solid var(--pui-line); border-top: 2px solid var(--pui-accent); border-radius: var(--pui-r); box-shadow: var(--pui-shadow-modal); color: var(--pui-fg); animation: puiSlideUp var(--pui-t-modal) var(--pui-ease); }
@keyframes puiSlideUp { from { opacity: 0; transform: translateY(18px); } }
.pui-modal-md { width: min(640px, 100%); }
.pui-modal-sm { width: min(420px, 100%); }
.pui-modal-h { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 12px; }
.pui-modal-h > .pui-grow > p, .pui-modal-h > div > p { margin-top: 4px; font-size: 13px; color: var(--pui-muted); }
.pui-modal-h > .pui-icon-btn:last-child { margin-left: auto; margin-top: -4px; margin-right: -8px; }
.pui-modal-h :is(h1, h2, h3), .pui-modal-title { font: 700 24px/1.05 var(--pui-f-display); letter-spacing: .02em; }
.pui-modal-b { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px 20px 22px; scrollbar-width: thin; scrollbar-color: var(--pui-line-strong) transparent; }
.pui-modal-h + .pui-modal-b { padding-top: 6px; }
.pui-modal-f { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--pui-line); background: var(--pui-card-2); border-radius: 0 0 var(--pui-r) var(--pui-r); }
.pui-modal-text { color: var(--pui-muted); white-space: pre-line; }
/* confirmación: título en letra de texto, como en Pedidos */
.pui-modal-sm .pui-modal-title { font: 700 17px/1.3 var(--pui-f-body); letter-spacing: 0; margin-bottom: 6px; }
@media (max-width: 720px) {
  .pui-overlay { padding: 0; align-items: stretch; }
  .pui-modal { width: 100%; height: 100%; max-height: none; border-radius: 0; border-left: 0; border-right: 0; }
  .pui-modal-f { border-radius: 0; }
  .pui-modal-sm { height: auto; max-height: calc(100% - 32px); margin: auto 16px; border-radius: var(--pui-r); border: 1px solid var(--pui-line); border-top: 2px solid var(--pui-accent); }
  .pui-modal-sm .pui-modal-f { border-radius: 0 0 var(--pui-r) var(--pui-r); padding-bottom: 12px; }
}

/* ============ 10. Popover · hoja (bottom sheet) ============ */
.pui-pop { position: fixed; z-index: 1800; min-width: 230px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; padding: 6px; background: var(--pui-card); border: 1px solid var(--pui-line-strong); border-radius: 12px; box-shadow: var(--pui-shadow-modal); color: var(--pui-fg); animation: puiPopIn var(--pui-t-fast) ease-out; scrollbar-width: thin; scrollbar-color: var(--pui-line-strong) transparent; }
@keyframes puiPopIn { from { opacity: 0; transform: translateY(-4px); } }
.pui-pop-title { padding: 6px 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pui-muted); }
.pui-pop-sub { padding: 0 8px 8px; max-width: 270px; font-size: 12px; color: var(--pui-muted); }
.pui-pop-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: none; color: var(--pui-fg); font: inherit; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.pui-pop-item:hover, .pui-pop-item:focus-visible { background: var(--pui-card-2); outline: none; }
.pui-pop-item.is-cur { background: color-mix(in srgb, var(--pui-pc, var(--pui-sc, var(--pui-accent))) 14%, transparent); }
.pui-pop-item:disabled, .pui-pop-item[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.pui-pop-item > .pui-ic { color: var(--pui-muted); }
.pui-pop-item .pui-pdot, .pui-pop-item .pui-sdot { width: 10px; height: 10px; }
.pui-pop-item kbd { margin-left: auto; }
.pui-pop-lbl { flex: 1; min-width: 0; }
.pui-pop-d { display: block; font-size: 11.5px; font-weight: 500; color: var(--pui-muted); }
.pui-pop-chk { color: var(--pui-accent) !important; margin-left: auto; }
.pui-pop-sep { height: 1px; margin: 4px 2px; background: var(--pui-line); border: 0; }
.pui-pop-pad { display: flex; flex-direction: column; gap: 10px; padding: 4px 8px 8px; }
.pui-pop-foot { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 8px 8px 4px; border-top: 1px solid var(--pui-line); }

.pui-sheet-scrim { position: fixed; inset: 0; z-index: 1799; background: var(--pui-scrim); animation: puiFadeIn var(--pui-t) ease-out; }
.pui-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1800; max-height: min(85vh, 640px); overflow: auto; overscroll-behavior: contain; padding: 0 8px calc(12px + env(safe-area-inset-bottom)); background: var(--pui-card); border: 1px solid var(--pui-line-strong); border-bottom: 0; border-radius: var(--pui-r) var(--pui-r) 0 0; box-shadow: var(--pui-shadow-modal); color: var(--pui-fg); animation: puiSheetIn var(--pui-t-modal) var(--pui-ease); }
@keyframes puiSheetIn { from { transform: translateY(100%); } }
.pui-sheet-grab { display: block; width: 40px; height: 4px; margin: 8px auto 6px; border-radius: var(--pui-r-pill); background: var(--pui-line-strong); }
.pui-sheet .pui-pop-item { min-height: 44px; padding: 10px; }
.pui-sheet .pui-pop-sub { max-width: none; }

/* ============ 11. Toasts ============ */
.pui-toasts { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 1900; display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.pui-toast { --pui-tone: var(--pui-ok); display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--pui-line-strong); background: var(--pui-card); color: var(--pui-fg); box-shadow: var(--pui-shadow-modal); font-size: 13.5px; font-weight: 550; line-height: 1.35; pointer-events: auto; animation: puiToastIn var(--pui-t) ease-out; transition: opacity var(--pui-t), transform var(--pui-t); }
.pui-toast > .pui-ic { color: var(--pui-tone); }
.pui-toast-msg { min-width: 0; overflow-wrap: anywhere; }
.pui-toast-info { --pui-tone: var(--pui-info); }
.pui-toast-warn { --pui-tone: var(--pui-warn); }
.pui-toast-danger { --pui-tone: var(--pui-danger); }
.pui-toast-act { flex: none; margin-left: 4px; padding: 0; border: 0; background: none; color: var(--pui-accent); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pui-toast-act:hover { color: var(--pui-fg); }
.pui-toast .pui-icon-btn { margin: -6px -8px -6px 0; }
.pui-toast.is-out { opacity: 0; transform: translateY(6px); }
@keyframes puiToastIn { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 768px) { .pui-toasts { bottom: calc(80px + env(safe-area-inset-bottom)); } }

/* ============ 12. Zona para soltar · estado vacío · progreso ============ */
.pui-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px 16px; text-align: center; border: 2px dashed var(--pui-line-strong); border-radius: var(--pui-r); background: repeating-linear-gradient(135deg, var(--pui-dot) 0 10px, transparent 10px 20px), var(--pui-card-2); color: var(--pui-muted); transition: border-color var(--pui-t-fast), background var(--pui-t-fast); }
.pui-drop > .pui-ic { width: 30px; height: 30px; margin-bottom: 4px; color: var(--pui-accent); }
.pui-drop strong { color: var(--pui-fg); font-size: 15px; }
.pui-drop.is-over { border-color: var(--pui-accent); background: var(--pui-accent-soft); }

.pui-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 16px; text-align: center; color: var(--pui-muted); }
.pui-empty-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--pui-accent-soft); border: 1px dashed color-mix(in srgb, var(--pui-accent) 50%, transparent); color: var(--pui-accent); }
.pui-empty-ic .pui-ic { width: 26px; height: 26px; }
.pui-empty :is(h2, h3), .pui-empty-title { font: 700 22px/1.1 var(--pui-f-display); letter-spacing: .02em; color: var(--pui-fg); }
.pui-empty p { max-width: 420px; }

.pui-progress { --pui-tone: var(--pui-accent); display: block; width: 100%; height: 6px; border-radius: 6px; background: var(--pui-line); overflow: hidden; }
.pui-progress > i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--pui-tone); transition: width var(--pui-t) var(--pui-ease); }
.pui-progress-ok { --pui-tone: var(--pui-ok); }
.pui-progress-sm { height: 4px; }

/* ============ 13. Anillo de cuenta regresiva ============ */
/* <span class="pui-ring" data-u="soon"><svg viewBox="0 0 44 44"><circle class="pui-ring-track" cx="22" cy="22" r="18"/>
   <circle class="pui-ring-val" cx="22" cy="22" r="18" stroke-dasharray="113.1" stroke-dashoffset="40" transform="rotate(-90 22 22)"/></svg><b>5h</b></span>
   (PUI.ring() lo arma solo) */
.pui-ring { --pui-uc: var(--pui-ok); position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--pui-card-2); color: var(--pui-fg); flex: none; }
.pui-ring > svg { position: absolute; top: 3px; left: 3px; width: calc(100% - 6px); height: calc(100% - 6px); }
.pui-ring-track { fill: none; stroke: var(--pui-line-strong); stroke-width: 4; }
.pui-ring-val { fill: none; stroke: var(--pui-uc); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset var(--pui-t-modal) var(--pui-ease); }
.pui-ring > b { position: relative; font: 700 14px/1 var(--pui-f-display); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.pui-ring-sm { width: 32px; height: 32px; }
.pui-ring-sm > svg { top: 2px; left: 2px; width: calc(100% - 4px); height: calc(100% - 4px); }
.pui-ring-sm > b { font-size: 11px; }
.pui-ring-lg { width: 64px; height: 64px; }
.pui-ring-lg > svg { top: 4px; left: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
.pui-ring-lg > b { font-size: 19px; }
/* sobre una imagen: va arriba a la derecha de la miniatura */
.pui-ring-scrim { position: absolute; top: 7px; right: 7px; z-index: 2; background: var(--pui-scrim); color: var(--pui-on-scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pui-ring-scrim .pui-ring-track { stroke: color-mix(in srgb, var(--pui-on-scrim) 16%, transparent); }
.pui-ring.is-over { animation: puiRingBlink 1.8s ease-in-out infinite; }
@keyframes puiRingBlink { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pui-p-critical) 40%, transparent); } }

/* ============ 14. Pasos (stepper) ============ */
.pui-stepper { display: flex; gap: 6px; min-width: 0; }
.pui-step { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--pui-muted); font-weight: 600; font-size: 13px; text-align: left; }
button.pui-step { cursor: pointer; }
button.pui-step:not(:disabled):hover { background: var(--pui-card-2); }
button.pui-step:disabled { opacity: .55; cursor: default; }
.pui-step-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--pui-line-strong); font: 600 12px/1 var(--pui-f-mono); flex: none; }
.pui-step-n .pui-ic { width: 13px; height: 13px; }
.pui-step-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pui-step.is-cur { color: var(--pui-fg); }
.pui-step.is-cur .pui-step-n { background: var(--pui-accent); border-color: var(--pui-accent); color: var(--pui-on-accent); }
.pui-step.is-done .pui-step-n { background: color-mix(in srgb, var(--pui-ok) 18%, transparent); border-color: var(--pui-ok); color: var(--pui-ok); }
@media (max-width: 720px) { .pui-step { flex: none; } .pui-step:not(.is-cur) .pui-step-l { display: none; } .pui-step.is-cur { flex: 1; } }

/* ============ 15. Esqueleto de carga ============ */
.pui-skel { display: block; min-height: 12px; border-radius: var(--pui-r-sm); background: linear-gradient(90deg, var(--pui-card-2) 0%, var(--pui-line) 50%, var(--pui-card-2) 100%); background-size: 200% 100%; animation: puiShimmer 1.4s ease-in-out infinite; }
.pui-skel-text { height: 12px; border-radius: 4px; margin: 6px 0; }
.pui-skel-circle { border-radius: 50%; }
@keyframes puiShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ============ 16. Tabla ============ */
.pui-table-wrap { overflow-x: auto; border: 1px solid var(--pui-line); border-radius: var(--pui-r); background: var(--pui-card); scrollbar-width: thin; scrollbar-color: var(--pui-line-strong) transparent; }
.pui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; color: var(--pui-fg); }
.pui-table th { padding: 10px 12px; border-bottom: 1px solid var(--pui-line-strong); text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pui-muted); white-space: nowrap; background: var(--pui-card-2); }
.pui-table td { padding: 10px 12px; border-bottom: 1px solid var(--pui-line); vertical-align: middle; }
.pui-table tbody tr:last-child td { border-bottom: 0; }
.pui-table tbody tr:hover td { background: color-mix(in srgb, var(--pui-card-2) 70%, transparent); }
.pui-table :is(th, td).pui-num { text-align: right; }

/* ============ 17. Colores por atributo (al final: pisan los valores por defecto) ============ */
:is(.pui, .pui-layer) [data-p="critical"], :is(.pui-pchip, .pui-pdot, .pui-card, .pui-section-title, .pui-pop-item)[data-p="critical"] { --pui-pc: var(--pui-p-critical); }
:is(.pui, .pui-layer) [data-p="high"], :is(.pui-pchip, .pui-pdot, .pui-card, .pui-section-title, .pui-pop-item)[data-p="high"] { --pui-pc: var(--pui-p-high); }
:is(.pui, .pui-layer) [data-p="medium"], :is(.pui-pchip, .pui-pdot, .pui-card, .pui-section-title, .pui-pop-item)[data-p="medium"] { --pui-pc: var(--pui-p-medium); }
:is(.pui, .pui-layer) [data-p="low"], :is(.pui-pchip, .pui-pdot, .pui-card, .pui-section-title, .pui-pop-item)[data-p="low"] { --pui-pc: var(--pui-p-low); }
:is(.pui, .pui-layer) [data-s="new"], :is(.pui-spill, .pui-sdot, .pui-pop-item)[data-s="new"] { --pui-sc: var(--pui-s-new); }
:is(.pui, .pui-layer) [data-s="seen"], :is(.pui-spill, .pui-sdot, .pui-pop-item)[data-s="seen"] { --pui-sc: var(--pui-s-seen); }
:is(.pui, .pui-layer) [data-s="progress"], :is(.pui-spill, .pui-sdot, .pui-pop-item)[data-s="progress"] { --pui-sc: var(--pui-s-progress); }
:is(.pui, .pui-layer) [data-s="review"], :is(.pui-spill, .pui-sdot, .pui-pop-item)[data-s="review"] { --pui-sc: var(--pui-s-review); }
:is(.pui, .pui-layer) [data-s="done"], :is(.pui-spill, .pui-sdot, .pui-pop-item)[data-s="done"] { --pui-sc: var(--pui-s-done); }
:is(.pui, .pui-layer) [data-s="canceled"], :is(.pui-spill, .pui-sdot, .pui-pop-item)[data-s="canceled"] { --pui-sc: var(--pui-s-canceled); }
.pui-ring[data-u="calm"] { --pui-uc: var(--pui-ok); }
.pui-ring[data-u="soon"] { --pui-uc: var(--pui-p-medium); }
.pui-ring[data-u="warm"] { --pui-uc: var(--pui-p-high); }
.pui-ring[data-u="hot"], .pui-ring[data-u="over"] { --pui-uc: var(--pui-p-critical); }

/* ============ 18. Movimiento reducido (sólo adentro del kit) ============ */
@media (prefers-reduced-motion: reduce) {
  .pui, .pui *, .pui *::before, .pui *::after,
  .pui-layer, .pui-layer *, .pui-layer *::before, .pui-layer *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}