/* ===== Layout base del template ===== */
html, body, #app {
    height: 100%;
}

.page {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    background-color: #2f3136; /* tono oscuro agradable */
    color: #fff;
}

    .sidebar .top-row {
        height: 3.5rem;
        display: flex;
        align-items: center;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .sidebar .navbar-brand {
        color: #fff;
        text-decoration: none;
    }

    .sidebar .nav-link {
        color: rgba(255,255,255,.85);
        padding: .5rem .75rem;
        border-radius: .375rem;
    }

        .sidebar .nav-link:hover {
            background: rgba(255,255,255,.08);
            color: #fff;
        }

        .sidebar .nav-link.active {
            background: rgba(255,255,255,.15);
            color: #fff;
            font-weight: 600;
        }

/* Contenido principal */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
    background: #111827; /* barra superior oscura */
    color: #fff;
}

.content {
    padding-top: 1rem;
}

/* Sidebar responsive */
/* En pantallas anchas, la sidebar ocupa ancho fijo y NUNCA se colapsa */
@media (min-width: 768px) {
    .sidebar {
        width: 260px;
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }

        .sidebar .collapse {
            display: block !important; /* <-- clave para que se vea la nav en desktop */
        }
}

/* En móviles, la nav se puede colapsar (botón hamburguesa de NavMenu) */
.nav-scrollable {
    overflow-y: auto;
    max-height: calc(100vh - 3.5rem);
}

/* Pequeño estilo para el estado del API si lo usas fijo */
.api-status {
    position: fixed;
    right: 12px;
    bottom: 10px;
    font-size: .85rem;
    opacity: .9;
    background: #fff;
    border-radius: .5rem;
    padding: .25rem .5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

.offline-banner,
.online-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0; /* pon "top:0" si prefieres arriba */
    z-index: 2100;
    text-align: center;
    padding: .5rem .75rem;
    font-weight: 600;
    box-shadow: 0 -2px 10px rgba(0,0,0,.08);
}

.offline-banner {
    background: #dc3545;
    color: #fff;
}

.online-banner {
    background: #198754;
    color: #fff;
}


.precheck-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 2050;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(1px);
}

.precheck-card {
    background: #fff;
    color: #212529;
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    font-weight: 600;
}


/* Leaflet dentro de modal */
.leaflet-container {
    width: 100%;
    height: 100%;
}

.map-shell {
    height: 380px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}


/* Tonalidades suaves para filas */
/*.row-fail {
    background-color: #fdeaea !important;
}*/
/* rojo muy suave */
/*.row-ok {
    background-color: #eaf7ea !important;
}*/
/* verde muy suave */

/* Mantén un hover sutil para accesibilidad */
/*.table-hover tbody tr.row-fail:hover {
    background-color: #f8d7da !important;
}*/
/* similar a .table-danger */
/*.table-hover tbody tr.row-ok:hover {
    background-color: #d4edda !important;
}*/
/* similar a .table-success */


/* Tonalidades para filas de UserLogs */
/*.table tr.row-fail {
    background-color: #FDE8E8;
}*/
/* rojo claro */
/*.table tr.row-fail:hover {
        background-color: #FBD5D5;
    }*/

.table tr.row-ok {
    background-color: #ECFDF5;
}
    /* verde claro */
    .table tr.row-ok:hover {
        background-color: #D1FAE5;
    }

    /* (Opcional) una barra sutil en el borde izquierdo */
    /*.table tr.row-fail > td:first-child {
    border-left: 4px solid #F87171;
}*/

    .table tr.row-ok > td:first-child {
        border-left: 4px solid #34D399;
    }

/* Mini-mapa responsive: mantiene aspecto 2:1 y limita altura */
.mini-map {
    /* 2:1 aproximado usando ancho como referencia vía JS; aquí damos una base segura */
    height: clamp(220px, 32vh, 520px);
    border-radius: .5rem;
    overflow: hidden;
}



/* Toolbar de filtros/acciones, más orden y aire */
.card-toolbar .btn {
    white-space: nowrap;
}

.card-toolbar .form-check {
    margin: 0;
}

.card-toolbar .meta {
    font-size: .85rem;
    color: #6c757d; /* text-muted */
}


/* Sidebar: normaliza tamaño y alineación de iconos/texto */
/* ===== Sidebar PRO ===== */
/* Contenedor del sidebar */
/* Oculta la barra de scroll del sidebar (pero permite desplazarse) */
.nav-scrollable {
    overflow-y: auto; /* sigue habiendo scroll, solo se oculta la barra */
    overflow-x: hidden; /* evita barra horizontal accidental */
    -ms-overflow-style: none; /* IE/Edge legacy */
    scrollbar-width: none; /* Firefox */
}

    .nav-scrollable::-webkit-scrollbar { /* Chrome, Safari, Edge */
        width: 0;
        height: 0;
    }

    /* Texto por defecto en el menú */
    .nav-scrollable .nav-link {
        color: var(--sidebar-text);
    }

        /* Hover/Active usando las vars */
        .nav-scrollable .nav-link:hover {
            background: var(--sidebar-hover-bg);
            color: #fff;
        }

        .nav-scrollable .nav-link.active {
            background: var(--sidebar-active-bg);
            color: #fff;
        }

    /* Icono (si lo quieres más claro por defecto) */
    /* .nav-scrollable .nav-icon { color: #fff; } */


    /* Caja fija para el icono: asegura alineación y tamaño uniforme */
    .nav-scrollable .nav-icon {
        width: 1.25rem;
        height: 1.25rem;
        font-size: 1.25rem; /* tamaño de todos los iconos */
        line-height: 1; /* evita saltos verticales */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

/* ====== Theme vars ====== */
:root {
    /* Cambia SOLO estos valores cuando quieras otro look */
    --sidebar-bg: #0b1d3a; /* arriba */
    --sidebar-bg2: #2a0a4b; /* abajo (para el degradado) */
    --sidebar-text: #dbe2ef;
    --sidebar-hover-bg: rgba(255,255,255,.08);
    --sidebar-active-bg: rgba(255,255,255,.18);
}

/* Centra el login en pantalla */
.login-wrapper {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(16px, 3vw, 32px);
}

/* Card moderna */
.login-card {
    width: 100%;
    max-width: 460px;
    border-radius: 18px;
}

/* Marca redonda (puedes sustituir por tu logo <img>) */
.brand-mark {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,#6366f1,#8b5cf6);
    color: #fff;
    font-weight: 700;
    letter-spacing: .5px;
    font-size: 18px;
}

/* Botón principal tono morado (opcional) */
.btn-primary {
    --bs-btn-bg: #6366f1;
    --bs-btn-border-color: #6366f1;
    --bs-btn-hover-bg: #5558ee;
    --bs-btn-hover-border-color: #5558ee;
    --bs-btn-focus-shadow-rgb: 99,102,241;
}

/* Botón principal tono morado (opcional) */
.btn-vcprimary {
    --bs-btn-bg: #000000;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-bg: #ff5100;
    --bs-btn-hover-border-color: ##fff;
    --bs-btn-focus-shadow-rgb: 99,102,241;
}

/* Inputs grandes con borde suave */
.form-control-lg {
    border-radius: .6rem;
}

/* Link pequeño discreto */
.link-offset-1 {
    text-decoration: none;
}

    .link-offset-1:hover {
        text-decoration: underline;
    }




/* Fondo y texto del encabezado */
.grid-dark thead {
    background-color: #0f172a; /* dark slate */
    color: #e5e7eb; /* texto claro */
    border-bottom: 1px solid rgba(255,255,255,.12);
}

    /* Asegura que todos los th hereden el color */
    .grid-dark thead th {
        color: inherit;
        border-color: rgba(255,255,255,.12);
        font-weight: 600;
    }





/* ================================
   HERO – variables de control
   ================================ */
:root {
    /* Watermark */
    --wmTop: 5vh;
    --wmOpacity: .12;
    /* Imagen principal (PNG) */
    --picRight: -2vw; /* empuje lateral */
    --picBottom: -2vh; /* empuje vertical */
    --picWidthMin: 760px; /* tamaño mínimo razonable en desktop */
    --picWidthPref: 82vw; /* tamaño preferido (fluido) */
    --picWidthMax: 1380px; /* LIMITE en pantallas anchas */
    --picMaxH: 78vh; /* no exceder el alto útil del hero */
    /* Copy (texto sobre la imagen) */
    --copyLeft: 6vw;
    --copyBottom: 6vh;
    --copyMax: 46rem;
    --copyMaxVW: 48vw;
}

/* Escenario del hero (sin columnas) */
.hero-stage {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: #1d2126; /* tono oscuro estable */
    color: #fff;
}

/* Watermark centrado y detrás */
.hero-watermark {
    position: absolute;
    top: var(--wmTop);
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(3.5rem, 13vw, 16rem);
    letter-spacing: .06em;
    color: rgba(255,255,255,var(--wmOpacity));
    text-shadow: 0 0 1px rgba(255,255,255,.05), 0 20px 60px rgba(0,0,0,.6);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

/* PNG grande pero CONTROLADO:
   - ancho fluido con clamp
   - tope por ancho (max) y por alto (max-height) */
.hero-pic {
    position: absolute;
    right: var(--picRight);
    bottom: var(--picBottom);
    width: clamp(var(--picWidthMin), var(--picWidthPref), var(--picWidthMax));
    max-height: var(--picMaxH);
    height: auto;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 24px 48px rgba(0,0,0,.55));
}

/* Copy sobre la imagen, abajo-izquierda */
.hero-copy {
    position: absolute;
    left: var(--copyLeft);
    bottom: var(--copyBottom);
    max-width: min(var(--copyMax), var(--copyMaxVW));
    z-index: 3;
    text-shadow: 0 2px 14px rgba(0,0,0,.45);
}

/* Animación de entrada (sin escala) */
@keyframes ekvator-slide-up {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-up {
    opacity: 0;
    animation: ekvator-slide-up 700ms ease-out 120ms forwards;
    will-change: transform, opacity;
}

/* ============ RESPONSIVE ============ */
/* Celulares */
@media (max-width: 576px) {
    :root {
        --wmTop: 3vh;
        --picRight: -10vw; /* un poco hacia afuera */
        --picBottom: -4vh;
        --picWidthMin: 320px;
        --picWidthPref: 110vw; /* llena más en ancho */
        --picWidthMax: 900px; /* límite para no romper */
        --picMaxH: 58vh; /* MENOR alto usable en móvil */
        --copyLeft: 5vw;
        --copyBottom: 4vh;
        --copyMaxVW: 92vw; /* copy más ancho si hace falta */
    }

    .hero-watermark {
        font-size: clamp(2.6rem, 18vw, 6.5rem);
    }
}

/* Tablets (≥768px y <1200px): imagen un poco menor, copy más cómodo */
@media (min-width: 768px) and (max-width: 1199.98px) {
    :root {
        --picWidthPref: 88vw;
        --picWidthMax: 1200px;
        --picMaxH: 72vh;
        --copyMaxVW: 60vw;
    }
}

/* Pantallas MUY anchas (≥1600px): evita que la imagen se dispare */
@media (min-width: 1600px) {
    :root {
        --picWidthPref: 64vw; /* reduce crecimiento con vw */
        --picWidthMax: 1280px; /* tope más bajo para ultra-wide */
        --picRight: 0vw; /* céntrala un poco más */
    }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .slide-up {
        animation: none;
        opacity: 1;
    }
}

/* ===== MODO APRETADO (reduce el espacio entre EKVATOR y la excavadora) ===== */
.hero--tight {
    /* valores por defecto del modo apretado */
    --wmTop: 8vh; /* baja el watermark (más abajo = número más grande) */
    --picBottom: 2vh; /* sube la imagen (más arriba = número más grande)  */
    --picWidthPref: 88vw; /* crece un poco más en desktop                  */
    --picWidthMax: 1500px; /* límite más alto pero controlado               */
    --picMaxH: 82vh; /* permite más altura útil                        */
}

/* Desktop ancho: aprieta aún más */
@media (min-width: 1400px) {
    .hero--tight {
        --wmTop: 10vh; /* watermark más cerca de la máquina */
        --picBottom: 4vh; /* imagen más arriba */
        --picWidthPref: 84vw;
        --picWidthMax: 1600px;
        --picMaxH: 84vh;
    }
}

/* Ultra-wide: evita separación y achique */
@media (min-width: 1800px) {
    .hero--tight {
        --wmTop: 12vh;
        --picBottom: 5vh;
        --picWidthPref: 72vw; /* reduce el crecimiento en vw para que no se achique */
        --picWidthMax: 1700px; /* deja crecer un poco más */
        --picMaxH: 86vh;
    }
}

/* 🔧 Hotfix SOLO móvil: acerca “EKVATOR” a la imagen y evita huecos */
@media (max-width: 576px) {
    .hero-stage {
        --wmTop: 5vh; /* baja un poco el watermark */
        --picBottom: 2vh; /* sube la imagen (más grande = más arriba) */
        --picRight: -6vw; /* céntrala un poco más */
        --picWidthMin: 360px;
        --picWidthPref: 118vw; /* que llene más el ancho */
        --picWidthMax: 980px; /* límite superior razonable */
        --picMaxH: 64vh; /* no más alta que esto */
        --copyLeft: 5vw;
        --copyBottom: 3vh; /* deja el copy bien abajo */
        --copyMaxVW: 94vw;
    }
}

/* 🔧 Hotfix tablets angostas: reduce separación y hace la imagen protagonista */
@media (min-width: 577px) and (max-width: 991.98px) {
    .hero-stage {
        --wmTop: 7vh;
        --picBottom: 3vh;
        --picRight: -4vw;
        --picWidthPref: 92vw;
        --picWidthMax: 1200px;
        --picMaxH: 72vh;
        --copyLeft: 6vw;
        --copyBottom: 5vh;
        --copyMaxVW: 80vw;
    }
}


img {
    pointer-events: auto !important;
    cursor: pointer;
}



/* Solo a los <a> con data-hover="amarillo" */
a[data-hover="vcboton"]:hover {
    background-color: #6c757d;
    border-color: #ffffff;
    color: #212529 !important;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* Click (solo mientras se presiona) */
a[data-hover="vcboton"]:active {
    background-color: #000 !important;
    border-color: #ffffff !important;
    color: #fff !important; /* por si hay texto/ícono */
}




/* Quita el padding lateral del área de contenido */
.content, .top-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Unifica el color de fondo del canvas principal */
main, .page, .content, body {
    background-color: #f8f9fa;
}
/* splash */

/*#app:empty::after {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff center/70% no-repeat url("images/logo.svg");
    box-shadow: 0 3px 10px rgba(0,0,0,.25);
    animation: breathe 1.4s ease-in-out infinite;
}
*/

.text-bg-vcdanger {
    background-color: #ff5100;
}