1179 lines
42 KiB
CSS
1179 lines
42 KiB
CSS
/* ================================================================
|
|
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;
|
|
}
|