/* =========================
   BASE (template ASP.NET)
   ========================= */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    background: #f6f7fb; /* fondo suave */
}

/* =========================
   TEMPLATE STYLES (original)
   ========================= */
a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Links generales de la página */
a {
    color: #0077cc;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
}

/* =========================
   LAYOUT
   ========================= */
main {
    background: transparent;
}

/* =========================
   NAVBAR
   ========================= */
.navbar-brand {
    letter-spacing: .2px;
    font-weight: 600;
}

/* Navbar links (gris -> oscuro en hover) */
.navbar-light .navbar-nav .nav-link {
    color: rgba(0, 0, 0, 0.6) !important;
    transition: color 0.15s ease-in-out;
}

    .navbar-light .navbar-nav .nav-link:hover,
    .navbar-light .navbar-nav .nav-link:focus {
        color: rgba(0, 0, 0, 0.9) !important;
    }

    .navbar-light .navbar-nav .nav-link.active {
        color: rgba(0, 0, 0, 1) !important;
        font-weight: 600;
    }

/* OJO: el navbar tiene links <a>, esto evita que el a {color:...} los pinte azul */
.navbar a {
    text-decoration: none;
}

/* =========================
   COMPONENTES UI (modernos)
   ========================= */
.dropdown-menu {
    border-radius: 12px;
}

.card {
    border-radius: 16px;
}

.btn {
    border-radius: 12px;
}

.table {
    border-radius: 12px;
    overflow: hidden;
}

/* =========================
   UTILIDADES
   ========================= */
.box-shadow {
    box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
}

.navbar-light .navbar-nav .nav-link.active {
    position: relative;
}

    .navbar-light .navbar-nav .nav-link.active::after {
        content: "";
        position: absolute;
        left: 0.5rem;
        right: 0.5rem;
        bottom: 0.25rem;
        height: 2px;
        background: rgba(0,0,0,.25);
        border-radius: 2px;
    }

/* =========================
   IoT Boards Status page
   ========================= */

.custom-accordion {
    border: 1px solid rgba(95, 158, 160, .35);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}

.custom-header {
    background-color: cadetblue;
    color: white !important;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .custom-header:hover {
        background-color: #4682B4;
    }

.accordion-button:not(.collapsed) {
    background-color: cadetblue !important;
    color: white !important;
}

/* puntitos de estado */
.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.status-ok {
    background-color: #22c55e;
}
/* verde suave */
.status-bad {
    background-color: #ef4444;
}
/* rojo suave */
.status-warn {
    background-color: #f59e0b;
}
/* amarillo */
.status-new {
    background-color: #3b82f6;
}
/* azul */

/* filas nuevas instalación */
.row-newinstall {
    background: rgba(59, 130, 246, 0.05);
}

code {
    color: #111;
    font-size: 0.95em;
}

.project-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-count {
    min-width: 70px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ===== Dots / Circles (Status) ===== */
.circle,
.status-circle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 14px; /* evita que flex lo aplaste */
}

/* Colores */
.green {
    background-color: #22c55e;
}
/* verde */
.red {
    background-color: #ef4444;
}
/* rojo */
.yellow {
    background-color: #f59e0b;
}
/* amarillo */
.blue {
    background-color: #3b82f6;
}
/* azul */

.table tbody tr:hover {
    background-color: rgba(0,0,0,.03);
}

.btn-open {
    font-weight: 500;
    border-color: rgba(37, 99, 235, .35);
}

    .btn-open:hover {
        border-color: rgba(37, 99, 235, 1);
    }

/* ===== Obra header (accordion) más limpio ===== */
.project-item {
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 12px;
}

.project-header {
    background: #ffffff !important;
    color: #111 !important;
    font-weight: 700;
    padding-top: 14px;
    padding-bottom: 14px;
    transition: background-color .15s ease, color .15s ease;
}

    /* quita el “verde”/cadetblue del template */
    .project-header:not(.collapsed) {
        background: #ffffff !important;
        color: #111 !important;
    }

    .project-header:hover {
        background: rgba(37,99,235,.06) !important; /* azul suave */
    }

    /* mantiene el chevron visible */
    .project-header::after {
        filter: none;
    }

/* badge de 5/5 más discreto */
.project-count {
    background: rgba(0,0,0,.06) !important;
    border: 1px solid rgba(0,0,0,.08);
}

/* dot un poquito más “premium” */
.status-circle {
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.75);
}

/* IoT Boards Info - Nota con ellipsis */
.note-cell {
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .note-cell:hover {
        white-space: normal;
    }

/* ===== IoT Boards Info header limpio ===== */
.project-info-header {
    background: #fff;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.project-item {
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;
    overflow: hidden;
}

/* Nota con ellipsis */
.note-cell {
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .note-cell:hover {
        white-space: normal;
    }

.table tbody tr:hover {
    background-color: rgba(0,0,0,.03);
}