/* =========================================================
   BUSSKM PANEL - app.css (LIMPIO)
   ========================================================= */

/* ===== THEME ===== */
:root{
  --bg:#0b0f14;
  --card:#111827;
  --card2:#0f172a;
  --text:#e5e7eb;
  --muted:#b6c0cf;
  --border:#263245;

  --tm-fuchsia:#c63cff;
  --tm-purple:#6b5bff;

  --ok:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.45;
  color:var(--text);
  background:
    radial-gradient(900px 480px at 15% 0%, rgba(198,60,255,.10), transparent 62%),
    radial-gradient(900px 480px at 85% 0%, rgba(107,91,255,.10), transparent 62%),
    var(--bg);
}

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

/* ===== LAYOUT ===== */
.container{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height:100vh;
}

.main{
  padding:18px 20px 40px;
}

/* ===== SIDEBAR ===== */
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
}

.sidebar nav a {
  display: block;      /* 🔴 CLAVE */
  width: 100%;         /* 🔴 CLAVE */
  padding: 10px 14px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-weight: 400;
}

.sidebar nav a:hover {
  background: rgba(255,255,255,0.1);
}


/* logo combinado */
.brand-logo-combo{
  width:100%;
  max-width:210px;
  height:auto;
  display:block;
  margin:0 auto;
  opacity:0.96;
  filter:
    drop-shadow(0 10px 20px rgba(0,0,0,.35))
    drop-shadow(0 0 18px rgba(140,80,255,.10));
}

.brand-company{
  display:block;
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  text-align:left;
}

/* nav 
.nav{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.nav a{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:12px 12px;
  border-radius:12px;
  color:var(--text);
  border:1px solid transparent;
}

.nav a:hover{
  border-color: rgba(198,60,255,.22);
  background: rgba(198,60,255,.07);
}

.nav-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
  background: linear-gradient(90deg, var(--tm-fuchsia), var(--tm-purple));
  box-shadow: 0 0 10px rgba(198,60,255,.18);
  opacity:.9;
}S

/* ===== TOPBAR (si la usas) ===== */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(17,24,39,.65);
  backdrop-filter: blur(8px);
}

.title h2{ margin:0; font-size:18px; }
.title p{ margin:4px 0 0; color:var(--muted); font-size:13px; }

.actions{
  display:flex;
  gap:10px;
  align-items:center;
}

/* ===== BUTTONS ===== */
.btn, .btn-primary{
  border:1px solid var(--border);
  background: rgba(15,23,42,.8);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
}

.btn:hover{
  border-color: rgba(107,91,255,.55);
}

.btn-primary{
  border:none;
  background: linear-gradient(90deg, var(--tm-fuchsia), var(--tm-purple));
  box-shadow: 0 10px 30px rgba(107,91,255,.14);
}

.btn-primary:hover{ filter:brightness(1.05); }

/* ===== CARDS / GRID ===== */
.grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}

.card{
  grid-column: span 4;
  border:1px solid var(--border);
  border-radius:16px;
  background: rgba(17,24,39,.72);
  padding:14px 14px;
}

.card h3{ margin:0 0 6px; font-size:14px; }
.card .kpi{ font-size:26px; font-weight:900; margin-top:8px; }
.card small{ color:var(--muted); }
.card.wide{ grid-column: span 12; }

/* ===== TABLES ===== */
.table{
  width:100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--border);
}

.table th, .table td{
  padding:10px 10px;
  border-bottom:1px solid var(--border);
  text-align:left;
  font-size:13px;
}

.table th{
  color:var(--muted);
  font-weight:800;
  background: rgba(15,23,42,.55);
}

.table tr:hover td{
  background: rgba(198,60,255,.06);
}

/* ===== ALERTS ===== */
.alert{
  background: rgba(239,68,68,0.14);
  border: 1px solid rgba(239,68,68,0.28);
  color: #fff;
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 12px;
}

/* =========================================================
   LOGIN (logo grande + form abajo)
   ========================================================= */
.login-body{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background: radial-gradient(circle at top left, #2b1457, #0a0d14);
}

.login-wrapper{
  text-align:center;
}

.login-logo{
  width: 520px;
  max-width: 92vw;
  margin-bottom: 24px;
}

.login-form{
  background: rgba(255,255,255,0.08);
  padding: 22px 26px;
  border-radius: 14px;
  backdrop-filter: blur(6px);
  display: inline-block;
}

.login-form label{
  display:block;
  text-align:left;
  color:#fff;
  margin-top:10px;
  font-weight:600;
}

.login-form input{
  width: 320px;
  max-width: 80vw;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  margin-top: 5px;
}

.login-form button{
  width:100%;
  margin-top: 16px;
  padding: 12px;
  border-radius: 10px;
  border:none;
  background: linear-gradient(90deg, var(--tm-fuchsia), var(--tm-purple));
  color: #fff;
  font-weight: 800;
  cursor:pointer;
}

.login-form button:hover{ filter:brightness(1.05); }

/* =========================================================
   ASIGNACIONES (form)
   ========================================================= */
.assign-form{
  display:grid;
  grid-template-columns: 1fr 180px 1fr 220px auto;
  gap: 12px;
  align-items:end;
}

.assign-form .field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.assign-form label{
  color:#fff;
  font-weight:600;
}

.assign-form select,
.assign-form input[type="date"]{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.92);
}

.assign-form button{
  height:44px;
  padding:0 22px;
  font-size:15px;
  font-weight:800;
  border-radius:12px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color:#fff;
  border:none;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(124,58,237,0.30);
}

.assign-form button:hover{ filter:brightness(1.05); }

/* =========================================================
   VEHÍCULOS (form)
   ========================================================= */
.vehicle-form{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:8px;
  align-items:end;
}

.vehicle-form .field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.vehicle-form input,
.vehicle-form select,
.vehicle-form textarea{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.92);
}

.vehicle-notes{ grid-column: 4 / span 2; }

.vehicle-actions{
  grid-column: 6 / span 1;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
}

/* botón más pequeño */
.vehicle-actions .btn-primary{
  width:140px;
  height:42px;
  font-weight:700;
  font-size:15px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px){
  .container{ grid-template-columns: 1fr; }
  .sidebar{ position:relative; height:auto; }

  .card{ grid-column: span 12; }

  .assign-form{
    grid-template-columns: 1fr 1fr;
  }

  .vehicle-form{
    grid-template-columns: repeat(2, 1fr);
  }
  .vehicle-notes,
  .vehicle-actions{
    grid-column: span 2;
  }
  .vehicle-actions{
    justify-content:stretch;
  }
  .vehicle-actions .btn-primary{
    width:100%;
  }
}
/* Personas usando vehicle-form */
.person-role { grid-column: 1 / span 4; }
.person-actions-save { grid-column: 5 / span 2; }
.person-actions-cancel { grid-column: 4 / span 1; justify-content:flex-start; }
.hint { color: var(--muted); font-size:12px; }

/* =========================================================
   PERSONAS (usa vehicle-form grid 6 cols)
   ========================================================= */
.person-fname{ grid-column: 1 / span 2; }
.person-lname{ grid-column: 3 / span 2; }
.person-ced  { grid-column: 5 / span 1; }
.person-phone{ grid-column: 6 / span 1; }

.person-sex  { grid-column: 1 / span 1; }
.person-rif  { grid-column: 2 / span 2; }
.person-birth{ grid-column: 4 / span 1; }
.person-addr { grid-column: 5 / span 2; }

.person-role { grid-column: 1 / span 4; }

.person-actions{
  grid-column: 5 / span 2;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  align-items:flex-end;
}

.person-actions .btn-primary{
  width:140px;
  height:42px;
  font-weight:700;
  font-size:15px;
}

.person-actions .btn{
  height:42px;
}
/* ===== PERSONAS: alineación fina (sobre vehicle-form 6 cols) ===== */
.person-fname{ grid-column: 1 / span 2; }
.person-lname{ grid-column: 3 / span 2; }
.person-ced  { grid-column: 5 / span 1; }
.person-phone{ grid-column: 6 / span 1; }

.person-sex  { grid-column: 1 / span 1; }
.person-rif  { grid-column: 2 / span 2; }
.person-birth{ grid-column: 4 / span 1; }
.person-addr { grid-column: 5 / span 2; }

.person-role { grid-column: 1 / span 4; }

/* Acciones: una sola vez, a la derecha */
.person-actions{
  grid-column: 5 / span 2;
  display:flex;
  justify-content:flex-end;
  gap:12px;
  align-items:flex-end;
}

/* Tamaño botones consistente con vehículos */
.person-actions .btn-primary{
  width: 160px;
  height: 44px;
  font-weight: 800;
  font-size: 15px;
}
.person-actions .btn{
  height: 44px;
  padding: 10px 14px;
}