/* ============================================================
   CI.TEC.BR — app.css (estilos globais compartilhados)
   ============================================================ */

/* ---- IP badge ---- */
.ip-badge {
    font-size: 1.6rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.04em;
    color: var(--bs-primary);
    word-break: break-all;
    padding: 0.5rem 1rem;
    background: rgba(var(--bs-primary-rgb), 0.08);
    border-radius: 0.5rem;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
    display: inline-block;
    max-width: 100%;
}

/* ---- Cards ---- */
.card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.12) !important; }

/* ---- Toolbar de exportação (Meu IP) ---- */
.export-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1050;
    background: rgba(33, 37, 41, 0.97);
    padding: 0.5rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(4px);
}
/* Só reserva espaço no rodapé quando a barra de exportação existe na página */
body:has(.export-bar) .app-main { padding-bottom: 72px; }

/* Mobile: barra em linha única com rolagem horizontal (não cobre o conteúdo) */
@media (max-width: 768px) {
    .export-bar .container-fluid {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
    }
    .export-bar .container-fluid > div { flex-wrap: nowrap !important; }
    .export-bar .btn { white-space: nowrap; }
}

/* ---- Gauge do speedtest ---- */
.gauge-wrapper { position: relative; width: 100%; }
/* Canvas com resolução fixa, mas escala visualmente em telas estreitas */
#speedGauge { max-width: 100%; height: auto; }

/* ---- Mapa interativo (altura fluida) ---- */
.map-hero { height: clamp(280px, 50vh, 480px); width: 100%; }
.gauge-center {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
}
.gauge-value {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
    color: var(--bs-body-color);
}
.gauge-unit  { font-size: 0.9rem; color: var(--bs-secondary-color); margin-top: -2px; }
.gauge-phase { font-size: 0.8rem; color: var(--bs-secondary-color); margin-top: 4px; }

/* ---- Fases do speedtest ---- */
.phase-item {
    text-align: center;
    min-width: 72px;
    transition: color 0.3s ease;
}
.phase-item i { transition: color 0.3s ease; }
.phase-value { font-size: 0.9rem; }

/* ---- Skeleton loading ---- */
.skeleton {
    background: linear-gradient(90deg, #e9ecef 25%, #dee2e6 50%, #e9ecef 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
    display: inline-block;
    height: 1em; width: 100%;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- Animação de entrada ---- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.card { animation: fadeInUp 0.3s ease both; }
.row .col-12:nth-child(1) .card { animation-delay: 0.05s; }
.row .col-12:nth-child(2) .card { animation-delay: 0.10s; }
.row .col-12:nth-child(3) .card { animation-delay: 0.15s; }

/* ---- Dark mode ---- */
[data-bs-theme="dark"] .ip-badge {
    background: rgba(var(--bs-primary-rgb), 0.15);
    border-color: rgba(var(--bs-primary-rgb), 0.3);
}
[data-bs-theme="dark"] .skeleton {
    background: linear-gradient(90deg, #2c3036 25%, #343a40 50%, #2c3036 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
}

/* ---- Responsivo ---- */
@media (max-width: 576px) {
    .ip-badge { font-size: 1.1rem; }
    .export-bar .btn { font-size: 0.7rem; padding: 0.2rem 0.5rem; }
    .gauge-value { font-size: 2rem; }

    /* Tipografia: reduz títulos muito grandes no celular */
    .app-content-header h3 { font-size: 1.15rem; }
    .display-3 { font-size: 2.2rem; }
    .display-4 { font-size: 1.9rem; }
    .display-5 { font-size: 1.5rem; }
    .display-6 { font-size: 1.3rem; }

    /* Cabeçalho de página: breadcrumb abaixo do título */
    .app-content-header .breadcrumb { float: none !important; margin-top: 0.25rem; }
}