/* ============================================================================
   V4.16 INTEGRAL · ÚLTIMO CSS (override) · cargar al final del _Host.cshtml
   ============================================================================
   Cambios visuales agrupados en un solo archivo:
     [1] FAB CLUSTER TOGGLE — nuevo botón que minimiza el cluster derecho
     [2] HOME · KPI cards rediseñadas con estilo dashboard premium
     [3] HOME · bloques NUEVA VENTA / CONSULTAR PRECIO / MANOLIN unificados
     [4] TOPBAR · fix de overflow horizontal y bugs visuales
     [5] MOBILE · fix bottom nav (escanear cortado), spacing, ergonomía
     [6] CONTINUAR PIN · refuerzo (sumado al fix de @layout EmptyLayout)
     [7] CAMPANITA · refuerzo botón "mostrar avisos anteriores"
   ============================================================================ */


/* =====================================================================
   [1] FAB CLUSTER TOGGLE
   ===================================================================== */

.fab-cl-toggle {
    position: fixed;
    bottom: 14px;
    right: 14px;
    z-index: 9998;          /* por debajo del modal antipánico (10000+) */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border-radius: 22px;
    background: linear-gradient(135deg, #1f2433, #14171f);
    color: #d4d4d8;
    border: 1px solid rgba(245, 166, 35, 0.30);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: all .18s ease;
}
.fab-cl-toggle:hover {
    background: linear-gradient(135deg, #28304a, #1a1f2e);
    border-color: rgba(245, 166, 35, 0.55);
    color: #fff;
    transform: translateY(-1px);
}
.fab-cl-toggle .fab-cl-ico {
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
}
.fab-cl-toggle .fab-cl-lbl {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.9;
}
.fab-cl-toggle.fab-cl-min {
    background: linear-gradient(135deg, #1a1f2e, #0f1320);
    border-color: rgba(245, 166, 35, 0.45);
}

/* === Lo que se OCULTA cuando el cluster está minimizado === */
body[data-fab-min="1"] .manolin-shell,
body[data-fab-min="1"] .manolin-egg,
body[data-fab-min="1"] .ap-btn-flotante,
body[data-fab-min="1"] .btn-act-flot,
body[data-fab-min="1"] .busc-flotante {
    display: none !important;
}

/* Cuando el cluster está EXPANDIDO, los FABs se posicionan apilados
   sobre el botón toggle así no se montan unos contra otros. */
.manolin-shell        { z-index: 9990; }
.manolin-egg          { z-index: 9990; }
.ap-btn-flotante      { z-index: 9991; }
.btn-act-flot         { z-index: 9989; }
.busc-flotante        { z-index: 9988; }

/* En PC el toggle queda a 14px de bottom; los FABs deben ofrecer espacio.
   Los FABs ya tienen sus propios bottoms; nos limitamos a empujar el botón
   actualizar (que estaba justo encima del nav mobile) un poco para arriba. */
@media (max-width: 720px) {
    .fab-cl-toggle {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
        right: 12px;
        height: 36px;
        padding: 0 12px;
    }
    .fab-cl-toggle .fab-cl-lbl { display: none; }
    .fab-cl-toggle .fab-cl-ico { font-size: 16px; }
}


/* =====================================================================
   [2] HOME · KPI CARDS REDISEÑADAS (dashboard premium)
   ===================================================================== */

/* La row contenedora ya existe (.kpis-row). Tuneamos las stats. */
.kpis-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 18px;
}

@media (max-width: 1100px) {
    .kpis-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Cada tarjeta */
.kpis-row .kpi-stat {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    min-height: 110px;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.kpis-row .kpi-stat::before {
    /* glow accent superior */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, transparent, var(--kpi-accent, #f5a623), transparent);
    opacity: 0.85;
}
.kpis-row .kpi-stat:hover {
    transform: translateY(-2px);
    border-color: rgba(245, 166, 35, 0.40) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

/* Variantes de color (accent line) */
.kpis-row .kpi-stat-ventas         { --kpi-accent: #10b981; }
.kpis-row .kpi-stat-mp             { --kpi-accent: #3b82f6; }
.kpis-row .kpi-stat-stock          { --kpi-accent: #6b7280; }
.kpis-row .kpi-stat-stock-alerta   { --kpi-accent: #ef4444; }
.kpis-row .kpi-stat-caja           { --kpi-accent: #f5a623; }

.kpis-row .kpi-lbl {
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #98a1b3;
    font-weight: 700;
    margin-bottom: 2px;
}
.kpis-row .kpi-val {
    font-size: 26px;
    font-weight: 900;
    color: #f5f5f7;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    margin: 4px 0;
}
.kpis-row .kpi-sub {
    font-size: 11.5px;
    color: #98a1b3;
    margin-top: 4px;
}

/* Stock alerta: pulso suave en el número cuando hay críticos */
.kpis-row .kpi-stat-stock-alerta .kpi-val {
    color: #fca5a5;
    text-shadow: 0 0 14px rgba(239, 68, 68, 0.35);
    animation: kpiStockPulse 1.8s ease-in-out infinite;
}
@keyframes kpiStockPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.65; }
}


/* =====================================================================
   [3] HOME · BLOQUES UNIFICADOS (nueva venta · consultar precio · manolin)
   ===================================================================== */

/* Estos bloques ya tienen sus clases definidas en site.css/polish.css.
   Tuneamos la presentación para que sean visualmente CONSISTENTES entre sí
   (misma altura, mismas sombras, mismo radius, mismo padding, hover homogéneo).
   No alteramos comportamiento ni rutas. */

.home-shell .hero-card,
.home-shell .cp-trigger {
    border-radius: 16px !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35) !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    margin-bottom: 12px;
}
.home-shell .hero-card:hover,
.home-shell .cp-trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45) !important;
    filter: brightness(1.05);
}

/* hero-duo: que sea grid en desktop, stack en mobile */
.home-shell .hero-duo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
}


/* =====================================================================
   [4] TOPBAR · FIX OVERFLOW HORIZONTAL Y BUGS VISUALES
   ===================================================================== */

/* El bug visual: la topbar tiene scroll horizontal en pantallas medianas
   porque varios chips no caben. "Ctrl+K" se monta sobre LEGAJO,
   "LLAMÉ POLICIA" se corta contra el borde derecho, el círculo de online
   se tapa.

   Fix: la topbar se vuelve "wrap" (los chips bajan de línea si no caben)
   en pantallas <1400px. Los pills se pueden truncar con ellipsis. El
   scrollbar interno desaparece. Mantenemos un layout de 3 zonas:
       [identidad] · [contexto] · [acciones]
   en lugar de una larga línea horizontal. */

.app-top {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
    overflow-x: hidden !important;       /* sin scrollbar horizontal */
    align-items: center !important;
    padding: 8px 14px !important;
    min-height: 56px;
}
.app-top::-webkit-scrollbar { display: none; }
.app-top { scrollbar-width: none; }

/* Pills con tope máximo: si el nombre de Lautaro es largo, trunca con ... */
.app-top .top-val,
.app-top .top-val-nombre {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

/* Identidad (LEGAJO + PERMISO + SUCURSAL) van como un grupo compacto */
.app-top .top-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Spacer flexible: empuja las acciones hacia la derecha cuando hay sitio,
   pero no fuerza overflow cuando no lo hay. */
.app-top .top-spacer {
    flex: 1 1 auto;
    min-width: 0;
}

/* Top-extras: si no entran, bajan a la siguiente línea pero NUNCA se cortan */
.app-top .top-extras {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    flex-shrink: 0;
    max-width: 100%;
}

/* "LLAMÉ POLICIA" no se corta: si no entra, baja a la siguiente fila */
.app-top .btn-policia-top {
    flex-shrink: 0;
    max-width: max-content;
}

/* BuscadorGlobal: que respete el ancho disponible */
.app-top > .busc-shell,
.app-top > div[class*="busc"] {
    flex: 0 1 320px;
    min-width: 180px;
}


/* =====================================================================
   [5] MOBILE · BOTTOM NAV / TOPBAR / SPACING
   ===================================================================== */

/* En mobile (<720px) la topbar se compacta:
   - Topbar arriba de todo, scroll a 1 fila si hace falta
   - Identidad, contexto y acciones se reordenan verticalmente */

@media (max-width: 720px) {
    .app-top {
        padding: 8px 10px !important;
        gap: 6px !important;
        min-height: 48px;
    }
    .app-top .top-group .pill { font-size: 10px; padding: 2px 6px; }
    .app-top .top-val,
    .app-top .top-val-nombre { font-size: 12px; max-width: 120px; }
    .app-top .btn-policia-top {
        font-size: 11px !important;
        padding: 5px 8px !important;
    }
    /* En mobile la fecha+hora se oculta (ya está en el celu) para ganar espacio */
    .app-top .top-group:has(> .top-val:only-child) {
        display: none;
    }

    /* Bottom nav: aseguramos que ESCANEAR (FAB central) NO quede tapado por
       FABs flotantes ni cortado por el viewport. */
    .nav-bottom-mobile,
    .mb-bottom-nav {
        z-index: 9970;
        padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
    }
    /* Si hay un FAB flotante (ChatDock, Manolin) se pinta SOBRE el bottom nav,
       le subimos el bottom para que no tape el centro del nav. */
    .manolin-shell { bottom: 110px !important; }
    .ap-btn-flotante { bottom: 90px !important; }
    .btn-act-flot { bottom: 70px !important; }
    .busc-flotante { display: none; }    /* en mobile no hace falta - hay buscador en topbar */
}


/* =====================================================================
   [6] CONTINUAR PIN · refuerzos (defensa en profundidad)
   ===================================================================== */

/* Por si por algún motivo se rompe el @layout en runtime, anulamos los
   filtros que oscurecían la pantalla en tema dark sobre dark. */
.continuar-cierre-shell {
    isolation: isolate;
    filter: none !important;
    backdrop-filter: none !important;
}
.continuar-cierre-shell .cc-card,
.continuar-cierre-shell .cc-card * {
    backdrop-filter: none !important;
    filter: none !important;
}


/* =====================================================================
   [7] CAMPANITA · refuerzo botón "mostrar avisos anteriores"
   ===================================================================== */

.cc-pop-watermark-reset {
    margin-top: 16px;
    padding: 10px 14px;
    background: rgba(245, 166, 35, 0.08);
    border: 1px solid rgba(245, 166, 35, 0.30);
    border-radius: 8px;
    color: #fde68a;
    font-size: 12.5px;
    text-align: left;
    line-height: 1.5;
}
.cc-pop-watermark-reset b { color: #fbbf24; }
.cc-pop-watermark-reset button {
    margin-top: 8px;
    background: linear-gradient(180deg, #f5a623 0%, #c47a17 100%);
    color: #1a1305;
    font-weight: 800;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cc-pop-watermark-reset button:hover {
    filter: brightness(1.1);
}