/** * Mejora visual de campos del asistente de alta empresa (todos los pasos). * Carga después de wizard_alta_empresa.css; requiere . */ .wizard-erp-page { --wiz-input-bg: #ffffff; --wiz-input-border: #e2e8f0; --wiz-input-border-hover: #cbd5e1; --wiz-input-focus: #334155; --wiz-input-text: #0f172a; --wiz-label: #475569; } .wizard-erp-page .group label, .wizard-erp-page label.block, .wizard-erp-page label.font-label { font-size: 0.8125rem; letter-spacing: 0.055em; color: var(--wiz-label); } .wizard-erp-page input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):not([type="hidden"]):not([type="reset"]), .wizard-erp-page select, .wizard-erp-page textarea { font-size: 1rem !important; line-height: 1.5 !important; font-family: Inter, system-ui, sans-serif !important; border-radius: 0.75rem !important; border: 1px solid var(--wiz-input-border) !important; background-color: var(--wiz-input-bg) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important; padding: 0.65rem 0.9rem !important; color: var(--wiz-input-text) !important; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .wizard-erp-page input:hover:not(:disabled):not([readonly]), .wizard-erp-page select:hover:not(:disabled), .wizard-erp-page textarea:hover:not(:disabled):not([readonly]) { border-color: var(--wiz-input-border-hover) !important; } .wizard-erp-page input:focus:not(.wiz-plan-card-radio), .wizard-erp-page select:focus, .wizard-erp-page textarea:focus { outline: none !important; border-color: var(--wiz-input-focus) !important; box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.14) !important; } .wizard-erp-page input::placeholder, .wizard-erp-page textarea::placeholder { color: #94a3b8; opacity: 1; } .wizard-erp-page input:disabled, .wizard-erp-page select:disabled, .wizard-erp-page textarea:disabled { opacity: 0.65; cursor: not-allowed; } /* Búsqueda en mapa (paso 2): mismo criterio tipográfico */ .wizard-erp-page #map-search-q { font-size: 0.9375rem !important; } /* Tarjetas de planes (paso 1): estilo minimalista profesional */ .wizard-erp-page .wiz-plan-card { position: relative; border-color: #e2e8f0 !important; background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 22px rgba(15, 23, 42, 0.05) !important; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .wizard-erp-page .wiz-plan-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 0.22rem; border-radius: 0.85rem 0.85rem 0 0; background: linear-gradient(90deg, #e2e8f0, #cbd5e1); opacity: 0.95; } .wizard-erp-page .wiz-plan-card:hover { transform: translateY(-2px); border-color: #cbd5e1 !important; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 14px 32px rgba(15, 23, 42, 0.1) !important; } .wizard-erp-page .wiz-plan-card.wiz-plan-card--featured:not(:has(.wiz-plan-card-radio:checked)) { border-color: #fca5a5 !important; background: linear-gradient(180deg, #ffffff 0%, #fff8f8 100%) !important; } .wizard-erp-page .wiz-plan-card.wiz-plan-card--featured:not(:has(.wiz-plan-card-radio:checked))::before { background: linear-gradient(90deg, #f87171, #ef4444); } .wizard-erp-page .wiz-plan-card:has(.wiz-plan-card-radio:checked) { border-color: #dc2626 !important; background: #ffffff !important; box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.14), 0 16px 34px rgba(220, 38, 38, 0.16) !important; } .wizard-erp-page .wiz-plan-card:has(.wiz-plan-card-radio:checked)::before { background: linear-gradient(90deg, #ef4444, #dc2626 55%, #b91c1c); } .wizard-erp-page .wiz-plan-card-content { gap: 0.15rem; } .wizard-erp-page .wiz-plan-card-title { color: #0f172a !important; letter-spacing: -0.012em; } .wizard-erp-page .wiz-plan-card-pitch { color: #64748b !important; } .wizard-erp-page .wiz-plan-card-price { color: #111827 !important; letter-spacing: -0.02em; } .wizard-erp-page .wiz-plan-card-price-period { color: #94a3b8 !important; } .wizard-erp-page .wiz-plan-card-features { margin-top: 0.95rem; padding-top: 0.9rem; border-top: 1px solid #f1f5f9; } .wizard-erp-page .wiz-plan-card-features li { color: #475569 !important; } .wizard-erp-page .wiz-plan-card-features li span:first-child { color: #dc2626 !important; opacity: 0.9; } .wizard-erp-page .wiz-plan-card-badge { background: linear-gradient(135deg, #ef4444, #dc2626); color: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 7px 16px rgba(220, 38, 38, 0.25); } /* * Radios del plan: @tailwindcss/forms usa currentColor en :checked (SVG interno). * Sin esto, heredan el "primary" del tema (#334155) y el punto se ve azul/gris. */ .wizard-erp-page .wiz-plan-card input.wiz-plan-card-radio[type="radio"] { accent-color: #dc2626 !important; color: #dc2626 !important; border-color: #fca5a5 !important; background-color: #ffffff !important; --tw-ring-color: rgb(220 38 38 / 0.45) !important; } .wizard-erp-page .wiz-plan-card input.wiz-plan-card-radio[type="radio"]:checked { color: #dc2626 !important; border-color: #dc2626 !important; background-color: #ffffff !important; } .wizard-erp-page .wiz-plan-card input.wiz-plan-card-radio[type="radio"]:focus-visible { outline: 2px solid #dc2626 !important; outline-offset: 3px; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25) !important; } /* Spot inmersivo: Plan Empresarial + Inkamóvil */ .wizard-erp-page .wiz-inka-spotlight { position: relative; border: 1px solid #fecaca; background: radial-gradient(circle at 92% 10%, rgba(239, 68, 68, 0.18), transparent 40%), linear-gradient(145deg, #fff7f7 0%, #ffffff 58%, #fff1f2 100%); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7); overflow: hidden; } .wizard-erp-page .wiz-inka-spotlight::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0.3rem; background: linear-gradient(180deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%); } .wizard-erp-page .wiz-inka-spotlight__inner { position: relative; z-index: 1; } .wizard-erp-page .wiz-inka-spotlight__chip { display: inline-flex; align-items: center; padding: 0.25rem 0.6rem; margin-bottom: 0.65rem; border: 1px solid #fca5a5; border-radius: 9999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #991b1b; background: rgba(255, 255, 255, 0.85); } .wizard-erp-page .wiz-inka-spotlight__row { display: flex; gap: 0.8rem; align-items: flex-start; } .wizard-erp-page .wiz-inka-spotlight__icon { width: 2.35rem; height: 2.35rem; border-radius: 0.75rem; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 8px 18px rgba(220, 38, 38, 0.3); flex-shrink: 0; } .wizard-erp-page .wiz-inka-spotlight__icon .material-symbols-outlined { font-size: 1.2rem; } .wizard-erp-page .wiz-inka-spotlight__content { min-width: 0; } .wizard-erp-page .wiz-inka-spotlight__title { display: block; color: #111827; font-weight: 800; font-size: 0.98rem; line-height: 1.3; letter-spacing: -0.01em; } .wizard-erp-page .wiz-inka-spotlight__text { margin: 0.35rem 0 0; color: #475569; font-size: 0.92rem; line-height: 1.55; } .wizard-erp-page .wiz-inka-spotlight__text strong { color: #0f172a; font-weight: 700; } /* Asistente tipo bot (wizard): abajo a la derecha. bottom debe superar la altura del footer fijo del wizard (z-50); si no, el coach queda tapado. Ancho tope explícito + margen al borde: evita corte con overflow-x del body. */ .wiz-coach { position: fixed; --wiz-coach-mascot-w: 4.25rem; --wiz-coach-footer-clearance: 7.75rem; right: max(0.75rem, env(safe-area-inset-right, 0px)); bottom: calc(var(--wiz-coach-footer-clearance) + env(safe-area-inset-bottom, 0px)); z-index: 45; box-sizing: border-box; width: min(23.5rem, calc(100vw - 1.5rem - env(safe-area-inset-right, 0px))); max-width: min(23.5rem, calc(100vw - 1.5rem - env(safe-area-inset-right, 0px))); font-family: Inter, system-ui, sans-serif; pointer-events: none; background: transparent; box-shadow: none; border: none; } /* Solo layout: sin caja, sombra ni radio (antes parecía un panel translúcido con borde) */ .wizard-erp-page aside.wiz-coach .wiz-coach__row { display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-end; gap: 0.5rem; pointer-events: auto; padding: 0; margin: 0; border: none; border-radius: 0; box-shadow: none; background: transparent; } /* Especificidad + !important: el wizard carga Tailwind en y puede pisar estilos del coach */ .wizard-erp-page aside.wiz-coach .wiz-coach__bubble { position: relative; flex: 1 1 0; min-width: 0; max-width: calc(100% - var(--wiz-coach-mascot-w) - 0.5rem); margin-right: 0; padding: 0.7rem 0.75rem 0.75rem 0.9rem; padding-right: 0.55rem; background: linear-gradient(155deg, #ef4444 0%, #dc2626 45%, #b91c1c 100%) !important; color: #ffffff !important; border-radius: 1rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 0 rgba(127, 29, 29, 0.45), 0 6px 18px rgba(185, 28, 28, 0.35) !important; border: 1px solid rgba(254, 202, 202, 0.35) !important; } /* Pico hacia el bot, dibujado dentro del borde del globo (nada sobresale = sin recorte por overflow-x) */ .wizard-erp-page aside.wiz-coach .wiz-coach__bubble::after { content: ""; position: absolute; right: 0; bottom: 1.05rem; width: 0.55rem; height: 0.75rem; background: #b91c1c !important; border-radius: 0 0.15rem 0.15rem 0; clip-path: polygon(0 15%, 100% 50%, 0 85%); box-shadow: 1px 0 0 rgba(127, 29, 29, 0.4); } .wizard-erp-page aside.wiz-coach .wiz-coach__text { margin: 0; font-size: 0.8125rem; line-height: 1.45; font-weight: 500; color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); overflow-wrap: anywhere; word-break: break-word; } .wiz-coach__bot-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; gap: 0.2rem; } .wiz-coach__mascot { line-height: 0; transform-origin: 50% 100%; animation: wiz-coach-float 3.2s ease-in-out infinite; } .wiz-coach__mascot svg { display: block; width: 64px; height: auto; max-height: 5.5rem; } @keyframes wiz-coach-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .wiz-coach__min { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; padding: 0; border: 0; border-radius: 9999px; background: rgba(255, 255, 255, 0.95); color: #b91c1c; cursor: pointer; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1); border: 1px solid rgba(252, 165, 165, 0.6); } .wiz-coach__min:hover { background: #fff; color: #991b1b; } .wiz-coach__min .material-symbols-outlined { font-size: 1.125rem; transition: transform 0.2s ease; } .wiz-coach--collapsed .wiz-coach__bubble { display: none; } .wiz-coach--collapsed .wiz-coach__bubble::after { display: none; } .wiz-coach--collapsed .wiz-coach__row { gap: 0; } .wiz-coach--collapsed .wiz-coach__min .material-symbols-outlined:first-of-type { transform: rotate(-90deg); } @media (min-width: 640px) { .wiz-coach { --wiz-coach-footer-clearance: 6.5rem; bottom: calc(var(--wiz-coach-footer-clearance) + env(safe-area-inset-bottom, 0px)); width: min(24.5rem, calc(100vw - 2rem - env(safe-area-inset-right, 0px))); max-width: min(24.5rem, calc(100vw - 2rem - env(safe-area-inset-right, 0px))); --wiz-coach-mascot-w: 4.75rem; } .wiz-coach__mascot svg { width: 72px; max-height: 6rem; } .wizard-erp-page aside.wiz-coach .wiz-coach__text { font-size: 0.875rem; } }