/* 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); } /* Base legible */ body{ color: var(--brand-text); background: var(--brand-bg); line-height: 1.45; font-size: 16px; } /* 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) */ .card, .panel, .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; } /* Cards / cajas */ .card, .panel, .box{ background: #fff !important; border: 1px solid rgba(0,0,0,.08) !important; } /* ========================= B2.2 Ayacucho palette (override) */ :root[data-theme="ayacucho"]{ /* Azul añil (principal) + Ocre retablo (secundario) */ --brand-accent: #1D4ED8; /* indigo/azul confiable */ --brand-accent-2: #F59E0B; /* ocre retablo */ } /* 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 */ html[data-mode="light"] body{ background: var(--brand-bg) !important; color: var(--brand-text) !important; } /* 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” */ html[data-mode="light"] body{ color: #0b1220; } h1,h2,h3,.title,.subtitle,label{ color: #0b1220 !important; text-shadow: none !important; opacity: 1 !important; } /* Card/superficie del formulario (genérico para no depender de clases exactas) */ form, .card, .panel, .box, .container .card, .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; } /* Inputs legibles */ html[data-mode="light"] input::placeholder, html[data-mode="light"] textarea::placeholder{ color: rgba(11,18,32,.45) !important; } /* Si algún bloque quedó “apagado” por opacity */ *{ -webkit-font-smoothing: antialiased; } /* ========================= 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(--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); } /* Contenedor: padding móvil (suave) */ .container{ 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: 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); } /* Secondary: estilo ghost (mucho en app) */ .secondary{ background: transparent !important; border: 1px solid var(--brand-border) !important; color: var(--brand-text) !important; box-shadow: none !important; } /* Filas de botones en landing taxi-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 */ html[data-mode="light"] body{ padding-bottom: env(safe-area-inset-bottom); } /* 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; } /* Botones secondary más visibles */ html[data-mode="light"] button.secondary{ background: #f3f4f6 !important; border: 1px solid rgba(0,0,0,.18) !important; color: rgba(0,0,0,.88) !important; font-weight: 700 !important; } /* 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"]{ --bg: var(--brand-bg); --card: var(--brand-surface); --text: var(--brand-text); --muted: var(--brand-muted); --accent: var(--brand-accent); --border: var(--brand-border); --shadow: var(--brand-shadow-1); } html[data-mode="dark"]{ --bg: #0b1220; --card: rgba(255,255,255,.06); --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.70); --accent: var(--brand-accent-2); /* o el que quieras para conductor */ --border: rgba(255,255,255,.12); --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; }