/* =====================================================================
   Eskin Mobile Shell — infraestructura compartida para una experiencia
   nativa en mobile/tablet: navegación inferior, stat-chips con tooltip
   táctil, y el popover que los soporta (ver eskin-mobile-shell.js).
   Cargado globalmente desde template.xhtml, así que TODAS las reglas
   aquí están sin scope de página y deben ser genéricas y aditivas.
   ===================================================================== */

:root {
    --eskin-c-facturas: #2196F3;
    --eskin-c-facturas-bg: #EFF6FF;
    --eskin-c-ganancia: #16A34A;
    --eskin-c-ganancia-bg: #F0FDF4;
    --eskin-c-honorarios: #D97706;
    --eskin-c-honorarios-bg: #FFFBEB;
    --eskin-c-responsables: #7C3AED;
    --eskin-c-responsables-bg: #F5F3FF;
    --eskin-c-citas: #0891B2;
    --eskin-c-citas-bg: #ECFEFF;
}

/* ---------- Stat chips (dashboard / resumen) ---------- */

.stat-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.stat-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px 7px 7px;
    border-radius: 999px;
    background: var(--stat-bg, #F8FAFC);
    -webkit-tap-highlight-color: transparent;
}

.stat-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--stat-fg, #2196F3);
    color: #ffffff;
    font-size: .72rem;
    flex: 0 0 auto;
}

.stat-chip-value {
    font-size: .92rem;
    font-weight: 800;
    color: #0F172A;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stat-chip-label {
    color: #64748B;
    font-weight: 700;
    font-size: .78rem;
    white-space: nowrap;
}

.stat-chip--facturas { --stat-bg: var(--eskin-c-facturas-bg); --stat-fg: var(--eskin-c-facturas); }
.stat-chip--responsables { --stat-bg: var(--eskin-c-responsables-bg); --stat-fg: var(--eskin-c-responsables); }
.stat-chip--ganancia { --stat-bg: var(--eskin-c-ganancia-bg); --stat-fg: var(--eskin-c-ganancia); }
.stat-chip--honorarios { --stat-bg: var(--eskin-c-honorarios-bg); --stat-fg: var(--eskin-c-honorarios); }
.stat-chip--citas { --stat-bg: var(--eskin-c-citas-bg); --stat-fg: var(--eskin-c-citas); }

@media (max-width: 480px) {
    /* El texto sigue en el DOM para lectores de pantalla; en pantallas
       muy chicas solo se ve ícono + valor, y el significado se
       descubre con el popover (tap) que arma eskin-mobile-shell.js. */
    .stat-chip-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .stat-chip {
        padding: 7px 12px 7px 7px;
    }
}

/* ---------- Tooltip / popover táctil ----------
   Cualquier elemento con [data-tooltip="texto"] recibe hover (desktop)
   y tap (mobile) vía eskin-mobile-shell.js. Puro CSS + JS vanilla,
   sin dependencias nuevas. */

[data-tooltip] {
    cursor: help;
}

.eskin-tooltip-popover {
    position: fixed;
    z-index: 10000;
    max-width: 220px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #0F172A;
    color: #ffffff;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.35;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .3);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
}

.eskin-tooltip-popover.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Bottom navigation (mobile / tablet chico) ---------- */

.eskin-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .eskin-bottom-nav {
        display: flex;
        justify-content: center;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 998;
        background: rgba(255, 255, 255, .98);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid #E5EAF3;
        box-shadow: 0 -10px 26px rgba(15, 23, 42, .07);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .eskin-bottom-nav-item {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 84px;
        min-height: 58px;
        padding: 9px 16px 7px;
        color: #64748B !important;
        text-decoration: none !important;
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .01em;
        -webkit-tap-highlight-color: transparent;
    }

    .eskin-bottom-nav-item i {
        font-size: 1.2rem;
        line-height: 1;
    }

    .eskin-bottom-nav-item.active {
        color: var(--eskin-c-facturas) !important;
    }

    .eskin-bottom-nav-item:active {
        background: #F8FAFC;
    }

    /* Que el contenido no quede tapado detrás de la barra fija. */
    .layout-content {
        padding-bottom: 76px !important;
    }
}

@media (min-width: 769px) {
    .eskin-bottom-nav {
        display: none !important;
    }
}