:root {
  --app-primario: #0b5c6b;
  --app-primario-oscuro: #08434e;
  --app-fondo: #f3f5f7;
}

body {
  background: var(--app-fondo);
  min-height: 100vh;
}

.app-navbar {
  background: var(--app-primario);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.app-navbar .nav-link.active { font-weight: 600; }

.btn-primary {
  --bs-btn-bg: var(--app-primario);
  --bs-btn-border-color: var(--app-primario);
  --bs-btn-hover-bg: var(--app-primario-oscuro);
  --bs-btn-hover-border-color: var(--app-primario-oscuro);
  --bs-btn-active-bg: var(--app-primario-oscuro);
}

.card { border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.page-header h1 { font-size: 1.4rem; margin: 0; }

.table > :not(caption) > * > * { vertical-align: middle; }

.swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  vertical-align: -2px;
  margin-right: 6px;
}

/* Login */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--app-primario) 0%, #12808f 100%);
  padding: 16px;
}
.login-card { width: 100%; max-width: 380px; }
.login-card .marca { color: var(--app-primario); font-size: 2.4rem; }

/* Tarjetas de módulos en inicio */
.modulo-card { transition: transform .1s ease; }
.modulo-card:hover { transform: translateY(-2px); }
.modulo-card.proximo { opacity: .6; }
.modulo-card .icono { font-size: 1.8rem; color: var(--app-primario); }

.btn-outline-primary {
  --bs-btn-color: var(--app-primario);
  --bs-btn-border-color: var(--app-primario);
  --bs-btn-hover-bg: var(--app-primario);
  --bs-btn-hover-border-color: var(--app-primario);
  --bs-btn-active-bg: var(--app-primario-oscuro);
}

/* =========================== Carga =========================== */
kbd {
  font-size: .75em;
  font-family: var(--bs-font-sans-serif);
  padding: .05rem .3rem;
  background: rgba(0, 0, 0, .55);
  vertical-align: 1px;
}
.btn kbd { background: rgba(0, 0, 0, .12); color: inherit; }
.btn-primary kbd { background: rgba(255, 255, 255, .2); }

.carga .reclamo { transition: box-shadow .15s ease; }
.carga .reclamo.activo { box-shadow: 0 0 0 2px var(--app-primario), 0 1px 3px rgba(0, 0, 0, .08); }
.carga .reclamo.es-apoyo { box-shadow: 0 0 0 2px #0dcaf0; }
.carga .reclamo .numero { background: var(--app-primario); }

.btn-area {
  --area-color: #6c757d;
  border: 1px solid var(--area-color);
  color: #212529;
  background: #fff;
  border-left-width: 5px;
  padding: .2rem .5rem;
  font-size: .8rem;
}
.btn-area:hover { background: color-mix(in srgb, var(--area-color) 12%, #fff); }
.btn-area.activa {
  background: var(--area-color);
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
.btn-area.activa.claro { color: #212529; text-shadow: none; }
.btn-area:focus-visible { outline: 2px solid var(--app-primario); outline-offset: 1px; }
.btn-dudoso { --area-color: #b58105; }

.chip-cuadra, .chip-obra {
  display: inline-block;
  border-radius: 999px;
  padding: 0 .5rem;
  font-weight: 500;
}
.cuadra-tierra { background: #f3e3d6; color: #6b3416; }
.cuadra-asfalto { background: #e7eaee; color: #39424c; }
.cuadra-mixto { background: #fff3cd; color: #664d03; }
.chip-obra { background: #e8f1ff; color: #0a3d8f; }
.ubicacion .sep { color: #adb5bd; }

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.autocompletar { z-index: 1050; max-height: 260px; overflow-y: auto; top: 100%; }

.mapa-carga { height: 58vh; min-height: 340px; border-radius: .375rem; background: #e9ecef; }
@media (min-width: 992px) {
  .mapa-sticky { position: sticky; top: 1rem; }
}
.barra-guardar { position: sticky; bottom: .75rem; z-index: 10; box-shadow: 0 -2px 10px rgba(0, 0, 0, .08); }

.leyenda .linea { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin: 0 4px 2px 10px; vertical-align: middle; }
.leyenda .linea.fina { height: 2px; }

/* =========================== Gestión =========================== */
.fila-link { cursor: pointer; }
.tabla-reclamos .celda-texto { max-width: 360px; }
.texto-mensaje { white-space: normal; background: #f8f9fa; border-radius: .375rem; padding: .5rem .75rem; font-size: .925rem; }
.mapa-ficha { height: 240px; border-radius: .375rem; }
.mapa-editar { height: 460px; border-radius: .375rem; }
.datos dt { font-weight: 500; color: #6c757d; }
.datos dd { margin-bottom: .35rem; }
.timeline .list-group-item { border-left: 0; border-right: 0; }
.tarjeta-clasificar .btn-area { font-size: .78rem; }
.acciones-bandeja form { margin: 0; }
details > summary { cursor: pointer; }