:root{
  --bg:#0b1220;
  --surface:#121a2b;
  --surface-2:#1a2439;
  --line:#26324d;
  --text:#e8edf7;
  --muted:#93a0bd;
  --primary:#3b82f6;
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
  --info:#06b6d4;
  --secondary:#64748b;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:linear-gradient(180deg,#09111d,#0f172a);
  color:var(--text);
}

a{color:inherit;text-decoration:none}

.container{
  max-width:1480px;
  margin:0 auto;
  padding:24px;
}

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(18,26,43,.95);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 20px;
  position:sticky;
  top:10px;
  backdrop-filter:blur(10px);
  z-index:10;
}

.nav-brand{
  font-weight:800;
  letter-spacing:.5px;
}

.nav-menu{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.nav-link{
  padding:10px 14px;
  border-radius:10px;
  background:#182237;
  border:1px solid var(--line);
  color:#cfe0ff;
}

.nav-link.active,
.nav-link:hover{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

.page-title{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin:26px 0 18px;
}

.page-title h1{
  margin:0;
  font-size:28px;
}

.page-title p{
  margin:6px 0 0;
  color:var(--muted);
}

.grid-4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.card{
  background:rgba(18,26,43,.95);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}

.stat .label{
  color:var(--muted);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.stat .value{
  font-size:28px;
  font-weight:800;
  margin-top:10px;
}

.stat.primary{border-top:3px solid var(--primary)}
.stat.success{border-top:3px solid var(--success)}
.stat.warning{border-top:3px solid var(--warning)}
.stat.danger{border-top:3px solid var(--danger)}

.row{
  display:grid;
  grid-template-columns:1.1fr 1.9fr;
  gap:18px;
  margin-top:18px;
}

.row-single{
  margin-top:18px;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
}

.form-group label{
  font-size:13px;
  color:#b7c4df;
  font-weight:700;
  line-height:1.3;
}

.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  background:#0d1526;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  color:var(--text);
  outline:none;
}

.form-group textarea{
  min-height:110px;
  resize:vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:var(--primary);
}

.form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 14px;
  border:none;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
}

.btn-primary{background:var(--primary);color:#fff}
.btn-success{background:var(--success);color:#062b11}
.btn-warning{background:var(--warning);color:#241600}
.btn-danger{background:var(--danger);color:#fff}
.btn-secondary{background:#20304d;color:#e8edf7;border:1px solid var(--line)}

.alert{
  padding:14px 16px;
  border-radius:12px;
  margin-bottom:16px;
  font-weight:700;
}

.alert-success{
  background:rgba(34,197,94,.14);
  border:1px solid rgba(34,197,94,.35);
  color:#9ff0b4;
}

.alert-danger{
  background:rgba(239,68,68,.14);
  border:1px solid rgba(239,68,68,.35);
  color:#ffb4b4;
}

.table{
  width:100%;
  border-collapse:collapse;
}

.table th,
.table td{
  padding:12px 10px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}

.table th{
  font-size:12px;
  letter-spacing:.08em;
  color:var(--muted);
  text-transform:uppercase;
  text-align:left;
  background:#182237;
  position:sticky;
  top:0;
}

.table tr:hover td{
  background:rgba(255,255,255,.02);
}

.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}

.badge-success{background:rgba(34,197,94,.14);color:#98f5b1}
.badge-warning{background:rgba(245,158,11,.14);color:#ffd37f}
.badge-danger{background:rgba(239,68,68,.14);color:#ffb5b5}
.badge-info{background:rgba(6,182,212,.14);color:#98efff}
.badge-secondary{background:rgba(100,116,139,.16);color:#d6dfef}

.toolbar{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.toolbar form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.toolbar input,
.toolbar select{
  background:#0d1526;
  border:1px solid var(--line);
  border-radius:10px;
  padding:11px 12px;
  color:var(--text);
}

.list-clean{
  list-style:none;
  padding:0;
  margin:0;
}

.list-clean li{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}

.list-clean li:last-child{
  border-bottom:none;
}

.muted{color:var(--muted)}
.text-right{text-align:right}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:8px}
.mb-2{margin-bottom:16px}
.mb-3{margin-bottom:24px}
.mono{font-family:Consolas, monospace}
.two-col{display:grid;grid-template-columns:2fr 1fr;gap:18px}


/* =========================
   VISTA CLIENTES (FORMULARIO ARRIBA, TABLA ABAJO)
   ========================= */

/* Apilamos los bloques verticalmente */
.clientes-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cliente-form-card {
  width: 100%;
}

.cliente-form-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.cliente-form-header h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.cliente-form-header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* Grilla del formulario adaptable a todo el ancho */
.cliente-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .cliente-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cliente-form-grid .span-2 {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  /* En pantallas grandes usamos 4 columnas para que quede como un panel compacto */
  .cliente-form-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .cliente-form-grid .span-2 {
    grid-column: span 2;
  }
  /* Hacemos que la observación ocupe toda la parte inferior del form */
  .cliente-form-grid .span-2:last-child {
    grid-column: 1 / -1;
  }
}

.cliente-form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* =========================
   ESTILOS DE LA TABLA
   ========================= */

.clientes-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.clientes-toolbar form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

@media (min-width: 768px) {
  .clientes-toolbar form {
    width: auto;
  }
}

.clientes-toolbar input {
  min-width: 250px;
  flex-grow: 1;
  background: #0d1526;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  color: var(--text);
}

/* Contenedor de la tabla con Scroll Elegante */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 8px; /* Pequeño margen para la barra */
}

.table-clientes {
  width: 100%;
  min-width: 1100px; /* Ancho mínimo para que respiren las columnas */
}

.table-clientes td .badge {
  white-space: nowrap;
}

.cliente-meta {
  margin-top: 6px;
}

.acciones-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 140px;
}

.btn-block {
  width: 100%;
}

@media (min-width: 1200px) {
  /* En monitores anchos, los botones de acción se ponen uno al lado del otro */
  .acciones-col {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .acciones-col .btn {
    flex: 1;
  }
}

/* SCROLLBAR TEMA OSCURO */
.table-wrap::-webkit-scrollbar {
  height: 10px;
}
.table-wrap::-webkit-scrollbar-track {
  background: rgba(18, 26, 43, 0.5);
  border-radius: 8px;
}
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 8px;
}
.table-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--secondary);
}

/* =========================
   ESTILOS DEL MODAL
   ========================= */
.modal-overlay {
  display: none; /* Oculto por defecto */
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(9, 17, 29, 0.85); /* Fondo oscuro transparente */
  backdrop-filter: blur(5px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  display: flex;
  opacity: 1;
}

.modal-content {
  width: 100%;
  max-width: 800px; /* Ancho máximo del formulario */
  max-height: 90vh; /* Para que no sobrepase el alto de la pantalla */
  overflow-y: auto; /* Scroll interno si el formulario es muy largo */
  position: relative;
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.modal-close:hover {
  color: var(--danger);
}

/* Modificación para que el Form-grid funcione bien en el modal */
.modal-content .span-2 {
  grid-column: span 2;
}

@media (max-width: 640px) {
  .modal-content .span-2 {
    grid-column: auto;
  }
}