:root{
  --azul:#17519B;
  --azul-oscuro:#0f3f7d;
  --azul-suave:#e9f1fb;
  --fondo:#f4f7fb;
  --panel:#ffffff;
  --texto:#263238;
  --muted:#6c757d;
  --borde:#d9e2ef;
  --borde-suave:#e7eef8;
  --sombra:0 8px 24px rgba(20,40,70,.07);
  --sombra-suave:0 4px 14px rgba(20,40,70,.05);
  --radio:12px;
  --radio-sm:8px;
}

*{box-sizing:border-box}
body{
  background:var(--fondo);
  color:var(--texto);
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:14px;
  line-height:1.45;
}
a{color:var(--azul)}

.sidebar{
  width:260px;
  height:100vh;
  overflow-y:auto;
  background:linear-gradient(180deg,#17519B,#0b376c);
  color:#fff;
  position:fixed;
  left:0;
  top:0;
  z-index:1030;
}
.brand{
  padding:22px;
  font-weight:400;
  font-size:18px;
  letter-spacing:0;
}
.menu a{
  display:flex;
  gap:10px;
  align-items:center;
  color:#eaf3ff;
  text-decoration:none;
  padding:11px 22px;
  border-left:4px solid transparent;
}
.menu a i{width:18px;text-align:center}
.menu a:hover,.menu a.active{
  background:rgba(255,255,255,.12);
  border-left-color:#fff;
  color:#fff;
}
.menu-group-toggle{
  width:100%;
  border:0;
  background:transparent;
  color:#dcecff;
  padding:12px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:400;
  text-align:left;
}
.menu-group-toggle span{display:flex;align-items:center;gap:10px}
.menu-group-toggle span i{width:18px;text-align:center}
.menu-group-toggle:hover,.menu-group.open .menu-group-toggle{background:rgba(255,255,255,.1);color:#fff}
.menu-group-toggle .chevron{font-size:12px;transition:transform .2s ease}
.menu-group.open .chevron{transform:rotate(180deg)}
.menu-submenu{display:none;background:rgba(0,0,0,.1)}
.menu-group.open .menu-submenu{display:block}
.menu-submenu a{padding-left:34px;font-size:13px}

.content{
  margin-left:260px;
  padding:20px;
  min-height:100vh;
}
.topbar{
  background:var(--panel);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:12px 16px;
  margin-bottom:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  box-shadow:var(--sombra-suave);
}

/* Estructura comun para pantallas existentes */
.contenedor,
.nc-wrap,
.rimpe-wrap,
.page-wrap{
  max-width:1400px !important;
  margin:0 auto !important;
  background:var(--panel) !important;
  border:1px solid var(--borde) !important;
  border-radius:var(--radio) !important;
  padding:22px !important;
  box-shadow:var(--sombra) !important;
}
.contenedor + .contenedor{margin-top:16px !important}

.card-soft,
.rimpe-card,
.validation-panel,
.panel-soft{
  background:var(--panel) !important;
  border:1px solid var(--borde) !important;
  border-radius:var(--radio) !important;
  box-shadow:var(--sombra-suave) !important;
}
.card-soft,.rimpe-card,.validation-panel{padding:16px}
.stat,
.validation-stat,
.card-resumen{
  background:#f8fbff !important;
  border:1px solid #d7e3f4 !important;
  border-radius:var(--radio-sm) !important;
  padding:14px !important;
  height:100%;
}
.stat .num,
.stat h4,
.validation-stat h4,
.card-resumen h5{
  color:var(--azul) !important;
  font-weight:400 !important;
  margin:2px 0 0 !important;
}
.stat small,
.validation-stat small,
.card-resumen small{
  color:var(--muted);
  font-weight:400;
}

.titulo,
.page-title,
.validation-title,
.nc-title,
.rimpe-title,
h4.fw-bold{
  color:var(--azul) !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}
.subtitulo{color:var(--muted)}

.filtro-box,
.filter-box{
  background:#f8fbff !important;
  border:1px solid #d7e3f4 !important;
  border-radius:var(--radio) !important;
  padding:16px !important;
  margin-bottom:16px !important;
}

.btn-primary,
.btn-principal,
.btn-main{
  background:var(--azul) !important;
  border-color:var(--azul) !important;
  color:#fff !important;
  border-radius:10px !important;
  font-weight:400 !important;
}
.btn-primary:hover,
.btn-principal:hover,
.btn-main:hover{
  background:var(--azul-oscuro) !important;
  border-color:var(--azul-oscuro) !important;
  color:#fff !important;
}
.btn-outline-primary{
  color:var(--azul) !important;
  border-color:var(--azul) !important;
}
.btn-outline-primary:hover{
  background:var(--azul) !important;
  color:#fff !important;
}

.form-control,
.form-select{
  border-radius:10px !important;
  border-color:#ced8e5;
}
.form-control:focus,
.form-select:focus{
  border-color:#8eb6e8;
  box-shadow:0 0 0 .2rem rgba(23,81,155,.13);
}
.form-label{color:#263238}

.table-responsive,
.table-scroll,
.validation-scroll{
  border-radius:var(--radio-sm);
}
.table-scroll,
.validation-scroll{
  max-height:62vh;
  overflow:auto;
  border:1px solid var(--borde);
}
.table{
  margin-bottom:0;
}
.table thead,
.table thead th,
.tabla-moderna th,
.tabla-resumen th,
.rimpe-table th{
  background:var(--azul-suave) !important;
  color:var(--azul) !important;
  font-weight:400 !important;
  border-color:#dbe7f5 !important;
}
table thead th{
  text-align:center !important;
}
.table td,
.table th,
.tabla-moderna td,
.tabla-moderna th{
  vertical-align:middle !important;
}
.table-hover tbody tr:hover td,
.tabla-moderna tr:hover td{
  background:#f6faff !important;
}
.tabla-moderna,
.tabla-resumen{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.tabla-moderna td,
.tabla-moderna th,
.tabla-resumen td,
.tabla-resumen th{
  padding:10px 12px;
  border-bottom:1px solid #eef2f7;
}
.tabla-resumen td,
.tabla-resumen th{
  text-align:right;
}
.tabla-resumen td:first-child,
.tabla-resumen th:first-child{
  text-align:left;
}
.badge-soft{
  background:#edf5ff;
  color:var(--azul);
  border:1px solid #cfe2ff;
}

.modal-content{
  border:0 !important;
  border-radius:var(--radio) !important;
  overflow:hidden;
  box-shadow:0 18px 48px rgba(20,40,70,.18);
}
.modal-header-custom,
.modal-header[style*="17519B"]{
  background:var(--azul) !important;
  color:#fff !important;
}

.linea{
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px dashed #e3eaf3;
  padding:8px 0;
}
.linea:last-child{border-bottom:none}
.positivo{color:#198754}
.negativo{color:#dc3545}
.total-final{
  border-radius:var(--radio);
  padding:16px;
  font-weight:400;
  display:flex;
  justify-content:space-between;
  margin-top:12px;
}
.resultado-pagar{background:#e9f1fb;color:var(--azul)}
.resultado-credito{background:#eaf7ef;color:#198754}

.ride-box{
  max-width:850px;
  margin:auto;
  background:#fff;
  border:1px solid #bbb;
  padding:24px;
}
.ride-title{text-align:center;font-weight:400;font-size:20px}

.sidebar-mobile-toggle{
  display:none;
  position:fixed;
  left:12px;
  top:12px;
  z-index:1052;
  width:42px;
  height:42px;
  border:0;
  border-radius:8px;
  background:var(--azul);
  color:#fff;
  font-size:23px;
}
.sidebar-backdrop{display:none}

@media (max-width:992px){
  .topbar{align-items:flex-start;flex-direction:column}
  .topbar form select{min-width:100% !important}
}
@media (max-width:768px){
  .sidebar{
    display:block;
    transform:translateX(-100%);
    transition:transform .22s ease;
    z-index:1051;
  }
  .sidebar.mobile-open{transform:translateX(0)}
  .sidebar-mobile-toggle{display:grid;place-items:center}
  .sidebar-backdrop.show{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(10,25,45,.45);
    z-index:1050;
  }
  .content{margin-left:0;padding:66px 12px 12px}
  .topbar{border-radius:var(--radio-sm)}
  .contenedor,.nc-wrap,.rimpe-wrap,.page-wrap{padding:16px !important}
}

/* Tipografia regular en toda la aplicacion. */
:where(
  body, body *,
  strong, b, th, label, .form-label,
  h1, h2, h3, h4, h5, h6,
  .fw-bold, .fw-semibold, .fw-bolder, .fw-medium,
  .brand, .navbar-brand, .dropdown-header,
  .btn, .badge, .page-title, .titulo, .title,
  .section-title, .card-title, .modal-title,
  .menu-group-toggle, .total-final, .valor, .num,
  .ride-title, .strong
){
  font-weight:400 !important;
}