/* ===== Variables globales ===== */
:root {
  --mv-primary:#1e3a8a;
  --mv-secondary:#3b82f6;
  --mv-bg:#f7fafc;
  --mv-text:#1a202c;
  --mv-border:#e2e8f0;
  --mv-hi:#edf2f7;
  --mv-danger:#dc2626;
  --mv-warning:#fefcbf;
}

/* ===== Base ===== */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--mv-bg);
  color: var(--mv-text);
  font-family: 'Inter', sans-serif;
}

/* ===== NAVBAR ===== */
.mv-navbar {
  background: linear-gradient(135deg,#1e3a8a 0%,#3730a3 50%,#1e40af 100%);
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: 4.25rem 2rem;     /* Banner alto como Dashboard */
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(30,58,138,.28);
  z-index: 10;
}
.mv-navbar::before {
  content:'';
  position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,transparent,#60a5fa,#3b82f6,#60a5fa,transparent);
  animation: mv-shimmer 3s ease-in-out infinite;
}
@keyframes mv-shimmer {0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

.mv-navbar-content {
  max-width: 1400px;
  margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between; 
  gap:2rem;
}
.mv-logo-group {
  display:flex; align-items:center; gap:.75rem;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.25);
  padding:.4rem .55rem; border-radius:14px; backdrop-filter: blur(10px);
  transition: all .25s ease;
}
.mv-logo-group:hover {
  background: rgba(255,255,255,.15);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}
.mv-logo { height:102px; object-fit:contain; transition: .25s ease; }
.mv-logo-group:hover .mv-logo { transform: scale(1.04); filter: brightness(1.12) contrast(1.1); }
.mv-logo-white { background:#fff; padding:6px; border-radius:10px }

.mv-home-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; 
  height:54px; 
  border-radius:14px; 
  font-size:1.5rem;
  color:#fff; background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.25);
  transition: all .25s ease;
  text-decoration:none;
}
.mv-home-btn:hover { background:rgba(255,255,255,.15); transform:translateY(-2px); box-shadow:0 10px 25px rgba(0,0,0,.18) }

.mv-title-wrap { flex:1; text-align:center; padding:0 4rem }
.mv-title {
  color:#fff; margin:0; font-weight:800; letter-spacing:-.5px;
  font-size: clamp(1.6rem, 2.8vw, 2.55rem);
  text-shadow: 2px 2px 4px rgba(0,0,0,.28);
  position:relative;
}
.mv-title::after {
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-6px; width:60px; height:3px; border-radius:2px;
  background: linear-gradient(90deg,#60a5fa,#3b82f6,#60a5fa);
}
.mv-subtitle { margin:.6rem 0 0; color:rgba(255,255,255,.85); font-size:1rem; font-weight:500 }

.mv-rightbox { display:flex; align-items:center; gap:.75rem }
.mv-datetime {
  display:flex; align-items:center; gap:.5rem;
  color:#fff; font-weight:700; font-size:.95rem;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.25);
  padding:.75rem 1.25rem; border-radius:12px; position:relative; overflow:hidden;
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
}
.mv-datetime::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  animation: mv-scan 4s ease-in-out infinite;
}
@keyframes mv-scan {0%{left:-100%}50%{left:100%}100%{left:-100%}}
.mv-datetime-icon{ color:#60a5fa }

/* Responsive navbar */
@media (max-width:768px){
  .mv-navbar-content{flex-direction:column; gap:1rem}
  .mv-title-wrap{order:2; padding:0}
  .mv-rightbox{order:3; width:100%; justify-content:center}
  .mv-logo{height:62px}
  .mv-home-btn{width:48px; height:48px}
  .mv-title{font-size: clamp(1.35rem, 5.2vw, 1.8rem);}
  .mv-subtitle{font-size:.9rem}
}

/* ===== MAPA Y CARDS ===== */
.map-wrap.sticky-top { top: 1.25rem; }
#map { height:74vh; width:100%; border:1px solid var(--mv-border); border-radius:.5rem }
.card { box-shadow:0 2px 12px rgba(0,0,0,.06) }
.legend .dot {
  display:inline-block; width:14px; height:14px; border-radius:50%;
  margin-right:.35rem; border:2px solid currentColor;
}
.dot-red{background:var(--mv-danger); color:var(--mv-danger)}
.badge-status{ font-size:.85rem }
.ticket-detail dt{width:180px; font-weight:600}
.ticket-detail dd{margin-left:0}

/* ===== LOGIN (index.html) ===== */
body.index {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100vh; margin:0;
  background: url('img/semaf.jpg') no-repeat center center fixed;
  background-size: cover;
}
body.index .main-content {
  background-color: rgba(255,255,255,0.9);
  padding: 30px 20px;
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
  max-width: 400px; width: 90%; text-align: center;
}
body.index .login-form h1 { margin-bottom:20px; font-size:24px; color:#333; }
body.index .login-form label { display:block; margin-bottom:5px; font-size:14px; font-weight:bold; color:#555; }
body.index .login-form input {
  width:100%; padding:12px; margin-bottom:20px;
  border:1px solid #ccc; border-radius:6px; font-size:14px;
}
body.index .login-form button {
  width:100%; padding:12px; background-color:#007bff; border:none; border-radius:6px;
  color:white; font-size:16px; font-weight:bold; cursor:pointer;
  transition:background-color .3s ease;
}
body.index .login-form button:hover { background-color:#0056b3; }

/* Footer index */
body.index .footer {
  background-color: rgba(255,255,255,0.5);
  text-align:center; padding:20px; color:#000; font-size:14px;
  width:100%; position:absolute; bottom:0;
}

/* ===== PRINT ===== */
@media print {
  @page { size:A4; margin:12mm }
  #map, .map-wrap, .legend, .mv-navbar { display:none!important }
  .background-logo{opacity:.08}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}