/* === Tema oscuro azul profesional === */
body{
  background: radial-gradient(circle at top left, #0a1931, #000814 70%);
  color:#e9f2ff;
  font-family:"Segoe UI", system-ui, sans-serif;
  font-size:18px;
  line-height:1.5;
}

/* Header */
.app-title{ font-weight:800; color:#cfe8ff; }
.back-btn{ border-color:rgba(255,255,255,.35); }

/* Card base */
.metric-card{
  background: linear-gradient(180deg, #0f1b33 0%, #0a1325 100%);
  border: 1px solid rgba(0,150,255,.3);
  border-radius: 18px;
  box-shadow: 0 0 18px rgba(0,100,255,.14), inset 0 1px 0 rgba(255,255,255,.04);
}

/* ===== Tarjeta de cliente (sin tocar tu lógica) ===== */
.cliente-card{
  position: relative;                 /* para z-index del botón */
  border-radius: 18px;
  padding: 10px;
  background:
    linear-gradient(180deg, #0f1b33 0%, #0a1325 100%) padding-box,
    linear-gradient(135deg, rgba(0,150,255,.45), rgba(0,150,255,0) 40%, rgba(100,200,255,.35)) border-box;
  border: 1px solid rgba(0,150,255,.24);
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.cliente-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,.45);
  border-color: rgba(0,180,255,.5);
}

/* Hacemos la fila principal para ordenar TODO en una línea:
   avatar | info | KPIs (derecha) | botón editar flotante */
.cliente-card .card-body{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}

/* Avatar */
.cliente-avatar{
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(122,170,255,.18), rgba(80,120,200,.14));
  display: grid; place-items: center;
  color:#beddff; font-size:1.05rem;
  box-shadow: inset 0 0 0 1px rgba(122,170,255,.22);
}

/* Bloque de texto izquierda */
.cliente-nombre{
  font-weight: 900; font-size: 1.06rem; color:#fff; line-height:1.15;
  margin: 0;
}
.cliente-celular{
  display:inline-flex; align-items:center; gap:6px;
  color:#a7c4ff; font-size:.9rem; text-decoration:none;
}
.cliente-celular:hover{ text-decoration: underline; }

/* Asegura que el bloque izquierdo no empuje los KPIs */
.stretched-link.d-flex.flex-grow-1{
  /* mantenemos tu stretched-link y tu flex-grow */
  min-width: 0;                       /* evita romper por textos largos */
}

/* ===== KPIs EN UNA SOLA LÍNEA (derecha) ===== */
.kpis{
  margin-left: auto;                  /* manda KPIs a la derecha */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;                /* prohíbe saltos de línea */
  flex: 0 0 auto;
}

.kpi{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(122,170,255,.18);
  line-height: 1;
  font-size: .82rem;                  /* compacto */
}

.kpi .ico{
  width: 18px; height: 18px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: .72rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(122,170,255,.18);
  flex-shrink: 0;
}

.kpi .label{ color:#aac4f6; font-weight:700; }
.kpi .value{ color:#fff; font-weight: 800; font-size:.9rem; }

.kpi.paid .ico{  background: rgba(40,180,120,.12);  border-color: rgba(40,180,120,.28); }
.kpi.paid .value{ color: #aef7c3; }
.kpi.debt .ico{  background: rgba(230,170,20,.12);  border-color: rgba(230,170,20,.28); }
.kpi.debt .value{ color: #ffd271; }

/* ===== Botón editar por encima del stretched-link ===== */
.btn-edit{
  position: absolute; top: 8px; right: 8px;
  border-color: rgba(255,255,255,.25);
  padding: 4px 7px;
  z-index: 5;                         /* más alto que el link estirado */
}
.btn-edit:hover{ border-color: rgba(255,255,255,.5); }

/* El stretched-link puede quedar debajo del botón sin perder la navegación */
.cliente-card .stretched-link{ z-index: 1; }

/* === Buscador compacto === */
#txtBuscar{ font-size:1rem !important; padding:8px 12px !important; height:auto !important; }
.input-group-text{ font-size:1.1rem; padding:6px 10px; }
.input-group{
  border:1px solid rgba(122,170,255,.25);
  border-radius:10px; background:rgba(255,255,255,.05);
  box-shadow: inset 0 0 4px rgba(0,0,0,.3);
}
.input-group:focus-within{ border-color:rgba(0,150,255,.6); box-shadow:0 0 0 3px rgba(0,150,255,.25); }

/* En pantallas MUY angostas, permite scroll horizontal SOLO a los KPIs */
@media (max-width: 360px){
  .kpis{ overflow-x: auto; max-width: 50vw; }
}

/* === MODAL OSCURO AZUL === */
.modal-dark {
  background: linear-gradient(180deg, #0f1b33 0%, #0a1325 100%);
  color: #e9f2ff;
  border: 1px solid rgba(122,170,255,.18);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.7);
}

/* Contenido interno */
.modal-dark .modal-header {
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.modal-dark .modal-title {
  color: #cfe8ff;
  font-weight: 800;
}
.modal-dark .btn-close {
  filter: invert(1) brightness(1.4);
}

.modal-dark .form-control {
  background: rgba(255,255,255,.07);
  color: #fff;
  border: 1px solid rgba(122,170,255,.25);
  border-radius: 10px;
  transition: all .2s ease;
}
.modal-dark .form-control:focus {
  background: rgba(255,255,255,.12);
  border-color: rgba(0,150,255,.6);
  box-shadow: 0 0 0 3px rgba(0,150,255,.25);
  color: #fff;
}
.modal-dark .form-label {
  color: #a9c6ef;
  font-weight: 600;
}
.modal-dark .invalid-feedback {
  color: #ffbaba;
}

/* Botones del modal */
.modal-dark .modal-footer {
  border-top: 1px solid rgba(255,255,255,.08);
}
.modal-dark .btn-outline-light {
  color: #cfe8ff;
  border-color: rgba(255,255,255,.3);
}
.modal-dark .btn-outline-light:hover {
  background: rgba(255,255,255,.08);
}
.modal-dark .btn-primary-pro {
  background: linear-gradient(90deg, #0078ff, #00a2ff);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  padding: 8px 16px;
  box-shadow: 0 4px 14px rgba(0,123,255,.35);
}
.modal-dark .btn-primary-pro:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* === CORRECCIÓN: asegurar color azul del botón principal === */
.btn-primary-pro {
  background: linear-gradient(90deg, #0078ff 0%, #00a2ff 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 10px 16px !important;
  box-shadow: 0 4px 16px rgba(0, 123, 255, 0.4) !important;
  transition: all 0.2s ease !important;
}

.btn-primary-pro:hover {
  filter: brightness(1.15) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 170, 255, 0.55) !important;
}

.btn-primary-pro:active {
  transform: scale(0.98) !important;
  box-shadow: 0 3px 10px rgba(0, 100, 200, 0.4) !important;
}

.btn-primary-pro:disabled {
  opacity: 0.6 !important;
  background: linear-gradient(90deg, #005ab5 0%, #0084d6 100%) !important;
  color: rgba(255,255,255,0.8) !important;
}