/* ================================================================
   Autobooking Driver Dashboard — CSS v2.0.0
   Basado EXACTAMENTE en el CSS de "Driver Dashboard Original"
   (página WP ID 1135 — <style> blocks del post_content)

   Variables canónicas (copiadas literal del original):
     --ab-orange   : #FF6F00
     --ab-orange-600: #e86500
     --ab-dark     : #0b0b0b
     --ab-glass    : rgba(17,17,17,.45)
     --ab-glass-border: rgba(255,255,255,.18)
     --ab-text     : #fff
   ================================================================ */

/* ── 0. Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── 1. Variables — IDÉNTICAS al Driver Dashboard Original ──── */
:root {
  /* === AutoBooking · Theme unificado (Customer + Driver) ===
     Copiado exacto del bloque 2 del post_content original     */
  --ab-orange       : #FF6F00;
  --ab-orange-600   : #e86500;
  --ab-dark         : #0b0b0b;
  --ab-glass        : rgba(17,17,17,.45);
  --ab-glass-border : rgba(255,255,255,.18);
  --ab-text         : #fff;

  /* Del bloque 1 del original */
  --ab-green        : #22C55E;
  --ab-green-ring   : rgba(34,197,94,.28);

  /* Extensiones necesarias para el plugin (mismo lenguaje visual) */
  --ab-red          : #ef4444;
  --ab-yellow       : #f59e0b;
  --ab-blue         : #3b82f6;
  --ab-gray         : #374151;
  --ab-radius       : 12px;
  --ab-radius-lg    : 16px;
}

/* ── 2. Contenedor raíz del plugin ──────────────────────────── */
#abd-app {
  background             : var(--ab-dark);
  color                  : var(--ab-text);
  font-family            : system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size              : 15px;
  line-height            : 1.4;
  min-height             : 100vh;
  position               : relative;
  -webkit-font-smoothing : antialiased;
}

/* ── 3. Botones base — COPIADO EXACTO del original (bloque 2) ─ */
.ab-btn {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  font            : 800 16px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  letter-spacing  : .3px;
  text-transform  : uppercase;
  padding         : 12px 18px;
  border-radius   : var(--ab-radius);
  cursor          : pointer;
  border          : 2px solid transparent;
  transition      : .15s ease;
  box-shadow      : 0 2px 10px rgba(0,0,0,.12);
  text-decoration : none;
  white-space     : nowrap;
}
.ab-btn:active        { transform: translateY(1px) }
.ab-btn[disabled],
.ab-btn:disabled      { opacity: .7; cursor: progress }

/* Variantes exactas del original */
.ab-btn--brand        { background: var(--ab-orange); color: #fff }
.ab-btn--brand:hover  { background: var(--ab-orange-600) }
.ab-btn--ghost        { background: #374151; color: #fff }
.ab-btn--ghost:hover  { background: #4b5563 }
.ab-btn--danger       { background: #ef4444; color: #fff }
.ab-btn--danger:hover { background: #dc2626 }
.ab-btn--success      { background: var(--ab-green); color: #111 }
.ab-btn--success:hover{ background: #16a34a; color: #fff }

/* Del bloque 1 original */
.ab-orange            { background: var(--ab-orange); color: #fff }
.ab-orange:hover      { filter: brightness(1.05) }
.ab-green {
  background  : var(--ab-green);
  border-color: var(--ab-green);
  color       : #fff;
  box-shadow  : 0 0 0 3px var(--ab-green-ring), 0 2px 12px rgba(34,197,94,.32);
}
.ab-green:hover { filter: brightness(1.04) }

/* Alias .abd-btn = mismo estilo que .ab-btn */
.abd-btn {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  font            : 800 16px/1 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  letter-spacing  : .3px;
  text-transform  : uppercase;
  padding         : 12px 18px;
  border-radius   : var(--ab-radius);
  cursor          : pointer;
  border          : 2px solid transparent;
  transition      : .15s ease;
  box-shadow      : 0 2px 10px rgba(0,0,0,.12);
  text-decoration : none;
  white-space     : nowrap;
}
.abd-btn:active        { transform: translateY(1px) }
.abd-btn:disabled      { opacity: .7; cursor: progress }
.abd-btn--brand        { background: var(--ab-orange); color: #fff }
.abd-btn--brand:hover  { background: var(--ab-orange-600) }
.abd-btn--ghost        { background: #374151; color: #fff }
.abd-btn--ghost:hover  { background: #4b5563 }
.abd-btn--danger       { background: #ef4444; color: #fff }
.abd-btn--success      { background: var(--ab-green); color: #111 }
.abd-btn--sm           { padding: 8px 12px; font-size: 13px; border-radius: 8px }
.abd-btn--wide         { width: 100% }

/* ── 4. Badges — del original ───────────────────────────────── */
.ab-badge       { display: inline-block; padding: 4px 8px; border-radius: 999px;
                  font-weight: 700; font-size: 12px }
.ab-badge--warn { background: #ef4444; color: #fff }

.abd-badge         { display: inline-flex; align-items: center; justify-content: center;
                     padding: 3px 8px; border-radius: 999px; font-weight: 700; font-size: 11px }
.abd-badge--orange { background: var(--ab-orange); color: #fff }
.abd-badge--green  { background: var(--ab-green); color: #111 }
.abd-badge--red    { background: var(--ab-red); color: #fff }
.abd-badge--yellow { background: var(--ab-yellow); color: #111 }
.abd-badge--unread { background: var(--ab-red); color: #fff; min-width: 20px;
                     text-align: center }

/* ── 5. Glassmorphism card — del original ───────────────────── */
/* Original: #route-suggestion{ background:var(--ab-glass) !important;
                                 border-color:var(--ab-glass-border) !important; } */
.abd-glass-card {
  background             : var(--ab-glass);
  border                 : 1px solid var(--ab-glass-border);
  backdrop-filter        : blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius          : var(--ab-radius-lg);
  padding                : 16px;
  margin-bottom          : 12px;
  color                  : var(--ab-text);
}

/* Faja degradada — del original: tcw-info y tcw-steps */
/* background:linear-gradient(to right, rgba(0,0,0,.35), rgba(0,0,0,.15));
   border:1px solid var(--ab-glass-border); border-radius:12px; padding:10px */
.abd-glass-gradient {
  background   : linear-gradient(to right, rgba(0,0,0,.35), rgba(0,0,0,.15));
  border       : 1px solid var(--ab-glass-border);
  border-radius: var(--ab-radius);
  padding      : 10px;
  margin-top   : 10px;
}

/* ── 6. Loader inicial ──────────────────────────────────────── */
#abd-init-loader {
  position        : fixed;
  inset           : 0;
  background      : var(--ab-dark);
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
  gap             : 16px;
  z-index         : 900;
  transition      : opacity .3s ease;
}
#abd-init-loader.abd-hidden { opacity: 0; pointer-events: none }
.abd-spinner {
  width        : 44px;
  height       : 44px;
  border       : 4px solid rgba(255,255,255,.1);
  border-top-color: var(--ab-orange);
  border-radius: 50%;
  animation    : abd-spin .8s linear infinite;
}
.abd-loader-text {
  color          : rgba(255,255,255,.35);
  font-size      : 12px;
  text-transform : uppercase;
  letter-spacing : .1em;
}
@keyframes abd-spin { to { transform: rotate(360deg) } }

/* ── 7. SOS banner activo (fijo arriba, rojo pulsante) ──────── */
#abd-sos-badge {
  position     : fixed;
  top          : 0; left: 0; right: 0;
  background   : #ef4444;
  color        : #fff;
  text-align   : center;
  padding      : 10px 16px;
  font-weight  : 900;
  font-size    : 13px;
  letter-spacing: .06em;
  z-index      : 800;
  animation    : abd-pulse-bg 1s ease-in-out infinite;
  display      : flex;
  align-items  : center;
  justify-content: center;
  gap          : 12px;
}
.abd-sos-stop-btn {
  background   : rgba(0,0,0,.3);
  border       : 1px solid rgba(255,255,255,.4);
  color        : #fff;
  border-radius: 6px;
  padding      : 4px 10px;
  font-size    : 12px;
  font-weight  : 700;
  cursor       : pointer;
}
@keyframes abd-pulse-bg {
  0%,100% { background: #ef4444 }
  50%     { background: #b91c1c }
}

/* ── 8. Header ──────────────────────────────────────────────── */
.abd-header {
  background             : var(--ab-glass);
  border-bottom          : 1px solid var(--ab-glass-border);
  backdrop-filter        : blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding                : 12px 16px;
  display                : flex;
  align-items            : center;
  justify-content        : space-between;
  gap                    : 12px;
  position               : sticky;
  top                    : 0;
  z-index                : 100;
}
.abd-header-left {
  display    : flex;
  align-items: center;
  gap        : 10px;
  min-width  : 0;
  flex       : 1;
}
/* Foto conductor — del original inline: border-radius:12px; background:#00000033 */
.abd-avatar {
  width        : 52px;
  height       : 52px;
  border-radius: 12px;
  object-fit   : cover;
  background   : #00000033;
  flex-shrink  : 0;
  border       : 2px solid var(--ab-orange);
}
.abd-driver-name  { font-size: 15px; font-weight: 800;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.abd-driver-plate { font-size: 12px; color: rgba(255,255,255,.45);
                    margin-top: 2px; white-space: nowrap }
.abd-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0 }

/* Badge online/offline */
.abd-status-badge {
  font-size    : 12px;
  font-weight  : 700;
  padding      : 4px 10px;
  border-radius: 999px;
  white-space  : nowrap;
  transition   : .15s ease;
}
.abd-status-badge.online {
  background  : rgba(34,197,94,.15);
  color       : var(--ab-green);
  border      : 1px solid rgba(34,197,94,.3);
}
.abd-status-badge.offline {
  background  : rgba(255,255,255,.06);
  color       : rgba(255,255,255,.35);
  border      : 1px solid var(--ab-glass-border);
}

/* Toggle pill (conectar/desconectar) */
.abd-toggle-wrap { display: flex; align-items: center; gap: 8px }
label.abd-toggle { position: relative; width: 52px; height: 28px; cursor: pointer; flex-shrink: 0 }
label.abd-toggle input { display: none }
.abd-toggle-track {
  position     : absolute;
  inset        : 0;
  background   : rgba(255,255,255,.1);
  border       : 1px solid var(--ab-glass-border);
  border-radius: 999px;
  transition   : background .2s, border-color .2s;
}
label.abd-toggle input:checked ~ .abd-toggle-track {
  background   : var(--ab-orange);
  border-color : var(--ab-orange-600);
}
.abd-toggle-thumb {
  position     : absolute;
  top          : 3px; left: 3px;
  width        : 20px; height: 20px;
  background   : #fff;
  border-radius: 50%;
  transition   : transform .2s;
  box-shadow   : 0 1px 4px rgba(0,0,0,.4);
}
label.abd-toggle input:checked ~ .abd-toggle-track .abd-toggle-thumb {
  transform: translateX(24px);
}

/* ── 9. Toast ───────────────────────────────────────────────── */
#abd-toast {
  position      : fixed;
  top           : 74px; left: 50%;
  transform     : translateX(-50%) translateY(-6px);
  background    : var(--ab-glass);
  border        : 1px solid var(--ab-glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color         : #fff;
  padding       : 10px 20px;
  border-radius : 10px;
  font-size     : 14px;
  font-weight   : 600;
  z-index       : 600;
  opacity       : 0;
  pointer-events: none;
  transition    : opacity .25s, transform .25s;
  white-space   : nowrap;
  max-width     : calc(100vw - 32px);
  border-left   : 3px solid var(--ab-orange);
}
#abd-toast.show       { opacity: 1; transform: translateX(-50%) translateY(0) }
#abd-toast.toast-ok   { border-left-color: var(--ab-green) }
#abd-toast.toast-err  { border-left-color: var(--ab-red) }

/* ── 10. Tabs de navegación ─────────────────────────────────── */
.abd-tabs {
  display                   : flex;
  overflow-x                : auto;
  scrollbar-width           : none;
  background                : rgba(0,0,0,.35);
  border-bottom             : 1px solid var(--ab-glass-border);
  position                  : sticky;
  top                       : 64px;
  z-index                   : 90;
  -webkit-overflow-scrolling: touch;
}
.abd-tabs::-webkit-scrollbar { display: none }
.abd-tab {
  flex-shrink      : 0;
  padding          : 12px 16px;
  background       : none;
  border           : none;
  border-bottom    : 3px solid transparent;
  color            : rgba(255,255,255,.35);
  font-size        : 12px;
  font-weight      : 800;
  letter-spacing   : .05em;
  text-transform   : uppercase;
  cursor           : pointer;
  transition       : .15s ease;
  white-space      : nowrap;
}
.abd-tab:hover           { color: rgba(255,255,255,.65) }
.abd-tab.abd-tab--active { color: var(--ab-orange); border-bottom-color: var(--ab-orange) }

/* ── 11. Panels ─────────────────────────────────────────────── */
.abd-panel {
  padding   : 12px;
  min-height: 200px;
}
.abd-card-title {
  font-size    : 11px;
  font-weight  : 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color        : var(--ab-orange);
  margin-bottom: 12px;
}

/* ── 12. Mapa — del original ────────────────────────────────── */
/* Del original: #driver-map-wrap */
#abd-map-wrap {
  position     : relative;
  border-radius: var(--ab-radius-lg);
  overflow     : hidden;
  margin-bottom: 12px;
  box-shadow   : 0 4px 24px rgba(0,0,0,.45);
}
#abd-map {
  width      : 100%;
  height     : 280px;
  display    : block;
  background : #0d1520;
}
/* Del original: #route-suggestion{ background:var(--ab-glass)!important;
                                      border-color:var(--ab-glass-border)!important } */
#abd-route-banner {
  position               : absolute;
  top                    : 12px; left: 12px; right: 12px;
  background             : var(--ab-glass);
  border                 : 1px solid var(--ab-glass-border);
  backdrop-filter        : blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius          : var(--ab-radius);
  padding                : 10px 14px;
  display                : flex;
  align-items            : center;
  justify-content        : space-between;
  gap                    : 8px;
  font-size              : 13px;
  font-weight            : 600;
  z-index                : 10;
}
.abd-route-btns { display: flex; gap: 8px; flex-shrink: 0 }
/* Botones Mantener/Aceptar — estilos inline del original */
#btn-keep-route {
  background : #374151; color: #fff; border: none;
  border-radius: 8px; padding: 8px 12px; cursor: pointer; font-weight: 600;
}
#btn-accept-route {
  background : #22c55e; color: #111; border: none;
  border-radius: 8px; padding: 8px 12px; cursor: pointer; font-weight: 700;
}
/* Del original: #gps-badge{ background:var(--ab-glass)!important;
                              border-color:var(--ab-glass-border)!important } */
#abd-theme-switcher {
  position: absolute; bottom: 10px; left: 10px;
  display: flex; gap: 4px; z-index: 10;
}
.abd-theme-btn {
  background: rgba(15,15,20,0.82);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 5px; color: #aaa;
  font-size: 10px; font-weight: 600;
  padding: 3px 8px; cursor: pointer;
  backdrop-filter: blur(6px); transition: all 0.15s;
}
.abd-theme-btn:hover { background: rgba(30,30,40,0.9); color: #eee; }
.abd-theme-btn.active {
  background: rgba(255,111,0,0.25);
  border-color: rgba(255,111,0,0.6); color: #FF6F00;
}

#abd-gps-badge {
  position               : absolute;
  bottom                 : 10px; right: 10px;
  background             : var(--ab-glass);
  border                 : 1px solid var(--ab-glass-border);
  backdrop-filter        : blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius          : 8px;
  padding                : 5px 10px;
  font-size              : 11px;
  font-weight            : 600;
  color                  : rgba(255,255,255,.65);
  z-index                : 10;
  letter-spacing         : .03em;
}
/* Overlay offline sobre el mapa */
.abd-map-offline {
  position               : absolute;
  inset                  : 0;
  background             : rgba(0,0,0,.72);
  backdrop-filter        : blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display                : flex;
  flex-direction         : column;
  align-items            : center;
  justify-content        : center;
  gap                    : 10px;
  color                  : rgba(255,255,255,.45);
  transition             : opacity .3s;
  z-index                : 5;
}
.abd-map-offline.hidden    { opacity: 0; pointer-events: none }
.abd-map-offline-icon      { font-size: 40px; line-height: 1 }
.abd-map-offline-text      { font-size: 14px; text-align: center; padding: 0 24px }

/* ── 13. Trip card (del original .tcw-*) ────────────────────── */
#abd-trip-card {
  background             : var(--ab-glass);
  border                 : 1px solid var(--ab-glass-border);
  backdrop-filter        : blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius          : var(--ab-radius-lg);
  padding                : 16px;
  margin-bottom          : 12px;
}

/* Sin viaje — .tcw-client del original */
#abd-no-trip        { text-align: center; padding: 16px 0 }
/* foto del conductor — inline style del original: border-radius:12px; background:#00000033 */
#abd-driver-avatar-trip {
  width        : 64px; height: 64px;
  border-radius: 12px;
  object-fit   : cover;
  background   : #00000033;
  border       : 2px solid var(--ab-orange);
  margin-bottom: 8px;
}
#abd-driver-name-trip    { font-size: 17px; font-weight: 800; margin-bottom: 4px }
#abd-driver-rating-trip  { color: var(--ab-orange); font-weight: 700; margin-bottom: 4px }
#abd-driver-vehicle-trip { font-size: 13px; color: rgba(255,255,255,.4); margin-bottom: 12px }
#abd-no-trip p           { font-size: 14px; color: rgba(255,255,255,.4); margin-top: 8px }

/* Viaje activo — info del pasajero */
.abd-passenger-info { display: flex; align-items: center; gap: 12px; margin-bottom: 12px }
/* foto pasajero — inline style del original: width:52px;height:52px;border-radius:10px;background:#00000033;display:none */
#abd-pass-photo {
  width        : 52px; height: 52px;
  border-radius: 10px;
  object-fit   : cover;
  background   : #00000033;
  flex-shrink  : 0;
  display      : none;
}
.abd-pass-name  { font-size: 18px; font-weight: 700 }
.abd-pass-label { font-size: 11px; color: rgba(255,255,255,.35);
                  text-transform: uppercase; letter-spacing: .06em }

/* Info viaje — del original: .tcw-info con faja degradada */
.abd-trip-info {
  background   : linear-gradient(to right, rgba(0,0,0,.35), rgba(0,0,0,.15));
  border       : 1px solid var(--ab-glass-border);
  border-radius: var(--ab-radius);
  padding      : 10px;
  margin-top   : 10px;
  font-size    : 14px;
  line-height  : 1.4;
}
.abd-trip-info-row {
  display         : flex;
  justify-content : space-between;
  margin          : 2px 0;
}
.abd-trip-info-row span { color: rgba(255,255,255,.45) }
.abd-trip-info-row b    { font-weight: 700; color: #fff }

/* Instrucciones — del original: .tcw-steps con faja degradada */
.abd-trip-instructions {
  background   : linear-gradient(to right, rgba(0,0,0,.35), rgba(0,0,0,.15));
  border       : 1px solid var(--ab-glass-border);
  border-radius: var(--ab-radius);
  padding      : 10px;
  margin-top   : 10px;
  font-size    : 14px;
  line-height  : 1.35;
  color        : rgba(255,255,255,.8);
}

/* Botones de acción — del original: .tcw-actions{display:flex;gap:8px;flex-wrap:wrap} */
.abd-trip-actions {
  display       : flex;
  flex-direction: column;
  gap           : 8px;
  margin-top    : 12px;
}
.abd-trip-actions .ab-btn,
.abd-trip-actions .abd-btn { width: 100% }

/* Countdown cortesía — del original: .tcw-count{font-weight:800;letter-spacing:.5px} */
#abd-courtesy-timer {
  margin-top    : 8px;
  font-weight   : 800;
  letter-spacing: .5px;
  color         : var(--ab-yellow);
  text-align    : center;
  font-size     : 15px;
}

/* ── 14. SOS button (durante viaje activo) ──────────────────── */
.abd-sos-btn {
  width         : 100%;
  background    : #ef4444;
  color         : #fff;
  border        : none;
  border-radius : var(--ab-radius);
  padding       : 14px;
  font          : 900 15px/1 system-ui,-apple-system,Arial,sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor        : pointer;
  margin-top    : 8px;
  animation     : abd-sos-pulse 2s ease-in-out infinite;
  transition    : .15s ease;
}
.abd-sos-btn:hover  { background: #dc2626 }
.abd-sos-btn:active { transform: translateY(1px) }
@keyframes abd-sos-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.5) }
  50%     { box-shadow: 0 0 0 10px rgba(239,68,68,0) }
}

/* ── 15. Zone alert card ────────────────────────────────────── */
#abd-zone-card {
  background             : var(--ab-glass);
  border                 : 1px solid var(--ab-glass-border);
  backdrop-filter        : blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius          : var(--ab-radius-lg);
  padding                : 14px 16px;
  margin-bottom          : 12px;
  border-left            : 4px solid var(--ab-orange);
}
.abd-zone-title   { font-weight: 800; font-size: 15px; margin-bottom: 4px }
.abd-zone-desc    { font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 10px }
.abd-zone-timer   { font-size: 12px; color: var(--ab-yellow); font-weight: 700;
                    margin-bottom: 10px; letter-spacing: .04em }
.abd-zone-actions { display: flex; gap: 8px }
.abd-zone-actions .abd-btn { flex: 1 }

/* ── 16. Chat ───────────────────────────────────────────────── */
#abd-chat {
  background             : var(--ab-glass);
  border                 : 1px solid var(--ab-glass-border);
  backdrop-filter        : blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius          : var(--ab-radius-lg);
  overflow               : hidden;
  margin-bottom          : 12px;
}
.abd-chat-header {
  display     : flex;
  align-items : center;
  gap         : 8px;
  padding     : 10px 14px;
  border-bottom: 1px solid var(--ab-glass-border);
  font-size   : 12px;
  font-weight : 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color       : var(--ab-orange);
  cursor      : pointer;
  user-select : none;
}
.abd-chat-collapse {
  margin-left : auto;
  background  : none;
  border      : none;
  color       : rgba(255,255,255,.35);
  cursor      : pointer;
  font-size   : 12px;
  transition  : transform .2s;
  padding     : 0 4px;
}
.abd-chat-collapse.collapsed { transform: rotate(180deg) }
#abd-chat-msgs {
  max-height     : 220px;
  overflow-y     : auto;
  padding        : 10px 14px;
  display        : flex;
  flex-direction : column;
  gap            : 8px;
  scroll-behavior: smooth;
}
#abd-chat-msgs::-webkit-scrollbar       { width: 4px }
#abd-chat-msgs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px }
.abd-chat-empty {
  color     : rgba(255,255,255,.3);
  font-size : 13px;
  text-align: center;
  padding   : 16px 0;
}
.abd-chat-msg {
  max-width   : 78%;
  padding     : 8px 12px;
  border-radius: 12px;
  font-size   : 14px;
  line-height : 1.4;
}
/* Burbuja del conductor — naranja (marca del original) */
.abd-chat-msg.driver {
  align-self             : flex-end;
  background             : var(--ab-orange);
  color                  : #fff;
  border-bottom-right-radius: 3px;
}
/* Burbuja del pasajero — glass (del original) */
.abd-chat-msg.customer {
  align-self             : flex-start;
  background             : linear-gradient(to right, rgba(0,0,0,.35), rgba(0,0,0,.15));
  border                 : 1px solid var(--ab-glass-border);
  color                  : var(--ab-text);
  border-bottom-left-radius: 3px;
}
.abd-chat-msg-time  { font-size: 10px; opacity: .5; margin-top: 3px }
.abd-chat-input-row {
  display    : flex;
  gap        : 8px;
  padding    : 10px 14px;
  border-top : 1px solid var(--ab-glass-border);
}
.abd-chat-input {
  flex        : 1;
  background  : rgba(0,0,0,.3);
  border      : 1px solid var(--ab-glass-border);
  border-radius: 8px;
  color       : #fff;
  padding     : 9px 12px;
  font-size   : 14px;
  outline     : none;
  transition  : border-color .15s;
  font-family : system-ui,-apple-system,Arial,sans-serif;
}
.abd-chat-input:focus       { border-color: var(--ab-orange) }
.abd-chat-input::placeholder{ color: rgba(255,255,255,.25) }

/* ── 17. Period tabs — ganancias ────────────────────────────── */
.abd-period-tabs {
  display      : flex;
  gap          : 6px;
  flex-wrap    : wrap;
  margin-bottom: 12px;
}
.abd-period-tab {
  padding      : 8px 14px;
  background   : rgba(255,255,255,.05);
  border       : 1px solid var(--ab-glass-border);
  border-radius: 8px;
  color        : rgba(255,255,255,.45);
  font-size    : 12px;
  font-weight  : 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor       : pointer;
  transition   : .15s;
}
.abd-period-tab:hover             { background: rgba(255,255,255,.1) }
.abd-period-tab.abd-period-tab--active {
  background  : var(--ab-orange);
  border-color: var(--ab-orange);
  color       : #fff;
}

/* ── 18. Earnings cards ─────────────────────────────────────── */
.abd-earnings-cards {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 8px;
  margin-bottom        : 12px;
}
.abd-earn-card {
  background             : var(--ab-glass);
  border                 : 1px solid var(--ab-glass-border);
  backdrop-filter        : blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius          : var(--ab-radius-lg);
  padding                : 14px;
  text-align             : center;
}
.abd-earn-card--main {
  grid-column  : 1 / -1;
  border-color : rgba(255,111,0,.35);
  background   : linear-gradient(135deg, rgba(255,111,0,.15) 0%, var(--ab-glass) 100%);
}
.abd-earn-label { font-size: 11px; color: rgba(255,255,255,.4);
                  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px }
.abd-earn-value { font-size: 22px; font-weight: 800; color: rgba(255,255,255,.8) }
.abd-earn-net   { font-size: 30px; font-weight: 900; color: var(--ab-orange); letter-spacing: -.5px }
.abd-earn-fee   { color: rgba(239,68,68,.75) }
.abd-earn-sub   { font-size: 12px; color: rgba(255,255,255,.3); margin-top: 4px }

/* ── 19. Bar chart (divs puros, altura proporcional) ─────────── */
.abd-chart-card  { }
.abd-bar-chart {
  display    : flex;
  align-items: flex-end;
  gap        : 6px;
  height     : 100px;
  padding-top: 8px;
}
.abd-bar-col {
  flex           : 1;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 4px;
  height         : 100%;
  justify-content: flex-end;
}
.abd-bar {
  width        : 100%;
  background   : var(--ab-orange);
  border-radius: 4px 4px 0 0;
  min-height   : 4px;
  transition   : height .5s ease;
  position     : relative;
}
.abd-bar:hover    { background: var(--ab-orange-600) }
.abd-bar-val {
  position  : absolute;
  top       : -18px; left: 50%;
  transform : translateX(-50%);
  font-size : 9px;
  font-weight: 700;
  color     : var(--ab-orange);
  white-space: nowrap;
  opacity   : 0;
  transition: opacity .15s;
}
.abd-bar:hover .abd-bar-val { opacity: 1 }
.abd-bar-day {
  font-size : 10px;
  color     : rgba(255,255,255,.3);
  text-align: center;
}

/* ── 20. Tax summary ────────────────────────────────────────── */
.abd-tax-row {
  display         : flex;
  justify-content : space-between;
  padding         : 8px 0;
  border-bottom   : 1px solid rgba(255,255,255,.06);
  font-size       : 14px;
}
.abd-tax-row:last-of-type { border-bottom: none }
.abd-tax-row span:last-child { font-weight: 700 }
.abd-tax-row--total span { font-weight: 900; color: var(--ab-orange); font-size: 16px }

/* ── 21. Metrics — progress bars ────────────────────────────── */
.abd-metric-row {
  display    : flex;
  align-items: center;
  gap        : 10px;
  padding    : 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.abd-metric-row:last-child { border-bottom: none }
.abd-metric-label {
  font-size : 13px;
  color     : rgba(255,255,255,.5);
  min-width : 130px;
  flex-shrink: 0;
}
.abd-progress-wrap {
  flex        : 1;
  height      : 8px;
  background  : rgba(255,255,255,.07);
  border-radius: 4px;
  overflow    : hidden;
}
.abd-progress-bar {
  height      : 100%;
  border-radius: 4px;
  width       : 0;
  transition  : width .6s ease;
  background  : var(--ab-orange);
}
.abd-bar-green  { background: var(--ab-green) }
.abd-bar-blue   { background: var(--ab-blue) }
.abd-bar-yellow { background: var(--ab-yellow) }
.abd-metric-val { font-weight: 700; font-size: 14px; min-width: 44px; text-align: right }

/* Estrellas */
.abd-stars       { display: flex; gap: 2px }
.abd-star        { font-size: 16px; color: rgba(255,255,255,.12) }
.abd-star.full   { color: var(--ab-orange) }
.abd-star.half   { color: var(--ab-yellow) }
.abd-metric-warn { font-size: 11px; color: var(--ab-red); font-weight: 700; margin-top: 2px }

/* ── 22. Historial — tabla ──────────────────────────────────── */
.abd-history-filters {
  display      : flex;
  gap          : 8px;
  flex-wrap    : wrap;
  margin-bottom: 12px;
}
.abd-date-input {
  background   : var(--ab-glass);
  border       : 1px solid var(--ab-glass-border);
  border-radius: 8px;
  color        : #fff;
  padding      : 8px 10px;
  font-size    : 13px;
  outline      : none;
  transition   : border-color .15s;
  flex         : 1;
  min-width    : 120px;
  cursor       : pointer;
  color-scheme : dark;
}
.abd-date-input:focus { border-color: var(--ab-orange) }
#abd-history-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch }
.abd-table {
  width          : 100%;
  border-collapse: collapse;
  font-size      : 13px;
}
.abd-table th {
  text-align    : left;
  padding       : 8px 10px;
  color         : rgba(255,255,255,.3);
  font-size     : 10px;
  font-weight   : 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  border-bottom : 1px solid rgba(255,255,255,.1);
  white-space   : nowrap;
}
.abd-table td {
  padding      : 10px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  vertical-align: middle;
  white-space  : nowrap;
}
.abd-table tr:last-child td   { border-bottom: none }
.abd-table tr:hover td        { background: rgba(255,255,255,.025) }
.abd-trip-route               { white-space: normal; max-width: 140px;
                                 font-size: 12px; color: rgba(255,255,255,.6) }
.abd-net-amount               { font-weight: 800; color: var(--ab-orange) }
.abd-status-pill {
  display     : inline-block;
  padding     : 3px 8px;
  border-radius: 999px;
  font-size   : 10px;
  font-weight : 700;
  text-transform: uppercase;
}
.st-completed { background: rgba(34,197,94,.15); color: var(--ab-green) }
.st-canceled  { background: rgba(239,68,68,.15); color: var(--ab-red) }
.st-assigned  { background: rgba(255,111,0,.15); color: var(--ab-orange) }
.st-finished  { background: rgba(34,197,94,.15); color: var(--ab-green) }

.abd-pagination {
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : 8px;
  margin-top      : 12px;
}
.abd-page-info { font-size: 13px; color: rgba(255,255,255,.4) }

/* ── 23. Perfil ─────────────────────────────────────────────── */
.abd-profile-card   { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center }
.abd-profile-actions {
  display        : flex;
  gap            : 10px;
  flex-wrap      : wrap;
  justify-content: center;
  margin-top     : 8px;
}
.abd-modal-status { min-height: 18px; font-size: 13px; text-align: center; margin: 0 }
.abd-photo-upload-row {
  display    : flex;
  align-items: center;
  gap        : 10px;
  flex-wrap  : wrap;
}
.abd-ep-photo-preview {
  width        : 56px; height: 56px;
  border-radius: 10px;
  object-fit   : cover;
  border       : 2px solid var(--ab-orange);
}
/* foto — del original: border-radius:12px; background:#00000033 */
.abd-prof-avatar {
  width        : 72px; height: 72px;
  border-radius: 12px;
  object-fit   : cover;
  background   : #00000033;
  flex-shrink  : 0;
  border       : 2px solid var(--ab-orange);
}
.abd-prof-name    { font-size: 18px; font-weight: 800; margin-bottom: 4px }
.abd-prof-vehicle { font-size: 13px; color: rgba(255,255,255,.4) }

/* Documentos */
.abd-doc-row {
  display    : flex;
  align-items: center;
  gap        : 10px;
  padding    : 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.abd-doc-row:last-child { border-bottom: none }
.abd-doc-icon   { font-size: 18px; flex-shrink: 0 }
.abd-doc-label  { flex: 1; font-size: 14px }
.abd-doc-expiry { font-size: 12px; color: rgba(255,255,255,.35) }
.abd-doc-ok     { color: var(--ab-green); font-weight: 800; font-size: 12px }
.abd-doc-warn   { color: var(--ab-yellow); font-weight: 800; font-size: 12px }
.abd-doc-expired{ color: var(--ab-red); font-weight: 800; font-size: 12px }

/* ── 24. Viajes programados ─────────────────────────────────── */
#abd-scheduled-list { display: flex; flex-direction: column; gap: 10px }
.abd-sched-item {
  background   : rgba(0,0,0,.2);
  border       : 1px solid var(--ab-glass-border);
  border-radius: var(--ab-radius);
  padding      : 12px;
  display      : flex;
  flex-direction: column;
  gap          : 5px;
}
.abd-sched-datetime  { font-size: 12px; color: var(--ab-orange); font-weight: 700;
                        text-transform: uppercase; letter-spacing: .04em }
.abd-sched-passenger { font-weight: 700; font-size: 15px }
.abd-sched-route     { font-size: 13px; color: rgba(255,255,255,.5) }
.abd-sched-fare      { font-weight: 700; color: var(--ab-green) }

/* ── 25. Modales ────────────────────────────────────────────── */
.abd-modal-overlay {
  position               : fixed;
  inset                  : 0;
  background             : rgba(0,0,0,.82);
  display                : flex;
  align-items            : center;
  justify-content        : center;
  z-index                : 500;
  padding                : 16px;
  backdrop-filter        : blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.abd-modal {
  background   : #0f0f0f;
  border       : 1px solid var(--ab-glass-border);
  border-radius: 20px;
  padding      : 24px;
  max-width    : 400px;
  width        : 100%;
  box-shadow   : 0 12px 48px rgba(0,0,0,.7);
  display      : flex;
  flex-direction: column;
  gap          : 14px;
}
.abd-modal h3 {
  font-size   : 20px;
  font-weight : 800;
  text-align  : center;
}
.abd-modal h3.danger { color: var(--ab-red) }
.abd-modal p {
  font-size  : 14px;
  color      : rgba(255,255,255,.55);
  text-align : center;
  line-height: 1.55;
}
.abd-modal-field { display: flex; flex-direction: column; gap: 6px }
.abd-modal-field label {
  font-size     : 12px;
  color         : rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.abd-modal-input {
  background   : rgba(255,255,255,.06);
  border       : 1px solid var(--ab-glass-border);
  border-radius: 8px;
  color        : #fff;
  padding      : 10px 12px;
  font-size    : 16px;
  outline      : none;
  transition   : border-color .15s;
  width        : 100%;
  font-family  : system-ui,-apple-system,Arial,sans-serif;
}
.abd-modal-input:focus { border-color: var(--ab-orange) }
.abd-modal-actions     { display: flex; flex-direction: column; gap: 8px }
.abd-sos-rec-status    { font-size: 13px; color: var(--ab-yellow); text-align: center; min-height: 18px }

/* ── 26. Skeletons ──────────────────────────────────────────── */
.abd-skeleton {
  background       : linear-gradient(90deg,
                       rgba(255,255,255,.04) 0%,
                       rgba(255,255,255,.09) 50%,
                       rgba(255,255,255,.04) 100%);
  background-size  : 200% 100%;
  animation        : abd-shimmer 1.5s infinite;
  border-radius    : 6px;
  display          : block;
}
@keyframes abd-shimmer {
  0%   { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}
.abd-skeleton-row   { height: 14px; margin-bottom: 8px }
.abd-skeleton-title { height: 20px; width: 60%; margin-bottom: 12px }
.abd-skeleton-btn   { height: 44px; border-radius: var(--ab-radius) }

/* ── 27. Acceso denegado / sin sesión ───────────────────────── */
.abd-access-msg {
  background             : var(--ab-glass);
  border                 : 1px solid var(--ab-glass-border);
  backdrop-filter        : blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius          : var(--ab-radius-lg);
  padding                : 32px 24px;
  text-align             : center;
  max-width              : 400px;
  margin                 : 40px auto;
}
.abd-access-msg h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px }
.abd-access-msg p  { font-size: 14px; color: rgba(255,255,255,.5); margin-bottom: 16px }
.abd-access-msg a  { color: var(--ab-orange) }

/* ── 28. Responsive ─────────────────────────────────────────── */
@media (min-width: 640px) {
  .abd-panel                  { max-width: 720px; margin-left: auto; margin-right: auto }
  #abd-map                    { height: 360px }
  .abd-earnings-cards         { grid-template-columns: 1fr 1fr 1fr }
  .abd-earn-card--main        { grid-column: auto }
  .abd-modal-actions          { flex-direction: row }
  .abd-modal-actions .abd-btn { flex: 1 }
  .abd-trip-actions           { flex-direction: row; flex-wrap: wrap }
  .abd-trip-actions .ab-btn,
  .abd-trip-actions .abd-btn  { flex: 1; width: auto; min-width: 140px }
}
@media (max-width: 480px) {
  .abd-table th:nth-child(3),
  .abd-table td:nth-child(3) { display: none }
  .abd-metric-label          { min-width: 95px; font-size: 12px }
  .abd-modal                 { padding: 18px }
}

/* ── 29. Trip controls del original — compatibilidad ──────────
   Copiado exacto de los bloques <style> de la página original   */
#trip-controls-widget { max-width: 520px; margin-top: 16px }
.tcw-card             { background: transparent !important; border: none !important;
                         backdrop-filter: none !important; padding: 0; color: #fff }
.tcw-client           { text-align: center; margin-bottom: 10px }
.tcw-client-photo     { width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
                         border: none; margin-bottom: 8px; display: none }
.tcw-client h3        { margin: 0; font-size: 20px; font-weight: 700 }
.tcw-info             { font-size: 14px; line-height: 1.4; margin: 10px 0 }
.tcw-info div         { display: flex; justify-content: space-between; margin: 2px 0 }
.tcw-steps            { font-size: 14px; line-height: 1.35; margin: 10px 0 }
.tcw-actions          { display: flex; gap: 8px; flex-wrap: wrap }
.tcw-count            { margin-top: 8px; font-weight: 800; letter-spacing: .5px }
/* Fajas de texto semitransparentes — COPIADO EXACTO del original */
#trip-controls-widget .tcw-info,
#trip-controls-widget .tcw-steps {
  background   : linear-gradient(to right, rgba(0,0,0,.35), rgba(0,0,0,.15));
  border       : 1px solid var(--ab-glass-border);
  border-radius: 12px;
  padding      : 10px;
  margin-top   : 10px;
}
/* Map overlays — COPIADO EXACTO del original */
#route-suggestion { background: var(--ab-glass) !important; border-color: var(--ab-glass-border) !important }
#gps-badge        { background: var(--ab-glass) !important; border-color: var(--ab-glass-border) !important }

/* ── Car background — Tab VIAJE ─────────────────────────────────
   CSS copiado EXACTAMENTE de elementor/css/post-1135.css
   Sección .elementor-element-3053089 (Driver Dashboard Original)
   ──────────────────────────────────────────────────────────────── */
#abd-tab-viaje {
  position: relative;
}
/* Imagen de fondo — ::before igual que Elementor overlay */
#abd-tab-viaje::before {
  content             : '';
  position            : absolute;
  inset               : 0;
  background-image    : url('../assets/car-bg.jpg');
  background-position : center center;
  background-repeat   : no-repeat;
  background-size     : 100% auto;
  opacity             : 0.97;
  z-index             : 0;
  pointer-events      : none;
}
/* Gradient oscuro encima — mismo que .elementor-element-4d13f00 */
#abd-tab-viaje::after {
  content    : '';
  position   : absolute;
  inset      : 0;
  background : linear-gradient(180deg, #0A160AA3 33%, #121B12 100%);
  z-index    : 1;
  pointer-events: none;
}
/* Contenido siempre encima de ambas capas */
#abd-tab-viaje > * {
  position: relative;
  z-index : 2;
}