/* ==========================================================================
   TlaryCar — estilos compartidos (tokens de diseño + componentes reutilizados
   por index.html, admin.html y conductor.html).

   Extraído verbatim del <style> que vivía en index.html el 24/08/2026, al
   dividir el frontend en páginas separadas por rol. Sin cambios visuales
   respecto al original — ver tlarycar.md / handoff en la bóveda para el
   contexto de esa decisión.
   ========================================================================== */
/* Fuente autoalojada (Inter — variable, cubre pesos 100-900 con un solo
   archivo). Antes se cargaba vía <link> a Google Fonts; se autoalojó para
   evitar el round-trip externo/bloqueante en producción, mismo criterio que
   ya se aplicaba a Manrope/Petrona. Adoptada en el rediseño que unifica el
   lenguaje visual de TlaryCar con el de Tlary (mismo dominio raíz), que usa
   Inter en su panel real (admin.tlary.net). */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/inter-variable.woff2') format('woff2');}

:root{
  --primary:#fc6a57;
  --primary-dark:#c43f2c;
  --primary-text:#d6472f;
  --primary-soft:rgba(252,106,87,.12);
  --accent:#e3a13a;
  --accent-dark:#c17f1f;
  --on-accent:#17130a;
  --bg:#f7f7f4;
  --card:#ffffff;
  --surface-2:#f0f0ec;
  --text:#1b1b18;
  --muted:#6b6b64;
  --border:#e3e3dd;
  --border-hover:#cfcfc6;
  --good:#1e8e4a;
  --good-bg:#e7f5ec;
  --bad:#d6453f;
  --bad-bg:#fbeae9;
  --warn-bg:#fff4e0;
  --warn-text:#a9660a;
  --warn-border:#f0d9a8;
  --star-filled:#f2b84b;
  --star-empty:#e2e1d9;
  --radius:18px;
  --radius-md:10px;
  --radius-sm:8px;
  --shadow-sm:0 1px 3px rgba(20,18,15,.08);
  --shadow-md:0 10px 26px rgba(20,18,15,.10);
  --shadow-lg:0 24px 56px rgba(20,18,15,.16);
  --font-display:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;}
a{color:inherit;}
::selection{background:var(--primary);color:#fff;}

/* ---------- Animación ---------- */
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
@keyframes overlayFade{from{opacity:0;}to{opacity:1;}}
@keyframes modalPop{from{opacity:0;transform:translateY(10px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes softPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
.hero{animation:fadeInUp .7s var(--ease-out) both;}
.card{animation:fadeInUp .5s var(--ease-out) both;}
.trip-card,.history-item,.booking-row,.notif-item,.doc-row{animation:fadeInUp .45s var(--ease-out) both;}
.panel.active>*{animation:fadeInUp .45s var(--ease-out) both;}
/* Entrada escalonada de listas (30-80ms entre elementos) */
.trip-card:nth-child(2),.history-item:nth-child(2),.booking-row:nth-child(2),.notif-item:nth-child(2),.doc-row:nth-child(2){animation-delay:40ms;}
.trip-card:nth-child(3),.history-item:nth-child(3),.booking-row:nth-child(3),.notif-item:nth-child(3),.doc-row:nth-child(3){animation-delay:80ms;}
.trip-card:nth-child(4),.history-item:nth-child(4),.booking-row:nth-child(4),.notif-item:nth-child(4),.doc-row:nth-child(4){animation-delay:120ms;}
.trip-card:nth-child(5),.history-item:nth-child(5),.booking-row:nth-child(5),.notif-item:nth-child(5),.doc-row:nth-child(5){animation-delay:160ms;}
.trip-card:nth-child(n+6),.history-item:nth-child(n+6),.booking-row:nth-child(n+6),.notif-item:nth-child(n+6),.doc-row:nth-child(n+6){animation-delay:200ms;}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}
/* Movimiento en :hover solo para punteros finos con hover real (evita hover "pegado" en táctil) */
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md);}
  .btn.accent:hover{background:var(--accent-dark);}
  .btn.ghost:hover{border-color:var(--primary);background:var(--primary-soft);box-shadow:none;transform:none;}
  .trip-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-hover);transform:translateY(-2px);}
  .pay-method-btn:hover{border-color:var(--border-hover);transform:translateY(-1px);}
  .notif-bell:hover{background:var(--primary-soft);transform:translateY(-1px);}
  .stars span:hover{transform:scale(1.15);}
}

header{background:rgba(255,255,255,.78);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);color:var(--text);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--border);}
.header-inner{max-width:1120px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.3px;color:var(--primary-text);}
.logo-mark{width:26px;height:26px;border-radius:8px;flex-shrink:0;display:block;}
nav{display:flex;gap:2px;background:var(--surface-2);padding:4px;border-radius:999px;border:1px solid var(--border);}
nav button,nav a.tab-btn{border:0;background:transparent;color:var(--muted);padding:9px 16px;border-radius:999px;cursor:pointer;font-size:13.5px;font-weight:700;transition:color .2s ease,background .2s ease;text-decoration:none;display:inline-block;}
nav button:hover,nav a.tab-btn:hover{color:var(--primary-text);}
nav button.active,nav a.tab-btn.active{background:var(--primary);color:#fff;box-shadow:var(--shadow-sm);}
@media(max-width:640px){
  .header-inner{padding:12px 14px;gap:8px;}
  .logo{font-size:18px;flex-shrink:0;}
  nav{min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
  nav::-webkit-scrollbar{display:none;}
  nav button,nav a.tab-btn{white-space:nowrap;flex-shrink:0;padding:9px 12px;font-size:12.5px;}
  .notif-wrap{flex-shrink:0;}
}
main{max-width:1120px;margin:0 auto;padding:32px 20px 88px;}
.hero{background:linear-gradient(160deg,var(--primary),var(--primary-dark));color:#fff;border-radius:var(--radius);padding:38px 36px;margin-bottom:26px;position:relative;overflow:hidden;}
.hero::after{content:'';position:absolute;top:-40%;right:-10%;width:60%;height:180%;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 65%);pointer-events:none;}
.hero h1{margin:0 0 8px;font-family:var(--font-body);font-weight:800;font-size:30px;letter-spacing:-.3px;text-wrap:balance;}
.hero p{margin:0;color:#fbe0da;font-size:14.5px;max-width:560px;line-height:1.6;}
.badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);color:#f1e6d8;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:5px 12px 5px 10px;border-radius:999px;margin-bottom:14px;border:1px solid rgba(255,255,255,.18);}
.panel{display:none;}
.panel.active{display:block;}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);}
.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;}
@media(max-width:820px){.grid2{grid-template-columns:1fr;}}
.search-form{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;margin-bottom:20px;}
@media(max-width:700px){.search-form{grid-template-columns:1fr 1fr;}}
label{display:block;font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:var(--radius-md);font-size:14px;background:var(--surface-2);font-family:inherit;color:var(--text);transition:border-color .18s ease,box-shadow .18s ease;}
input:hover,select:hover,textarea:hover{border-color:var(--border-hover);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
textarea{resize:vertical;min-height:64px;}
input[type="file"]{padding:8px 10px;font-size:12.5px;color:var(--muted);}
input[type="file"]::file-selector-button{background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;margin-right:10px;transition:background .15s ease,border-color .15s ease;}
input[type="file"]::file-selector-button:hover{background:var(--bg);border-color:var(--border-hover);}
.btn{background:var(--primary);color:#fff;border:0;padding:11px 20px;border-radius:999px;font-weight:700;cursor:pointer;font-size:14px;transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out),background .16s ease;box-shadow:var(--shadow-sm);}
.btn:active{transform:translateY(0) scale(.97);box-shadow:var(--shadow-sm);}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn.accent{background:var(--accent);color:var(--on-accent);}
.btn.ghost{background:var(--surface-2);color:var(--primary-text);border:1px solid var(--border);box-shadow:none;}
.btn.ghost.active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-text);}
.trip-card{border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin-bottom:12px;background:var(--card);transition:box-shadow .2s var(--ease-out),border-color .2s ease,transform .2s var(--ease-out);}
.trip-card h3{margin:0 0 4px;font-family:var(--font-body);font-weight:800;font-size:16px;text-wrap:balance;line-height:1.3;}
.stops{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.stop-chip{font-size:11px;background:var(--primary-soft);color:var(--primary-text);padding:3px 9px;border-radius:999px;font-weight:600;}
.seats{font-size:12px;font-weight:700;color:var(--good);}
.seats.low{color:var(--accent-dark);}
.price{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--primary-text);font-variant-numeric:tabular-nums;}
.driver-line{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:8px;}
.avatar{width:27px;height:27px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;}
.section-title{font-family:var(--font-body);font-size:17px;font-weight:800;margin:0 0 14px;color:var(--primary-text);text-wrap:balance;letter-spacing:-.1px;}
.map-wrap{background:var(--surface-2);border-radius:var(--radius-md);padding:14px;}
#mapCanvas{width:100%;height:320px;border-radius:var(--radius-sm);background:var(--surface-2);display:block;cursor:crosshair;touch-action:none;}
.map-legend{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-top:10px;flex-wrap:wrap;}
.legend-item{display:flex;align-items:center;gap:6px;}
.swatch{width:10px;height:10px;border-radius:50%;}
.msg{margin-top:10px;font-size:13px;padding:10px 12px;border-radius:var(--radius-sm);display:none;animation:fadeInUp .3s var(--ease-out) both;}
.msg.ok{background:var(--good-bg);color:var(--good);display:block;}
.msg.err{background:var(--bad-bg);color:var(--bad);display:block;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-grid .full{grid-column:1/-1;}
.form-row{margin-bottom:14px;}
.callout{background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:var(--radius-md);padding:14px 16px;font-size:13px;color:var(--warn-text);margin-top:16px;line-height:1.55;}
.pay-icons{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;}
.pay-pill{font-size:12px;background:var(--primary-soft);color:var(--primary-text);padding:6px 12px;border-radius:var(--radius-sm);font-weight:600;}
.legal-box{margin-bottom:18px;}
.legal-box h3{font-family:var(--font-body);font-weight:800;font-size:16px;color:var(--primary-text);margin:0 0 6px;}
.legal-box p{font-size:13px;color:var(--muted);line-height:1.65;margin:0;}
footer{text-align:center;padding:26px 20px;color:var(--muted);font-size:12px;border-top:1px solid var(--border);margin-top:20px;}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px;}
.pill{font-size:11px;background:var(--surface-2);padding:4px 10px;border-radius:999px;color:var(--muted);font-weight:600;}
.badge-new{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;background:var(--accent);color:var(--on-accent);padding:3px 8px;border-radius:999px;}

/* ---------- Layout de sidebar + vista "home" de tarjetas de acceso rápido
   (inspirado en el layout de platform.openai.com/home: sidebar de navegación
   con iconos + grid de tarjetas grandes, misma paleta pino+ámbar). Genérico
   para que index.html lo comparta con el patrón de sidebar que ya usaban
   admin.html/conductor.html (.admin-shell/.cond-shell). ---------- */
.app-shell{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start;}
.app-sidebar{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:10px;position:sticky;top:80px;}
.app-nav-btn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;border-left:3px solid transparent;background:transparent;color:var(--muted);padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;font-size:13.5px;font-weight:700;transition:background .15s ease,color .15s ease,border-color .15s ease;font-family:inherit;text-decoration:none;}
.app-nav-btn:hover{color:var(--primary-text);background:var(--surface-2);}
.app-nav-btn.active{color:var(--primary-text);background:var(--primary-soft);border-left-color:var(--primary);}
.app-nav-icon{font-size:15px;line-height:1;flex-shrink:0;opacity:.9;}
.app-content{min-width:0;}
@media(max-width:820px){
  .app-shell{grid-template-columns:1fr;}
  .app-sidebar{display:none;}
}
.home-hero{margin:0 0 22px;}
.home-hero h2{margin:0 0 4px;font-family:var(--font-body);font-weight:800;font-size:22px;letter-spacing:-.2px;text-wrap:balance;}
.home-hero p{margin:0;font-size:13.5px;color:var(--muted);}
.home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:28px;}
.home-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:20px;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit;text-decoration:none;transition:border-color .18s ease,transform .18s var(--ease-out),box-shadow .18s var(--ease-out);}
.home-card-icon{width:36px;height:36px;border-radius:10px;background:var(--primary-soft);color:var(--primary-text);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.home-card-title{font-size:14.5px;font-weight:800;color:var(--text);}
.home-card-desc{font-size:12.5px;color:var(--muted);line-height:1.5;}
.home-card:active{transform:scale(.98);}
@media (hover:hover) and (pointer:fine){
  .home-card:hover{border-color:var(--border-hover);transform:translateY(-2px);box-shadow:var(--shadow-md);}
}
@media(max-width:900px) and (min-width:641px){
  .home-grid{grid-template-columns:repeat(2,1fr);}
}

/* ---------- Estado de carga: skeletons (reemplazan "Cargando…" en texto
   plano en listas y stat tiles) ---------- */
@keyframes skeletonShimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:skeletonShimmer 1.6s ease-in-out infinite;border-radius:var(--radius-sm);display:block;}
.skeleton-text{height:12px;margin:6px 0;}
.skeleton-value{height:22px;width:64px;margin-top:2px;}
.skeleton-circle{width:32px;height:32px;border-radius:50%;flex-shrink:0;}
.skeleton-row{display:flex;align-items:center;gap:10px;padding:8px 0;}
@media(prefers-reduced-motion:reduce){
  .skeleton{animation:none;background:var(--surface-2);}
}

/* ---------- Estado vacío diseñado (ícono + mensaje + acción opcional) para
   listas sin datos — reemplaza párrafos sueltos de texto gris. ---------- */
.empty-state{text-align:center;padding:32px 16px;color:var(--muted);}
.empty-state svg{opacity:.55;margin-bottom:10px;}
.empty-state-title{font-size:13.5px;margin:0 0 4px;color:var(--text);font-weight:700;}
.empty-state-desc{font-size:12.5px;margin:0;}
.empty-state .btn{margin-top:14px;}

/* ---------- Acento visual por rol en el header (además del texto "· Admin"
   / "· Conductor" ya existente) — para distinguir de un vistazo en qué panel
   se está, sobre todo con varias pestañas abiertas. ---------- */
.role-badge{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:999px;margin-left:6px;vertical-align:1px;}
.role-badge.admin{background:var(--warn-bg);color:var(--warn-text);}
.role-badge.conductor{background:var(--primary-soft);color:var(--primary-text);}

/* ---------- Iconos de asientos (Fase 0, 22 ago 2026) ---------- */
.results-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.results-count{font-size:13.5px;font-weight:800;color:var(--text);}
.seat-legend{display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--muted);flex-wrap:wrap;}
.seat-legend .legend-item{display:inline-flex;align-items:center;gap:5px;}
.seat-legend .dot{width:11px;height:11px;border-radius:50%;display:inline-block;box-sizing:border-box;}
.seat-legend .dot.free{background:var(--good-bg);border:2px solid var(--good);}
.seat-legend .dot.occupied{background:var(--surface-2);border:2px solid var(--border);}
.seat-icons{display:flex;gap:4px;justify-content:flex-end;margin:6px 0 2px;}
.seat-icon{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;}
.seat-icon svg{width:11px;height:11px;}
.seat-icon.free{background:var(--good-bg);border:2px solid var(--good);color:var(--good);}
.seat-icon.occupied{background:var(--surface-2);border:2px solid var(--border);color:var(--muted);opacity:.75;}
.seats-label{font-size:11.5px;color:var(--muted);text-align:right;font-weight:700;}
.seats-label.low{color:var(--accent-dark);}
.seats-label.full{color:var(--bad);}

/* Perfil / verificación / admin */
.profile-header{display:flex;align-items:center;gap:16px;margin-bottom:22px;}
.avatar-lg{width:64px;height:64px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:23px;font-weight:600;flex-shrink:0;box-shadow:var(--shadow-sm);}
.profile-name{font-family:var(--font-body);font-size:19px;font-weight:800;margin:0 0 2px;text-wrap:balance;}
.profile-sub{font-size:13px;color:var(--muted);}
.subtabs{display:flex;gap:8px;margin-bottom:18px;border-bottom:1px solid var(--border);}
.subtab-btn{border:0;background:transparent;padding:10px 4px;margin-right:16px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:color .18s ease,border-color .18s ease;}
.subtab-btn:hover{color:var(--primary-text);}
.subtab-btn.active{color:var(--primary-text);border-bottom-color:var(--accent);}
.subpanel{display:none;}
.subpanel.active{display:block;}
.history-item{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--border);gap:12px;flex-wrap:wrap;}
.history-item:last-child{border-bottom:none;}
.history-route{font-weight:700;font-size:14px;}
.history-date{font-size:12px;color:var(--muted);}
.status-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;}
.status-completado{background:var(--good-bg);color:var(--good);}
.status-pendiente{background:var(--warn-bg);color:var(--warn-text);}
.status-cancelado{background:var(--bad-bg);color:var(--bad);}
.status-verificado{background:var(--good-bg);color:var(--good);}
.status-rechazado{background:var(--bad-bg);color:var(--bad);}
.status-activo{background:var(--good-bg);color:var(--good);}
.driver-active-trip{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;margin:4px 0 10px;}

/* ---------- Panel de administrador: tiles, columna lateral y gráfico (Fase 0) ---------- */
.admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:26px;}
.admin-stat-tile{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;}
.admin-stat-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-bottom:6px;}
.admin-stat-value{font-family:var(--font-display);font-size:26px;font-weight:600;color:var(--primary-text);font-variant-numeric:tabular-nums;}
.admin-grid{display:grid;grid-template-columns:1fr 260px;gap:22px;align-items:start;}
.admin-side{display:flex;flex-direction:column;gap:16px;}
.admin-side-box{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 18px;}
.online-driver-item{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:7px 0;border-bottom:1px solid var(--border);color:var(--text);}
.online-driver-item:last-child{border-bottom:none;}
.online-driver-item .muted{color:var(--muted);}
.online-dot{width:8px;height:8px;border-radius:50%;background:var(--good);flex-shrink:0;box-shadow:0 0 0 3px var(--good-bg);}
.weekly-chart{display:flex;align-items:flex-end;gap:6px;height:90px;margin-top:4px;}
.weekly-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;}
.weekly-bar{width:100%;max-width:22px;background:var(--primary);border-radius:4px 4px 0 0;min-height:3px;transition:height .3s var(--ease-out);}
.weekly-bar.today{background:var(--accent);}
.weekly-bar-label{font-size:10px;color:var(--muted);text-transform:uppercase;}
@media (max-width:760px){ .admin-grid{grid-template-columns:1fr;} }
.stars{display:inline-flex;gap:2px;cursor:pointer;}
.stars span{font-size:18px;color:var(--star-empty);transition:transform .12s var(--ease-out),color .12s ease;}
.stars span.filled{color:var(--star-filled);}
.stars.lg{gap:6px;justify-content:center;margin:14px 0;}
.stars.lg span{font-size:30px;}
.mini-rating{font-size:12px;color:var(--warn-text);font-weight:700;white-space:nowrap;}
.review-comment{font-size:12px;color:var(--muted);font-style:italic;margin-top:4px;}
.doc-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;}
.doc-row:last-child{border-bottom:none;}

/* ---------- Verificación guiada de conductor (Fase 1.5) ---------- */
.verif-steps{display:flex;gap:6px;margin-bottom:16px;}
.verif-step-dot{flex:1;height:4px;border-radius:2px;background:var(--border);transition:background .2s ease;}
.verif-step-dot.done{background:var(--good);}
.verif-step-dot.current{background:var(--primary);}
.verif-doc-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;margin-bottom:10px;}
.verif-doc-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:2px;}
.verif-doc-title{font-weight:700;font-size:13.5px;}
.verif-doc-body{font-size:12.5px;color:var(--muted);margin-top:6px;}
.verif-reject-reason{font-size:12px;color:var(--bad);margin-top:6px;}
.verif-doc-actions{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap;}
.verif-doc-actions input[type=file]{font-size:12px;max-width:210px;}
table.admin-table{width:100%;border-collapse:collapse;font-size:13px;}
table.admin-table th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:8px 10px;border-bottom:2px solid var(--border);}
table.admin-table td{padding:12px 10px;border-bottom:1px solid var(--border);vertical-align:middle;}
table.admin-table tr{transition:background .15s ease;}
table.admin-table tbody tr:hover{background:var(--surface-2);}
.btn.sm{padding:6px 12px;font-size:12px;}
.btn.lg{padding:15px 28px;font-size:16px;}
.btn.reject{background:var(--surface-2);color:var(--bad);border:1px solid var(--bad);box-shadow:none;}
.btn.reject:hover{background:var(--bad-bg);transform:none;box-shadow:none;}
.admin-actions{display:flex;gap:6px;}
.auth-divider{display:flex;align-items:center;gap:10px;margin:12px 0;color:var(--muted);font-size:12px;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border);}
#googleSignInBtn{min-height:40px;}
.btn.full{width:100%;}

/* ---------- Pantalla de login (gate) de index.html ---------- */
.gate-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 20px;}
.gate-logo{display:flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-display);font-weight:800;font-size:27px;letter-spacing:-.3px;color:var(--primary-text);margin-bottom:4px;}
.gate-logo .logo-mark{width:34px;height:34px;border-radius:10px;}
.gate-tagline{text-align:center;font-size:13px;color:var(--muted);margin:0 0 6px;}
.role-btn{display:flex;align-items:center;gap:12px;width:100%;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:11px 14px;text-align:left;cursor:pointer;background:var(--surface-2);color:var(--muted);transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s var(--ease-out);}
.role-btn:active{transform:scale(.98);}
.role-btn.active{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-text);}
@media (hover:hover) and (pointer:fine){ .role-btn:hover{border-color:var(--border-hover);} }
.role-btn-icon{font-size:20px;line-height:1;flex-shrink:0;}
.role-btn-text{display:flex;flex-direction:column;gap:1px;}
.role-btn-title{font-size:14px;font-weight:800;color:var(--text);}
.role-btn.active .role-btn-title{color:var(--primary-text);}
.role-btn-sub{font-size:11.5px;font-weight:500;color:var(--muted);}
.gate-google{display:flex;justify-content:center;min-height:40px;margin-top:2px;}
/* Botón de Google dentro de la app Android. En el navegador este espacio lo
   ocupa el botón que renderiza Google Identity Services; dentro de la app se
   usa el selector de cuentas nativo (ver initNativeGoogleSignIn en index.html),
   así que el botón lo dibujamos nosotros. Se imita el estilo oficial de Google
   (fondo blanco, texto gris oscuro, logo) para que el conductor lo reconozca
   igual que en el sitio, en vez de un botón verde que no parece "de Google". */
.btn-google-native{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:280px;max-width:100%;background:#fff;color:#3c4043;border:1px solid #dadce0;box-shadow:none;font-family:var(--font-body);font-size:14px;font-weight:600;}
.btn-google-native::before{content:'';width:18px;height:18px;flex:0 0 18px;background-repeat:no-repeat;background-size:18px 18px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24s.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E");}
.btn-google-native:disabled{opacity:.6;cursor:default;}
.gate-register-toggle{text-align:center;margin:14px 0 2px;}
.gate-toggle-link{background:none;border:0;color:var(--primary-text);font-size:12.5px;font-weight:700;cursor:pointer;padding:4px 0;text-decoration:underline;}

/* Notificaciones */
.notif-wrap{position:relative;}
.notif-bell{background:var(--surface-2);border:0;color:var(--primary);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:16px;position:relative;display:flex;align-items:center;justify-content:center;transition:background .18s ease,transform .18s var(--ease-out);}
.notif-count{position:absolute;top:-2px;right:-2px;background:var(--accent);color:var(--on-accent);font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:999px;display:none;align-items:center;justify-content:center;padding:0 3px;animation:softPulse 1.8s ease-in-out infinite;}
.notif-count.show{display:flex;}
.notif-dropdown{display:none;position:absolute;top:46px;right:0;width:320px;max-height:380px;overflow:auto;background:var(--card);color:var(--text);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:60;border:1px solid var(--border);transform-origin:top right;}
.notif-dropdown.open{display:block;animation:modalPop .22s var(--ease-out) both;}
.notif-dropdown-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);font-size:13px;font-weight:800;}
.notif-dropdown-head button{background:none;border:0;color:var(--primary-text);font-size:11px;font-weight:700;cursor:pointer;}
.notif-item{padding:10px 14px;border-bottom:1px solid var(--border);font-size:12.5px;cursor:pointer;transition:background .15s ease;}
.notif-item:hover{background:var(--surface-2);}
.notif-item:last-child{border-bottom:none;}
.notif-item.unread{background:var(--primary-soft);}
.notif-item .notif-title{font-weight:700;margin-bottom:2px;}
.notif-item .notif-date{color:var(--muted);font-size:11px;margin-top:3px;}
.notif-empty{padding:20px 14px;font-size:12.5px;color:var(--muted);text-align:center;}

/* Modal de reserva */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(8,12,9,.68);backdrop-filter:blur(6px);align-items:center;justify-content:center;z-index:100;padding:16px;}
.modal-overlay.open{display:flex;animation:overlayFade .2s var(--ease-out) both;}
.modal-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:26px;max-width:420px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow-lg);animation:modalPop .28s var(--ease-out) both;}
.modal-box h3{margin:0 0 4px;font-family:var(--font-body);font-weight:800;font-size:19px;color:var(--primary-text);text-wrap:balance;}
.modal-box .modal-sub{font-size:12.5px;color:var(--muted);margin:0 0 16px;}
.modal-trip-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;margin:0 0 16px;}
.modal-trip-summary .route{font-size:13px;font-weight:700;color:var(--text);}
.modal-trip-summary .when{font-size:11.5px;color:var(--muted);margin-top:2px;}
.modal-trip-summary .price{font-size:18px;}
.pay-method-row{display:flex;gap:10px;margin:6px 0 4px;}
.pay-method-btn{position:relative;flex:1;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:14px 10px;text-align:center;cursor:pointer;background:var(--surface-2);font-size:13px;font-weight:700;color:var(--text);transition:border-color .16s ease,background .16s ease,transform .16s var(--ease-out);}
.pay-method-btn.selected{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-text);}
.pay-method-btn.selected::after{content:'';position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;background:var(--primary);border:2px solid var(--card);}
.pay-method-btn:active{transform:scale(.97);}

/* Menú hamburguesa móvil para el sidebar de secciones de admin.html/conductor.html
   (Mejora 4, "4 mejoras" post-lanzamiento) — oculto en escritorio. */
.sidebar-hamburger{display:none;background:var(--surface-2);border:1px solid var(--border);color:var(--primary-text);width:38px;height:38px;border-radius:50%;cursor:pointer;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
@media(max-width:820px){
  .sidebar-hamburger{display:flex;}
}
.sidebar-drawer-overlay{justify-content:flex-start;align-items:stretch;padding:0;}
.sidebar-drawer{background:var(--card);width:250px;max-width:82vw;height:100%;padding:78px 10px 16px;overflow-y:auto;border:0;border-right:1px solid var(--border);border-radius:0;box-shadow:var(--shadow-lg);transform:translateX(-100%);transition:transform .3s var(--ease-drawer);display:flex;flex-direction:column;gap:2px;}
.sidebar-drawer-overlay.open .sidebar-drawer{transform:translateX(0);}
@media(prefers-reduced-motion:reduce){
  .sidebar-drawer{transition:none;}
}
.cash-warning{display:none;background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:var(--radius-md);padding:12px 14px;font-size:12.5px;color:var(--warn-text);margin-top:14px;line-height:1.5;}
.cash-warning.show{display:block;animation:fadeInUp .25s var(--ease-out) both;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;}

/* Panel de reservas del conductor */
.driver-bookings{display:none;margin-top:10px;padding:12px 14px;background:var(--surface-2);border-radius:var(--radius-md);border:1px solid var(--border);}
.driver-bookings.open{display:block;animation:fadeInUp .3s var(--ease-out) both;}
.booking-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);flex-wrap:wrap;font-size:12.5px;}
.booking-row:last-child{border-bottom:none;}
.booking-actions{display:flex;gap:6px;flex-wrap:wrap;}
.pay-tag{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--primary-soft);color:var(--primary-text);}
.pay-tag.cash-unpaid{background:var(--warn-bg);color:var(--warn-text);}
.pay-tag.cash-paid{background:var(--good-bg);color:var(--good);}
.waitlist-mini{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);font-size:12px;color:var(--muted);}

/* Billetera TlaryCar (Fase 1.1) */
.wallet-balance-box{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 20px;margin-bottom:16px;}
.wallet-balance-label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.wallet-balance-amount{font-size:26px;font-weight:800;color:var(--primary-text);font-variant-numeric:tabular-nums;margin-top:2px;}
.wallet-tx-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);}
.wallet-tx-item:last-child{border-bottom:none;}
.wallet-tx-reason{font-size:13.5px;font-weight:700;}
.wallet-tx-date{font-size:11.5px;color:var(--muted);margin-top:2px;}
.wallet-tx-amount{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;}
.wallet-tx-amount.credito{color:var(--good);}
.wallet-tx-amount.debito{color:var(--bad);}
.wallet-tx-pending{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--warn-bg);color:var(--warn-text);margin-left:8px;}

/* Chat del viaje (Fase 1.2) */
.chat-unread-badge{font-size:10.5px;font-weight:800;background:var(--accent);color:var(--on-accent);min-width:16px;height:16px;padding:0 5px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;margin-left:6px;animation:softPulse 1.8s ease-in-out infinite;}
.chat-messages-box{display:flex;flex-direction:column;gap:8px;max-height:320px;min-height:120px;overflow-y:auto;padding:4px 2px;margin-top:10px;}
.chat-bubble{max-width:82%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.42;word-wrap:break-word;}
.chat-bubble .chat-sender{font-size:11px;font-weight:700;color:var(--primary-text);margin-bottom:2px;}
.chat-bubble .chat-time{font-size:10px;color:var(--muted);margin-top:3px;text-align:right;}
.chat-bubble.mine{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:4px;}
.chat-bubble.mine .chat-time{color:rgba(255,255,255,.75);}
.chat-bubble.theirs{align-self:flex-start;background:var(--surface-2);border:1px solid var(--border);border-bottom-left-radius:4px;}
.chat-empty{font-size:12.5px;color:var(--muted);text-align:center;padding:24px 10px;}
.chat-input-row{display:flex;gap:8px;margin-top:6px;}
.chat-input-row input{flex:1;}

/* ---------- Pantalla de bienvenida (splash) ---------- */
.splash-screen{position:fixed;inset:0;z-index:500;background:linear-gradient(160deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;transition:opacity .5s ease, visibility 0s linear .5s;}
.splash-screen.hide{opacity:0;visibility:hidden;pointer-events:none;}
.splash-logo{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:800;font-size:34px;color:#fff;letter-spacing:-.3px;opacity:0;transform:translateY(10px) scale(.97);animation:splashIn .6s var(--ease-out) .1s both;}
.splash-logo .logo-mark{width:44px;height:44px;border-radius:13px;animation:softPulse 1.6s ease-in-out .7s infinite;}
@keyframes splashIn{to{opacity:1;transform:translateY(0) scale(1);}}
@media(prefers-reduced-motion:reduce){
  .splash-screen{transition:opacity .01s linear, visibility 0s linear .01s;}
  .splash-logo{animation:none;opacity:1;transform:none;}
  .splash-logo .logo-mark{animation:none;}
}

/* ---------- Avisos (toasts) — reemplazan window.alert() ---------- */
.toast-stack{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column-reverse;gap:8px;width:min(420px,92vw);pointer-events:none;}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;background:var(--primary-dark);color:#fff;padding:12px 14px;border-radius:var(--radius-md);font-size:13.5px;line-height:1.45;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(10px);transition:opacity .28s ease, transform .28s var(--ease-out);}
.toast.show{opacity:1;transform:translateY(0);}
.toast.error{background:var(--bad);color:var(--on-accent);}
.toast.success{background:var(--good);color:var(--on-accent);}
.toast-msg{flex:1;}
.toast-close{flex-shrink:0;background:rgba(0,0,0,.14);border:0;color:inherit;width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .15s ease;}
.toast-close:hover{background:rgba(0,0,0,.26);}
@media(prefers-reduced-motion:reduce){
  .toast{transition:opacity .2s ease;}
}

/* ---------- Estado de carga en botones ---------- */
.btn.is-loading{color:transparent !important;pointer-events:none;position:relative;}
.btn.is-loading::after{content:'';position:absolute;top:50%;left:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:btnSpin .7s linear infinite;}
.btn.ghost.is-loading::after{border-color:rgba(31,61,51,.25);border-top-color:var(--primary);}
@keyframes btnSpin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){
  .btn.is-loading::after{animation-duration:1.4s;}
}

/* ---------- Foco visible en controles sin :focus-visible propio ---------- */
nav button:focus-visible, .subtab-btn:focus-visible, .tab-btn:focus-visible,
.stars span:focus-visible, .notif-bell:focus-visible, .pay-method-btn:focus-visible,
.toast-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}
input:focus-visible, select:focus-visible, textarea:focus-visible{outline:none;}

/* ---------- Fondo animado ---------- */
#bgCanvas{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;background:var(--bg);}