:root {
  --k-yellow: #F5C518;
  --k-yellow-dim: rgba(245,197,24,0.1);
  --k-yellow-hover: #ddb014;
  --k-bg: #0E0F1A;
  --k-surface: #161728;
  --k-surface2: #1E2035;
  --k-surface3: #252741;
  --k-text: #F0F1F5;
  --k-muted: #7C8099;
  --k-border: rgba(255,255,255,0.07);
  --k-green: #3ECF6A;
  --k-orange: #FF6B35;
  --k-red: #EF4444;
  --k-blue: #3B82F6;
  --r: 12px;
  --r-sm: 8px;
  --r-lg: 16px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--k-bg);color:var(--k-text);
  min-height:100vh;font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--k-yellow);text-decoration:none;}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 22px;border-radius:var(--r);font-size:14px;font-weight:700;cursor:pointer;border:none;transition:opacity .15s,transform .1s;font-family:inherit;text-decoration:none;}
.btn:active{transform:scale(0.97);}
.btn-yellow{background:var(--k-yellow);color:#0E0F1A;}
.btn-yellow:hover{background:var(--k-yellow-hover);}
.btn-outline{background:transparent;color:var(--k-yellow);border:1.5px solid var(--k-yellow);}
.btn-outline:hover{background:var(--k-yellow-dim);}
.btn-ghost{background:var(--k-surface2);color:var(--k-text);border:1px solid var(--k-border);}
.btn-ghost:hover{background:var(--k-surface3);}
.btn-danger{background:var(--k-red);color:#fff;}
.btn-success{background:var(--k-green);color:#0E0F1A;}
.btn-full{width:100%;}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:var(--r-sm);}
.btn-xs{padding:5px 10px;font-size:12px;border-radius:6px;}

/* ── Layout ── */
.page{max-width:480px;margin:0 auto;padding-bottom:80px;min-height:100vh;}

/* ── Header ── */
.header{position:sticky;top:0;background:rgba(14,15,26,0.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--k-border);padding:12px 18px;display:flex;align-items:center;justify-content:space-between;z-index:100;}

/* ── Cards ── */
.card{background:var(--k-surface);border:1px solid var(--k-border);border-radius:var(--r-lg);padding:18px;}
.card-sm{background:var(--k-surface);border:1px solid var(--k-border);border-radius:var(--r);padding:14px 16px;}

/* ── Inputs ── */
.field{margin-bottom:14px;}
.field label{display:block;font-size:11px;font-weight:700;color:var(--k-muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px;}
input,select,textarea{width:100%;background:var(--k-surface2);border:1px solid var(--k-border);border-radius:var(--r-sm);color:var(--k-text);font-size:14px;padding:11px 13px;outline:none;transition:border-color .15s;font-family:inherit;}
input:focus,select:focus,textarea:focus{border-color:var(--k-yellow);background:rgba(245,197,24,0.03);}
input::placeholder,textarea::placeholder{color:var(--k-muted);}
select option{background:var(--k-surface);}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;}
.b-green{background:rgba(62,207,106,.13);color:var(--k-green);}
.b-orange{background:rgba(255,107,53,.13);color:var(--k-orange);}
.b-yellow{background:rgba(245,197,24,.13);color:var(--k-yellow);}
.b-gray{background:rgba(255,255,255,.08);color:var(--k-muted);}
.b-blue{background:rgba(59,130,246,.13);color:var(--k-blue);}
.b-red{background:rgba(239,68,68,.13);color:var(--k-red);}

/* ── Secciones ── */
.section{padding:18px;}
.sec-title{font-size:11px;font-weight:700;color:var(--k-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;}

/* ── Stats ── */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 18px;}
.stat{background:var(--k-surface);border:1px solid var(--k-border);border-radius:var(--r);padding:12px;text-align:center;}
.stat-n{font-size:24px;font-weight:800;color:var(--k-yellow);}
.stat-l{font-size:11px;color:var(--k-muted);margin-top:1px;}

/* ── Tabs ── */
.tabs{display:flex;border-bottom:1px solid var(--k-border);padding:0 18px;gap:2px;overflow-x:auto;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{padding:11px 14px;font-size:13px;font-weight:600;color:var(--k-muted);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;font-family:inherit;transition:color .15s;white-space:nowrap;flex-shrink:0;}
.tab.active{color:var(--k-yellow);border-bottom-color:var(--k-yellow);}

/* ── Row items ── */
.row-item{display:flex;align-items:center;gap:12px;padding:13px 15px;background:var(--k-surface);border:1px solid var(--k-border);border-radius:var(--r);margin-bottom:8px;cursor:pointer;transition:border-color .15s;}
.row-item:hover{border-color:rgba(245,197,24,.25);}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--k-surface3);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:var(--k-yellow);flex-shrink:0;}
.avatar-lg{width:56px;height:56px;font-size:20px;}
.row-info{flex:1;min-width:0;}
.row-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row-sub{font-size:12px;color:var(--k-muted);margin-top:1px;}

/* ── Modal ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:200;display:flex;align-items:flex-end;justify-content:center;}
.overlay.hidden{display:none;}
.modal{background:var(--k-surface);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:22px 18px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;border:1px solid var(--k-border);border-bottom:none;}
.modal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.modal-title{font-size:17px;font-weight:800;}
.modal-x{width:30px;height:30px;background:var(--k-surface2);border:none;border-radius:50%;color:var(--k-text);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;}

/* ── Flash ── */
.flash{position:fixed;top:16px;left:50%;transform:translateX(-50%);background:var(--k-surface2);color:var(--k-text);padding:11px 20px;border-radius:30px;font-size:13px;font-weight:600;z-index:300;border:1px solid var(--k-yellow);white-space:nowrap;animation:fi 2.8s ease forwards;}
@keyframes fi{0%{opacity:0;top:8px}15%{opacity:1;top:16px}75%{opacity:1}100%{opacity:0}}

/* ── Banner de alerta ── */
.banner{padding:12px 18px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:10px;}
.banner-warn{background:rgba(255,107,53,.1);border-bottom:1px solid rgba(255,107,53,.2);color:var(--k-orange);}
.banner-danger{background:rgba(239,68,68,.1);border-bottom:1px solid rgba(239,68,68,.2);color:var(--k-red);}

/* ── Driver card (directorio) ── */
.driver-card{background:var(--k-surface);border:1px solid var(--k-border);border-radius:var(--r-lg);padding:16px;margin-bottom:12px;cursor:pointer;transition:border-color .2s,transform .15s;}
.driver-card:hover{border-color:rgba(245,197,24,.3);transform:translateY(-1px);}
.driver-photo{width:54px;height:54px;border-radius:var(--r-sm);background:var(--k-surface3);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;border:1px solid var(--k-border);}
.tag{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;background:var(--k-surface2);color:var(--k-text);border:1px solid var(--k-border);}

/* ── Scroll horizontal ── */
.scroll-h{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;}
.scroll-h::-webkit-scrollbar{display:none;}
.pill{padding:7px 14px;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer;border:1.5px solid var(--k-border);color:var(--k-muted);background:none;font-family:inherit;transition:all .15s;}
.pill.active{background:var(--k-yellow);color:#0E0F1A;border-color:var(--k-yellow);}

/* ── Divider ── */
.div{height:1px;background:var(--k-border);margin:16px 0;}

/* ── Alerta row ── */
.alerta-row{display:flex;gap:10px;padding:12px 14px;background:var(--k-surface);border:1px solid var(--k-border);border-radius:var(--r);margin-bottom:8px;}
.dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0;}

/* ── Solicitud card ── */
.solicitud-card{background:var(--k-surface);border:1px solid var(--k-border);border-radius:var(--r);padding:14px;margin-bottom:10px;}
.solicitud-card.pendiente{border-color:rgba(245,197,24,.3);}
.solicitud-card.aceptada{border-color:rgba(62,207,106,.3);}
.solicitud-card.rechazada{border-color:rgba(239,68,68,.2);}

/* ── Verificado badge ── */
.verificado{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--k-green);}

/* ── Step indicator ── */
.steps{display:flex;gap:0;margin-bottom:20px;}
.step{flex:1;text-align:center;position:relative;}
.step-dot{width:28px;height:28px;border-radius:50%;background:var(--k-surface2);border:2px solid var(--k-border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--k-muted);margin:0 auto 6px;}
.step.active .step-dot{background:var(--k-yellow);border-color:var(--k-yellow);color:#0E0F1A;}
.step.done .step-dot{background:var(--k-green);border-color:var(--k-green);color:#0E0F1A;}
.step-label{font-size:10px;color:var(--k-muted);}
.step.active .step-label{color:var(--k-yellow);}
.step::before{content:'';position:absolute;top:14px;left:0;right:50%;height:2px;background:var(--k-border);}
.step:first-child::before{display:none;}
.step.done::before{background:var(--k-green);}

/* ── Animaciones ── */
@keyframes pulsar{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .3s ease forwards;}

/* ── KOLE v3 — Adiciones ── */

/* Carrusel */
.carousel {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: var(--k-surface);
}
.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  background-size: cover;
  background-position: center;
}
.carousel-slide.active { opacity: 1; }

/* Efecto Slide */
.carousel.efecto-slide .carousel-slide {
  transform: translateX(100%);
  transition: transform 0.7s cubic-bezier(.4,0,.2,1), opacity 0s;
  opacity: 1;
}
.carousel.efecto-slide .carousel-slide.active { transform: translateX(0); }
.carousel.efecto-slide .carousel-slide.saliendo { transform: translateX(-100%); }

/* Efecto Zoom (Ken Burns) */
.carousel.efecto-zoom .carousel-slide {
  opacity: 0;
  transition: opacity 1s ease;
}
.carousel.efecto-zoom .carousel-slide.active {
  opacity: 1;
  animation: kenburns 4s ease-out forwards;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

/* Overlay del carrusel */
.carousel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(14,15,26,0.2) 0%, rgba(14,15,26,0.7) 100%);
  display: flex;
  align-items: flex-end;
  padding: 16px 18px;
  pointer-events: none;
}
.carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.carousel-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  transition: all .3s;
}
.carousel-dot.active {
  background: var(--k-yellow);
  width: 18px;
  border-radius: 3px;
}

/* Botones hero grandes */
.hero-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: transform .15s, box-shadow .15s;
  text-decoration: none;
  width: 100%;
}
.hero-btn:active { transform: scale(0.98); }
.hero-btn-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.hero-btn-text { text-align: left; }
.hero-btn-title { font-size: 16px; font-weight: 800; display: block; }
.hero-btn-sub { font-size: 12px; opacity: .75; margin-top: 2px; display: block; }

.hero-btn-primary {
  background: var(--k-yellow);
  color: #0E0F1A;
  box-shadow: 0 4px 24px rgba(245,197,24,.25);
}
.hero-btn-primary:hover { box-shadow: 0 6px 32px rgba(245,197,24,.35); }

.hero-btn-conductor {
  background: var(--k-surface);
  color: var(--k-text);
  border: 1px solid rgba(245,197,24,.25);
}
.hero-btn-conductor:hover { border-color: rgba(245,197,24,.5); }

.hero-btn-padre {
  background: var(--k-surface);
  color: var(--k-text);
  border: 1px solid var(--k-border);
}
.hero-btn-padre:hover { border-color: rgba(255,255,255,.15); }

/* Panel Conductor — identidad propia */
.conductor-theme {
  --k-bg: #080F1E;
  --k-surface: #0D1829;
  --k-surface2: #132035;
  --k-surface3: #1A2D45;
  --k-border: rgba(245,197,24,0.12);
  --k-yellow: #F7CC1A;
  background: #080F1E;
}
.conductor-theme .header {
  background: rgba(8,15,30,0.97);
  border-bottom-color: rgba(245,197,24,0.15);
}
.conductor-theme .tabs {
  border-bottom-color: rgba(245,197,24,0.12);
}
.conductor-theme .stat {
  background: linear-gradient(135deg, #0D1829 0%, #132035 100%);
  border-color: rgba(245,197,24,0.15);
}

/* Stats acción en conductor */
.stat-action {
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.stat-action:hover {
  transform: translateY(-2px);
  border-color: rgba(245,197,24,.4);
}
.stat-action .stat-n { font-size: 20px; }

/* Ruta activa banner */
.ruta-banner {
  background: linear-gradient(90deg, rgba(62,207,106,.15) 0%, rgba(62,207,106,.05) 100%);
  border-bottom: 1px solid rgba(62,207,106,.25);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--k-green);
}

/* Solicitud pendiente — efecto pulsante */
.solicitud-pendiente-card {
  background: rgba(245,197,24,.06);
  border: 1.5px solid rgba(245,197,24,.4);
  border-radius: var(--r);
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  animation: pulseBorder 2s ease-in-out infinite;
}
@keyframes pulseBorder {
  0%, 100% { border-color: rgba(245,197,24,.4); box-shadow: none; }
  50% { border-color: rgba(245,197,24,.8); box-shadow: 0 0 12px rgba(245,197,24,.15); }
}

/* Solicitud rechazada — gris */
.solicitud-rechazada-card {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--r);
  padding: 14px;
  margin-bottom: 8px;
  opacity: .5;
  cursor: default;
}

/* Filtros de alumno */
.filtros-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.filtro-btn {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid var(--k-border);
  background: none;
  color: var(--k-muted);
  font-family: inherit;
  transition: all .15s;
}
.filtro-btn.active {
  background: var(--k-yellow);
  color: #0E0F1A;
  border-color: var(--k-yellow);
}

/* Tarjeta alumno expandida */
.alumno-card {
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--r);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .15s;
}
.alumno-card:hover { border-color: rgba(245,197,24,.25); }
.alumno-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  cursor: pointer;
}
.alumno-card-body {
  border-top: 1px solid var(--k-border);
  padding: 14px;
  display: none;
}
.alumno-card-body.open { display: block; }

/* Panel Padre — buscar transporte botón ancho */
.buscar-transporte-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  background: var(--k-yellow);
  color: #0E0F1A;
  border: none;
  border-radius: var(--r);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, transform .1s;
  margin-bottom: 16px;
}
.buscar-transporte-btn:active { transform: scale(0.98); }

/* Foto protegida */
.foto-protegida {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}
.foto-protegida img {
  pointer-events: none;
  -webkit-user-drag: none;
}
.foto-protegida::after {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
}

/* ── KOLE Fases 3 y 4 ── */

/* Onboarding overlay */
.onboarding-overlay {
  position: fixed; inset: 0;
  background: var(--k-bg);
  z-index: 500;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px;
}
.onboarding-step {
  display: none; text-align: center; max-width: 340px;
}
.onboarding-step.active { display: block; }
.onboarding-icon { font-size: 64px; margin-bottom: 20px; }
.onboarding-title { font-size: 22px; font-weight: 900; margin-bottom: 10px; }
.onboarding-desc { font-size: 14px; color: var(--k-muted); line-height: 1.7; margin-bottom: 28px; }
.onboarding-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; }
.onboarding-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--k-surface3); }
.onboarding-dot.active { background: var(--k-yellow); width: 24px; border-radius: 4px; }

/* Sistema de paradas */
.parada-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--r);
  margin-bottom: 8px;
  transition: border-color .15s;
}
.parada-item.activa {
  border-color: var(--k-yellow);
  background: rgba(245,197,24,.04);
}
.parada-item.completada {
  border-color: rgba(62,207,106,.3);
  background: rgba(62,207,106,.03);
}
.parada-linea {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  flex-shrink: 0; padding-top: 2px;
}
.parada-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--k-surface3);
  border: 2px solid var(--k-border);
  flex-shrink: 0;
}
.parada-dot.activa { background: var(--k-yellow); border-color: var(--k-yellow); animation: pulsar 1.5s infinite; }
.parada-dot.completada { background: var(--k-green); border-color: var(--k-green); }
.parada-conector { width: 2px; height: 24px; background: var(--k-border); margin: 2px auto; }
.parada-conector.completada { background: var(--k-green); }

/* Foto protegida */
.foto-wrap {
  position: relative;
  display: inline-block;
  user-select: none;
  -webkit-user-select: none;
}
.foto-wrap img {
  border-radius: 50%;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}
.foto-wrap .foto-shield {
  position: absolute; inset: 0;
  background: transparent;
  z-index: 1;
}

/* Calificación estrellas */
.star-picker { display: flex; gap: 6px; justify-content: center; }
.star-picker button {
  font-size: 32px; background: none; border: none;
  cursor: pointer; transition: transform .1s;
  line-height: 1;
}
.star-picker button:active { transform: scale(.9); }

/* Parada confirmación modal */
.parada-confirma {
  background: var(--k-surface2);
  border-radius: var(--r-sm);
  padding: 12px;
  margin-bottom: 10px;
}
.parada-confirma-titulo {
  font-size: 13px; font-weight: 700; margin-bottom: 8px;
}
.alumno-check {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--k-border);
  font-size: 13px;
}
.alumno-check:last-child { border: none; }
.check-btns { display: flex; gap: 6px; }

/* Emergencia btn */
.btn-emergencia {
  position: fixed;
  bottom: 90px; right: 18px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--k-red);
  color: #fff; font-size: 22px;
  border: none; cursor: pointer;
  box-shadow: 0 4px 20px rgba(239,68,68,.5);
  display: none;
  align-items: center; justify-content: center;
  z-index: 99;
  animation: pulsar 2s infinite;
}
.btn-emergencia.visible { display: flex; }

/* Notif permiso banner */
.notif-banner {
  background: rgba(59,130,246,.1);
  border-bottom: 1px solid rgba(59,130,246,.2);
  padding: 10px 18px;
  display: flex; align-items: center;
  justify-content: space-between;
  font-size: 12px; color: var(--k-blue);
}