/* ── piel de la agencia (🧩 B62·3) ── Sólo los tres colores que el contrato del API trae (BrandColors: primary/light/dark). La card menciona también --brand-primary-accessible, pero GET /brand no lo sirve: inventar un cuarto valor acá sería afirmar un color que nadie definió — queda pendiente del lado del API. */ :root { --brand-primary: #bc957b; --brand-primary-light: #d4b59e; --brand-primary-dark: #9a7560; /* 🧩 B62·4 — los canales r, g, b del primario, para los translúcidos. */ --brand-primary-rgb: 188, 149, 123; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-inter), system-ui, sans-serif; } a { text-decoration: none; } button { font-family: inherit; } /* ── datepicker input ── */ .datepicker-wrapper { width: 100%; } .datepicker-input { width: 100%; padding: 0.5rem 2.2rem 0.5rem 0.65rem; font-size: 0.875rem; font-family: inherit; border: 1.5px solid #e2e8f0; border-radius: 8px; background: #fafafa url("data:image/svg+xml;utf8,") no-repeat right 0.6rem center; color: #1a1a1a; cursor: pointer; outline: none; transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s; } .datepicker-input::placeholder { color: #94a3b8; } .datepicker-input:hover { border-color: var(--brand-primary-light); } .datepicker-input:focus { border-color: var(--brand-primary); background-color: #fff; box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.12); background-image: url("data:image/svg+xml;utf8,"); } .datepicker-input-compact { padding: 0.2rem 1.8rem 0.2rem 0.4rem; font-size: 0.72rem; border-radius: 4px; } /* ── popup container ── */ .react-datepicker { font-family: var(--font-inter), system-ui, sans-serif !important; font-size: 0.8rem !important; background: rgba(250,248,245,0.97) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(var(--brand-primary-rgb), 0.2) !important; border-radius: 12px !important; box-shadow: 0 12px 32px rgba(26,26,26,0.08), 0 0 0 1px rgba(var(--brand-primary-rgb), 0.08) !important; overflow: hidden !important; } /* ── header ── */ .react-datepicker__header { background: transparent !important; border-bottom: 1px solid rgba(var(--brand-primary-rgb), 0.12) !important; padding: 0.875rem 0.875rem 0.5rem !important; } /* ── month/year selects (misma fila como la landing) ── */ /* Ocultar texto de mes y flechas SOLO cuando ambos dropdowns están presentes */ .react-datepicker:has(.react-datepicker__month-select) .react-datepicker__current-month { display: none !important; } .react-datepicker:has(.react-datepicker__month-select) .react-datepicker__navigation { display: none !important; } .react-datepicker__current-month { color: var(--brand-primary) !important; font-weight: 600 !important; font-size: 0.875rem !important; } .react-datepicker__header__dropdown, .react-datepicker__header__dropdown--select { display: flex !important; gap: 0.5rem !important; margin: 0 !important; } .react-datepicker__month-dropdown-container, .react-datepicker__year-dropdown-container { flex: 1 !important; margin: 0 !important; display: block !important; } .react-datepicker__month-select, .react-datepicker__year-select { width: 100% !important; color: var(--brand-primary) !important; font-weight: 500 !important; font-size: 0.8rem !important; font-family: inherit !important; background: transparent url("data:image/svg+xml;utf8,") no-repeat right 4px center !important; border: 1px solid transparent !important; border-radius: 4px !important; padding: 0.2rem 1.4rem 0.2rem 0.35rem !important; cursor: pointer !important; outline: none !important; appearance: none !important; -webkit-appearance: none !important; transition: background-color 0.12s; } .react-datepicker__month-select:hover, .react-datepicker__year-select:hover { background-color: rgba(var(--brand-primary-rgb), 0.1) !important; } /* ── navigation arrows (rose-gold para pickers sin dropdown) ── */ .react-datepicker__navigation-icon::before { border-color: var(--brand-primary) !important; } /* ── weekday names ── */ .react-datepicker__day-names { margin-top: 0.3rem !important; border-top: 1px solid rgba(var(--brand-primary-rgb), 0.08) !important; padding-top: 0.3rem !important; } .react-datepicker__day-name { color: var(--brand-primary) !important; font-weight: 600 !important; font-size: 0.72rem !important; letter-spacing: 0.04em !important; width: 2rem !important; line-height: 2rem !important; } /* ── days ── */ .react-datepicker__month { padding: 0.4rem 0.875rem 0.875rem !important; margin: 0 !important; } .react-datepicker__day { width: 2rem !important; line-height: 2rem !important; border-radius: 50% !important; color: #1a1a1a !important; font-size: 0.8rem !important; transition: background 0.12s, color 0.12s !important; } .react-datepicker__day:hover:not(.react-datepicker__day--selected):not(.react-datepicker__day--keyboard-selected):not(.react-datepicker__day--disabled) { background: rgba(var(--brand-primary-rgb), 0.12) !important; } .react-datepicker__day--selected, .react-datepicker__day--keyboard-selected { background-color: var(--brand-primary) !important; color: #fff !important; border-radius: 50% !important; font-weight: 600 !important; } .react-datepicker__day--today { font-weight: 700 !important; color: var(--brand-primary) !important; } .react-datepicker__day--outside-month { color: #cbd5e1 !important; } .react-datepicker__day--disabled { color: #cbd5e1 !important; opacity: 0.45 !important; cursor: not-allowed !important; } .react-datepicker__triangle { display: none !important; } .react-datepicker-popper { z-index: 1000 !important; }

Charvel Insurance

Iniciar sesión