/* brand-2026.css (overlay) Regla cirujano: NO tocar app.css ni indrive-ui.css. Solo overrides controlados. */ :root{ /* ========================= DS3-1 Neutral tokens (base) Mobile-first, mantenible, sin activar dark por defecto */ /* Superficies y texto */ --brand-bg: #F8FAFC; /* fondo general (gris azulado muy claro) */ --brand-surface: #FFFFFF; /* cards/forms */ --brand-text: #0B1220; /* texto principal */ --brand-muted: rgba(11,18,32,.65); /* texto secundario */ --brand-border: rgba(0,0,0,.10); /* bordes suaves */ /* Sombras (2 niveles) */ --brand-shadow-1: 0 10px 30px rgba(0,0,0,.12); --brand-shadow-2: 0 18px 60px rgba(0,0,0,.22); /* Espaciado (escala) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; /* Accesibilidad móvil */ --tap-min: 44px; /* tamaño mínimo táctil */ /* Dark mode (OPCIONAL, APAGADO) Se activa solo si alguna página usa: */ /* :root[data-mode="dark"]{ } */ --brand-radius: 14px; --brand-shadow: 0 10px 30px rgba(0,0,0,.10); } /* OP3 Secondary buttons (LIGHT) — moved out of :root (CSS valid) */ /* BRAND_OWNER_SECONDARY01_DISABLED_OP3 */ html[data-mode="light"] button.secondary, /* BRAND_OWNER_SECONDARY01_DISABLED_OP3 */ html[data-mode="light"] .btn-secondary, /* BRAND_OWNER_SECONDARY01_DISABLED_OP3 */ html[data-mode="light"] .secondary{ /* BRAND_OWNER_SECONDARY01_DISABLED_OP3 */ background: rgba(245,158,11,.14) !important; /* BRAND_OWNER_SECONDARY01_DISABLED_OP3 */ border: 1px solid rgba(245,158,11,.45) !important; /* BRAND_OWNER_SECONDARY01_DISABLED_OP3 */ color: #0B1220 !important; /* BRAND_OWNER_SECONDARY01_DISABLED_OP3 */ } /* BRAND_OWNER_SECONDARY01_DISABLED_OP3 */ html[data-mode="light"] button.secondary:hover, /* BRAND_OWNER_SECONDARY01_DISABLED_OP3 */ html[data-mode="light"] .btn-secondary:hover, /* BRAND_OWNER_SECONDARY01_DISABLED_OP3 */ html[data-mode="light"] .secondary:hover{ /* DISABLED_ORPHAN_SECONDARY_HOVER01 */ background: rgba(245,158,11,.22) !important; } /* AUD_OWNER_LIGHTBODY_DISABLED old light body block #1 BEGIN html[data-mode="light"] body.__DISABLED__AUD_OWNER_LIGHTBODY_DISABLED{ color: var(--brand-text); background: var(--brand-bg); line-height: 1.45; font-size: 16px; } AUD_OWNER_LIGHTBODY_DISABLED old light body block #1 END */ /* Inputs y botones: estética 2026 sin romper layout */ /* ========================= DS-CLEAN-04B consolidated blocks (single-source) */ html[data-mode="light"] input, html[data-mode="light"] select, html[data-mode="light"] textarea{ /* shape + surface + tap target + mobile typography */ border-radius: var(--brand-radius) !important; border-color: var(--brand-border) !important; border-width: 1px !important; background: #fff !important; color: var(--brand-text) !important; padding: 12px 14px !important; outline: none !important; min-height: var(--tap-min); font-size: 16px; /* evita zoom iOS */ line-height: 1.35; } button, .btn, .button{ /* shape + tap target + 2026 kit */ border-radius: var(--brand-radius) !important; padding: 12px 14px !important; font-weight: 700 !important; letter-spacing: .2px !important; min-height: var(--tap-min); line-height: 1.2; } /* Tarjetas / contenedores comunes (sin asumir HTML exacto) */ html[data-mode="light"] .card, html[data-mode="light"] .panel, html[data-mode="light"] .box{ border-radius: calc(var(--brand-radius) + 6px) !important; box-shadow: var(--brand-shadow) !important; } /* ========================= B2.1 Kit 2026 (override) */ /* Tipografía sistema (rápida, sin cargar fuentes externas) */ :root{ --brand-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; } body, input, select, textarea, button{ font-family: var(--brand-font) !important; } /* Labels y ayudas más legibles */ label{ color: var(--brand-text) !important; } .small, .hint, .help, .muted{ color: var(--brand-muted) !important; } /* Inputs “2026” */ input:focus, select:focus, textarea:focus{ border-color: rgba(37,99,235,.55) !important; box-shadow: 0 0 0 4px rgba(37,99,235,.12) !important; } /* Botón principal y botones en general */ .btn-primary, .primary, button.primary{ color: #fff !important; box-shadow: 0 10px 22px rgba(37,99,235,.22) !important; } .btn-primary:active, .primary:active, button.primary:active{ transform: translateY(1px) !important; } /* BRAND_OWNER_CARD01_DISABLED_LEGACY */ /* Cards / cajas */ /* BRAND_OWNER_CARD01_DISABLED_LEGACY */ html[data-mode="light"] .card, /* BRAND_OWNER_CARD01_DISABLED_LEGACY */ html[data-mode="light"] .panel, /* BRAND_OWNER_CARD01_DISABLED_LEGACY */ html[data-mode="light"] .box{ /* BRAND_OWNER_CARD01_DISABLED_LEGACY */ background: #fff !important; /* BRAND_OWNER_CARD01_DISABLED_LEGACY */ border: 1px solid rgba(0,0,0,.08) !important; /* BRAND_OWNER_CARD01_DISABLED_LEGACY */ } /* ========================= B2.2 Ayacucho palette (override) */ :root[data-theme="ayacucho"]{ /* Azul añil (principal) + Ocre retablo (secundario) */ /* __DISABLED__ETAPA2B_BRAND_ACCENT_OWNER01 */ --brand-accent: #ff8a1f; /* indigo/azul confiable */ --brand-accent: var(--accent); --brand-accent-2: #C86A3A; /* ocre retablo */ --accent-rgb: 255,138,31; /* RGB del accent (para rgba/glows) */ --accent-rgb-soft: 200,106,58; /* RGB suave para bordes */ } /* CTA principal (hover/focus/disabled) */ .btn-primary, .primary, button.primary{ background: var(--brand-accent) !important; border-color: var(--brand-accent) !important; } .btn-primary:hover, .primary:hover, button.primary:hover{ filter: brightness(.95) !important; } .btn-primary:disabled, .primary:disabled, button.primary:disabled, .btn-primary[disabled], .primary[disabled], button.primary[disabled]{ opacity: .55 !important; cursor: not-allowed !important; box-shadow: none !important; transform: none !important; } /* Enlaces y acentos */ a{ color: var(--brand-accent) !important; } /* Foco accesible (coherente con el color de marca) */ input:focus, select:focus, textarea:focus{ border-color: rgba(29,78,216,.55) !important; box-shadow: 0 0 0 4px rgba(29,78,216,.14) !important; } /* ========================= B2.3 Validation states (overlay) ========================= */ /* Colores semánticos (sobrios) */ :root{ --brand-danger: #DC2626; --brand-success: #16A34A; --brand-warning: #D97706; } /* HTML5 validation (si el form usa required/minlength/etc.) */ input:invalid, textarea:invalid, select:invalid{ border-color: rgba(220,38,38,.55) !important; } input:invalid:focus, textarea:invalid:focus, select:invalid:focus{ box-shadow: 0 0 0 4px rgba(220,38,38,.14) !important; } /* Clases comunes por si el JS marca error */ .is-error, .error, .invalid{ border-color: rgba(220,38,38,.55) !important; } /* Mensajes (si existen) */ .error-text, .text-error, .msg-error{ color: var(--brand-danger) !important; font-weight: 700 !important; } .success-text, .text-success, .msg-success{ color: var(--brand-success) !important; font-weight: 700 !important; } /* Loading/disabled (refuerzo visual) */ button[aria-busy="true"], .btn[aria-busy="true"]{ opacity: .85 !important; cursor: progress !important; } /* ========================= B2.4 Force light surfaces (overlay) Arregla casos donde indrive-ui domina con tema oscuro */ /* AUD_OWNER_LIGHTBODY_DISABLED old light body block #2 BEGIN html[data-mode="light"] body.__DISABLED__AUD_OWNER_LIGHTBODY_DISABLED{ background: var(--brand-bg) !important; color: var(--brand-text) !important; } AUD_OWNER_LIGHTBODY_DISABLED old light body block #2 END */ /* Cards/containers genéricos */ html[data-mode="light"] .card, html[data-mode="light"] .panel, html[data-mode="light"] .box, html[data-mode="light"] .container, html[data-mode="light"] .content, html[data-mode="light"] .main{ color: var(--brand-text) !important; } /* Inputs legibles siempre */ /* ========================= REG1 Contraste registro (cards claras + texto legible) Aplica a registro/login para que no se vea “apagado” */ /* AUD_OWNER_LIGHTBODY_DISABLED old light body block #3 BEGIN html[data-mode="light"] body.__DISABLED__AUD_OWNER_LIGHTBODY_DISABLED{ color: #0b1220; } AUD_OWNER_LIGHTBODY_DISABLED old light body block #3 END */ /* __DISABLED__REG1_GLOBAL__ h1,h2,h3,.title,.subtitle,label{ */ /* __DISABLED__REG1_GLOBAL__ color: #0b1220 !important; */ /* __DISABLED__REG1_GLOBAL__ text-shadow: none !important; */ /* __DISABLED__REG1_GLOBAL__ opacity: 1 !important; */ /* __DISABLED__REG1_GLOBAL__ } */ /* __DISABLED__REG1_GLOBAL__ */ /* __DISABLED__REG1_GLOBAL__ Card/superficie del formulario (genérico para no depender de clases exactas) */ /* __DISABLED__REG1_GLOBAL__ form, .card, .panel, .box, .container .card, .container form{ */ /* __DISABLED__REG1_GLOBAL__ background: rgba(255,255,255,.92) !important; */ /* __DISABLED__REG1_GLOBAL__ border: 1px solid rgba(0,0,0,.08) !important; */ /* __DISABLED__REG1_GLOBAL__ box-shadow: 0 18px 60px rgba(0,0,0,.25) !important; */ /* __DISABLED__REG1_GLOBAL__ backdrop-filter: blur(6px); */ /* __DISABLED__REG1_GLOBAL__ border-radius: 18px !important; */ /* __DISABLED__REG1_GLOBAL__ } */ /* __DISABLED__REG1_GLOBAL__ */ /* __DISABLED__REG1_GLOBAL__ Inputs legibles */ /* __DISABLED__REG1_GLOBAL__ html[data-mode="light"] input::placeholder, html[data-mode="light"] textarea::placeholder{ */ /* __DISABLED__REG1_GLOBAL__ color: rgba(11,18,32,.45) !important; */ /* __DISABLED__REG1_GLOBAL__ } */ /* __DISABLED__REG1_GLOBAL__ */ /* __DISABLED__REG1_GLOBAL__ Si algún bloque quedó “apagado” por opacity */ /* __DISABLED__REG1_GLOBAL__ *{ */ /* __DISABLED__REG1_GLOBAL__ -webkit-font-smoothing: antialiased; */ /* __DISABLED__REG1_GLOBAL__ } */ /* ========================= /* ========================= REGPAX1 Registro Pasajero surface (scoped) Owner: body.ma-registro-pasajero Nota: reemplaza REG1 global para evitar fuga a toda la app ========================= */ body.ma-registro-pasajero h1, body.ma-registro-pasajero h2, body.ma-registro-pasajero h3, body.ma-registro-pasajero .title, body.ma-registro-pasajero .subtitle, body.ma-registro-pasajero label{ color: #0b1220 !important; text-shadow: none !important; opacity: 1 !important; } body.ma-registro-pasajero form, body.ma-registro-pasajero .card, body.ma-registro-pasajero .panel, body.ma-registro-pasajero .box, body.ma-registro-pasajero .container .card, body.ma-registro-pasajero .container form{ background: rgba(255,255,255,.92) !important; border: 1px solid rgba(0,0,0,.08) !important; box-shadow: 0 18px 60px rgba(0,0,0,.25) !important; backdrop-filter: blur(6px); border-radius: 18px !important; } body.ma-registro-pasajero input::placeholder, body.ma-registro-pasajero textarea::placeholder{ color: rgba(11,18,32,.45) !important; } REG2 Registro Conductor surface (scoped) Fuerza card clara + inputs claros SOLO en /registro-conductor.html (activado por body.ma-registro-conductor) */ body.ma-registro-conductor{ color: #0b1220; } /* Superficie clara (card/form contenedores típicos) */ body.ma-registro-conductor form, body.ma-registro-conductor .card, body.ma-registro-conductor .panel, body.ma-registro-conductor .box, body.ma-registro-conductor .container form, body.ma-registro-conductor .container .card{ background: #ffffff !important; color: #0b1220 !important; border: 1px solid rgba(0,0,0,.10) !important; box-shadow: 0 18px 60px rgba(0,0,0,.22) !important; opacity: 1 !important; filter: none !important; border-radius: 18px !important; } /* Texto siempre legible */ body.ma-registro-conductor h1, body.ma-registro-conductor h2, body.ma-registro-conductor h3, body.ma-registro-conductor label, body.ma-registro-conductor .title, body.ma-registro-conductor .subtitle{ color: #0b1220 !important; opacity: 1 !important; text-shadow: none !important; } /* Inputs claros */ body.ma-registro-conductor input, body.ma-registro-conductor select, body.ma-registro-conductor textarea{ background: #fff !important; color: #0b1220 !important; border: 1px solid rgba(0,0,0,.18) !important; } body.ma-registro-conductor input::placeholder, body.ma-registro-conductor textarea::placeholder{ color: rgba(11,18,32,.45) !important; } /* ========================= DS3-2 Components (base) Clases reutilizables + compatibilidad suave ========================= */ /* Card genérica (reusable) */ .ma-card{ background: var(--brand-surface); color: var(--brand-text); border: 1px solid var(--brand-border); border-radius: calc(var(--brand-radius) + 6px); box-shadow: var(--brand-shadow-1); padding: var(--space-5); } /* Input reusable */ .ma-input{ width: 100%; min-height: var(--tap-min); padding: 10px 12px; border-radius: var(--brand-radius); border: 1px solid var(--brand-border); background: #fff; color: var(--brand-text); outline: none; } /* Focus accesible (usa acento del theme) */ .ma-input:focus{ border-color: rgba(29,78,216,.55); box-shadow: 0 0 0 4px rgba(29,78,216,.14); } /* Button reusable */ .ma-btn{ min-height: var(--tap-min); border-radius: var(--brand-radius); border: 1px solid var(--brand-border); background: #fff; color: var(--brand-text); font-weight: 700; cursor: pointer; box-shadow: var(--brand-shadow-1); transition: transform .08s ease, filter .12s ease; } .ma-btn:active{ transform: translateY(1px); } .ma-btn--primary{ background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; } .ma-btn--primary:hover{ filter: brightness(.95); } .ma-btn--ghost{ background: transparent; border-color: var(--brand-border); box-shadow: none; } /* Compatibilidad suave (no agresiva) */ /* DS3-2B Existing class mapping Mapea clases existentes (audit) a tokens DS3 sin romper layouts */ /* Cards y panels (muy usados) */ .card, .cards, .panel, .box{ background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: calc(var(--brand-radius) + 6px); box-shadow: var(--shadow); } /* Contenedor: padding móvil (suave) */ .container{ width: 100%; max-width: 980px; margin: 0 auto; padding-left: var(--space-5); padding-right: var(--space-5); } /* Badges: neutro y legible (no agresivo) */ .badge{ display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--brand-border); background: var(--badge-bg, rgba(0,0,0,.06)); color: var(--brand-text); font-weight: 700; line-height: 1.1; } /* Botones existentes */ .btn{ min-height: var(--tap-min); border-radius: var(--brand-radius); border: 1px solid var(--brand-border); background: #fff; color: var(--brand-text); font-weight: 800; box-shadow: var(--brand-shadow-1); } /* CTA principal (existe en registro) */ .btn-primary{ min-height: var(--tap-min); border-radius: var(--brand-radius); background: var(--brand-accent) !important; border-color: var(--brand-accent) !important; color: #fff !important; font-weight: 900; box-shadow: var(--brand-shadow-1); } .btn-primary:hover{ filter: brightness(.95); } /* BRAND_OWNER_SECONDARY01_DISABLED_GHOST */ /* Secondary: estilo ghost (mucho en app) */ /* BRAND_OWNER_SECONDARY01_DISABLED_GHOST */ html[data-mode="light"] .secondary{ /* BRAND_OWNER_SECONDARY01_DISABLED_GHOST */ background: transparent !important; /* BRAND_OWNER_SECONDARY01_DISABLED_GHOST */ border: 1px solid var(--brand-border) !important; /* BRAND_OWNER_SECONDARY01_DISABLED_GHOST */ color: var(--brand-text) !important; /* BRAND_OWNER_SECONDARY01_DISABLED_GHOST */ box-shadow: none !important; /* BRAND_OWNER_SECONDARY01_DISABLED_GHOST */ } /* Filas de botones en landing viajes-ayacucho */ .btnrow{ display: flex; gap: var(--space-3); flex-wrap: wrap; } /* Sección de contenido en landing (suave) */ .content{ color: var(--brand-text); } /* ========================= DS3-3 Mobile-first refinements Tipografía, safe-area y espaciado móvil (overlay suave) ========================= */ /* Tipografía base: más legible en móvil, sin cambiar la fuente */ html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Encabezados: evitar gigantismo pero mantener jerarquía */ h1{ font-size: 1.35rem; line-height: 1.15; } h2{ font-size: 1.18rem; line-height: 1.2; } h3{ font-size: 1.05rem; line-height: 1.25; } /* Safe-area iOS (notch): padding suave sin romper layout */ /* AUD_OWNER_LIGHTBODY_DISABLED old light body block #4 BEGIN html[data-mode="light"] body.__DISABLED__AUD_OWNER_LIGHTBODY_DISABLED{ padding-bottom: env(safe-area-inset-bottom); } AUD_OWNER_LIGHTBODY_DISABLED old light body block #4 END */ /* Contenedores: padding consistente en móvil */ /* Inputs: mejorar legibilidad sin cambiar colores */ /* Botones: texto claro y consistente */ button, .btn, .button, .btn-primary{ line-height: 1.2; } /* ========================= P2C02 Readability (migrado desde indrive-ui.css) Objetivo: más contraste y tamaños legibles (móvil) SOLO EN LIGHT ========================= */ html[data-mode="light"] .muted{ opacity: 1 !important; color: rgba(0,0,0,.70) !important; } html[data-mode="light"] .trip-status__title{ color: rgba(0,0,0,.75) !important; } html[data-mode="light"] .trip-status__state{ font-size: 22px !important; line-height: 1.15 !important; font-weight: 800 !important; } html[data-mode="light"] .trip-status__hint{ color: rgba(0,0,0,.72) !important; font-size: 14px !important; } /* Badge (COMPLETADO / BUSCANDO / etc.) */ html[data-mode="light"] .badge{ font-size: 12px !important; font-weight: 900 !important; letter-spacing: .4px !important; padding: 8px 12px !important; border-radius: 999px !important; color: #fff !important; background: #111 !important; } /* BRAND_OWNER_SECONDARY01_DISABLED_VISIBLE */ /* Botones secondary más visibles */ /* BRAND_OWNER_SECONDARY01_DISABLED_VISIBLE */ html[data-mode="light"] button.secondary{ /* BRAND_OWNER_SECONDARY01_DISABLED_VISIBLE */ background: #f3f4f6 !important; /* BRAND_OWNER_SECONDARY01_DISABLED_VISIBLE */ border: 1px solid rgba(0,0,0,.18) !important; /* BRAND_OWNER_SECONDARY01_DISABLED_VISIBLE */ color: rgba(0,0,0,.88) !important; /* BRAND_OWNER_SECONDARY01_DISABLED_VISIBLE */ font-weight: 700 !important; /* BRAND_OWNER_SECONDARY01_DISABLED_VISIBLE */ } /* Disabled: que no desaparezca tanto */ html[data-mode="light"] button:disabled, html[data-mode="light"] .disabled{ opacity: .65 !important; filter: none !important; } /* ========================= DS4 Token Bridge (app.css legacy vars -> DS tokens) Hace que app.css NO decida colores por su cuenta ========================= */ html[data-mode="light"]{ --theme-bg: #FAF7F0; --theme-card: #ffffff; --theme-text: var(--brand-text); --theme-muted: var(--brand-muted); /* __DISABLED__ETAPA2B_THEME_ACCENT_OWNER01 */ --theme-accent: var(--brand-accent); --theme-border: var(--brand-border); --theme-shadow: var(--brand-shadow-1); /* BRAND_TOKEN_BADGES01 - Badges tokenizados (LIGHT) */ --badge-bg: rgba(0,0,0,.06); --badge-border: rgba(0,0,0,.10); --badge-text: rgba(0,0,0,.78); --badge-on-bg: rgba(var(--accent-rgb-soft), .20); --badge-on-border: rgba(var(--accent-rgb), .30); } html[data-mode="dark"].__DISABLED__DARK_OWNER_OLD{ /* CONTRAST_FIX01_OLD_DISABLED --theme-bg: #202836; */ /* CONTRAST_FIX01_OLD_DISABLED --theme-card: #2A3446; */ /* CONTRAST_FIX01_OLD_DISABLED --theme-text: rgba(255,255,255,.92); */ /* CONTRAST_FIX01_OLD_DISABLED --theme-muted: rgba(255,255,255,.70); */ /* __DISABLED__ETAPA2B_THEME_ACCENT_OWNER02 */ --theme-accent: var(--brand-accent-2); /* o el que quieras para conductor */ /* CONTRAST_FIX01_OLD_DISABLED --theme-border: rgba(255,255,255,.12); */ /* CONTRAST_FIX01_OLD_DISABLED --theme-shadow: 0 10px 30px rgba(0,0,0,.35); */ } /* ========================= DS4-1 Hardcode Overrides (app.css) Neutraliza hardcodes que no usan variables (ej: button{color:#111}) ========================= */ html[data-mode="dark"] button, html[data-mode="dark"] .btn{ color: var(--text) !important; } html[data-mode="dark"] button.secondary{ color: var(--text) !important; border-color: var(--border) !important; } html[data-mode="light"] button{ color: #111 !important; } /* ========================= FIX: Conductor acciones visibles ========================= */ html[data-mode="dark"] .item-actions{ display:flex !important; flex-wrap:wrap !important; gap:10px !important; } html[data-mode="dark"] .item-actions a, html[data-mode="dark"] .item-actions button{ display:inline-flex !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; } /* ========================= FIX: Conductor - secondary visible (dark) [item-actions] Objetivo: evitar "botón fantasma" en modo dark por colisión con indrive-ui.css Scope: SOLO acciones dentro de .item-actions (Conductor) ========================= */ html[data-mode="dark"] .item-actions button.secondary{ background: rgba(255,255,255,.10) !important; color: rgba(255,255,255,.92) !important; border-color: rgba(255,255,255,.25) !important; } /* ========================= FIX: Dark secondary visible (topbar actions) Objetivo: que botones secundarios de la barra superior (Actualizar/GPS/Alertas) se vean en dark Scope: SOLO html[data-mode="dark"] dentro de .actions (topbar) ========================= */ html[data-mode="dark"] .actions button.secondary{ background: rgba(255,255,255,.10) !important; color: rgba(255,255,255,.92) !important; border-color: rgba(255,255,255,.25) !important; } /* --------------------------------------------------------- BRAND_DARKFIX01 — En modo dark, cards SIEMPRE usan tokens Motivo: evitar backgrounds #fff (light) que pisan por !important --------------------------------------------------------- */ html[data-mode="dark"] .card, html[data-mode="dark"] .panel, html[data-mode="dark"] .box{ background: var(--card) !important; color: var(--text) !important; border-color: var(--border) !important; box-shadow: var(--shadow) !important; } /* --------------------------------------------------------- BRAND_CONTRAST01 — Boost contraste (SOLO DARK) Objetivo: que textos/labels/placeholders se lean mejor --------------------------------------------------------- */ html[data-mode="dark"]{ /* CONTRAST_FIX01 — dark tokens reales (owner=brand-2026.css) */ --theme-bg: #202836; --theme-card: #2A3446; --theme-text: rgba(255,255,255,.95); --theme-muted: rgba(200,210,230,.65); --theme-border: rgba(255,255,255,.10); --theme-shadow: 0 12px 30px rgba(0,0,0,.45); --brand-surface: var(--card); --brand-text: var(--text); /* subimos un poco la card y el borde para lectura */ /* CONTRAST_FIX02_DISABLED --theme-card: #2A3446; */ /* DISABLED_BOOST_OLD */ --theme-border: rgba(255,255,255,.18); /* DISABLED_BOOST_OLD */ --theme-muted: rgba(255,255,255,.78); /* DISABLED_BOOST_OLD */ --theme-text: rgba(255,255,255,.94); } /* textos “muted” más legibles */ html[data-mode="dark"] .muted, html[data-mode="dark"] small, html[data-mode="dark"] .hint{ color: var(--muted) !important; } /* inputs/ selects: texto y placeholder visibles */ html[data-mode="dark"] input, html[data-mode="dark"] textarea, html[data-mode="dark"] select{ color: var(--text) !important; background: rgba(255,255,255,.06) !important; border-color: var(--border) !important; } html[data-mode="dark"] input::placeholder, html[data-mode="dark"] textarea::placeholder{ color: rgba(255,255,255,.65) !important; } /* HDR_OWNER01 — moved from indrive-ui.css */ /* ===== ETAPA 1.7 - Header premium tipo app ===== */ /* intenta agarrar el contenedor existente del branding */ .brandbar, .brand-bar, .brand-header, .topbar{ background: rgba(17,24,38,.78); border: 1px solid var(--line); border-radius: var(--radius2); padding: 12px 14px; box-shadow: var(--shadow); backdrop-filter: blur(12px); } /* layout: marca a la izquierda, soporte a la derecha */ .brandbar, .brand-bar, .brand-header, .topbar{ display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* marca */ .brand-city, #brandName{ font-size: 16px; font-weight: 900; } /* el subtítulo ya lo agrega ETAPA 1.4 con ::after */ /* botón whatsapp */ .brand-support, #supportWhatsApp{ min-height: 42px; padding: 0 12px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); font-weight: 800; } /* chips visuales opcionales sin HTML: una línea abajo como “estado” */ .brand-city::before, #brandName::before{ content: "● "; color: rgba(46, 204, 113, .9); } /* ===== ETAPA 1.8 - Header responsive + WhatsApp accent ===== */ .brandbar, .brand-bar, .brand-header{ flex-wrap: wrap; row-gap: 10px; } /* asegura que marca pueda ocupar ancho y no reviente */ .brand-city, #brandName{ flex: 1 1 auto; min-width: 180px; } /* botón soporte no se deforma */ .brand-support, #supportWhatsApp{ flex: 0 0 auto; } /* cuando WhatsApp está visible (href real), se ve “accion principal” */ #supportWhatsApp[href*="wa.me"], #supportWhatsApp[href*="whatsapp"], .brand-support[href*="wa.me"], .brand-support[href*="whatsapp"]{ background: linear-gradient(180deg, var(--accent2), var(--accent)); color: #1b0f00; border-color: rgba(var(--accent-rgb-soft), .45); } @media (max-width: 360px){ .brandbar, .brand-bar, .brand-header{ align-items: stretch; } .brand-support, #supportWhatsApp{ width: 100%; justify-content: center; } } /* ===== ETAPA 1.9 - Brand row como header PRO ===== */ /* BRAND_OWNER_BRANDROW_DUP_DISABLED_BEGIN (old/incomplete brand-row block) */ /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9_BEGIN (lines 837-856) */ /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9 .brand-row{ */ /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9 */ position: sticky; /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9 */ top: 10px; /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9 */ z-index: 80; /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9 */ /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9 */ max-width: 520px; /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9 */ margin: 10px auto 12px; /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9 */ padding: 12px 14px; /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9 */ /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9 */ display: flex; /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9 */ align-items: center; /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9 */ justify-content: space-between; /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9 */ gap: 10px; /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9 */ /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9 */ background: rgba(17,24,38,.78); /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9 */ border: 1px solid var(--line); /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9 */ border-radius: var(--radius2); /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9 */ backdrop-filter: blur(12px); /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9 */ box-shadow: var(--shadow); /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9_END */ /* __DISABLED__BRANDROW_OLD_BLOCK_ETAPA1_9 } */ .brand-platform{ display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 34px; padding: 0 10px; border-radius: 14px; font-weight: 900; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); } /* Si por alguna razón el link no tiene texto, mostrar "WhatsApp" */ /* __DISABLED__WHATSAPP_EMPTY_BEFORE01 */#supportWhatsApp:empty::before, /* __DISABLED__WHATSAPP_EMPTY_BEFORE01 */.brand-support:empty::before{ /* __DISABLED__WHATSAPP_EMPTY_BEFORE01 */ content: "WhatsApp"; /* __DISABLED__WHATSAPP_EMPTY_BEFORE01 */} /* En login: la topbar queda como fila secundaria (no compite con brand-row) */ .brand-row + .container .topbar{ position: static; top: auto; z-index: auto; background: transparent; border: none; box-shadow: none; backdrop-filter: none; border-radius: 0; padding: 6px 2px; margin-top: 8px; } /* END HDR_OWNER01 */ /* TOPBAR_OWNER01 — dueño: brand-2026.css (migrado desde responsive.css) */ /* Mantiene: móvil scroll horizontal en acciones + desktop neutraliza width:100% */ @media (max-width: 480px){ .topbar .actions{ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } .topbar .actions button, .topbar .actions a.button, .topbar .actions .btn{ min-width: 0; flex: 0 0 auto; white-space: nowrap; } } @media (min-width: 992px){ .topbar .actions button, .topbar .actions a.button, .topbar .actions .btn{ width: auto !important; flex: 0 0 auto !important; display: inline-flex !important; align-items: center; justify-content: center; white-space: nowrap; min-width: 140px; } } /* TOPBAR_OWNER01 END */ /* ACTIONS_OWNER01 — dueño: brand-2026.css (base actions + mobile stacking) */ .actions, .item-actions{ display: flex; gap: 10px; flex-wrap: wrap; } @media (max-width: 480px){ .actions > button, .actions > .btn, .actions > a.btn, .item-actions > button, .item-actions > .btn, .item-actions > a.btn{ flex: 1 1 100%; width: 100%; } } /* ACTIONS_OWNER01 END */ /* BRAND_OWNER_TOPBAR_DUP_DISABLED_END */ /* FIX_ACTIONS_DARKTEXT01 — botones/links de flujo visibles en dark aunque no estén en .item-actions */ html[data-mode="dark"] .actions button, html[data-mode="dark"] .actions a, html[data-mode="dark"] a.secondary, html[data-mode="dark"] .secondary{ color: var(--text) !important; } /* DARK_SECONDARY_CATCHALL01 — si un .secondary no está en .item-actions ni .actions, igual debe verse bien */ html[data-mode="dark"] a.secondary, html[data-mode="dark"] button.secondary, html[data-mode="dark"] .secondary{ background: rgba(255,255,255,.10) !important; color: rgba(255,255,255,.92) !important; border-color: rgba(255,255,255,.25) !important; } /* ========================================================= ET2A_DAYUI_MIG01 — UI DIA (migrado desde patch-day-ui.css) OBJ: mantener look, cambiar dueño a brand-2026.css ========================================================= */ /* PATCH_DAYUI01 — UI Día (premium) | reversible | owner=patch */ html[data-mode="light"] body{ background: var(--bg) !important; color: var(--text) !important; } html[data-mode="light"] .card, html[data-mode="light"] .panel, html[data-mode="light"] .box{ background: var(--card) !important; border: 1px solid var(--border) !important; box-shadow: 0 10px 28px rgba(0,0,0,.10) !important; border-radius: 18px !important; } /* AUD_BADGES_OLD_DISABLED */html[data-mode="light"] .badge, /* AUD_BADGES_OLD_DISABLED */html[data-mode="light"] #gpsBadge, /* AUD_BADGES_OLD_DISABLED */html[data-mode="light"] #alertsBadge, /* AUD_BADGES_OLD_DISABLED *//* BRAND_OWNER_BADGES01_DISABLED */html[data-mode="light"] #activeTripBadge{ /* AUD_BADGES_OLD_DISABLED *//* BRAND_OWNER_BADGES01_DISABLED */ background: rgba(0,0,0,.06) !important; /* AUD_BADGES_OLD_DISABLED *//* BRAND_OWNER_BADGES01_DISABLED */ color: rgba(0,0,0,.78) !important; /* AUD_BADGES_OLD_DISABLED *//* BRAND_OWNER_BADGES01_DISABLED */ border: 1px solid rgba(0,0,0,.10) !important; /* AUD_BADGES_OLD_DISABLED *//* BRAND_OWNER_BADGES01_DISABLED */ box-shadow: none !important; /* AUD_BADGES_OLD_DISABLED *//* BRAND_OWNER_BADGES01_DISABLED */ border-radius: 999px !important; /* AUD_BADGES_OLD_DISABLED *//* BRAND_OWNER_BADGES01_DISABLED */} /* AUD_BADGES_OLD_DISABLED */html[data-mode="light"] button, /* AUD_BADGES_OLD_DISABLED */html[data-mode="light"] .btn{ /* AUD_BADGES_OLD_DISABLED */ border-radius: 16px !important; /* AUD_BADGES_OLD_DISABLED */ transition: transform .06s ease, filter .12s ease, box-shadow .12s ease; /* AUD_BADGES_OLD_DISABLED */} html[data-mode="light"] button:active, html[data-mode="light"] .btn:active{ transform: translateY(1px); } html[data-mode="light"] button.secondary{ background: var(--card) !important; border: 1px solid var(--border) !important; color: var(--text) !important; font-weight: 700 !important; } html[data-mode="light"] button.secondary:hover{ filter: brightness(.98); box-shadow: 0 8px 18px rgba(0,0,0,.10); } html[data-mode="light"] input, html[data-mode="light"] select, html[data-mode="light"] textarea{ background: #FFFFFF !important; border: 1px solid rgba(0,0,0,.14) !important; color: var(--text) !important; border-radius: 16px !important; } html[data-mode="light"] input:focus, html[data-mode="light"] select:focus, html[data-mode="light"] textarea:focus{ outline: none; border-color: rgba(var(--accent-rgb), .55) !important; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14) !important; } /* ========================= PATCH_DAYUI03 — Enamorar PRO (topbar + chips) ========================= */ html[data-mode="light"] .topbar{ background: rgba(255,255,255,.82) !important; border: 1px solid rgba(0,0,0,.08) !important; box-shadow: 0 12px 30px rgba(0,0,0,.10) !important; backdrop-filter: blur(10px); } html[data-mode="light"] .brand-row, html[data-mode="light"] .brandbar, html[data-mode="light"] .brandbar-inner{ background: rgba(255,255,255,0) !important; } html[data-mode="light"] .badge, html[data-mode="light"] #gpsBadge, html[data-mode="light"] #alertsBadge, html[data-mode="light"] #activeTripBadge{ background: var(--badge-bg) !important; color: var(--badge-text) !important; border-radius: 999px !important; border: 1px solid var(--badge-border) !important; box-shadow: none !important; } html[data-mode="light"] #gpsBadge.gps-on, html[data-mode="light"] #alertsBadge.on{ background: var(--badge-on-bg) !important; border-color: var(--badge-on-border) !important; } /* ========================================================= BRAND_TOKEN_INPUTS01 — Inputs tokenizados (owner=brand-2026.css) Objetivo: 1 solo look & feel con tokens, fácil de cambiar en el futuro. ========================================================= */ /* LIGHT */ html[data-mode="light"] input, html[data-mode="light"] select, html[data-mode="light"] textarea{ background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; min-height: 44px; outline: none; } html[data-mode="light"] input::placeholder, html[data-mode="light"] textarea::placeholder{ color: var(--muted); opacity: 1; } html[data-mode="light"] input:focus, html[data-mode="light"] select:focus, html[data-mode="light"] textarea:focus{ border-color: rgba(var(--accent-rgb, 255,138,31), .55); box-shadow: 0 0 0 3px rgba(var(--accent-rgb-soft, 200,106,58), .20); } /* Opcional pero recomendado: estado disabled coherente */ html[data-mode="light"] input:disabled, html[data-mode="light"] select:disabled, html[data-mode="light"] textarea:disabled{ opacity: .65; cursor: not-allowed; } /* DARK (si luego reactivamos dark, esto ya queda listo) */ html[data-mode="dark"] input, html[data-mode="dark"] select, html[data-mode="dark"] textarea{ background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; min-height: 44px; outline: none; } html[data-mode="dark"] input::placeholder, html[data-mode="dark"] textarea::placeholder{ color: var(--muted); opacity: 1; } html[data-mode="dark"] input:focus, html[data-mode="dark"] select:focus, html[data-mode="dark"] textarea:focus{ border-color: rgba(var(--accent-rgb, 255,138,31), .55); box-shadow: 0 0 0 3px rgba(var(--accent-rgb-soft, 200,106,58), .20); } /* ========================================================= MIG_DARK_ITEMACTIONS01 — moved from compat.css (theme only) Ensure secondary/danger visible inside item-actions in DARK ========================================================= */ html[data-mode="dark"] .item-actions .secondary, html[data-mode="dark"] .item-actions button.secondary, html[data-mode="dark"] .item-actions a.secondary{ background: rgba(255,255,255,.10) !important; color: var(--text) !important; border-color: var(--border) !important; } html[data-mode="dark"] .item-actions .danger, html[data-mode="dark"] .item-actions button.danger, html[data-mode="dark"] .item-actions a.danger{ background: var(--ds-danger, #dc2626) !important; color: #fff !important; } /* UI_DRIVER_BADGEROW01 — Conductor: fila de badges (1 línea) */ html[data-mode="light"] body.role-driver .badge-row{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0;padding-bottom:2px;} html[data-mode="light"] body.role-driver .badge-row .badge{white-space:nowrap;flex:0 0 auto;} /* ========================================================= BTN_ORANGE01 — Secondary naranja (outline) consistente Objetivo: que .secondary también tenga el color de marca Owner: brand-2026.css ========================================================= */ /* LIGHT: secondary = outline naranja */ html[data-mode="light"] button.secondary, html[data-mode="light"] a.secondary, html[data-mode="light"] .secondary{ background: transparent !important; border: 1px solid var(--brand-accent) !important; color: var(--brand-accent) !important; } html[data-mode="light"] button.secondary:hover, html[data-mode="light"] a.secondary:hover, html[data-mode="light"] .secondary:hover{ background: rgba(var(--accent-rgb), .12) !important; } /* DARK: secondary = outline naranja (visible en fondo oscuro) */ html[data-mode="dark"] button.secondary, html[data-mode="dark"] a.secondary, html[data-mode="dark"] .secondary{ background: rgba(var(--accent-rgb), .10) !important; border-color: rgba(var(--accent-rgb), .55) !important; color: var(--brand-accent) !important; } html[data-mode="dark"] button.secondary:hover, html[data-mode="dark"] a.secondary:hover, html[data-mode="dark"] .secondary:hover{ background: rgba(var(--accent-rgb), .18) !important; } /* ========================================================= /* ========================================================= BTN_POLISH01 — Botones más claros y “tocables” (sin romper layout) Owner: brand-2026.css ========================================================= */ button, .btn, .button, .btn-primary, .btn-secondary{ font-weight: 600 !important; letter-spacing: .2px !important; } /* Un toque más de aire (sin cambiar min-height) */ button, .btn, .button{ padding: 13px 16px !important; } /* Secondary naranja: borde un poco más visible */ html[data-mode="light"] button.secondary, html[data-mode="light"] a.secondary, html[data-mode="light"] .secondary, html[data-mode="dark"] button.secondary, html[data-mode="dark"] a.secondary, html[data-mode="dark"] .secondary{ border-width: 1.5px !important; } /* === APP_LAYOUT_OWNER01 (OWNER) - Layout app (container/topbar roles) === */ /* Migrado desde components.css para respetar: brand-2026.css dueño de .container/.topbar */ body.role-driver .container{ max-width:none; } body.role-passenger .container{ max-width:none; } @media (max-width: 520px){ body.role-driver .container{ padding-left:0; padding-right:0; } body.role-driver .topbar{ padding-left: var(--space-5); padding-right: var(--space-5); } } /* === APP_LAYOUT_OWNER01 (OWNER) END === */ /* === V1_2026-02-10_BRANDROW_RESPONSIVE01 === */ /* objetivo: mantener "card pro" pero que crezca en tablet/PC (no max-width 520 fijo) */ /* __NOTE__BRANDROW_MARKERS_WRONG_SPOT_BEGIN */ .brand-row{ width: calc(100% - 24px); max-width: 1200px; margin-left: auto; margin-right: auto; } /* __NOTE__BRANDROW_MARKERS_WRONG_SPOT_END */ @media (max-width: 900px){ .brand-row{ max-width: 900px; } } @media (max-width: 520px){ .brand-row{ width: calc(100% - 16px); max-width: none; } } /* === V1_2026-02-10_SUPPORT_CONTRACT01 === */ /* objetivo: evitar "botón WhatsApp" cuando href es # o vacío (login) */ #supportWhatsApp[href="#"], .brand-support[href="#"]{ display: none !important; } #supportWhatsApp:not([href]), .brand-support:not([href]){ display: none !important; } /* Si el href es real de WhatsApp, se muestra (ya tienes estilos por href*="wa.me"/"whatsapp") */