/* ============================================================
   GAD Municipal Joya de los Sachas — Sistema DINAHWEB
   Archivo CSS principal — No agregar estilos en las vistas
   ============================================================ */

/* ── Variables globales ─────────────────────────────────────── */
:root {
    --color-primario:        #266638;
    --color-primario-dark:   #1a4a27;
    --color-primario-light:  #2f7d42;
    --color-secundario:      #8f8f8f;
    --color-neutro:          #dbdddf;
    --color-neutro-dark:     #c4c7ca;
    --color-blanco:          #ffffff;
    --color-texto:           #2d2d2d;
    --color-texto-suave:     #6c757d;
    --color-peligro:         #dc3545;
    --color-exito:           #198754;
    --color-advertencia:     #ffc107;
    --color-info:            #0dcaf0;

    --sidebar-width:         260px;
    --navbar-height:         60px;
    --transition:            0.3s ease;
    --sombra:                0 2px 8px rgba(0, 0, 0, 0.10);
    --radio-borde:           8px;
    --fuente-principal:      'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ── Reset y base ───────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family:      var(--fuente-principal);
    background-color: var(--color-neutro);
    color:            var(--color-texto);
    font-size:        0.925rem;
    min-height:       100vh;
}

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar-principal {
    background-color: var(--color-primario);
    height:           var(--navbar-height);
    position:         fixed;
    top:              0;
    left:             0;
    right:            0;
    z-index:          1030;
    box-shadow:       var(--sombra);
    display:          flex;
    align-items:      center;
    padding:          0 1.5rem;
}

.navbar-principal .navbar-brand img {
    height: 38px;
    object-fit: contain;
}

.navbar-principal .navbar-brand span {
    color:       var(--color-blanco);
    font-weight: 600;
    font-size:   1rem;
    margin-left: 0.5rem;
}

.navbar-principal .nav-link,
.navbar-principal .navbar-text {
    color:   var(--color-blanco) !important;
    opacity: 0.9;
}

.navbar-principal .nav-link:hover {
    opacity: 1;
}

.navbar-principal .btn-logout {
    background-color: var(--color-primario-dark);
    color:            var(--color-blanco);
    border:           none;
    border-radius:    var(--radio-borde);
    padding:          0.35rem 1rem;
    font-size:        0.875rem;
    transition:       var(--transition);
}

.navbar-principal .btn-logout:hover {
    background-color: var(--color-peligro);
}
/* ── Fix dropdown dentro del navbar fijo ────────────────────── */
.navbar-principal .dropdown-menu {
    z-index: 1040;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
    background-color: var(--color-primario-dark);
    width:            var(--sidebar-width);
    position:         fixed;
    top:              var(--navbar-height);
    left:             0;
    bottom:           0;
    z-index:          1020;
    overflow-y:       auto;
    transition:       var(--transition);
    box-shadow:       var(--sombra);
}

.sidebar .nav-section-title {
    color:          var(--color-neutro);
    font-size:      0.7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding:        1rem 1.25rem 0.4rem;
    opacity:        0.6;
}

.sidebar .nav-link {
    color:         var(--color-neutro);
    padding:       0.6rem 1.25rem;
    border-radius: var(--radio-borde);
    margin:        0.15rem 0.5rem;
    display:       flex;
    align-items:   center;
    gap:           0.6rem;
    font-size:     0.9rem;
    transition:    var(--transition);
    opacity:       0.85;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background-color: var(--color-primario-light);
    color:            var(--color-blanco);
    opacity:          1;
}

.sidebar .nav-link i {
    width:     20px;
    font-size: 1rem;
}

/* ── Contenido principal ─────────────────────────────────────── */
.main-content {
    margin-left:  var(--sidebar-width);
    margin-top:   var(--navbar-height);
    padding:      1.75rem;
    min-height:   calc(100vh - var(--navbar-height));
}

/* ── Cards ───────────────────────────────────────────────────── */
.card {
    border:        none;
    border-radius: var(--radio-borde);
    box-shadow:    var(--sombra);
}

.card-header {
    background-color: var(--color-blanco);
    border-bottom:    2px solid var(--color-neutro);
    font-weight:      600;
    padding:          1rem 1.25rem;
}

.card-stat {
    border-left:  4px solid var(--color-primario);
    border-radius: var(--radio-borde);
    background:   var(--color-blanco);
    padding:      1.25rem;
    box-shadow:   var(--sombra);
    transition:   var(--transition);
}

.card-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.card-stat .stat-valor {
    font-size:   2rem;
    font-weight: 700;
    color:       var(--color-primario);
    line-height: 1;
}

.card-stat .stat-label {
    font-size: 0.8rem;
    color:     var(--color-texto-suave);
    margin-top: 0.25rem;
}

.card-stat .stat-icono {
    font-size: 2rem;
    color:     var(--color-neutro-dark);
}

/* ── Botones ─────────────────────────────────────────────────── */
.btn-primario {
    background-color: var(--color-primario);
    color:            var(--color-blanco);
    border:           none;
    border-radius:    var(--radio-borde);
    padding:          0.5rem 1.25rem;
    transition:       var(--transition);
}

.btn-primario:hover {
    background-color: var(--color-primario-dark);
    color:            var(--color-blanco);
}

/* ── Tablas ──────────────────────────────────────────────────── */
.table-container {
    background:    var(--color-blanco);
    border-radius: var(--radio-borde);
    box-shadow:    var(--sombra);
    overflow:      hidden;
}

.table thead th {
    background-color: var(--color-primario);
    color:            var(--color-blanco);
    font-weight:      600;
    font-size:        0.85rem;
    border:           none;
    padding:          0.85rem 1rem;
}

.table tbody tr:hover {
    background-color: rgba(38, 102, 56, 0.05);
}

.table tbody td {
    vertical-align: middle;
    font-size:      0.9rem;
    border-color:   var(--color-neutro);
}

/* ── Badges de estado ────────────────────────────────────────── */
.badge-activo {
    background-color: rgba(25, 135, 84, 0.15);
    color:            var(--color-exito);
    font-weight:      600;
    padding:          0.35rem 0.75rem;
    border-radius:    20px;
    font-size:        0.78rem;
}

.badge-inactivo {
    background-color: rgba(220, 53, 69, 0.12);
    color:            var(--color-peligro);
    font-weight:      600;
    padding:          0.35rem 0.75rem;
    border-radius:    20px;
    font-size:        0.78rem;
}

/* ── Alertas flash ───────────────────────────────────────────── */
.alert {
    border:        none;
    border-radius: var(--radio-borde);
    font-size:     0.9rem;
}

/* ── Login ───────────────────────────────────────────────────── */
.login-wrapper {
    min-height:      100vh;
    background:      linear-gradient(135deg, var(--color-primario-dark) 0%, var(--color-primario) 100%);
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.login-card {
    background:    var(--color-blanco);
    border-radius: 12px;
    box-shadow:    0 8px 32px rgba(0, 0, 0, 0.18);
    padding:       2.5rem;
    width:         100%;
    max-width:     420px;
}

.login-card .logo-login {
    width:      180px;
    margin:     0 auto 1.5rem;
    display:    block;
}

.login-card .titulo-login {
    color:       var(--color-primario);
    font-weight: 700;
    font-size:   1.3rem;
    text-align:  center;
    margin-bottom: 0.25rem;
}

.login-card .subtitulo-login {
    color:       var(--color-texto-suave);
    font-size:   0.85rem;
    text-align:  center;
    margin-bottom: 1.75rem;
}

.login-card .form-control {
    border-radius: var(--radio-borde);
    border:        1px solid var(--color-neutro-dark);
    padding:       0.65rem 1rem;
    font-size:     0.9rem;
    transition:    var(--transition);
}

.login-card .form-control:focus {
    border-color: var(--color-primario);
    box-shadow:   0 0 0 3px rgba(38, 102, 56, 0.15);
}

.login-card .btn-login {
    background-color: var(--color-primario);
    color:            var(--color-blanco);
    border:           none;
    border-radius:    var(--radio-borde);
    padding:          0.7rem;
    font-size:        1rem;
    font-weight:      600;
    width:            100%;
    transition:       var(--transition);
}

.login-card .btn-login:hover {
    background-color: var(--color-primario-dark);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sidebar {
        left:      calc(-1 * var(--sidebar-width));
        z-index:   1025;
    }

    .sidebar.show {
        left: 0;
    }

    .main-content {
        margin-left: 0;
    }
}

.stat-sub {
    font-size: 0.75rem;
    color: var(--color-texto-suave);
    margin-top: 2px;
}

/* ── Tooltips ApexCharts legibles ──────────────────────── */
.apexcharts-tooltip {
    background: #1A4A28 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}
.apexcharts-tooltip-title {
    background: #266638 !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    font-weight: 600 !important;
}
.apexcharts-tooltip-series-group,
.apexcharts-tooltip-text-y-label,
.apexcharts-tooltip-text-y-value {
    color: #ffffff !important;
    background: transparent !important;
}