/**
 * SAR Bolivia - Design System & Theme
 * css/sar-theme.css
 * Paleta Oficial: #162D73, #A4A5A6, #F2E85E, #BF5050, #0D0D0D
 */

:root {
  --sar-primary: #162D73;
  --sar-primary-dark: #0f1f50;
  --sar-primary-light: #22429f;
  --sar-slate: #A4A5A6;
  --sar-slate-light: #e5e7eb;
  --sar-slate-dark: #4b5563;
  --sar-yellow: #F2E85E;
  --sar-yellow-hover: #e5da48;
  --sar-red: #BF5050;
  --sar-red-dark: #9e3c3c;
  --sar-dark: #0D0D0D;
  --sar-dark-card: #151821;
  --sar-dark-border: #232936;
  --sar-light-bg: #f5f7fb;
  --sar-white: #ffffff;
  
  --font-main: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 50px;
  
  --shadow-sm: 0 2px 8px rgba(22, 45, 115, 0.08);
  --shadow-md: 0 8px 24px rgba(22, 45, 115, 0.12);
  --shadow-lg: 0 16px 40px rgba(13, 13, 13, 0.2);
  --shadow-sos: 0 0 35px rgba(191, 80, 80, 0.55);
}

/* Reset y Base */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  background-color: var(--sar-light-bg);
  color: #1f2937;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Colores de Utilidad SAR */
.text-sar-primary { color: var(--sar-primary) !important; }
.text-sar-yellow { color: var(--sar-yellow) !important; }
.text-sar-red { color: var(--sar-red) !important; }
.text-sar-slate { color: var(--sar-slate) !important; }
.bg-sar-primary { background-color: var(--sar-primary) !important; }
.bg-sar-yellow { background-color: var(--sar-yellow) !important; color: #111827 !important; }
.bg-sar-red { background-color: var(--sar-red) !important; color: #fff !important; }
.bg-sar-dark { background-color: var(--sar-dark) !important; color: #fff !important; }

/* Badges SAR */
.badge.bg-primary-sar {
  background-color: var(--sar-primary) !important;
  color: #fff;
}
.badge.bg-warning-sar {
  background-color: var(--sar-yellow) !important;
  color: #0d0d0d !important;
  font-weight: 600;
}
.badge.bg-danger-sar {
  background-color: var(--sar-red) !important;
  color: #fff;
  font-weight: 600;
}
.badge.bg-secondary-sar {
  background-color: var(--sar-slate) !important;
  color: #fff;
}

/* Navbar de Alta Gama */
.sar-navbar {
  background: rgba(22, 45, 115, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 2px solid rgba(242, 232, 94, 0.25);
  padding: 12px 0;
  transition: all 0.3s ease;
  z-index: 1030;
}

.sar-navbar .navbar-brand {
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sar-navbar .nav-link {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  transition: all 0.2s ease;
}

.sar-navbar .nav-link:hover,
.sar-navbar .nav-link.active {
  color: var(--sar-yellow);
  background: rgba(255, 255, 255, 0.08);
}

.sar-navbar .btn-nav-action {
  background-color: var(--sar-yellow) !important;
  color: #0D0D0D !important;
  font-weight: 700 !important;
  border-radius: var(--radius-pill);
  padding: 8px 20px;
  border: 1px solid #dcd13f;
  box-shadow: 0 4px 12px rgba(242, 232, 94, 0.35);
  transition: all 0.2s ease;
}

.sar-navbar .btn-nav-action:hover {
  background-color: var(--sar-yellow-hover) !important;
  color: #000000 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(242, 232, 94, 0.45);
}

.btn-sar-primary {
  background-color: var(--sar-primary) !important;
  color: #ffffff !important;
  border: 1px solid var(--sar-primary-dark) !important;
  transition: all 0.2s ease;
}

.btn-sar-primary:hover {
  background-color: var(--sar-primary-dark) !important;
  color: var(--sar-yellow) !important;
}

.btn-login-action {
  background-color: var(--sar-yellow) !important;
  color: #0D0D0D !important;
  font-weight: 800 !important;
  border: 2px solid #e0d440 !important;
  transition: all 0.2s ease;
}

.btn-login-action:hover {
  background-color: var(--sar-yellow-hover) !important;
  color: #000000 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(242, 232, 94, 0.4);
}

/* Banner de Emergencia Activo */
.emergency-top-ticker {
  background: var(--sar-dark);
  color: #fff;
  padding: 8px 0;
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--sar-yellow);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background-color: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: pulse-green 1.8s infinite;
}

@keyframes pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Hero Section */
.sar-hero {
  position: relative;
  background: linear-gradient(135deg, #162D73 0%, #0c1840 70%, #0D0D0D 100%);
  color: #fff;
  padding: 60px 0 80px;
  overflow: hidden;
}

.sar-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 80% 20%, rgba(242, 232, 94, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 10% 80%, rgba(191, 80, 80, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

/* Botón SOS Gigante y Asistente de Auxilio */
.sos-box-container {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: 35px 25px;
  text-align: center;
  backdrop-filter: blur(10px);
  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.btn-sos-main {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #e06666, #BF5050 60%, #902d2d 100%);
  color: #ffffff;
  border: 5px solid rgba(255, 255, 255, 0.9);
  font-weight: 900;
  font-size: 1.45rem;
  letter-spacing: 0.5px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sos);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  user-select: none;
  touch-action: manipulation;
  z-index: 2;
}

.btn-sos-main i {
  font-size: 2.8rem;
  margin-bottom: 4px;
}

.btn-sos-main:hover {
  transform: scale(1.05);
  box-shadow: 0 0 50px rgba(191, 80, 80, 0.8);
  color: #fff;
}

.btn-sos-main:active {
  transform: scale(0.96);
}

/* Anillos de Onda Radar SOS */
.sos-radar-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: 2px solid rgba(191, 80, 80, 0.6);
  animation: radar-wave 2.4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  pointer-events: none;
}

.sos-radar-wave.wave-2 {
  animation-delay: 0.8s;
}

.sos-radar-wave.wave-3 {
  animation-delay: 1.6s;
}

@keyframes radar-wave {
  0% { width: 200px; height: 200px; opacity: 0.9; }
  100% { width: 330px; height: 330px; opacity: 0; }
}

/* Estilos Específicos: Botón de Extrema Emergencia WebRTC */
.btn-sos-extreme {
  background: radial-gradient(circle at 30% 30%, #ff4b4b, #d90429 60%, #7a0010 100%) !important;
  border: 5px solid #ffffff !important;
  box-shadow: 0 0 45px rgba(217, 4, 41, 0.85) !important;
}

.btn-sos-extreme:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 0 65px rgba(255, 75, 75, 1) !important;
}

.wave-extreme {
  border-color: rgba(255, 75, 75, 0.85) !important;
}

/* Estilos Específicos: Botón Reporte Asistido con Formulario (Naranja Rescate de Alto Impacto) */
.btn-sos-secondary,
.btn-sos-orange {
  background: radial-gradient(circle at 30% 30%, #ff8c00, #f75500 55%, #c23800 100%) !important;
  border: 5px solid #ffffff !important;
  box-shadow: 0 0 45px rgba(247, 85, 0, 0.85) !important;
}

.btn-sos-secondary:hover,
.btn-sos-orange:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 0 65px rgba(255, 140, 0, 1) !important;
}

.wave-orange {
  border-color: rgba(255, 140, 0, 0.85) !important;
}

/* Tarjetas de Categoría de Emergencia */
.emergency-category-card {
  background: var(--sar-white);
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 18px 14px;
  text-align: center;
  transition: all 0.25s ease;
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.emergency-category-card .cat-icon-wrapper {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.emergency-category-card .cat-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--sar-dark);
  margin-bottom: 4px;
}

.emergency-category-card .cat-desc {
  font-size: 0.78rem;
  color: var(--sar-slate-dark);
  line-height: 1.3;
}

.emergency-category-card:hover {
  transform: translateY(-4px);
  border-color: var(--sar-primary);
  box-shadow: 0 12px 24px rgba(22, 45, 115, 0.12);
}

.emergency-category-card.selected {
  border-color: var(--sar-red);
  background: #fffafa;
  box-shadow: 0 0 0 2px var(--sar-red);
}

/* Barra de Precisión GPS */
.gps-status-box {
  background: rgba(22, 45, 115, 0.05);
  border: 1px solid rgba(22, 45, 115, 0.15);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Tarjetas y Secciones */
.sar-card {
  background: var(--sar-white);
  border: 1px solid rgba(164, 165, 166, 0.2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all 0.25s ease;
}

.sar-card:hover {
  box-shadow: var(--shadow-md);
}

.sar-card-header {
  padding: 20px 24px;
  border-bottom: 1px solid #edf2f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sar-card-body {
  padding: 24px;
}

/* Sección de Cursos y Búsqueda por CI */
.ci-search-box {
  background: linear-gradient(135deg, #162D73 0%, #1e3a8a 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 40px 30px;
  box-shadow: 0 15px 35px rgba(22, 45, 115, 0.2);
  position: relative;
  overflow: hidden;
}

.ci-search-box::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(242, 232, 94, 0.1);
  pointer-events: none;
}

.ci-input-group .form-control {
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  padding: 14px 22px;
  font-size: 1.1rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

.ci-input-group .form-control:focus {
  background: #fff;
  border-color: var(--sar-yellow);
  box-shadow: 0 0 0 4px rgba(242, 232, 94, 0.3);
}

.ci-input-group .btn-search-ci {
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: var(--sar-yellow);
  color: var(--sar-dark);
  font-weight: 800;
  padding: 14px 30px;
  border: none;
  font-size: 1.05rem;
}

.ci-input-group .btn-search-ci:hover {
  background: var(--sar-yellow-hover);
}

/* Tarjeta de Curso del Alumno */
.student-course-item {
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 16px;
  background: #fff;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.student-course-item:hover {
  border-color: var(--sar-primary);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* Chat de Incidentes y Respuestas Rápidas */
.chat-messages-container {
  max-height: 280px;
  overflow-y: auto;
  padding: 14px;
  background: #f8fafc;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.chat-bubble.bubble-citizen {
  align-self: flex-end;
  background: var(--sar-primary);
  color: #fff;
  border-bottom-right-radius: 2px;
}

.chat-bubble.bubble-dispatcher {
  align-self: flex-start;
  background: #e2e8f0;
  color: #1e293b;
  border-bottom-left-radius: 2px;
}

.quick-panic-btn {
  font-size: 0.8rem;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-panic-btn:hover {
  background: var(--sar-yellow);
  color: #000;
  border-color: var(--sar-yellow);
}

/* Input PIN de 4 casillas (Login Seguro) */
.pin-inputs-wrapper {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 20px 0;
}

.pin-digit-box {
  width: 58px;
  height: 68px;
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: var(--sar-primary);
  transition: all 0.2s ease;
}

.pin-digit-box:focus {
  border-color: var(--sar-primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(22, 45, 115, 0.15);
  outline: none;
}

/* Footer SAR */
.sar-footer {
  background: var(--sar-dark);
  color: #cbd5e1;
  padding: 60px 0 25px;
  border-top: 3px solid var(--sar-primary);
}

.sar-footer h5 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 20px;
}

.sar-footer a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.2s ease;
}

.sar-footer a:hover {
  color: var(--sar-yellow);
}

/* Responsive Mobile First */
@media (max-width: 768px) {
  .btn-sos-main {
    width: 170px;
    height: 170px;
    font-size: 1.25rem;
  }
  .btn-sos-main i {
    font-size: 2.2rem;
  }
  .sos-radar-wave {
    width: 175px;
    height: 175px;
  }
  .ci-search-box {
    padding: 25px 18px;
  }
  .ci-input-group .form-control {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
  .ci-input-group .btn-search-ci {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    width: 100%;
  }
  .pin-digit-box {
    width: 48px;
    height: 58px;
    font-size: 1.6rem;
  }
}

/* ========================================================== */
/* EFECTOS Y PERSISTENCIA DE CÓDIGO DE INCIDENTE */
/* ========================================================== */
@keyframes codePulseGrow {
  0% {
    transform: scale(1);
    color: #F2E85E;
    text-shadow: 0 0 4px rgba(242, 232, 94, 0.4);
  }
  50% {
    transform: scale(1.15);
    color: #ffffff;
    text-shadow: 0 0 14px rgba(242, 232, 94, 0.95), 0 0 22px rgba(191, 80, 80, 0.8);
  }
  100% {
    transform: scale(1);
    color: #F2E85E;
    text-shadow: 0 0 4px rgba(242, 232, 94, 0.4);
  }
}

.tracking-code-pulse {
  display: inline-block;
  animation: codePulseGrow 1.8s infinite ease-in-out;
  letter-spacing: 1.5px;
  font-weight: 900;
  transition: transform 0.2s ease;
}

.sticky-emergency-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1055;
  background: linear-gradient(135deg, #162D73 0%, #0D0D0D 100%);
  color: #fff;
  border-top: 3px solid #F2E85E;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.45);
  animation: slideUpEmergency 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpEmergency {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* SweetAlert2 por encima de modales Bootstrap, fondos oscuros y barras fijas */
.swal2-container {
  z-index: 99999 !important;
}