/* ============================================================================
   V20.0 :: tanda-v200-polish-masivo
   POLISH MEGA-G1+G2 - quick wins UX/UI
   
   Items resueltos:
     #20 - Boton panico con texto POLICIA + colores policiales (azul/rojo)
     #15 - Ocultar tip atajos hint y otros badges sobrantes del POS
     #14 - Mejorar barra superior POS (gradiente premium, mejor espaciado)
     #16 - Bug responsive home (descompagina al achicar)
     #9  - Compactar home (mas denso, menos margenes)
     #22 - Flotantes POS arrastrables (cursor grab, indicador visual)
   ============================================================================ */


/* ----------------------------------------------------------------------------
   #20 - BOTON ANTIPANICO -> POLICIA
   Reemplaza el rojo solido por gradiente policial (azul + rojo + amarillo).
   El texto "POLICIA" reemplaza al emoji.
   ---------------------------------------------------------------------------- */

.ap-btn-flotante.ap-btn-policia {
    /* Gradiente sirena policial: azul real + rojo + tinte amarillo */
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,0.20), transparent 50%),
        linear-gradient(135deg,
            #1d4ed8 0%,
            #2563eb 25%,
            #dc2626 55%,
            #b91c1c 80%,
            #f59e0b 100%);
    border: 2.5px solid rgba(255, 255, 255, 0.65);
    box-shadow:
        0 6px 20px rgba(29, 78, 216, 0.55),
        0 0 0 0 rgba(220, 38, 38, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 0 14px rgba(245, 158, 11, 0.30);
    color: #fff;
    /* Forma mas amplia para que entre el texto */
    width: 78px !important;
    height: 78px !important;
    font-weight: 900;
    letter-spacing: 0.5px;
}

/* Animacion sirena - alterna azul/rojo solo en idle (NO durante hold/firing) */
@keyframes ap-sirena-idle {
    0%, 100% {
        box-shadow:
            0 6px 20px rgba(29, 78, 216, 0.55),
            0 0 0 0 rgba(29, 78, 216, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.30);
    }
    50% {
        box-shadow:
            0 6px 22px rgba(220, 38, 38, 0.65),
            0 0 0 8px rgba(220, 38, 38, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.30);
    }
}
.ap-btn-flotante.ap-btn-policia:not(.ap-holding):not(.ap-firing) {
    animation: ap-sirena-idle 2s ease-in-out infinite;
}

.ap-btn-flotante.ap-btn-policia .ap-emoji {
    font-size: 11px;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    line-height: 1.1;
    letter-spacing: 0.5px;
}

/* En estado hold/firing mantiene el comportamiento original (escala + count) */
.ap-btn-flotante.ap-btn-policia.ap-holding .ap-emoji,
.ap-btn-flotante.ap-btn-policia.ap-firing .ap-emoji {
    font-size: 22px;
}


/* ----------------------------------------------------------------------------
   #15 - OCULTAR el tip de atajos (g3-pos-shortcuts-hint) en POS
   Y limpiar otros badges sobrantes que tapan elementos criticos.
   ---------------------------------------------------------------------------- */

html body.pos-active .g3-pos-shortcuts-hint,
html body .g3-pos-shortcuts-hint {
    display: none !important;
}


/* ----------------------------------------------------------------------------
   #14 - BARRA SUPERIOR POS PREMIUM
   Mejora el header del POS con gradiente premium y mejor espaciado.
   ---------------------------------------------------------------------------- */

.app-shell-pos .app-top,
.app-shell-pos header.app-top {
    background:
        linear-gradient(135deg,
            #0f172a 0%,
            #1e293b 50%,
            #0f172a 100%);
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
    padding-block: 8px;
}

.app-shell-pos .app-top .topbar,
.app-shell-pos .app-top .topbar-inner {
    align-items: center;
    gap: 12px;
}

.app-shell-pos .app-top .topbar-title,
.app-shell-pos .app-top .pos-title {
    font-weight: 700;
    letter-spacing: 0.3px;
    background: linear-gradient(180deg, #f8fafc 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ESC y atajos visibles a la derecha de la barra POS - mas refinados */
.app-shell-pos .app-top .pos-shortcut-badge,
.app-shell-pos .app-top .topbar-shortcut {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
}


/* ----------------------------------------------------------------------------
   #16 - BUG RESPONSIVE HOME (descompagina al achicar)
   Causa probable: flex children sin min-width: 0 + falta de overflow-x: hidden.
   El min-width: auto default de flex hace que el children no se contraiga
   y empuje al resto.
   ---------------------------------------------------------------------------- */

/* Contenedor principal del home: nunca scroll horizontal */
.app-main,
main.app-main,
.app-shell main {
    overflow-x: hidden;
    min-width: 0;
}

/* Cards del home: se contraen correctamente */
.menu-grid,
.home-grid,
.cards-grid {
    display: grid;
    gap: 12px;
    /* Cards minimas pero capaces de contraerse */
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    min-width: 0;
}

.menu-grid > *,
.home-grid > *,
.cards-grid > * {
    min-width: 0;
}

/* Cualquier flex layout en home no debe exceder el viewport */
.menu-row,
.menu-section,
.home-section {
    flex-wrap: wrap;
    min-width: 0;
}


/* ----------------------------------------------------------------------------
   #9 - COMPACTAR HOME (sensacion mas densa, a medida)
   Reduce padding, gaps y margenes del menu para que entre mas info por scroll.
   ---------------------------------------------------------------------------- */

/* Menu page: reducir padding general */
.menu-page,
[data-page="menu"] {
    padding: 12px 14px !important;
}

@media (min-width: 1200px) {
    .menu-page,
    [data-page="menu"] {
        padding: 14px 18px !important;
    }
}

/* Saludo + fecha mas compacto */
.menu-welcome,
.menu-saludo,
.greeting-card {
    padding: 14px 18px !important;
    margin-bottom: 12px !important;
    border-radius: 14px !important;
}

.menu-welcome h1,
.menu-saludo h1,
.greeting-card h1 {
    font-size: 1.5rem !important;
    margin: 0 0 4px 0 !important;
}

/* Cards del menu mas compactas */
.menu-card,
.home-card,
.shortcut-card {
    padding: 14px !important;
    border-radius: 12px !important;
}

.menu-card h3,
.menu-card .card-title,
.shortcut-card .title {
    font-size: 0.95rem !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.2 !important;
}

.menu-card p,
.menu-card .card-desc,
.shortcut-card .desc {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    opacity: 0.85;
}

/* Section headers del menu mas compactos */
.menu-section-title,
.section-title {
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    opacity: 0.75;
    margin: 14px 0 8px 0 !important;
    padding: 0 !important;
}

/* Atajos rapidos panel derecha - mas denso */
.atajos-panel,
.shortcuts-panel,
.panel-atajos {
    padding: 10px 12px !important;
    gap: 6px !important;
}

.atajos-panel .item,
.shortcuts-panel .item,
.panel-atajos .item {
    padding: 8px 10px !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
}


/* ----------------------------------------------------------------------------
   #22 - FLOTANTES POS ARRASTRABLES
   El JS de drag (window.manoDrag, _Host.cshtml inline) detecta data-drag.
   Los flotantes que llevamos a arrastrables: pos-fab-cotiz, mb-fab-scan.
   Aqui agregamos el feedback visual: cursor grab + ring on hover.
   ---------------------------------------------------------------------------- */

.pos-fab-cotiz[data-drag],
.mb-fab-scan[data-drag] {
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.pos-fab-cotiz[data-drag]:active,
.mb-fab-scan[data-drag]:active {
    cursor: grabbing;
    transform: scale(0.96);
}

/* Indicador visual sutil de arrastrable: 3 puntitos en una esquina */
.pos-fab-cotiz[data-drag]::before,
.mb-fab-scan[data-drag]::before {
    content: "⋮⋮";
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: -1px;
    pointer-events: none;
}

/* Mientras se esta arrastrando, sombra mas marcada */
.pos-fab-cotiz[data-drag].dragging,
.mb-fab-scan[data-drag].dragging,
[data-drag].mano-dragging {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
    z-index: 10000 !important;
}