/* ================================================================== ROWAN · GOOGLE MATERIAL THEME Activado mediante Reutiliza el markup del live strip + roster pero con estética Material 3: blanco, paleta Google, sombras suaves, sin glass. ================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@400;500&family=Google+Sans+Display:wght@400;500;700&display=swap'); /* ================================================================== 1) TOKENS — paleta Google + tipografía Roboto/Google Sans ================================================================== */ html[data-style="google"]{ --ink: #f8f9fa; --ink-2: #ffffff; --surface: #ffffff; --surface-2: #ffffff; --line: #dadce0; --line-2: #bdc1c6; --text: #202124; --text-dim: #3c4043; --muted: #5f6368; --muted-2: #80868b; --accent: #B97D36; --accent-deep: #6E5B3F; --accent-light: #EDD4AD; --jade: #1e8e3e; --blue: #1a73e8; --violet: #9334e6; --rust: #d93025; --grain-opacity: 0; --hero-glow-1: transparent; --hero-glow-2: transparent; --f-display: 'Google Sans Display', 'Roboto', system-ui, sans-serif; --f-ui: 'Roboto', system-ui, sans-serif; --f-mono: 'Roboto Mono', ui-monospace, monospace; --row-hover: rgba(185,125,54,.06); --chart-grid: rgba(60,64,67,.10); --tooltip-bg: rgba(255,255,255,.98); /* Google extras */ --g-blue: #1a73e8; --g-blue-soft: #e8f0fe; --g-red: #d93025; --g-red-soft: #fce8e6; --g-yellow: #f9ab00; --g-yellow-soft: #fef7e0; --g-green: #1e8e3e; --g-green-soft: #e6f4ea; --g-purple: #9334e6; --g-divider: #f1f3f4; --g-shadow-1: 0 1px 2px 0 rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15); --g-shadow-2: 0 1px 2px 0 rgba(60,64,67,.30), 0 2px 6px 2px rgba(60,64,67,.15); --g-shadow-3: 0 4px 8px 3px rgba(60,64,67,.15), 0 1px 3px 0 rgba(60,64,67,.30); } /* ================================================================== 2) BODY — gris muy claro Google, sin grano ni aurora ================================================================== */ html[data-style="google"] body{ background: var(--ink) !important; color: var(--text); font-family: var(--f-ui); font-size: 14px; line-height: 1.5; } html[data-style="google"] body::before, html[data-style="google"] body::after{ display: none !important; } html[data-style="google"] .glow{ display: none !important; } a, button{ font-family: var(--f-ui); } /* ================================================================== 3) CARDS — Material elevation (sin glass) ================================================================== */ html[data-style="google"] .card, html[data-style="google"] .pain-card, html[data-style="google"] .benefit, html[data-style="google"] .step, html[data-style="google"] .cta-banner, html[data-style="google"] .sm-dialog, html[data-style="google"] .sm-card{ background: #fff !important; border: 1px solid var(--line) !important; border-radius: 12px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: var(--g-shadow-1) !important; transition: box-shadow .2s, transform .15s, border-color .2s; } html[data-style="google"] .card::before, html[data-style="google"] .card::after, html[data-style="google"] .pain-card::before, html[data-style="google"] .benefit::before, html[data-style="google"] .step::before, html[data-style="google"] .cta-banner::before{ display: none !important; } html[data-style="google"] .card:hover, html[data-style="google"] .card.active:hover{ box-shadow: var(--g-shadow-2) !important; border-color: var(--line-2) !important; transform: none !important; } /* En Google Material el .card h3 (sector-name) hereda la escala editorial (Syne 800 ~ clamp 22-26px) que se define en landing.html. Solo ajustamos color para que pegue con el blanco Material. */ html[data-style="google"] .card h3{ color: var(--text) !important; } html[data-style="google"] .card h3::before{ display: none !important; } /* ================================================================== 4) TIPOGRAFÍA — sin gradient text, Google Sans Display ================================================================== */ html[data-style="google"] h2{ font-family: 'Google Sans Display', 'Roboto', sans-serif !important; font-weight: 500 !important; letter-spacing: -.005em !important; background: none !important; -webkit-text-fill-color: var(--text) !important; color: var(--text) !important; text-shadow: none !important; } html[data-style="google"] h2 > *{ -webkit-text-fill-color: currentColor; background: none !important; } html[data-style="google"] .hero h1, html[data-style="google"] .section-title{ font-family: 'Google Sans Display', 'Roboto', sans-serif !important; font-weight: 500 !important; letter-spacing: -.01em !important; color: var(--text) !important; } html[data-style="google"] .hero h1 em, html[data-style="google"] .section-title em, html[data-style="google"] .cta-banner h3 em, html[data-style="google"] footer em, html[data-style="google"] .brand-name em{ background: none !important; -webkit-text-fill-color: var(--accent) !important; color: var(--accent) !important; font-weight: 500; font-style: normal; } html[data-style="google"] .step .step-n{ background: none !important; -webkit-text-fill-color: var(--accent) !important; color: var(--accent) !important; font-family: 'Google Sans Display', sans-serif !important; font-weight: 500 !important; } /* ================================================================== 5) KPI — número solid en azul Google ================================================================== */ html[data-style="google"] .kpi .val{ font-family: 'Google Sans Display', sans-serif !important; font-size: 36px !important; font-weight: 500 !important; letter-spacing: -.01em !important; background: none !important; -webkit-text-fill-color: var(--text) !important; color: var(--text) !important; text-shadow: none !important; } html[data-style="google"] .kpi .val > *{ -webkit-text-fill-color: currentColor; } html[data-style="google"] .kpi .val .up, html[data-style="google"] .kpi .val .pos, html[data-style="google"] .kpi .val .good{ color: var(--g-green) !important; -webkit-text-fill-color: var(--g-green) !important; } html[data-style="google"] .kpi .val .down, html[data-style="google"] .kpi .val .neg, html[data-style="google"] .kpi .val .bad{ color: var(--g-red) !important; -webkit-text-fill-color: var(--g-red) !important; } /* ================================================================== 6) TABLAS — Material data table ================================================================== */ html[data-style="google"] table{ font-family: var(--f-ui); font-size: 13px !important; border-collapse: separate; border-spacing: 0; } html[data-style="google"] th{ background: #f8f9fa !important; color: var(--muted) !important; border-bottom: 1px solid var(--line) !important; font-family: var(--f-ui); font-size: 11px !important; font-weight: 500 !important; letter-spacing: .04em !important; text-transform: uppercase; padding: 14px 16px !important; position: sticky; top: 0; z-index: 5; cursor: pointer; backdrop-filter: none !important; text-align: left; } /* Columnas numéricas: header alineado a la derecha como sus celdas */ html[data-style="google"] th.num{ text-align: right !important; } html[data-style="google"] th:hover{ background: rgba(185,125,54,.04) !important; color: var(--text) !important; } html[data-style="google"] th.sort-asc::after, html[data-style="google"] th.sort-desc::after{ background: none !important; -webkit-text-fill-color: var(--accent) !important; color: var(--accent) !important; opacity: 1 !important; } html[data-style="google"] td{ border-bottom: 1px solid var(--g-divider) !important; padding: 14px 16px !important; color: var(--text); } html[data-style="google"] tbody tr{ transition: background .15s; } html[data-style="google"] tbody tr:hover td{ background: var(--row-hover) !important; color: var(--text); } html[data-style="google"] tbody tr:hover .num{ text-shadow: none !important; } html[data-style="google"] tbody tr:last-child td{ border-bottom: 0 !important; } html[data-style="google"] .num{ font-family: var(--f-mono); font-variant-numeric: tabular-nums slashed-zero; font-weight: 500; color: var(--text); } html[data-style="google"] .good, html[data-style="google"] td.good, html[data-style="google"] .num.good{ color: var(--g-green) !important; } html[data-style="google"] .bad, html[data-style="google"] td.bad, html[data-style="google"] .num.bad{ color: var(--g-red) !important; } /* ================================================================== 7) TAGS — Material chips ================================================================== */ html[data-style="google"] .tag{ font-family: var(--f-ui); font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none; padding: 4px 10px !important; border-radius: 999px; backdrop-filter: none !important; background: var(--g-divider) !important; border: 0 !important; display: inline-flex; align-items: center; gap: 6px; } html[data-style="google"] .tag::before{ display: none !important; } html[data-style="google"] .tag-red { background: var(--g-red-soft) !important; color: var(--g-red) !important; } html[data-style="google"] .tag-yellow{ background: var(--g-yellow-soft) !important; color: var(--g-yellow) !important; } html[data-style="google"] .tag-green { background: var(--g-green-soft) !important; color: var(--g-green) !important; } html[data-style="google"] .tag-blue { background: var(--g-blue-soft) !important; color: var(--g-blue) !important; } html[data-style="google"] .tag-gray { background: var(--g-divider) !important; color: var(--muted) !important; } /* ================================================================== 8) BÚSQUEDA + filtros ================================================================== */ html[data-style="google"] .search, html[data-style="google"] .tbl-search input{ background: #fff !important; border-color: var(--line) !important; border-radius: 24px !important; color: var(--text) !important; } html[data-style="google"] .search:focus-within, html[data-style="google"] .tbl-search input:focus{ border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(185,125,54,.12) !important; } html[data-style="google"] .search input::placeholder{ color: var(--muted-2) !important; } html[data-style="google"] .row-count, html[data-style="google"] .tbl-search .tbl-count{ color: var(--muted) !important; } /* ================================================================== 9) HEADER del sector + sector switcher ================================================================== */ html[data-style="google"] header{ background: #fff !important; backdrop-filter: none !important; border-bottom: 1px solid var(--line) !important; box-shadow: var(--g-shadow-1) !important; z-index: 1500 !important; /* por encima de Leaflet (max 1000) */ } html[data-style="google"] .brand-mark{ background: var(--accent) !important; color: #fff !important; box-shadow: var(--g-shadow-1) !important; border-radius: 8px; } html[data-style="google"] .brand-name em{ background: none !important; color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important; } html[data-style="google"] .sector-sw .sw-trigger{ background: #fff !important; border-color: var(--line) !important; border-radius: 24px !important; color: var(--text); } html[data-style="google"] .sector-sw .sw-trigger:hover{ background: rgba(185,125,54,.04) !important; border-color: var(--g-blue) !important; box-shadow: none !important; } html[data-style="google"] .sector-sw .sw-trigger .dot{ background: var(--accent) !important; box-shadow: 0 0 6px rgba(185,125,54,.4) !important; } html[data-style="google"] .sector-sw .sw-menu{ background: #fff !important; backdrop-filter: none !important; border-color: var(--line) !important; border-radius: 8px; box-shadow: var(--g-shadow-3) !important; } html[data-style="google"] .sw-item.active{ background: var(--g-blue-soft) !important; } html[data-style="google"] .sw-item:hover{ background: rgba(185,125,54,.04) !important; } html[data-style="google"] nav a.active{ color: var(--text) !important; } html[data-style="google"] nav a.active::after{ background: var(--accent) !important; box-shadow: none !important; height: 3px !important; } html[data-style="google"] nav a:hover{ color: var(--accent) !important; } /* Filtros */ html[data-style="google"] .hdr-select, html[data-style="google"] .hdr-btn{ background: #fff !important; border-color: var(--line) !important; color: var(--text-dim) !important; backdrop-filter: none !important; border-radius: 24px !important; } html[data-style="google"] .hdr-select:hover, html[data-style="google"] .hdr-btn:hover{ border-color: var(--accent) !important; background: rgba(185,125,54,.04) !important; box-shadow: var(--g-shadow-1) !important; } html[data-style="google"] .hdr-select:focus{ outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(185,125,54,.12) !important; } /* ================================================================== 10) BOTONES + selección ================================================================== */ html[data-style="google"] .btn-primary{ background: var(--accent) !important; color: #fff !important; border: 0 !important; border-radius: 24px !important; font-family: var(--f-ui) !important; font-weight: 500 !important; box-shadow: var(--g-shadow-1) !important; text-transform: none; } html[data-style="google"] .btn-primary:hover{ background: var(--accent-deep) !important; box-shadow: var(--g-shadow-2) !important; filter: none !important; transform: none !important; } html[data-style="google"] .btn-ghost{ background: transparent !important; border: 1px solid var(--line) !important; border-radius: 24px !important; color: var(--accent) !important; font-weight: 500 !important; } html[data-style="google"] .btn-ghost:hover{ background: rgba(185,125,54,.04) !important; border-color: var(--accent) !important; color: var(--accent) !important; box-shadow: none !important; } html[data-style="google"] ::selection{ background: rgba(185,125,54,.20); color: var(--text); } html[data-style="google"] .scroll{ scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } html[data-style="google"] .scroll::-webkit-scrollbar-thumb{ background: var(--line-2); border-radius: 999px; } /* ================================================================== 11) SWITCHER pill estilo Material ================================================================== */ html[data-style="google"] .rwn-switcher{ background: var(--g-divider); border: 0; } html[data-style="google"] .rwn-switcher button{ color: var(--muted); } html[data-style="google"] .rwn-switcher button:hover{ color: var(--text); } html[data-style="google"] .rwn-switcher button[aria-pressed="true"]{ background: #fff; color: var(--accent); box-shadow: var(--g-shadow-1); } /* ================================================================== 12) LIVE STRIP — KPI/Mapa/Feed (mismo markup, look material) ================================================================== */ html[data-style="google"] .m-live-strip{ display: grid; grid-template-columns: 360px 1fr 360px; gap: 16px; padding: 16px var(--s-4, 32px); margin: 0 auto; max-width: 1800px; align-items: stretch; } html[data-style="google"] .m-live-strip.has-fleet{ grid-template-columns: 420px 1fr 360px; } @media (max-width: 1280px){ html[data-style="google"] .m-live-strip, html[data-style="google"] .m-live-strip.has-fleet{ grid-template-columns: 1fr 1fr; } html[data-style="google"] .m-live-feed{ grid-column: 1 / -1; } } @media (max-width: 800px){ html[data-style="google"] .m-live-strip, html[data-style="google"] .m-live-strip.has-fleet{ grid-template-columns: 1fr; padding: 12px; } } /* Paneles base: blanco + material elevation */ html[data-style="google"] .m-live-kpi, html[data-style="google"] .m-live-fleet, html[data-style="google"] .m-live-map, html[data-style="google"] .m-live-feed{ background: #fff !important; border: 1px solid var(--line) !important; border-radius: 12px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: var(--g-shadow-1) !important; } html[data-style="google"] .m-live-kpi::before, html[data-style="google"] .m-live-kpi::after, html[data-style="google"] .m-live-fleet::after, html[data-style="google"] .m-live-feed::after{ display: none !important; } /* KPI panel */ html[data-style="google"] .m-live-kpi .label, html[data-style="google"] .m-live-fleet > .head .label, html[data-style="google"] .m-live-feed .head h4, html[data-style="google"] .m-live-map .head h4{ color: var(--text) !important; font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; font-size: 13px !important; font-weight: 500; } html[data-style="google"] .m-live-kpi .label::before, html[data-style="google"] .m-live-fleet > .head .label .ldot, html[data-style="google"] .m-live-feed .head h4 .dot, html[data-style="google"] .m-live-map .head h4 .dot{ background: var(--g-green) !important; box-shadow: 0 0 6px rgba(30,142,62,.5) !important; } html[data-style="google"] .m-live-kpi .num{ background: none !important; -webkit-text-fill-color: var(--accent) !important; color: var(--accent) !important; font-family: 'Google Sans Display', sans-serif !important; font-weight: 500 !important; font-size: clamp(80px, 11vw, 128px) !important; text-align: center !important; display: block !important; width: 100% !important; margin: 16px auto 10px !important; } html[data-style="google"] .m-live-kpi .delta{ color: var(--g-green) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .m-live-kpi .sub{ color: var(--muted) !important; } html[data-style="google"] .m-live-kpi .num .live-dot{ background: var(--g-green) !important; box-shadow: 0 0 6px rgba(30,142,62,.5) !important; } /* KPI extras Material */ html[data-style="google"] .m-live-kpi.has-extras .num{ font-size: clamp(64px, 9vw, 104px) !important; } html[data-style="google"] .m-live-kpi .kpi-extras{ border-top-color: var(--line) !important; } /* Última fila de KPI extras (típicamente "Comisiones") destacada al pie */ html[data-style="google"] .m-live-kpi .kpi-extras .kpi-row:last-child{ margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); } html[data-style="google"] .m-live-kpi .kpi-extras .kpi-row:last-child .val{ font-weight: 700 !important; color: var(--text) !important; } html[data-style="google"] .m-live-kpi .kpi-row .lbl{ color: var(--muted) !important; font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; font-size: 11px !important; } html[data-style="google"] .m-live-kpi .kpi-row .val{ color: var(--text) !important; font-family: 'Google Sans Display', sans-serif !important; font-weight: 500 !important; } /* Center widget Google Material */ html[data-style="google"] .m-live-center{ background: #fff !important; border: 1px solid var(--line) !important; box-shadow: var(--g-shadow-1) !important; backdrop-filter: none !important; } html[data-style="google"] .m-live-center > .head{ border-bottom-color: var(--line) !important; } html[data-style="google"] .m-live-center > .head h4{ color: var(--text) !important; font-family: var(--f-ui) !important; font-weight: 500 !important; } html[data-style="google"] .m-live-center > .head h4 .dot{ background: var(--g-green) !important; box-shadow: 0 0 6px rgba(30,142,62,.5) !important; } html[data-style="google"] .m-live-center > .head .meta{ color: var(--muted) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .cw-empty{ color: var(--muted) !important; } /* Heatmap Google */ html[data-style="google"] .cwh-hh, html[data-style="google"] .cwh-day{ color: var(--muted) !important; font-family: var(--f-ui) !important; letter-spacing: 0; text-transform: none; font-size: 11px !important; } html[data-style="google"] .cwh-cell{ background: linear-gradient(135deg, rgba(26, 115, 232, calc(var(--i) * 0.85)), rgba(66, 133, 244, calc(var(--i) * 0.65))) !important; border-color: var(--line) !important; } /* Gauges Google */ html[data-style="google"] .cwg-bg{ stroke: var(--g-divider) !important; } html[data-style="google"] .cwg-fill{ filter: none !important; } html[data-style="google"] .cwg-num{ font-family: 'Google Sans Display', sans-serif !important; font-weight: 500 !important; } html[data-style="google"] .cwg-lbl{ color: var(--muted) !important; font-family: var(--f-ui) !important; letter-spacing: 0; } /* Donut Google */ html[data-style="google"] .cwd-bg{ stroke: var(--g-divider) !important; } html[data-style="google"] .cwd-big{ color: var(--text) !important; font-family: 'Google Sans Display', sans-serif !important; font-weight: 500 !important; } html[data-style="google"] .cwd-sub{ color: var(--muted) !important; font-family: var(--f-ui) !important; letter-spacing: 0; text-transform: none; } html[data-style="google"] .cwd-lg-name{ color: var(--text) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .cwd-lg-val{ color: var(--muted) !important; font-family: var(--f-mono) !important; } /* Bars Google */ html[data-style="google"] .cwb-rank{ color: var(--muted) !important; font-family: var(--f-mono) !important; } html[data-style="google"] .cwb-label{ color: var(--text) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .cwb-bar-wrap{ background: var(--g-divider) !important; } html[data-style="google"] .cwb-bar{ background: var(--g-blue) !important; } html[data-style="google"] .cwb-row:nth-child(1) .cwb-bar{ background: var(--g-yellow) !important; } html[data-style="google"] .cwb-row:nth-child(2) .cwb-bar{ background: var(--g-blue) !important; } html[data-style="google"] .cwb-row:nth-child(3) .cwb-bar{ background: var(--g-green) !important; } html[data-style="google"] .cwb-val{ color: var(--text) !important; font-family: var(--f-mono) !important; } /* Gantt Google */ html[data-style="google"] .cwg-axis{ color: var(--muted) !important; font-family: var(--f-ui) !important; letter-spacing: 0; text-transform: none; border-bottom-color: var(--line) !important; } html[data-style="google"] .cwgt-name{ color: var(--text) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .cwgt-track{ background: var(--g-divider) !important; } html[data-style="google"] .cwgt-hito{ color: var(--g-yellow) !important; font-family: var(--f-mono) !important; } /* Channels (hotel) Google */ html[data-style="google"] .cwc-top{ border-bottom-color: var(--line) !important; } html[data-style="google"] .cwc-stacked{ background: var(--g-divider) !important; } html[data-style="google"] .cwc-total-num{ color: var(--text) !important; font-family: 'Google Sans Display', sans-serif !important; font-weight: 500 !important; } html[data-style="google"] .cwc-total-lbl{ color: var(--muted) !important; font-family: var(--f-ui) !important; letter-spacing: 0; } html[data-style="google"] .cwc-row .cwc-name{ color: var(--text) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .cwc-row.top .cwc-name{ color: var(--text) !important; font-weight: 600 !important; } html[data-style="google"] .cwc-row .cwc-val, html[data-style="google"] .cwc-row .cwc-adr{ color: var(--muted) !important; font-family: var(--f-mono) !important; } html[data-style="google"] .cwc-row .cwc-rev{ color: var(--g-blue) !important; font-family: var(--f-mono) !important; } html[data-style="google"] .cwc-row .cwc-bar{ background: var(--g-divider) !important; } /* Leads perf (inmobiliaria) Google */ html[data-style="google"] .cwl-name{ color: var(--text) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .cwl-val{ color: var(--text-dim) !important; font-family: var(--f-mono) !important; } html[data-style="google"] .cwl-bar{ background: var(--g-divider) !important; } html[data-style="google"] .cwl-fill{ background: var(--c, var(--g-blue)) !important; } html[data-style="google"] .cwl-cpl.paid{ color: var(--text-dim) !important; font-family: var(--f-mono) !important; } html[data-style="google"] .cwl-cpl.organic{ color: var(--g-green) !important; font-family: var(--f-mono) !important; } html[data-style="google"] .cwl-conv.conv-high{ color: var(--g-green) !important; font-family: var(--f-mono) !important; } html[data-style="google"] .cwl-conv.conv-mid { color: var(--g-yellow) !important; font-family: var(--f-mono) !important; } html[data-style="google"] .cwl-conv.conv-low { color: var(--muted) !important; font-family: var(--f-mono) !important; } /* Cards grid (talleres) Google */ html[data-style="google"] .cwk-card{ background: #fff !important; border: 1px solid var(--line) !important; box-shadow: var(--g-shadow-1) !important; border-radius: 8px !important; } html[data-style="google"] .cwk-card::before{ box-shadow: none !important; } html[data-style="google"] .cwk-name{ color: var(--text-dim) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .cwk-num{ color: var(--text) !important; font-family: 'Google Sans Display', sans-serif !important; font-weight: 500 !important; } html[data-style="google"] .cwk-num-lbl{ color: var(--muted) !important; font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; } html[data-style="google"] .cwk-meta{ color: var(--muted) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .cwk-rev{ color: var(--c, var(--g-blue)) !important; font-family: var(--f-mono) !important; } /* Agenda Google */ html[data-style="google"] .cwa-row{ background: #fafbfc !important; border: 1px solid var(--line) !important; } html[data-style="google"] .cwa-row.s-in { border-left-color: var(--g-blue) !important; background: var(--g-blue-soft) !important; } html[data-style="google"] .cwa-row.s-next { border-left-color: var(--g-yellow) !important; } html[data-style="google"] .cwa-row.s-later{ border-left-color: var(--line-2) !important; } html[data-style="google"] .cwa-time{ color: var(--text) !important; font-family: var(--f-mono) !important; } html[data-style="google"] .cwa-pat{ color: var(--text) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .cwa-meta{ color: var(--muted) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .cwa-status{ color: var(--muted) !important; font-family: var(--f-ui) !important; letter-spacing: 0; text-transform: none; } html[data-style="google"] .cwa-row.s-in .cwa-status { color: var(--g-blue) !important; } html[data-style="google"] .cwa-row.s-next .cwa-status{ color: var(--g-yellow) !important; } /* Map: tile filter neutro (positron ya light) */ html[data-style="google"] .leaflet-tile-pane{ filter: none; } html[data-style="google"] .leaflet-container{ background: #f1f3f4 !important; font-family: var(--f-ui); } html[data-style="google"] .leaflet-control-attribution{ background: rgba(255,255,255,.92) !important; color: var(--muted) !important; font-size: 9px !important; border-top-left-radius: 6px; border: 1px solid var(--line); } html[data-style="google"] .leaflet-control-attribution a{ color: var(--accent) !important; } html[data-style="google"] .m-live-map .head .meta{ background: rgba(255,255,255,.92) !important; color: var(--muted) !important; border: 1px solid var(--line); } /* City markers */ html[data-style="google"] .viz-marker .vm-core{ background: var(--g-blue) !important; box-shadow: 0 0 6px rgba(185,125,54,.6) !important; } html[data-style="google"] .viz-marker .vm-pulse{ border-color: var(--g-blue) !important; } html[data-style="google"] .viz-marker.hot .vm-core{ background: var(--g-red) !important; box-shadow: 0 0 8px rgba(217,48,37,.6) !important; } html[data-style="google"] .viz-marker.hot .vm-pulse{ border-color: var(--g-red) !important; } /* Feed */ html[data-style="google"] .m-live-feed .head{ border-bottom-color: var(--line) !important; } html[data-style="google"] .m-live-feed .head .stat{ color: var(--muted) !important; } html[data-style="google"] .m-live-item{ border-bottom-color: var(--g-divider) !important; } html[data-style="google"] .m-live-item .ldot{ background: var(--g-blue) !important; box-shadow: 0 0 4px rgba(185,125,54,.4) !important; } html[data-style="google"] .m-live-item .body .ev{ color: var(--text) !important; } html[data-style="google"] .m-live-item .body .ev em{ color: var(--accent) !important; font-family: var(--f-mono) !important; } html[data-style="google"] .m-live-item .body .meta{ color: var(--muted) !important; } html[data-style="google"] .m-live-item .ts{ color: var(--muted-2) !important; } html[data-style="google"] .m-live-item.kind-success .ldot{ background: var(--g-green) !important; box-shadow: 0 0 4px rgba(30,142,62,.5) !important; } html[data-style="google"] .m-live-item.kind-success .body .ev em{ color: var(--g-green) !important; } html[data-style="google"] .m-live-item.kind-warn .ldot{ background: var(--g-yellow) !important; box-shadow: 0 0 4px rgba(249,171,0,.5) !important; } html[data-style="google"] .m-live-item.kind-warn .body .ev em{ color: var(--g-yellow) !important; } html[data-style="google"] .m-live-item.kind-error .ldot{ background: var(--g-red) !important; box-shadow: 0 0 4px rgba(217,48,37,.5) !important; } html[data-style="google"] .m-live-item.kind-error .body .ev em{ color: var(--g-red) !important; } html[data-style="google"] .m-live-item.kind-hot .ldot{ background: var(--g-red) !important; box-shadow: 0 0 4px rgba(217,48,37,.5) !important; } html[data-style="google"] .m-live-item.kind-hot .body .ev em{ color: var(--g-red) !important; } html[data-style="google"] .m-live-feed .list::-webkit-scrollbar-thumb{ background: var(--line-2) !important; } /* ================================================================== 13) FLEET ROSTER — Material data list ================================================================== */ html[data-style="google"] .m-live-fleet > .head{ border-bottom-color: var(--line) !important; } html[data-style="google"] .m-live-fleet > .head .chip{ background: var(--g-divider) !important; border: 0 !important; color: var(--muted) !important; font-family: var(--f-ui) !important; font-weight: 500 !important; text-transform: none; } html[data-style="google"] .m-live-fleet > .head .chip.s-route { color: var(--g-blue) !important; } html[data-style="google"] .m-live-fleet > .head .chip.s-pause { color: var(--g-yellow) !important; } html[data-style="google"] .m-live-fleet > .head .chip.s-delivered{ color: var(--g-green) !important; } html[data-style="google"] .m-live-fleet > .head .chip .cdot{ box-shadow: 0 0 4px currentColor !important; } html[data-style="google"] .fleet-row{ background: #fff !important; border: 1px solid var(--line) !important; border-radius: 8px !important; margin-bottom: 8px; box-shadow: none !important; animation: none !important; } html[data-style="google"] .fleet-row:hover, html[data-style="google"] .fleet-row.focus{ background: rgba(185,125,54,.04) !important; border-color: var(--g-blue) !important; box-shadow: var(--g-shadow-1) !important; transform: none !important; } html[data-style="google"] .fleet-row.selected{ background: var(--g-blue-soft) !important; border-color: var(--g-blue) !important; box-shadow: 0 0 0 1px var(--g-blue) !important; transform: none !important; } html[data-style="google"] .fleet-row.selected::before{ background: linear-gradient(180deg, var(--g-green), var(--g-red)) !important; box-shadow: none !important; } html[data-style="google"] .fleet-row .vid{ color: var(--text) !important; font-family: var(--f-mono) !important; } html[data-style="google"] .fleet-row .state{ background: var(--g-blue-soft) !important; color: var(--g-blue) !important; border: 0 !important; border-radius: 4px; font-family: var(--f-ui) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 10.5px !important; font-weight: 500 !important; padding: 3px 8px !important; } html[data-style="google"] .fleet-row .state.s-pause { background: var(--g-yellow-soft) !important; color: var(--g-yellow) !important; } html[data-style="google"] .fleet-row .state.s-delivered{ background: var(--g-green-soft) !important; color: var(--g-green) !important; } html[data-style="google"] .fleet-row .state.s-alert { background: var(--g-red-soft) !important; color: var(--g-red) !important; } html[data-style="google"] .fleet-row .eta{ background: none !important; -webkit-text-fill-color: var(--text) !important; color: var(--text) !important; font-family: 'Google Sans Display', sans-serif !important; font-weight: 500 !important; } html[data-style="google"] .fleet-row .eta i{ color: var(--muted) !important; -webkit-text-fill-color: var(--muted) !important; } html[data-style="google"] .fleet-row .route .from{ color: var(--muted) !important; } html[data-style="google"] .fleet-row .route .arrow{ color: var(--g-blue) !important; } html[data-style="google"] .fleet-row .route .to{ color: var(--text) !important; } html[data-style="google"] .fleet-row .route .speed{ color: var(--muted) !important; font-family: var(--f-mono) !important; } html[data-style="google"] .fleet-row .progress{ background: var(--g-divider) !important; } html[data-style="google"] .fleet-row .progress .bar{ background: var(--g-blue) !important; box-shadow: none !important; } html[data-style="google"] .fleet-row .progress .bar::after{ display: none !important; } html[data-style="google"] .fleet-row.urgent{ background: var(--g-yellow-soft) !important; border-color: var(--g-yellow) !important; } html[data-style="google"] .fleet-row.urgent .eta{ background: none !important; -webkit-text-fill-color: var(--g-red) !important; color: var(--g-red) !important; animation: none !important; } html[data-style="google"] .fleet-row.urgent .progress .bar{ background: var(--g-red) !important; } html[data-style="google"] .m-live-fleet .fleet-foot{ background: #fafbfc !important; border-top-color: var(--line) !important; } html[data-style="google"] .m-live-fleet .kpi-mini .kn{ background: none !important; -webkit-text-fill-color: var(--accent) !important; color: var(--accent) !important; font-family: 'Google Sans Display', sans-serif !important; font-weight: 500 !important; } html[data-style="google"] .m-live-fleet .kpi-mini .kl{ color: var(--muted) !important; } /* Vehicle marker — Material rounded square con icono blanco */ html[data-style="google"] .m-veh-glow{ display: none !important; } html[data-style="google"] .m-veh-body{ filter: none !important; background: var(--g-blue); border-radius: 6px; color: #fff !important; box-shadow: var(--g-shadow-1); } html[data-style="google"] .m-veh-label{ background: #fff !important; border: 1px solid var(--line) !important; color: var(--text) !important; box-shadow: var(--g-shadow-1) !important; border-radius: 4px; font-family: var(--f-ui) !important; } html[data-style="google"] .m-veh-label .m-veh-id{ color: var(--text) !important; } html[data-style="google"] .m-veh-label .m-veh-eta{ color: var(--accent) !important; } html[data-style="google"] .m-veh-label::after{ border-top-color: var(--line) !important; filter: none !important; } /* ================================================================== 14) WIDGETS LIVE — eventos/min, top 5, servicios (look Material) ================================================================== */ html[data-style="google"] .m-widget{ background: #fff !important; border: 1px solid var(--line) !important; border-radius: 12px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: var(--g-shadow-1) !important; } html[data-style="google"] .m-widget::after{ display: none !important; } html[data-style="google"] .m-widget .head{ border-bottom-color: var(--line) !important; } html[data-style="google"] .m-widget .head h4{ color: var(--text) !important; font-family: var(--f-ui) !important; font-weight: 500 !important; font-size: 13px !important; } html[data-style="google"] .m-widget .head h4 .dot{ background: var(--g-green) !important; box-shadow: 0 0 6px rgba(30,142,62,.5) !important; } html[data-style="google"] .m-widget .head .meta{ color: var(--muted) !important; font-family: var(--f-ui) !important; } /* Top list */ html[data-style="google"] .top-row .name{ color: var(--text) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .top-row[data-rank="1"] .name{ font-weight: 500; color: var(--text) !important; } html[data-style="google"] .top-row .count{ color: var(--text) !important; font-family: var(--f-mono) !important; font-weight: 500; } html[data-style="google"] .top-row .bar{ background: var(--g-divider) !important; height: 6px; } html[data-style="google"] .top-row .bar .fill{ background: var(--g-blue) !important; box-shadow: none !important; } html[data-style="google"] .top-row[data-rank="1"] .bar .fill{ background: var(--g-blue) !important; } html[data-style="google"] .top-row[data-rank="2"] .bar .fill{ background: var(--g-green) !important; } html[data-style="google"] .top-row[data-rank="3"] .bar .fill{ background: var(--g-yellow) !important; } html[data-style="google"] .top-row[data-rank="4"] .bar .fill{ background: var(--g-red) !important; } html[data-style="google"] .top-row[data-rank="5"] .bar .fill{ background: var(--g-purple) !important; } /* Flow counter */ html[data-style="google"] .m-widget .flow-counter .flow-num{ background: none !important; -webkit-text-fill-color: var(--accent) !important; color: var(--accent) !important; font-family: 'Google Sans Display', sans-serif !important; font-weight: 500 !important; } html[data-style="google"] .m-widget .flow-counter .flow-unit{ color: var(--muted) !important; font-family: var(--f-ui) !important; letter-spacing: 0; } html[data-style="google"] .m-widget .flow-counter .flow-delta{ color: var(--muted) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .m-widget .flow-counter .flow-delta.up{ color: var(--g-green) !important; } html[data-style="google"] .m-widget .flow-counter .flow-delta.down{ color: var(--g-red) !important; } /* Catálogo de rutas */ html[data-style="google"] .route-row{ background: #fff !important; border: 1px solid var(--line) !important; border-radius: 8px !important; margin-bottom: 6px; padding: 11px 13px !important; } html[data-style="google"] .route-row.active{ background: var(--g-blue-soft) !important; border-color: var(--g-blue) !important; } html[data-style="google"] .route-row .route-name{ color: var(--text-dim) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .route-row .route-name strong{ color: var(--text) !important; font-weight: 500 !important; } html[data-style="google"] .route-row .route-name .arrow{ color: var(--g-blue) !important; } html[data-style="google"] .route-row .route-eta{ color: var(--text) !important; font-family: var(--f-mono) !important; font-weight: 500 !important; text-shadow: none !important; } html[data-style="google"] .route-row .route-meta{ color: var(--muted) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .route-row .route-meta .sep{ color: var(--line-2) !important; } html[data-style="google"] .route-row .route-meta .km{ color: var(--text-dim) !important; font-family: var(--f-mono) !important; } html[data-style="google"] .route-row .route-meta .active-pill{ color: var(--muted) !important; } html[data-style="google"] .route-row.active .route-meta .active-pill{ color: var(--g-blue) !important; } html[data-style="google"] .route-row .route-meta .active-pill .rdot{ background: var(--line-2) !important; } html[data-style="google"] .route-row.active .route-meta .active-pill .rdot{ background: var(--g-blue) !important; box-shadow: 0 0 6px rgba(185,125,54,.5) !important; } html[data-style="google"] .route-row .route-meta .done{ color: var(--muted) !important; } html[data-style="google"] .route-row .route-meta .cost{ color: var(--text-dim) !important; font-family: var(--f-mono) !important; } html[data-style="google"] .route-row .route-meta .ontime{ color: var(--text-dim) !important; font-family: var(--f-mono) !important; } html[data-style="google"] .route-row .route-meta .ontime.good{ color: var(--g-green) !important; } html[data-style="google"] .route-row .route-meta .ontime.warn{ color: var(--g-yellow) !important; } html[data-style="google"] .route-row .route-meta .next{ color: var(--muted) !important; font-family: var(--f-mono) !important; } /* Flow bars en Google: degradado azul Google */ html[data-style="google"] .m-widget .flow-bar{ background: linear-gradient(180deg, var(--g-blue), #4285f4) !important; opacity: .85 !important; } html[data-style="google"] .m-widget .flow-bar.current{ background: linear-gradient(180deg, var(--g-red), var(--g-blue)) !important; box-shadow: 0 0 8px rgba(217,48,37,.3) !important; } html[data-style="google"] .m-widget .flow-axis{ color: var(--muted) !important; font-family: var(--f-mono) !important; } /* ---------------------------------------------------------------- ROOMS PANEL — look Material light (PMS clásico) ---------------------------------------------------------------- */ html[data-style="google"] .w-rooms .r-chip{ background: var(--g-divider) !important; border: 0 !important; color: var(--muted) !important; font-family: var(--f-ui) !important; font-weight: 500 !important; font-size: 11px !important; padding: 4px 10px !important; } html[data-style="google"] .w-rooms .r-chip.s-occupied { color: var(--g-blue) !important; } html[data-style="google"] .w-rooms .r-chip.s-checkout { color: var(--g-green) !important; } html[data-style="google"] .w-rooms .r-chip.s-cleaning { color: var(--g-yellow) !important; } html[data-style="google"] .w-rooms .r-chip.s-available{ color: var(--text-dim) !important; } html[data-style="google"] .w-rooms .r-chip.occupancy { color: var(--g-purple) !important; font-weight: 600 !important; } html[data-style="google"] .floor-label{ color: var(--muted) !important; font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; font-size: 12px !important; font-weight: 500 !important; } html[data-style="google"] .room-cell{ font-family: var(--f-mono) !important; font-size: 10px !important; border-radius: 4px !important; box-shadow: none !important; } html[data-style="google"] .room-cell:hover{ box-shadow: var(--g-shadow-2) !important; } html[data-style="google"] .room-cell.s-occupied{ background: var(--g-blue) !important; color: #fff !important; animation: none !important; } html[data-style="google"] .room-cell.s-checkout{ background: var(--g-green) !important; color: #fff !important; animation: none !important; } html[data-style="google"] .room-cell.s-cleaning{ background: var(--g-yellow) !important; color: #1a1a1a !important; } html[data-style="google"] .room-cell.s-available{ background: var(--g-divider) !important; border: 1px solid var(--line) !important; color: var(--muted) !important; } html[data-style="google"] .room-cell.s-noshow{ background: var(--g-red) !important; color: #fff !important; } html[data-style="google"] .room-cell.s-outservice{ background: #e0e0e0 !important; border: 1px dashed var(--line-2) !important; color: var(--muted) !important; } html[data-style="google"] .rooms-legend{ color: var(--muted) !important; font-family: var(--f-ui) !important; font-size: 11.5px !important; letter-spacing: 0; } html[data-style="google"] .rooms-legend .lg-dot.s-occupied { background: var(--g-blue) !important; } html[data-style="google"] .rooms-legend .lg-dot.s-checkout { background: var(--g-green) !important; } html[data-style="google"] .rooms-legend .lg-dot.s-cleaning { background: var(--g-yellow) !important; } html[data-style="google"] .rooms-legend .lg-dot.s-available{ background: var(--g-divider) !important; border: 1px solid var(--line) !important; } html[data-style="google"] .rooms-legend .lg-dot.s-noshow { background: var(--g-red) !important; } html[data-style="google"] .rooms-legend .lg-dot.s-outservice{ background: #e0e0e0 !important; border: 1px dashed var(--line-2) !important; } /* ---------------------------------------------------------------- TABLES PANEL — look Material (restauración) ---------------------------------------------------------------- */ html[data-style="google"] .w-tables .t-chip{ background: var(--g-divider) !important; border: 0 !important; color: var(--muted) !important; font-family: var(--f-ui) !important; font-weight: 500 !important; font-size: 11px !important; padding: 4px 10px !important; } html[data-style="google"] .w-tables .t-chip.s-occupied{ color: var(--g-blue) !important; } html[data-style="google"] .w-tables .t-chip.s-billing { color: var(--g-yellow) !important; } html[data-style="google"] .w-tables .t-chip.s-reserved{ color: var(--g-purple) !important; } html[data-style="google"] .w-tables .t-chip.s-free { color: var(--text-dim) !important; } html[data-style="google"] .zone-label{ color: var(--muted) !important; font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; font-size: 12.5px !important; font-weight: 500 !important; } html[data-style="google"] .zone-label small{ color: var(--muted-2) !important; } html[data-style="google"] .table-cell{ font-family: var(--f-mono) !important; box-shadow: var(--g-shadow-1) !important; } html[data-style="google"] .table-cell:hover{ box-shadow: var(--g-shadow-2) !important; } html[data-style="google"] .table-cell.s-occupied{ background: var(--g-blue) !important; color: #fff !important; } html[data-style="google"] .table-cell.s-billing{ background: var(--g-yellow) !important; color: #1a1a1a !important; animation: none !important; } html[data-style="google"] .table-cell.s-billing .t-num, html[data-style="google"] .table-cell.s-billing .t-pax{ color: #1a1a1a !important; } html[data-style="google"] .table-cell.s-cleaning{ background: #fb923c !important; color: #fff !important; opacity: .9 !important; } html[data-style="google"] .table-cell.s-cleaning .t-num, html[data-style="google"] .table-cell.s-cleaning .t-pax{ color: #fff !important; } html[data-style="google"] .table-cell.s-reserved{ background: #f3eaff !important; border: 1.5px dashed var(--g-purple) !important; color: var(--g-purple) !important; box-shadow: none !important; } html[data-style="google"] .table-cell.s-reserved .t-num, html[data-style="google"] .table-cell.s-reserved .t-pax{ color: var(--g-purple) !important; } html[data-style="google"] .table-cell.s-free{ background: #fff !important; border: 1.5px solid var(--line) !important; color: var(--muted) !important; box-shadow: none !important; } html[data-style="google"] .table-cell.s-free .t-num, html[data-style="google"] .table-cell.s-free .t-pax{ color: var(--muted) !important; } html[data-style="google"] .table-cell.s-closed{ background: #e0e0e0 !important; border: 1.5px dashed var(--line-2) !important; box-shadow: none !important; } html[data-style="google"] .table-cell .t-info{ background: rgba(60,64,67,.92) !important; color: #fff !important; } html[data-style="google"] .tables-legend{ color: var(--muted) !important; font-family: var(--f-ui) !important; font-size: 11.5px !important; letter-spacing: 0; } html[data-style="google"] .tables-legend .lg-dot.s-occupied{ background: var(--g-blue) !important; } html[data-style="google"] .tables-legend .lg-dot.s-billing { background: var(--g-yellow) !important; } html[data-style="google"] .tables-legend .lg-dot.s-cleaning{ background: #fb923c !important; opacity:.9; } html[data-style="google"] .tables-legend .lg-dot.s-reserved{ background: #f3eaff !important; border: 1.5px dashed var(--g-purple) !important; } html[data-style="google"] .tables-legend .lg-dot.s-free { background: #fff !important; border: 1.5px solid var(--line) !important; } html[data-style="google"] .tables-legend .lg-dot.s-closed { background: #e0e0e0 !important; border: 1.5px dashed var(--line-2) !important; } /* ---------------------------------------------------------------- LINES PANEL — look Material (industria) ---------------------------------------------------------------- */ html[data-style="google"] .w-lines .l-chip{ background: var(--g-divider) !important; border: 0 !important; color: var(--muted) !important; font-family: var(--f-ui) !important; font-weight: 500 !important; font-size: 11px !important; padding: 4px 10px !important; } html[data-style="google"] .w-lines .l-chip.s-producing { color: var(--g-green) !important; } html[data-style="google"] .w-lines .l-chip.s-changeover{ color: var(--g-yellow) !important; } html[data-style="google"] .w-lines .l-chip.s-breakdown { color: var(--g-red) !important; } html[data-style="google"] .w-lines .l-chip.oee { color: var(--g-blue) !important; font-weight: 600 !important; } html[data-style="google"] .line-row{ background: #fff !important; border: 1px solid var(--line) !important; border-radius: 8px !important; box-shadow: var(--g-shadow-1) !important; } html[data-style="google"] .line-row.s-producing { --state-color: var(--g-green); background: #fff !important; border-color: var(--line) !important; } html[data-style="google"] .line-row.s-changeover { --state-color: var(--g-yellow); background: #fffdf2 !important; border-color: var(--g-yellow) !important; } html[data-style="google"] .line-row.s-breakdown { --state-color: var(--g-red); background: var(--g-red-soft) !important; border-color: var(--g-red) !important; } html[data-style="google"] .line-row.s-maintenance{ --state-color: var(--accent); background: var(--g-blue-soft) !important; border-color: var(--accent) !important; } html[data-style="google"] .line-row.s-idle { --state-color: var(--muted-2); } html[data-style="google"] .line-row::before{ box-shadow: none !important; } html[data-style="google"] .line-badge{ font-family: 'Google Sans Display', sans-serif !important; box-shadow: var(--g-shadow-1) !important; font-weight: 500 !important; } html[data-style="google"] .line-name{ color: var(--text) !important; font-family: var(--f-ui) !important; font-weight: 500 !important; } html[data-style="google"] .line-state-pill{ font-family: var(--f-ui) !important; letter-spacing: 0; text-transform: none; } html[data-style="google"] .line-metrics .m-lbl{ color: var(--muted) !important; font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; } html[data-style="google"] .line-metrics .m-val{ color: var(--text) !important; font-family: 'Google Sans Display', sans-serif !important; font-weight: 500 !important; } html[data-style="google"] .line-metrics .m-val i{ color: var(--muted) !important; } html[data-style="google"] .line-product{ background: #f8f9fa !important; color: var(--text-dim) !important; } html[data-style="google"] .line-product .lp-lbl{ color: var(--muted) !important; font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; } html[data-style="google"] .line-product strong{ color: var(--text) !important; } html[data-style="google"] .line-product .lp-sep{ color: var(--line-2) !important; } html[data-style="google"] .line-product .rate-now{ font-family: var(--f-mono) !important; } html[data-style="google"] .line-progress{ background: var(--g-divider) !important; } html[data-style="google"] .line-progress .bar{ box-shadow: none !important; } html[data-style="google"] .line-progress .prog-label{ color: var(--muted) !important; font-family: var(--f-ui) !important; } /* ---------------------------------------------------------------- BAYS PANEL — Material light (talleres) ---------------------------------------------------------------- */ html[data-style="google"] .w-bays .b-chip{ background: var(--g-divider) !important; border: 0 !important; color: var(--muted) !important; font-family: var(--f-ui) !important; font-weight: 500 !important; font-size: 11px !important; padding: 4px 10px !important; } html[data-style="google"] .w-bays .b-chip.s-occupied{ color: var(--g-blue) !important; } html[data-style="google"] .w-bays .b-chip.s-waiting { color: var(--g-yellow) !important; } html[data-style="google"] .w-bays .b-chip.s-washing { color: var(--g-green) !important; } html[data-style="google"] .w-bays .b-chip.s-free { color: var(--text-dim) !important; } html[data-style="google"] .bays-zone-label{ color: var(--muted) !important; font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; font-size: 12.5px !important; font-weight: 500 !important; } html[data-style="google"] .bay-cell{ background: #fff !important; border: 1px solid var(--line) !important; box-shadow: var(--g-shadow-1) !important; border-radius: 8px !important; } html[data-style="google"] .bay-cell::before{ box-shadow: none !important; } html[data-style="google"] .bay-cell.s-occupied{ --bay-color: var(--g-blue); background: #fff !important; border-color: var(--line) !important; } html[data-style="google"] .bay-cell.s-waiting { --bay-color: var(--g-yellow); background: #fffdf2 !important; border-color: var(--g-yellow) !important; } html[data-style="google"] .bay-cell.s-washing { --bay-color: var(--g-green); background: var(--g-green-soft) !important; border-color: var(--g-green) !important; } html[data-style="google"] .bay-cell.s-free { --bay-color: var(--muted-2); } html[data-style="google"] .bay-cell.s-closed { --bay-color: var(--line-2); } html[data-style="google"] .bay-id{ color: var(--text) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .bay-id .bay-icon{ background: var(--bay-color, var(--muted)) !important; color: #fff !important; } html[data-style="google"] .bay-state{ color: var(--bay-color, var(--muted)) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .bay-brand{ color: var(--text) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .bay-plate{ color: var(--muted) !important; font-family: var(--f-mono) !important; } html[data-style="google"] .bay-int{ border-top-color: var(--line) !important; } html[data-style="google"] .bay-int-type{ color: var(--text-dim) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .bay-eta{ color: var(--g-yellow) !important; font-family: var(--f-mono) !important; } html[data-style="google"] .bay-empty{ color: var(--muted-2) !important; font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; } /* ---------------------------------------------------------------- CONSULT PANEL — Material light (clínica) ---------------------------------------------------------------- */ html[data-style="google"] .w-consult .c-chip{ background: var(--g-divider) !important; border: 0 !important; color: var(--muted) !important; font-family: var(--f-ui) !important; font-weight: 500 !important; font-size: 11px !important; padding: 4px 10px !important; } html[data-style="google"] .w-consult .c-chip.s-in_consult{ color: var(--g-blue) !important; } html[data-style="google"] .w-consult .c-chip.s-cleaning { color: var(--g-yellow) !important; } html[data-style="google"] .w-consult .c-chip.s-free { color: var(--text-dim) !important; } html[data-style="google"] .w-consult .c-chip.waiting { color: var(--g-purple) !important; font-weight: 600 !important; } html[data-style="google"] .consult-box{ background: #fff !important; border: 1px solid var(--line) !important; box-shadow: var(--g-shadow-1) !important; border-radius: 8px !important; } html[data-style="google"] .consult-box::before{ box-shadow: none !important; } html[data-style="google"] .consult-box.s-in_consult{ --cb-color: var(--g-blue); background: #fff !important; border-color: var(--line) !important; } html[data-style="google"] .consult-box.s-cleaning { --cb-color: var(--g-yellow); background: #fffdf2 !important; border-color: var(--g-yellow) !important; } html[data-style="google"] .consult-box.s-free { --cb-color: var(--muted-2); } html[data-style="google"] .consult-box.s-closed { --cb-color: var(--line-2); } html[data-style="google"] .cb-id{ font-family: 'Google Sans Display', sans-serif !important; box-shadow: var(--g-shadow-1) !important; font-weight: 500 !important; } html[data-style="google"] .cb-state{ color: var(--cb-color, var(--muted)) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .cb-dr{ color: var(--text) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .cb-spec{ color: var(--muted) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .cb-patient{ border-top-color: var(--line) !important; } html[data-style="google"] .cb-pat-name{ color: var(--text-dim) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .cb-treatment{ color: var(--cb-color, var(--text-dim)) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .cb-empty{ color: var(--muted-2) !important; font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; } /* Sala de espera Google */ html[data-style="google"] .consult-waiting{ background: #faf5ff !important; border: 1px solid var(--g-purple) !important; } html[data-style="google"] .cw-head{ border-bottom-color: rgba(147,52,230,.20) !important; } html[data-style="google"] .cw-title{ color: var(--g-purple) !important; font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; font-size: 12.5px !important; font-weight: 600 !important; } html[data-style="google"] .cw-count{ color: var(--text) !important; font-family: 'Google Sans Display', sans-serif !important; font-weight: 500 !important; } html[data-style="google"] .cw-row{ background: #fff !important; border: 1px solid var(--line) !important; } html[data-style="google"] .cw-name{ color: var(--text) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .cw-time{ color: var(--text-dim) !important; font-family: var(--f-mono) !important; } html[data-style="google"] .cw-meta{ color: var(--muted) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .cw-appt{ color: var(--text-dim) !important; } html[data-style="google"] .cw-row.urgent{ background: var(--g-red-soft) !important; border-color: var(--g-red) !important; } html[data-style="google"] .cw-row.urgent .cw-time{ color: var(--g-red) !important; text-shadow: none !important; } html[data-style="google"] .cw-empty{ color: var(--muted-2) !important; font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; } /* ---------------------------------------------------------------- FUNNEL PANEL — Material light (inmobiliaria) ---------------------------------------------------------------- */ html[data-style="google"] .w-funnel .f-chip{ background: var(--g-divider) !important; border: 0 !important; color: var(--muted) !important; font-family: var(--f-ui) !important; font-weight: 500 !important; font-size: 11.5px !important; padding: 4px 10px !important; } html[data-style="google"] .w-funnel .f-chip.pipeline{ color: var(--g-green) !important; font-weight: 600 !important; } html[data-style="google"] .fn-name{ color: var(--c, var(--text)) !important; font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; font-size: 13px !important; font-weight: 500 !important; } html[data-style="google"] .fn-count{ color: var(--text) !important; font-family: 'Google Sans Display', sans-serif !important; font-weight: 500 !important; } html[data-style="google"] .fn-conv{ color: var(--muted) !important; font-family: var(--f-mono) !important; } html[data-style="google"] .fn-bar-wrap{ background: var(--g-divider) !important; } html[data-style="google"] .fn-bar{ box-shadow: none !important; } html[data-style="google"] .funnel-recent{ background: #fafbfc !important; border: 1px solid var(--line) !important; } html[data-style="google"] .fr-head{ color: var(--muted) !important; font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; font-size: 13px !important; font-weight: 500 !important; border-bottom-color: var(--line) !important; } html[data-style="google"] .fr-row{ background: #fff !important; border: 1px solid var(--line) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .fr-text{ color: var(--text) !important; } html[data-style="google"] .fr-time{ color: var(--muted) !important; font-family: var(--f-mono) !important; } html[data-style="google"] .fr-empty{ color: var(--muted-2) !important; font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; } /* ---------------------------------------------------------------- AUCTION PANEL — Material light (pesca) ---------------------------------------------------------------- */ html[data-style="google"] .w-auction .a-chip{ background: var(--g-divider) !important; border: 0 !important; color: var(--muted) !important; font-family: var(--f-ui) !important; font-weight: 500 !important; font-size: 11.5px !important; padding: 4px 10px !important; } html[data-style="google"] .au-thead{ color: var(--muted) !important; font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; font-size: 11px !important; font-weight: 500 !important; border-bottom-color: var(--line) !important; } html[data-style="google"] .au-row{ font-family: var(--f-ui) !important; color: var(--text) !important; border-bottom: 1px solid var(--g-divider); } html[data-style="google"] .au-row:nth-child(even){ background: #fafbfc; } html[data-style="google"] .au-row:hover{ background: var(--row-hover) !important; } html[data-style="google"] .au-cell.num{ font-family: var(--f-mono) !important; } html[data-style="google"] .au-name{ color: var(--text) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .au-cell.price{ color: var(--text) !important; } html[data-style="google"] .au-cell.delta.up{ color: var(--g-green) !important; } html[data-style="google"] .au-cell.delta.down{ color: var(--g-red) !important; } html[data-style="google"] .au-cell.value{ color: var(--g-blue) !important; } html[data-style="google"] .au-cell.lots{ color: var(--muted) !important; } html[data-style="google"] .au-row.flash-up{ background: var(--g-green-soft) !important; box-shadow: inset 4px 0 0 var(--g-green) !important; } html[data-style="google"] .au-row.flash-down{ background: var(--g-red-soft) !important; box-shadow: inset 4px 0 0 var(--g-red) !important; } /* ---------------------------------------------------------------- WORKS PANEL — Material light (construcción) ---------------------------------------------------------------- */ html[data-style="google"] .w-works .wk-chip{ background: var(--g-divider) !important; border: 0 !important; color: var(--muted) !important; font-family: var(--f-ui) !important; font-weight: 500 !important; font-size: 11px !important; padding: 4px 10px !important; } html[data-style="google"] .w-works .wk-chip.s-on_track{ color: var(--g-green) !important; } html[data-style="google"] .w-works .wk-chip.s-delayed { color: var(--g-yellow) !important; } html[data-style="google"] .w-works .wk-chip.s-critical{ color: var(--g-red) !important; } html[data-style="google"] .w-works .wk-chip.cert { color: var(--g-blue) !important; font-weight: 600 !important; } html[data-style="google"] .work-card{ background: #fff !important; border: 1px solid var(--line) !important; box-shadow: var(--g-shadow-1) !important; border-radius: 8px !important; } html[data-style="google"] .work-card::before{ box-shadow: none !important; } html[data-style="google"] .work-card.s-on_track{ --w-color: var(--g-green); } html[data-style="google"] .work-card.s-delayed { --w-color: var(--g-yellow); background: #fffdf2 !important; border-color: var(--g-yellow) !important; } html[data-style="google"] .work-card.s-critical{ --w-color: var(--g-red); background: var(--g-red-soft) !important; border-color: var(--g-red) !important; } html[data-style="google"] .work-card.flash{ box-shadow: var(--g-shadow-2) !important; } html[data-style="google"] .wk-name{ color: var(--text) !important; font-family: var(--f-ui) !important; font-weight: 500 !important; } html[data-style="google"] .wk-meta{ color: var(--muted) !important; font-family: var(--f-ui) !important; letter-spacing: 0; } html[data-style="google"] .wk-state{ font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; } html[data-style="google"] .wk-chap-lbl{ color: var(--muted) !important; font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; font-size: 11px !important; } html[data-style="google"] .wk-chap-name{ color: var(--text) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .wk-chap-pct{ color: var(--w-color, var(--text)) !important; font-family: 'Google Sans Display', sans-serif !important; font-weight: 500 !important; } html[data-style="google"] .wk-progress::before{ background: var(--g-divider) !important; } html[data-style="google"] .wk-progress .wk-bar{ box-shadow: none !important; } html[data-style="google"] .wk-prog-label{ color: var(--muted) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .wk-foot{ border-top-color: var(--line) !important; color: var(--text-dim) !important; } html[data-style="google"] .wk-milestone.soon{ color: var(--g-yellow) !important; } html[data-style="google"] .wk-milestone.urgent{ color: var(--g-red) !important; } html[data-style="google"] .wk-crew, html[data-style="google"] .wk-cert{ color: var(--muted) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .wk-cert{ color: var(--g-blue) !important; font-weight: 500 !important; } /* ---------------------------------------------------------------- STORES PANEL — Material light (retail) ---------------------------------------------------------------- */ html[data-style="google"] .w-stores .st-chip{ background: var(--g-divider) !important; border: 0 !important; color: var(--muted) !important; font-family: var(--f-ui) !important; font-weight: 500 !important; font-size: 11px !important; padding: 4px 10px !important; } html[data-style="google"] .w-stores .st-chip.s-open { color: var(--g-green) !important; } html[data-style="google"] .w-stores .st-chip.s-promo{ color: var(--g-purple) !important; } html[data-style="google"] .w-stores .st-chip.s-busy { color: var(--g-yellow) !important; } html[data-style="google"] .w-stores .st-chip.total { color: var(--g-blue) !important; font-weight: 600 !important; } html[data-style="google"] .store-card{ background: #fff !important; border: 1px solid var(--line) !important; box-shadow: var(--g-shadow-1) !important; border-radius: 8px !important; } html[data-style="google"] .store-card::before{ box-shadow: none !important; } html[data-style="google"] .store-card.s-open { --st-color: var(--g-green); background: #fff !important; border-color: var(--line) !important; } html[data-style="google"] .store-card.s-promo { --st-color: var(--g-purple); background: #faf5ff !important; border-color: var(--g-purple) !important; } html[data-style="google"] .store-card.s-busy { --st-color: var(--g-yellow); background: #fffdf2 !important; border-color: var(--g-yellow) !important; } html[data-style="google"] .store-card.s-closed{ --st-color: var(--muted-2); } html[data-style="google"] .store-card.flash{ box-shadow: var(--g-shadow-2) !important; } html[data-style="google"] .sc-name{ color: var(--text) !important; font-family: var(--f-ui) !important; font-weight: 500 !important; } html[data-style="google"] .sc-city{ color: var(--muted) !important; font-family: var(--f-ui) !important; letter-spacing: 0; } html[data-style="google"] .sc-state{ font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; } html[data-style="google"] .sc-amt{ color: var(--text) !important; font-family: 'Google Sans Display', sans-serif !important; font-weight: 500 !important; } html[data-style="google"] .sc-delta{ font-family: var(--f-mono) !important; } html[data-style="google"] .sc-delta.up{ color: var(--g-green) !important; } html[data-style="google"] .sc-delta.down{ color: var(--g-red) !important; } html[data-style="google"] .sc-stats{ border-top-color: var(--line) !important; } html[data-style="google"] .sc-st-val{ color: var(--text) !important; font-family: var(--f-mono) !important; } html[data-style="google"] .sc-st-lbl{ color: var(--muted) !important; font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; } html[data-style="google"] .stk-bar{ background: var(--st-color, var(--g-blue)) !important; opacity: .55 !important; box-shadow: none !important; } html[data-style="google"] .stk-bar.current{ opacity: 1 !important; } /* ---------------------------------------------------------------- RACE PANEL — Material light (distribución) ---------------------------------------------------------------- */ html[data-style="google"] .w-race .rc-chip{ background: var(--g-divider) !important; border: 0 !important; color: var(--muted) !important; font-family: var(--f-ui) !important; font-weight: 500 !important; font-size: 11.5px !important; padding: 4px 10px !important; } html[data-style="google"] .w-race .rc-chip.total{ color: var(--g-yellow) !important; font-weight: 600 !important; } html[data-style="google"] .race-row{ background: #fff !important; border: 1px solid var(--line) !important; box-shadow: var(--g-shadow-1) !important; border-radius: 8px !important; } html[data-style="google"] .race-row:hover{ background: var(--row-hover) !important; border-color: var(--g-blue) !important; } html[data-style="google"] .race-row.r-gold{ background: linear-gradient(90deg, #fffbeb, #fff) !important; border-color: var(--g-yellow) !important; } html[data-style="google"] .race-row.r-silver{ background: linear-gradient(90deg, #f8fafc, #fff) !important; border-color: var(--line-2) !important; } html[data-style="google"] .race-row.r-bronze{ background: linear-gradient(90deg, #fff7ed, #fff) !important; border-color: #fb923c !important; } html[data-style="google"] .race-row.flash{ background: var(--g-blue-soft) !important; box-shadow: var(--g-shadow-2) !important; } html[data-style="google"] .rr-rank{ color: var(--muted) !important; font-family: var(--f-mono) !important; font-weight: 500 !important; } html[data-style="google"] .rr-rank.gold { color: var(--g-yellow) !important; font-weight: 600 !important; } html[data-style="google"] .rr-rank.silver{ color: var(--muted-2) !important; font-weight: 600 !important; } html[data-style="google"] .rr-rank.bronze{ color: #fb923c !important; font-weight: 600 !important; } html[data-style="google"] .rr-avatar{ background: var(--g-divider) !important; border: 1px solid var(--line) !important; color: var(--text) !important; font-family: var(--f-ui) !important; font-weight: 500 !important; } html[data-style="google"] .race-row.r-gold .rr-avatar { background: #fef3c7 !important; border-color: var(--g-yellow) !important; color: #78350f !important; } html[data-style="google"] .race-row.r-silver .rr-avatar{ background: #f1f5f9 !important; border-color: var(--line-2) !important; color: var(--text) !important; } html[data-style="google"] .race-row.r-bronze .rr-avatar{ background: #ffedd5 !important; border-color: #fb923c !important; color: #7c2d12 !important; } html[data-style="google"] .rr-name{ color: var(--text) !important; font-family: var(--f-ui) !important; } html[data-style="google"] .rr-zone{ color: var(--muted) !important; font-family: var(--f-ui) !important; letter-spacing: 0; } html[data-style="google"] .rr-bar-wrap{ background: var(--g-divider) !important; } html[data-style="google"] .rr-bar{ background: var(--g-blue) !important; box-shadow: none !important; } html[data-style="google"] .race-row.r-gold .rr-bar{ background: var(--g-yellow) !important; } html[data-style="google"] .race-row.r-silver .rr-bar{ background: var(--line-2) !important; } html[data-style="google"] .race-row.r-bronze .rr-bar{ background: #fb923c !important; } html[data-style="google"] .rr-bar-label{ color: #fff !important; font-family: var(--f-mono) !important; text-shadow: none !important; font-weight: 600 !important; } html[data-style="google"] .rr-m-val{ color: var(--text) !important; font-family: 'Google Sans Display', sans-serif !important; font-weight: 500 !important; } html[data-style="google"] .rr-m-val.up{ color: var(--g-green) !important; } html[data-style="google"] .rr-m-val.down{ color: var(--g-red) !important; } html[data-style="google"] .rr-m-val.target-hit { color: var(--g-green) !important; } html[data-style="google"] .rr-m-val.target-good{ color: var(--g-blue) !important; } html[data-style="google"] .rr-m-val.target-warn{ color: var(--g-yellow) !important; } html[data-style="google"] .rr-m-val.target-low { color: var(--g-red) !important; } html[data-style="google"] .rr-m-val.commission { color: var(--g-yellow) !important; } html[data-style="google"] .rr-m-lbl{ color: var(--muted) !important; font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; } /* Status cards */ html[data-style="google"] .status-card{ background: #fafbfc !important; border: 1px solid var(--line) !important; border-radius: 8px !important; } html[data-style="google"] .status-card .sdot{ background: var(--g-green) !important; box-shadow: 0 0 6px rgba(30,142,62,.5) !important; } html[data-style="google"] .status-card.warn{ background: var(--g-yellow-soft) !important; border-color: var(--g-yellow) !important; } html[data-style="google"] .status-card.warn .sdot{ background: var(--g-yellow) !important; box-shadow: 0 0 6px rgba(249,171,0,.5) !important; } html[data-style="google"] .status-card.error{ background: var(--g-red-soft) !important; border-color: var(--g-red) !important; } html[data-style="google"] .status-card.error .sdot{ background: var(--g-red) !important; box-shadow: 0 0 8px rgba(217,48,37,.6) !important; } html[data-style="google"] .status-card .body .n{ color: var(--text) !important; font-family: var(--f-ui) !important; font-weight: 500 !important; } html[data-style="google"] .status-card .body .s{ color: var(--muted) !important; font-family: var(--f-ui) !important; text-transform: none; letter-spacing: 0; font-size: 10.5px !important; } /* Route pins INICIO/FIN */ html[data-style="google"] .m-route-pin .pin-core{ box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(60,64,67,.4) !important; } html[data-style="google"] .m-route-pin .pin-pulse{ border-width: 2px !important; opacity: .8; } html[data-style="google"] .m-route-pin .pin-label{ background: #fff !important; color: var(--text) !important; border: 1px solid var(--col) !important; box-shadow: var(--g-shadow-1) !important; font-family: var(--f-ui) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 10.5px !important; }