/* =============================================================================
   AnalogCams — Componentes UI compartidos

   Guía de uso (siempre partir de `.btn` en <button> salvo excepciones):

   · Cerrar (X):     btn icon-btn ac-close-btn [+ posición local]
   · Acciones planas (modales, barras): contenedor .ac-btn-bar + btn-accent | btn-muted | btn-danger
   · CTA sólido:     btn ac-btn-solid ac-btn-solid--primary
   · Peligro sólido: btn ac-btn-solid ac-btn-solid--danger
   · Ghost pill:     btn ac-btn-ghost-pill  (variante --overlay en fondos oscuros)
   · Ghost barra:    btn ac-btn-ghost-bar   (filas secundarias en paneles oscuros)
   · Ghost pequeño:  btn ac-btn-ghost-sm    (menús ⋮, reset, export)
   · Toolbar toggle: btn ac-btn-toolbar     (+ .active)
   · Icono overlay:  btn ac-btn-icon-overlay (+ --sm | --nav)
   · Texto plano:    btn ac-btn-text
   · Tinte accent:   btn ac-btn-tint-accent
   · Menú:           btn ac-btn-menu-trigger | ac-btn-menu-item [--danger]
   · Segmentado:     ac-segment > btn ac-segment-btn
   · Icono peligro:   ac-icon-danger-btn  (papelera; 44×44 cabecera)
   · Icono confirmar: ac-icon-success-btn (check verde; 32×32 filas de formulario)
   · Icono añadir:    ac-icon-accent-btn  (+ azul; 32×32, p. ej. nueva etiqueta)
   · Filtros:        bchip (toggle) | select-pill / news-brand-select (dropdown) — altura --ac-filter-h
   · Buscador pill:  ac-search-input  (Inventario, Recetas, Noticias — lupa + alto unificado)
   · Buscador flat:  ac-search-input ac-search-input--flat  (formularios / panel editor)
   · Confirmación:   ac-confirm-dialog
   ============================================================================= */

/* Foco de alto contraste — excepto iconos circulares (tienen su propio foco). */
:where(button:not(.ac-icon-danger-btn):not(.ac-icon-success-btn):not(.ac-icon-accent-btn):not(.ac-close-btn), a, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--focus-ring, #ffd60a) !important;
    outline-offset: 3px !important;
}

/* Contenedores de diálogo (tabindex="-1": sheet de filtros, ficha de cámara,
   panel de revisión) reciben el foco al abrirse solo para que Tab entre
   dentro — no son controles reales y no deben pintar el anillo amarillo de
   arriba. Antes "funcionaba" porque el navegador no marca :focus-visible en
   un foco por script inmediatamente después de un clic/toque real — pero
   tras un `await` (p. ej. verificar el PIN, ~1s de PBKDF2) se pierde esa
   atribución y el anillo aparece igualmente, ahora rodeando el diálogo
   entero. El primer control interactivo de dentro (X, casilla, botón) sigue
   pintando su propio anillo al llegar por Tab, así que no se pierde foco
   visible para teclado, solo el del contenedor en sí. */
.filter-sheet-panel:focus-visible,
.cam-drawer:focus-visible,
#editor-review-backdrop .editor-modal:focus-visible {
    outline: none !important;
}

/* Controles que ya definen su propio anillo de acento en :focus (box-shadow
   azul, para no destacar tanto como el amarillo de arriba en un campo de
   texto/select normal). Chromium marca :focus-visible en cualquier input/
   select tocado con el dedo o el ratón, no solo por teclado — así que sin
   esto, CADA clic mostraba el amarillo encima del azul propio (doble
   anillo, parecía un fallo). Se arma el color al acento y se conserva el
   resto (grosor/offset) del global de arriba. */
.ac-search-input:focus-visible,
.search-box:focus-visible,
.select-pill:focus-visible,
.news-search-box:focus-visible,
.news-brand-select:focus-visible,
select:focus-visible,
.ep-textarea:focus-visible,
.ep-new-tag-input:focus-visible,
.recipes-search:focus-visible,
.cs-search-input:focus-visible,
.lb-notes-area:focus-visible,
.lb-custom-slider-num:focus-visible,
.lb-custom-name-input:focus-visible,
.lb-custom-blend-select:focus-visible {
    outline-color: var(--accent) !important;
}
/* ── Barra de acciones planas (estilo modal token) ───────────────────────── */
.ac-btn-bar {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.btn-accent {
    color: var(--accent);
}
.btn-muted {
    color: var(--text-muted);
}
.btn-danger {
    color: var(--err-color, #ff453a);
    border-color: transparent;
    background: transparent;
}
.ac-btn-bar .btn,
.editor-modal-actions .btn,
.ac-confirm-actions .btn,
.ep-actions .btn,
.cam-drawer-actions .btn,
.state-msg-actions .btn,
.filter-sheet-footer .btn,
#editor-pin-modal .btn {
    border-color: transparent;
    background: transparent;
    min-height: 44px;
    padding: 8px 16px;
    font-weight: 600;
    border-radius: var(--radius-sm);
}
.ac-btn-bar .btn:hover,
.editor-modal-actions .btn:hover,
.ac-confirm-actions .btn:hover,
.ep-actions .btn:hover,
.cam-drawer-actions .btn:hover,
.state-msg-actions .btn:hover,
.filter-sheet-footer .btn:hover,
#editor-pin-modal .btn:hover {
    border-color: transparent;
}
@media (hover: hover) {
    .ac-btn-bar .btn-accent:hover,
    .editor-modal-actions .btn-accent:hover,
    .ac-confirm-actions .btn-accent:hover,
    .ep-actions .btn-accent:hover,
    .cam-drawer-actions .btn-accent:hover,
    .state-msg-actions .btn-accent:hover,
    .filter-sheet-footer .btn-accent:hover,
    #editor-pin-modal .btn-accent:hover {
        background: var(--accent-dim);
        color: var(--accent);
    }
    .ac-btn-bar .btn-muted:hover,
    .editor-modal-actions .btn-muted:hover,
    .ac-confirm-actions .btn-muted:hover,
    .ep-actions .btn-muted:hover,
    .state-msg-actions .btn-muted:hover,
    .filter-sheet-footer .btn-muted:hover,
    #editor-pin-modal .btn-muted:hover {
        background: var(--bg-hover);
        color: var(--text-main);
    }
    .ac-btn-bar .btn-danger:hover,
    .editor-modal-actions .btn-danger:hover,
    .ac-confirm-actions .btn-danger:hover,
    .ep-actions .btn-danger:hover,
    .state-msg-actions .btn-danger:hover,
    .filter-sheet-footer .btn-danger:hover,
    #editor-pin-modal .btn-danger:hover,
    .btn-danger:hover {
        background: rgba(255, 69, 58, 0.1);
        color: var(--err-color);
        border-color: transparent;
    }
}

/* ── Botones sólidos ───────────────────────────────────────────────────── */
.ac-btn-solid {
    border: none;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition:
        background 0.15s var(--ease-out),
        color 0.15s var(--ease-out),
        opacity 0.15s var(--ease-out);
}
.ac-btn-solid:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.ac-btn-solid--primary {
    background: var(--accent);
    color: var(--on-accent, #00172d);
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
@media (hover: hover) {
    .ac-btn-solid--primary:hover:not(:disabled) {
        opacity: 0.88;
    }
}
.ac-btn-solid--primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.ac-btn-solid--danger {
    background: rgba(var(--err-rgb), 0.10);
    color: rgba(var(--err-rgb), 0.65);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 0.67rem;
}
@media (hover: hover) {
    .ac-btn-solid--danger:hover {
        background: rgba(var(--err-rgb), 0.18);
        color: var(--err-tx);
    }
}

/* ── Ghost pill (secundarios redondeados) ──────────────────────────────── */
.ac-btn-ghost-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    border-radius: 99px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    touch-action: manipulation;
    transition: background 0.12s var(--ease-out), color 0.12s var(--ease-out);
}
.ac-btn-ghost-pill:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.ac-btn-ghost-pill--overlay {
    background: rgba(var(--ac-overlay-white), 0.07);
    color: rgba(var(--ac-overlay-white), 0.60);
    font-size: 0.64rem;
    padding: 4px 11px;
}
@media (hover: hover) {
    .ac-btn-ghost-pill--overlay:hover {
        background: rgba(var(--ac-overlay-white), 0.13);
        color: #fff;
    }
}
.ac-btn-ghost-pill--surface {
    background: rgba(var(--ac-overlay-white), 0.08);
    color: var(--text-main);
    font-size: 0.8rem;
    padding: 7px 16px;
}
@media (hover: hover) {
    .ac-btn-ghost-pill--surface:hover {
        background: rgba(var(--ac-overlay-white), 0.14);
    }
}

/* ── Ghost bar (filas secundarias en paneles oscuros) ──────────────────── */
.ac-btn-ghost-bar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: none;
    border-radius: var(--radius-sm);
    background: rgba(var(--ac-overlay-white), 0.08);
    color: rgba(var(--ac-overlay-white), 0.85);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: background 0.12s, color 0.12s;
}
@media (hover: hover) {
    .ac-btn-ghost-bar:hover {
        background: rgba(var(--ac-overlay-white), 0.13);
        color: #fff;
    }
}
.ac-btn-ghost-bar--muted {
    background: rgba(var(--ac-overlay-white), 0.07);
    color: rgba(var(--ac-overlay-white), 0.50);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.72rem;
}
@media (hover: hover) {
    .ac-btn-ghost-bar--muted:hover {
        background: rgba(var(--ac-overlay-white), 0.13);
        color: rgba(var(--ac-overlay-white), 0.80);
    }
}

/* ── Ghost pequeño (menús, reset, chips) ───────────────────────────────── */
.ac-btn-ghost-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: rgba(var(--ac-overlay-white), 0.07);
    color: rgba(var(--ac-overlay-white), 0.48);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background 0.13s, color 0.13s;
}
@media (hover: hover) {
    .ac-btn-ghost-sm:hover {
        background: rgba(var(--ac-overlay-white), 0.13);
        color: rgba(var(--ac-overlay-white), 0.90);
    }
}
.ac-btn-ghost-sm--danger {
    padding: 5px 9px;
    font-size: 0.60rem;
    color: rgba(var(--ac-overlay-white), 0.38);
}
@media (hover: hover) {
    .ac-btn-ghost-sm--danger:hover {
        background: rgba(var(--err-rgb), 0.14);
        color: var(--err-tx);
    }
}

/* ── Tinte accent (editar, aplicar mezcla) ─────────────────────────────── */
.ac-btn-tint-accent {
    border: none;
    border-radius: 8px;
    background: var(--accent-dim);
    color: var(--accent);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.12s, background 0.14s, color 0.14s;
}
@media (hover: hover) {
    .ac-btn-tint-accent:hover {
        opacity: 0.80;
    }
}
.ac-btn-tint-accent--outline {
    border: 1px solid var(--accent);
    font-weight: 700;
    font-size: 0.68rem;
    padding: 7px;
    width: 100%;
}
@media (hover: hover) {
    .ac-btn-tint-accent--outline:hover {
        background: var(--accent);
        color: #fff;
        opacity: 1;
    }
}

/* ── Texto plano (enlaces de acción, limpiar bandeja) ──────────────────── */
.ac-btn-text {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.12s, opacity 0.12s;
}
.ac-btn-text:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.ac-btn-text--muted {
    color: var(--text-faint);
    font-size: 0.72rem;
}
@media (hover: hover) {
    .ac-btn-text--muted:hover {
        color: var(--text-muted);
    }
}
.ac-btn-text--accent {
    color: var(--accent);
    font-size: 0.85rem;
    line-height: 1;
    padding: 0 1px;
    opacity: 0.7;
}
@media (hover: hover) {
    .ac-btn-text--accent:hover {
        opacity: 1;
    }
}
.ac-btn-text--toast {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 10px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.16);
    color: inherit;
    font-size: 0.8rem;
    font-weight: 600;
}
@media (hover: hover) {
    .ac-btn-text--toast:hover {
        background: rgba(255, 255, 255, 0.22);
    }
}

/* ── Toolbar toggle (Lupa, Grano, A|B, descarga) ───────────────────────── */
.ac-btn-toolbar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 11px;
    border-radius: 99px;
    background: rgba(var(--ac-overlay-surface-1), 0.72);
    border: none;
    color: rgba(var(--ac-overlay-white), 0.65);
    font-size: 0.7rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    letter-spacing: 0.02em;
    transition: background 0.15s ease, color 0.15s ease;
}
.ac-btn-toolbar--bold {
    font-weight: 700;
    letter-spacing: 0.04em;
}
@media (hover: hover) {
    .ac-btn-toolbar:hover {
        background: rgba(var(--ac-overlay-surface-2), 0.85);
        color: #fff;
    }
}
.ac-btn-toolbar.active {
    background: var(--accent);
    color: var(--on-accent, #00172d);
}
.ac-btn-toolbar--icon {
    width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
    margin-left: 6px;
}

/* ── Icono circular sobre imagen/overlay ───────────────────────────────── */
.ac-btn-icon-overlay {
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.ac-btn-icon-overlay--sm {
    width: 28px;
    height: 28px;
    background: rgba(var(--ac-overlay-black), 0.55);
    color: rgba(var(--ac-overlay-white), 0.55);
    font-size: 0.9rem;
    line-height: 1;
}
.ac-btn-icon-overlay--sm.ac-btn-icon-overlay--bordered {
    border: 1px solid rgba(var(--ac-overlay-white), 0.25);
    color: #fff;
    font-size: 1rem;
}
@media (hover: hover) {
    .ac-btn-icon-overlay--sm:hover:not(:disabled):not(.active) {
        background: rgba(var(--ac-overlay-black), 0.75);
        transform: scale(1.1);
    }
    .ac-btn-icon-overlay--sm.ac-btn-icon-overlay--bordered:hover:not(:disabled) {
        transform: scale(1.12);
    }
}
.ac-btn-icon-overlay--sm.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent, #00172d);
}
.ac-btn-icon-overlay--sm.ac-btn-icon-overlay--warn.active {
    background: rgba(var(--warn-rgb), 0.22);
    color: #ffd60a;
}
@media (hover: hover) {
    .ac-btn-icon-overlay--sm.ac-btn-icon-overlay--warn:hover:not(.active) {
        background: rgba(var(--ac-overlay-black), 0.75);
        color: #ffd60a;
        transform: scale(1.1);
    }
    .ac-btn-icon-overlay--sm.ac-btn-icon-overlay--warn.active:hover {
        background: rgba(var(--warn-rgb), 0.32);
    }
}
.ac-btn-icon-overlay--nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    background: rgba(var(--ac-overlay-black), 0.55);
    border: 1px solid rgba(var(--ac-overlay-white), 0.18);
    color: #fff;
}
@media (hover: hover) {
    .ac-btn-icon-overlay--nav:hover {
        background: rgba(var(--ac-overlay-black), 0.82);
        transform: translateY(-50%) scale(1.1);
    }
}
.ac-btn-icon-overlay:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── Menú desplegable (⋮) ──────────────────────────────────────────────── */
.ac-btn-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;
    height: 22px;
    border-radius: 8px;
    background: rgba(var(--ac-overlay-white), 0.07);
    border: none;
    color: rgba(var(--ac-overlay-white), 0.55);
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background 0.15s, color 0.15s;
}
@media (hover: hover) {
    .ac-btn-menu-trigger:hover {
        background: rgba(var(--ac-overlay-white), 0.13);
        color: rgba(var(--ac-overlay-white), 0.90);
    }
}
.ac-btn-menu-trigger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.ac-btn-menu-item {
    display: block;
    width: 100%;
    padding: 9px 14px;
    border: none;
    background: none;
    color: rgba(var(--ac-overlay-white), 0.88);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
@media (hover: hover) {
    .ac-btn-menu-item:hover {
        background: rgba(var(--ac-overlay-white), 0.08);
        color: #fff;
    }
}
.ac-btn-menu-item--danger {
    color: rgba(var(--err-tx-rgb), 0.70);
}
@media (hover: hover) {
    .ac-btn-menu-item--danger:hover {
        background: rgba(var(--err-rgb), 0.10);
        color: var(--err-tx);
    }
}

/* Papelera destructiva — ver .ac-icon-danger-btn al final del archivo. */

/* ── Control segmentado ────────────────────────────────────────────────── */
.ac-segment {
    display: flex;
    gap: 2px;
    background: rgba(var(--ac-overlay-white), 0.04);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    flex-shrink: 0;
}
.ac-segment-btn {
    padding: 5px 11px;
    border-radius: 8px;
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text-muted);
    font-size: 0.73rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.ac-segment-btn.active {
    background: var(--accent-dim);
    color: var(--accent);
}
@media (hover: hover) {
    .ac-segment-btn:hover:not(.active) {
        color: var(--text-main);
    }
}
/* .btn aporta borde/fondo genérico — anular en segmentos y sólidos */
.btn.ac-segment-btn {
    border: none;
    background: none;
    box-shadow: none;
    padding: 5px 11px;
}
.btn.ac-btn-solid {
    border: none;
    box-shadow: none;
}

/* ── Botón cerrar (X) ──────────────────────────────────────────────────── */
.btn.icon-btn.ac-close-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
}
.btn.icon-btn.ac-close-btn svg {
    width: var(--ac-icon-md);
    height: var(--ac-icon-md);
    flex-shrink: 0;
}
@media (hover: hover) {
    .btn.icon-btn.ac-close-btn:hover {
        background: var(--bg-hover);
        color: var(--text-main);
        border-color: transparent;
    }
}
.btn.icon-btn.ac-close-btn:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
    box-shadow: none;
}
.btn.icon-btn.ac-close-btn--overlay {
    background: rgba(var(--ac-overlay-surface-1), 0.72);
    color: rgba(var(--ac-overlay-white), 0.60);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
@media (hover: hover) {
    .btn.icon-btn.ac-close-btn--overlay:hover {
        background: rgba(var(--ac-overlay-surface-2), 0.85);
        color: #fff;
    }
}

/* ── Confirmación ──────────────────────────────────────────────────────── */
.ac-confirm-dialog {
    animation: acConfirmIn 0.24s var(--ease-out);
}
@keyframes acConfirmIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(6px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .ac-confirm-dialog {
        animation: none;
    }
}

/* ── Controles de filtro (chips + selects, altura unificada tipo Noticias) ─ */
:root {
    --ac-filter-h: 36px;
    --ac-filter-py: 7px;
    --ac-filter-px: 14px;
    --ac-filter-fs: 0.72rem;
    --ac-filter-select-pr: 28px;
    /* SVG inline (viewBox 24 salvo flechas nav / menú ⋮) */
    --ac-icon-xs: 12px;
    --ac-icon-sm: 14px;
    --ac-icon-md: 16px;
    --ac-icon-lg: 18px;
    --ac-icon-xl: 19px;
    --ac-icon-nav-w: 10px;
    --ac-icon-nav-h: 18px;
    --ac-icon-ellipsis-h: 3px;
}
@media (max-width: 1080px) {
    :root {
        --ac-filter-h: 44px;
        --ac-filter-py: 10px;
        --ac-filter-px: 16px;
        --ac-filter-fs: 0.75rem;
    }
}

.bchip,
.select-pill,
.news-brand-select,
.tag-chip {
    min-height: var(--ac-filter-h);
    padding: var(--ac-filter-py) var(--ac-filter-px);
    font-size: var(--ac-filter-fs);
    font-family: inherit;
    font-weight: 600;
    line-height: 1.2;
    box-sizing: border-box;
    border-radius: 999px;
}

.bchip {
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.select-pill,
.news-brand-select {
    padding-right: var(--ac-filter-select-pr);
    border: none;
    color: var(--text-main);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--bg-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2371717a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.select-pill:focus,
.news-brand-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-dim);
}

/* ── Buscador pill (Inventario, Recetas, Noticias) ─────────────────────── */
.ac-search-input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: var(--ac-filter-h);
    padding: 8px 14px 8px 36px;
    border: none;
    border-radius: 980px;
    background-color: var(--bg-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    color: var(--text-main);
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.2;
    outline: none;
    transition: box-shadow 0.15s var(--ease-out);
    -webkit-appearance: none;
    appearance: none;
}

.ac-search-input::placeholder {
    color: var(--text-faint);
}

.ac-search-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-dim);
}

.ac-search-input::-webkit-search-cancel-button {
    cursor: pointer;
    opacity: 0.5;
}

/* Variante en formularios / panel (borde + esquinas suaves, no pill) */
.ac-search-input--flat {
    min-height: unset;
    padding: 7px 10px 7px 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg-body);
    font-size: 0.8rem;
    background-position: 10px center;
}

.ac-search-input--flat:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.ac-toast-container {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
@media (max-width: 1080px) {
    .ac-toast-container {
        bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }
}
.ac-toast {
    pointer-events: auto;
    padding: 12px 18px;
    border-radius: var(--radius-md);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    font-size: 0.88rem;
    color: var(--text-main);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s, transform 0.2s;
}
.ac-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Variante pill (recetas: mensaje + acción inline) */
.ac-toast--pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: rgba(var(--ac-overlay-surface-1), 0.96);
    border: 1px solid rgba(var(--ac-overlay-white), 0.12);
    border-radius: 99px;
    box-shadow:
        0 4px 20px rgba(var(--ac-overlay-black), 0.55),
        0 1px 4px rgba(var(--ac-overlay-black), 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    max-width: 380px;
    white-space: nowrap;
    transform: translateY(6px) scale(0.97);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.ac-toast--pill.visible {
    transform: translateY(0) scale(1);
}
.ac-toast-msg {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(var(--ac-overlay-white), 0.88);
    letter-spacing: 0.01em;
}
.ac-toast-sep {
    width: 1px;
    height: 14px;
    background: rgba(var(--ac-overlay-white), 0.18);
    flex-shrink: 0;
}

/* ── Contenedores de acciones (layout) ─────────────────────────────────── */
.state-msg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
}
.state-msg-actions .btn {
    padding: 10px 18px;
}

/* ── Cabecera editor: acciones (papelera + cerrar) ─────────────────────── */
.ac-editor-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Igual que #editor-pending-btn (editor.css): display:inline-flex de abajo es
   una regla de autor y gana al [hidden]{display:none} del user-agent por
   origen, no por especificidad — sin esto, "Eliminar token guardado" se
   pintaba igualmente aunque hasStoredToken() fuera false y el JS pusiera
   hidden=true. Único caso hoy de .ac-icon-danger-btn que se oculta/muestra
   en vez de estar siempre visible dentro de un modal ya abierto. */
#editor-settings-clear[hidden] {
    display: none;
}

/* ── Papelera destructiva (sin .btn — idéntica en modal y panel lateral) ─── */
.ac-icon-danger-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 999px;
    /* Círculo de tinte rojo siempre visible (pedido explícito del usuario:
       "la papelera también tiene que tener la sombrita roja siempre"), no
       solo al pasar el ratón — hover/active solo suben la intensidad. */
    background-color: rgba(var(--err-rgb), 0.12);
    color: var(--err-color);
    cursor: pointer;
    font: inherit;
    line-height: 0;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color 0.15s var(--ease-out),
        transform 0.08s var(--ease-out);
}
.ac-icon-danger-btn svg {
    width: var(--ac-icon-md);
    height: var(--ac-icon-md);
    pointer-events: none;
}
@media (hover: hover) {
    .ac-icon-danger-btn:hover {
        background-color: rgba(var(--err-rgb), 0.18);
        color: var(--err-color);
    }
}
.ac-icon-danger-btn:active {
    transform: scale(0.96);
    background-color: rgba(var(--err-rgb), 0.24);
}

/* Solo :focus-visible (no :focus): en Chromium un <button> ya distingue
   clic/toque (no marca :focus-visible) de navegación por teclado (sí la
   marca) — comprobado con Playwright. :focus sí se activa con cualquier
   método y fue la causa real de que el toque dejara el círculo rojo
   pintado tras cancelar la confirmación; con solo :focus-visible el
   teclado recupera un indicador visible sin reintroducir ese problema. */
.ac-icon-danger-btn:focus-visible {
    outline: 2px solid var(--err-color);
    outline-offset: 2px;
}

/* ── Confirmar (check) — 32×32, verde; filas de formulario (nueva etiqueta) ─ */
.ac-icon-success-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 999px;
    background-color: rgba(var(--ok-rgb), 0.12);
    color: var(--ok-color);
    cursor: pointer;
    font: inherit;
    line-height: 0;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color 0.15s var(--ease-out),
        transform 0.08s var(--ease-out);
}
.ac-icon-success-btn svg {
    width: var(--ac-icon-sm);
    height: var(--ac-icon-sm);
    pointer-events: none;
}
@media (hover: hover) {
    .ac-icon-success-btn:hover {
        background-color: rgba(var(--ok-rgb), 0.18);
    }
}
.ac-icon-success-btn:active {
    transform: scale(0.96);
    background-color: rgba(var(--ok-rgb), 0.24);
}
.ac-icon-success-btn:focus-visible {
    outline: 2px solid var(--ok-color);
    outline-offset: 2px;
}
.ac-icon-success-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Añadir (+) — 32×32, azul; p. ej. botón «nueva etiqueta» en el panel ─── */
.ac-icon-accent-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 999px;
    background-color: rgba(var(--accent-rgb), 0.14);
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    line-height: 0;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color 0.15s var(--ease-out),
        transform 0.08s var(--ease-out);
}
.ac-icon-accent-btn svg {
    width: var(--ac-icon-sm);
    height: var(--ac-icon-sm);
    pointer-events: none;
}
@media (hover: hover) {
    .ac-icon-accent-btn:hover {
        background-color: rgba(var(--accent-rgb), 0.22);
    }
}
.ac-icon-accent-btn:active {
    transform: scale(0.96);
    background-color: rgba(var(--accent-rgb), 0.28);
}
.ac-icon-accent-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Panel lateral: mismo reposo/hover/active que modal; anula CSS legacy de .icon-btn */
#editor-panel .ac-icon-danger-btn,
#editor-panel .ep-delete-btn {
    background-color: rgba(var(--err-rgb), 0.12) !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--err-color) !important;
}
#editor-panel .ac-icon-danger-btn:focus-visible,
#editor-panel .ep-delete-btn:focus-visible {
    outline: 2px solid var(--err-color) !important;
    outline-offset: 2px !important;
}
#editor-panel .ac-icon-danger-btn:active,
#editor-panel .ep-delete-btn:active {
    background-color: rgba(var(--err-rgb), 0.24) !important;
    box-shadow: none !important;
}
@media (hover: hover) {
    #editor-panel .ac-icon-danger-btn:hover,
    #editor-panel .ep-delete-btn:hover {
        background-color: rgba(var(--err-rgb), 0.18) !important;
        box-shadow: none !important;
    }
}

/* ── Tamaños SVG por contexto (sin width/height inline en JS/HTML) ─────── */
.ac-btn-toolbar svg,
.ac-btn-ghost-bar svg,
.ac-btn-ghost-sm svg,
.ac-btn-ghost-pill svg,
.ac-btn-solid svg,
.ac-btn-icon-overlay--sm svg {
    width: var(--ac-icon-xs);
    height: var(--ac-icon-xs);
    flex-shrink: 0;
}
.ac-btn-icon-overlay--nav svg {
    width: var(--ac-icon-nav-w);
    height: var(--ac-icon-nav-h);
    flex-shrink: 0;
}
.ac-btn-menu-trigger svg,
svg.ac-icon-svg-ellipsis {
    width: var(--ac-icon-xs);
    height: var(--ac-icon-ellipsis-h);
    flex-shrink: 0;
}
svg.ac-icon-svg-sm {
    width: var(--ac-icon-sm);
    height: var(--ac-icon-sm);
    flex-shrink: 0;
}
svg.ac-icon-svg-md {
    width: var(--ac-icon-md);
    height: var(--ac-icon-md);
    flex-shrink: 0;
}
svg.ac-icon-svg-lg {
    width: var(--ac-icon-lg);
    height: var(--ac-icon-lg);
    flex-shrink: 0;
}