/* ============================================================
   GeoCoding GPS — Tema "Corporativo pulido"
   Cargar SIEMPRE después de css/style.css (Inspinia).
   Este archivo no debe eliminarse para revertir: basta con
   quitar el <link> de custom.css en index.php / login.php.
   Cache-busting: incrementar ?v= del <link> al editar aquí.
   ============================================================ */

:root {
    /* Marca */
    --gc-primario:        #2f6df6;
    --gc-primario-oscuro: #1f56d6;
    --gc-primario-suave:  rgba(47, 109, 246, 0.12);

    /* Sidebar */
    --gc-sidebar-bg:      #1f2c47;
    --gc-sidebar-bg-2:    #182238;
    --gc-sidebar-texto:   #9fb0cd;
    --gc-sidebar-hover:   #2a3a58;

    /* Neutros */
    --gc-fondo:           #f5f7fa;
    --gc-borde:           #e5eaf1;
    --gc-texto:           #1f2937;
    --gc-texto-suave:     #6b7688;
    --gc-card:            #ffffff;

    /* Estados operativos */
    --gc-marcha:          #1ab394;
    --gc-marcha-fondo:    #e8f7f1;
    --gc-parada:          #e8554f;
    --gc-parada-fondo:    #fdeeec;
    --gc-ralenti:         #f0a326;
    --gc-ralenti-fondo:   #fdf5e7;

    /* Forma */
    --gc-radio:           8px;
    --gc-sombra-card:     0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .06);
    --gc-sombra-flotante: 0 10px 24px rgba(16, 24, 40, .14);
}

/* ------------------------------------------------------------
   1. Base y tipografía
   ------------------------------------------------------------ */
body {
    font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
    color: var(--gc-texto);
    background-color: var(--gc-fondo);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--gc-texto);
}

a { transition: color .15s ease; }

:focus-visible {
    outline: 2px solid var(--gc-primario);
    outline-offset: 1px;
}

/* Números tabulares en tablas y métricas: columnas numéricas alineadas */
.table td,
.widget.style1 h2 {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   2. Login (body.gc-login)
   ------------------------------------------------------------ */
body.gc-login {
    /* fondo.png/fondo.jpg son LOGOS cuadrados: no usarlos como cover de pantalla */
    background: radial-gradient(1200px 800px at 50% -10%, #2a3a58 0%, #16203a 45%, #0e1730 100%) fixed;
    min-height: 100vh;
}

/* Inspinia fija .loginscreen.middle-box a 300px: lo ampliamos para la tarjeta */
body.gc-login .middle-box.loginscreen {
    width: auto;
    max-width: 460px;
}

.gc-login-card {
    background: rgba(255, 255, 255, .97);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(2, 6, 23, .5);
    padding: 38px 36px 28px;
    max-width: 420px;
    margin: 0 auto;
}

/* Logo real de la app, contenido y a tamaño razonable */
.gc-login-brand {
    display: block;
    max-height: 96px;
    max-width: 220px;
    margin: 0 auto 14px;
    object-fit: contain;
    border-radius: 10px;
}

/* Especificidad > .middle-box h1 (logo gigante de 170px de Inspinia) */
.gc-login-card h1.gc-login-title {
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: .5px;
    text-align: center;
    color: var(--gc-texto);
    margin: 6px 0 2px;
}

.gc-login-sub {
    color: var(--gc-texto-suave);
    font-size: 13px;
    margin-bottom: 18px;
}

.gc-login .form-control {
    height: 42px;
    border-radius: var(--gc-radio);
    border: 1px solid var(--gc-borde);
    box-shadow: none;
}

.gc-login .form-control:focus {
    border-color: var(--gc-primario);
    box-shadow: 0 0 0 3px var(--gc-primario-suave);
}

.gc-login .btn-primary {
    height: 42px;
    font-size: 15px;
}

.gc-login small a {
    color: var(--gc-texto-suave);
}

/* ------------------------------------------------------------
   3. Sidebar / menú lateral
   ------------------------------------------------------------ */
#wrapper .navbar-default.navbar-static-side {
    background: linear-gradient(180deg, var(--gc-sidebar-bg), var(--gc-sidebar-bg-2));
}

.navbar-default .nav > li > a {
    color: var(--gc-sidebar-texto);
    padding: 13px 20px 13px 24px;
    transition: background-color .15s ease, color .15s ease;
}

.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus {
    background-color: var(--gc-sidebar-hover);
    color: #ffffff;
}

.nav > li.active {
    background: transparent;
    border-left: none;
}

.nav > li.active > a {
    color: #ffffff;
    background: var(--gc-primario-suave);
    box-shadow: inset 3px 0 0 var(--gc-primario);
}

/* Submenús de segundo y tercer nivel */
.nav-second-level li a,
.nav-third-level li a {
    padding: 8px 10px 8px 42px;
    color: var(--gc-sidebar-texto);
    font-size: 13px;
}

.nav-third-level li a {
    padding-left: 56px;
}

.nav-second-level li a:hover,
.nav-third-level li a:hover {
    background-color: var(--gc-sidebar-hover);
    color: #fff;
}

/* Cabecera del menú (logo + usuario) */
.nav-header {
    padding: 22px 18px;
    background: transparent;
}

.profile-element .font-bold {
    color: #eef2f9;
    font-size: 14px;
}

.logo-element {
    border-bottom: none;
}

/* ------------------------------------------------------------
   4. Topbar
   ------------------------------------------------------------ */
#wrapper .row.border-bottom {
    background: #ffffff;
    border-bottom: 1px solid var(--gc-borde);
    box-shadow: 0 1px 4px rgba(16, 24, 40, .06);
}

.navbar-static-top {
    margin-bottom: 0;
}

.navbar-top-links > li > span {
    display: inline-block;
    padding: 15px 8px;
    color: var(--gc-texto-suave);
    font-size: 13px;
}

#selectorganismos {
    border: 1px solid var(--gc-borde);
    border-radius: 6px;
    background: #fff;
    padding: 4px 8px;
    font-size: 13px;
    color: var(--gc-texto);
    margin-top: 8px;
}

.count-info {
    border-radius: 6px;
    transition: background-color .15s ease;
}

.count-info:hover {
    background: #f0f4fa;
}

.navbar-top-links li .label-danger {
    background-color: var(--gc-parada);
}

.minimalize-styl-2 {
    border-radius: 6px;
}

/* ------------------------------------------------------------
   5. Contenido: wrapper, tarjetas ibox, footer
   ------------------------------------------------------------ */
#page-wrapper.gray-bg {
    background-color: var(--gc-fondo);
}

.wrapper-content {
    padding: 20px 24px 10px;
}

#wrapper .ibox {
    border-radius: 10px;
    border: 1px solid var(--gc-borde);
    box-shadow: var(--gc-sombra-card);
    overflow: hidden;
}

#wrapper .ibox-title {
    border-bottom: 1px solid var(--gc-borde);
    background: #fff;
}

#wrapper .ibox-title h5 {
    font-weight: 600;
    color: var(--gc-texto);
}

#wrapper .ibox-content {
    background: var(--gc-card);
}

.footer {
    background: transparent;
    border-top: 1px solid var(--gc-borde);
    color: var(--gc-texto-suave);
    font-size: 12px;
}

.footer a {
    color: var(--gc-texto-suave);
}

.footer a:hover {
    color: var(--gc-primario);
}

/* ------------------------------------------------------------
   6. Widgets (centro de estadísticas y tarjetas KPI)
   ------------------------------------------------------------ */
.widget.style1 {
    border-radius: 10px;
    box-shadow: var(--gc-sombra-card);
    transition: transform .15s ease, box-shadow .15s ease;
}

.widget.style1:hover {
    transform: translateY(-2px);
    box-shadow: var(--gc-sombra-flotante);
}

.widget.style1 h2 {
    font-weight: 700;
}

/* Degradados suaves sobre los colores planos de Inspinia */
.navy-bg    { background-image: linear-gradient(135deg, #1f2c47, #35507c); }
.lazur-bg   { background-image: linear-gradient(135deg, #17a2b8, #2f6df6); }
.blue-bg    { background-image: linear-gradient(135deg, #1c84c6, #2f6df6); }
.yellow-bg  { background-image: linear-gradient(135deg, #f0a326, #f7c85c); }
.red-bg     { background-image: linear-gradient(135deg, #e8554f, #f2877f); }
.green-bg   { background-image: linear-gradient(135deg, #1ab394, #43d6b2); }
.aqua-bg    { background-image: linear-gradient(135deg, #23c6c8, #4fd8da); }
.purple-bg  { background-image: linear-gradient(135deg, #676a8c, #8d90b5); }

.panel-title.navy-bg {
    border-radius: var(--gc-radio);
    padding: 12px 16px;
}

/* ------------------------------------------------------------
   7. Tablas (DataTables del shell)
   ------------------------------------------------------------ */
#wrapper .table > thead > tr > th {
    background: #f8fafc;
    color: #55617a;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 2px solid var(--gc-borde) !important;
}

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #fafbfd;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background-color: #f0f5fd;
}

/* Fila seleccionada (clic en vehículo/informe) */
.dataTables-example tbody tr.selected > td,
.dataTables-informe tbody tr.selected > td,
#tablavehiculos tbody tr.selected > td {
    background-color: #e6eefe !important;
    color: var(--gc-texto);
}

/* Controles de DataTables */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--gc-borde);
    border-radius: 6px;
    padding: 4px 10px;
    outline: none;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--gc-primario);
    box-shadow: 0 0 0 3px var(--gc-primario-suave);
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--gc-borde);
    border-radius: 6px;
    padding: 2px 6px;
}

.dataTables_wrapper .dataTables_info {
    color: var(--gc-texto-suave);
    font-size: 12px;
}

/* Paginación */
.pagination > li > a,
.pagination > li > span {
    color: var(--gc-primario);
    border-color: var(--gc-borde);
}

.pagination > li > a:hover,
.pagination > li > span:hover {
    background: #f0f5fd;
    border-color: var(--gc-primario);
}

.pagination > .active > a,
.pagination > .active > span {
    background-color: var(--gc-primario);
    border-color: var(--gc-primario);
}

/* Scroll horizontal en pantallas estrechas (tablas anchas del shell) */
.ibox-content > .table-responsive,
#wrapper .dataTables_wrapper {
    border-radius: var(--gc-radio);
}

/* ------------------------------------------------------------
   8. Botones
   ------------------------------------------------------------ */
#wrapper .btn,
body.gc-login .btn {
    border-radius: 6px;
    font-weight: 600;
    transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

#wrapper .btn:active,
body.gc-login .btn:active {
    transform: translateY(1px);
}

#wrapper .btn-primary,
body.gc-login .btn-primary {
    background-color: var(--gc-primario);
    border-color: var(--gc-primario);
}

#wrapper .btn-primary:hover,
#wrapper .btn-primary:focus,
body.gc-login .btn-primary:hover,
body.gc-login .btn-primary:focus {
    background-color: var(--gc-primario-oscuro);
    border-color: var(--gc-primario-oscuro);
}

#wrapper .btn-success {
    background-color: var(--gc-marcha);
    border-color: var(--gc-marcha);
}

#wrapper .btn-success:hover,
#wrapper .btn-success:focus {
    background-color: #15967e;
    border-color: #15967e;
}

/* Barra de botones de informes: ancho uniforme sin recurrir a &nbsp; */
.gc-botones-informes .btn {
    min-width: 112px;
}

/* ------------------------------------------------------------
   9. Utilidades y estados operativos
   ------------------------------------------------------------ */
/* Icono de calendario (sustituye a calendar.gif) */
.gc-cal {
    font-size: 18px;
    color: var(--gc-primario);
    cursor: pointer;
    transition: color .15s ease;
}

.gc-cal:hover {
    color: var(--gc-primario-oscuro);
}

/* Estados semánticos (filas/celdas de informes y del shell) */
.gc-marcha  { background-color: var(--gc-marcha-fondo)  !important; color: #10745e !important; }
.gc-parada  { background-color: var(--gc-parada-fondo)  !important; color: #a3312c !important; }
.gc-ralenti { background-color: var(--gc-ralenti-fondo) !important; color: #9a6412 !important; }

/* Etiquetas (label) con radios más suave */
#wrapper .label {
    border-radius: 5px;
    font-weight: 600;
}

/* toastr: sombra coherente con el tema */
#toast-container > div {
    box-shadow: var(--gc-sombra-flotante);
    border-radius: 8px;
}