/**
 * CARNELIO — estilos globales para teclado, foco y hover.
 *
 * - Foco visible (`:focus-visible`) con rojo Carnelio, SOLO cuando viene de teclado.
 *   Click/touch no muestra outline. Es lo que WCAG espera y lo que los usuarios
 *   de ratón no quieren ver.
 * - Hover real solo en dispositivos con cursor (evita hover stuck en táctil).
 * - Targets táctiles se compactan en mouse puro.
 * - Pista visual opcional para botones que tienen atajo (`data-atajo`).
 */

/* --- Foco visible para teclado --- */
/* Aumentamos especificidad con html para ganar a Tailwind sin !important */
html *:focus-visible {
    outline: 3px solid var(--c-brand, #D32F2F);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Anular outline cuando NO es focus por teclado (click, touch, JS focus()). */
html *:focus:not(:focus-visible) {
    outline: none;
}

/* Refuerzo para elementos donde Tailwind o estilos inline tienen prioridad
   (login, admin, pedidos usan focus:outline-none). Aqui SI necesitamos !important
   porque competimos contra reglas de igual o mayor especificidad. */
html.has-keyboard button:focus-visible,
html.has-keyboard a:focus-visible,
html.has-keyboard [role="button"]:focus-visible,
html.has-keyboard [tabindex]:focus-visible,
html.has-keyboard input:focus-visible,
html.has-keyboard select:focus-visible,
html.has-keyboard textarea:focus-visible {
    outline: 3px solid var(--c-brand, #D32F2F) !important;
    outline-offset: 2px;
}

/* --- Hover stuck en tactil --- */
/* En tactil (hover: none), el navegador deja el :hover "pegado" despues de tocar.
   NO podemos resetear con "revert" porque revierte al UA, no al estilo del autor
   (rompe botones rojos Carnelio). Solo anulamos los efectos de elevacion (transform)
   que son los que mas molestan visualmente. Los colores quedan pegados hasta el
   siguiente toque — comportamiento estandar. */
@media (hover: none) {
    *:hover {
        transform: none;
    }
}

/* --- Cursor pointer en clickables marcados manualmente --- */
html.has-mouse [data-clickable]:not([disabled]) {
    cursor: pointer;
}

html.has-mouse [role="button"]:not([disabled]),
html.has-mouse [tabindex]:not([tabindex="-1"]):not(input):not(textarea):not(select) {
    cursor: pointer;
}

/* --- Pista visual de atajo (para botones marcados con data-atajo="N") --- */
html.has-keyboard [data-atajo]::after {
    content: attr(data-atajo);
    display: inline-block;
    margin-left: 0.5em;
    padding: 1px 6px;
    font-size: 0.72em;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-weight: 600;
    color: #6b7280;
    background: rgba(15, 23, 42, .06);
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 4px;
    line-height: 1.2;
    vertical-align: middle;
}

/* En táctil puro, ocultar las pistas (no hay teclado). */
html.no-keyboard [data-atajo]::after {
    display: none;
}

/* --- Estilo del input numerico cuando se desbloquea por teclado --- */
html.has-keyboard input[inputmode="none"],
html.has-keyboard input[data-num-input] {
    /* No hay cambio visual, pero el input ya no es readonly (lo hace device-input.js). */
    caret-color: var(--c-brand, #D32F2F);
}

/* --- Targets táctiles vs cursor puro --- */
@media (hover: hover) and (pointer: fine) {

    /* En mouse puro: los botones cuadrados (numpad) pueden ser un poco más compactos */
    html.no-touch .btn-num,
    html.no-touch .keypad-btn {
        min-height: 44px;
    }
}

/* --- Indicador visual: tecla fisica disparo accion en keypad --- */
.keypad-btn.pressed-by-keyboard,
.btn-num.pressed-by-keyboard {
    background-color: rgba(211, 47, 47, .15) !important;
    transform: scale(.95);
    transition: transform 80ms ease-out, background-color 80ms ease-out;
}

/* ============================================================
   BUSCADOR GLOBAL (Ctrl+F) — modal con input + lista de resultados
   ============================================================ */

.cb-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(15, 23, 42, .6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh 1rem 1rem;
    animation: cb-fadein .15s ease-out;
}

@keyframes cb-fadein {
    from { opacity: 0; transform: scale(.98); }
    to { opacity: 1; transform: scale(1); }
}

.cb-modal {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    max-height: 70vh;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
}

.cb-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
}

.cb-icono {
    font-size: 20px;
    opacity: 0.6;
    flex-shrink: 0;
}

.cb-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: inherit;
    color: #1e293b;
    background: transparent;
    min-width: 0;
    padding: 4px 0;
}
.cb-input::placeholder {
    color: #94a3b8;
}

.cb-kbd-esc {
    background: #f1f5f9;
    color: #64748b;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 5px;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.cb-lista {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    min-height: 100px;
}

.cb-grupo {
    margin-bottom: 4px;
}

.cb-grupo-header {
    padding: 8px 18px 4px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cb-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: #1e293b;
    transition: background .1s;
}
.cb-item:hover {
    background: #f8fafc;
}
.cb-item-activo {
    background: #fef2f2;
}
.cb-item-activo .cb-item-titulo {
    color: var(--c-brand, #D32F2F);
}

.cb-item-texto {
    flex: 1;
    min-width: 0;
}
.cb-item-titulo {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cb-item-desc {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cb-item-titulo mark, .cb-item-desc mark {
    background: rgba(211, 47, 47, .15);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 700;
}

.cb-item-atajo {
    background: #f1f5f9;
    color: #64748b;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.cb-vacio {
    padding: 32px 24px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}
.cb-vacio strong {
    color: #1e293b;
}

.cb-pie {
    display: flex;
    gap: 14px;
    padding: 10px 18px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 11px;
    color: #64748b;
}
.cb-pie kbd {
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 1px 6px;
    margin-right: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10px;
    font-weight: 600;
    color: #1e293b;
}

/* Mobile: el modal se pega arriba */
@media (max-width: 640px) {
    .cb-overlay {
        padding: 0;
        align-items: stretch;
    }
    .cb-modal {
        max-height: 100vh;
        border-radius: 0;
        max-width: none;
    }
    .cb-pie {
        font-size: 10px;
    }
}

/* --- Skip link (para screen readers / power users) --- */
.carnelio-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--c-brand, #D32F2F);
    color: white;
    padding: 8px 16px;
    z-index: 100000;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 8px 0;
}

.carnelio-skip-link:focus {
    top: 0;
}