/* Portal Seguros — component library. * Depends on brand.css (loaded before this in every ). */ /* ============================================================================= CARD ============================================================================= */ .sp-card { background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); box-shadow: var(--sp-shadow-sm); overflow: hidden; } .sp-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-s-3); padding: var(--sp-s-4) var(--sp-s-5); border-bottom: 1px solid var(--sp-border); } .sp-card-title { font-size: var(--sp-fs-13); font-weight: 600; color: var(--sp-text-1); letter-spacing: 0.01em; } .sp-card-body { padding: var(--sp-s-4) var(--sp-s-5); } /* ============================================================================= KPI GRID + KPI CARD ============================================================================= */ .sp-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-s-4); margin-bottom: var(--sp-s-5); } .sp-kpi { background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); box-shadow: var(--sp-shadow-sm); padding: var(--sp-s-4) var(--sp-s-5); display: flex; flex-direction: column; gap: var(--sp-s-1); } .sp-kpi-value { font-family: var(--sp-font-mono); font-size: var(--sp-fs-32); font-weight: 700; line-height: 1; color: var(--sp-text-1); letter-spacing: -0.02em; } .sp-kpi-label { font-size: var(--sp-fs-12); font-weight: 500; color: var(--sp-text-3); text-transform: uppercase; letter-spacing: var(--sp-ls-wider); } .sp-kpi-sub { font-size: var(--sp-fs-11); color: var(--sp-text-3); font-family: var(--sp-font-mono); } /* accent tints on KPI cards */ .sp-kpi--gold { border-top: 3px solid var(--sp-gold); } .sp-kpi--green { border-top: 3px solid var(--sp-green); } .sp-kpi--amber { border-top: 3px solid #d08c20; } .sp-kpi--red { border-top: 3px solid var(--sp-red); } /* ============================================================================= TABLE ============================================================================= */ .sp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .sp-table { width: 100%; border-collapse: collapse; font-size: var(--sp-fs-13); color: var(--sp-text-1); } .sp-table thead th { text-align: left; padding: var(--sp-s-2) var(--sp-s-4); border-bottom: 2px solid var(--sp-border); font-size: var(--sp-fs-11); font-weight: 600; letter-spacing: var(--sp-ls-widest); text-transform: uppercase; color: var(--sp-text-3); white-space: nowrap; background: var(--sp-bg-card); } .sp-table tbody td { padding: var(--sp-s-3) var(--sp-s-4); border-bottom: 1px solid var(--sp-border); vertical-align: middle; } .sp-table tbody tr:last-child td { border-bottom: none; } .sp-table tbody tr:hover td { background: var(--sp-blue-tint); transition: background var(--sp-dur-fast) var(--sp-ease-out); } /* Monospaced data columns: policy IDs, primas, dates */ .sp-table .sp-td-mono { font-family: var(--sp-font-mono); font-size: var(--sp-fs-12); color: var(--sp-text-2); } .sp-table .sp-td-muted { color: var(--sp-text-3); font-size: var(--sp-fs-12); } .sp-table .sp-td-actions { display: flex; gap: var(--sp-s-2); justify-content: flex-end; flex-wrap: wrap; align-items: center; } /* ============================================================================= BADGES — policy / prospect status ============================================================================= */ .sp-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px var(--sp-s-2); border-radius: 20px; font-size: var(--sp-fs-11); font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; line-height: 1.5; } .sp-badge::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* active / vigente */ .sp-badge--activa { background: var(--sp-green-bg); color: var(--sp-green); } /* por renovar / próxima a vencer */ .sp-badge--por_renovar { background: var(--sp-amber-bg); color: var(--sp-amber); } /* vencida */ .sp-badge--vencida { background: var(--sp-red-bg); color: var(--sp-red); } /* cancelada */ .sp-badge--cancelada { background: var(--sp-blue-tint); color: var(--sp-text-3); } /* prospect pipeline stages */ .sp-badge--nuevo { background: var(--sp-blue-tint); color: var(--sp-text-2); } .sp-badge--contactado { background: #e8effe; color: #3a5bbf; } .sp-badge--cotizado { background: var(--sp-amber-bg); color: var(--sp-amber); } .sp-badge--ganado { background: var(--sp-green-bg); color: var(--sp-green); } .sp-badge--perdido { background: var(--sp-red-bg); color: var(--sp-red); } /* ============================================================================= BUTTONS ============================================================================= */ .sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-s-2); padding: var(--sp-s-2) var(--sp-s-4); font-family: var(--sp-font-ui); font-size: var(--sp-fs-13); font-weight: 500; line-height: 1.4; cursor: pointer; border-radius: var(--sp-radius-sm); border: 1px solid var(--sp-border); background: var(--sp-bg-card); color: var(--sp-text-1); transition: background var(--sp-dur-fast) var(--sp-ease-out), border-color var(--sp-dur-fast) var(--sp-ease-out), color var(--sp-dur-fast) var(--sp-ease-out), box-shadow var(--sp-dur-fast) var(--sp-ease-out); white-space: nowrap; text-decoration: none; } .sp-btn:hover { border-color: var(--sp-text-3); background: var(--sp-blue-tint); text-decoration: none; } .sp-btn:active { transform: scale(0.98); } .sp-btn:focus-visible { outline: 2px solid var(--sp-gold); outline-offset: 2px; } /* primary — gold fill */ .sp-btn--primary { background: var(--sp-gold); border-color: var(--sp-gold); color: #fff; } .sp-btn--primary:hover { background: #b5851f; border-color: #b5851f; color: #fff; } /* danger */ .sp-btn--danger { border-color: var(--sp-red); color: var(--sp-red); } .sp-btn--danger:hover { background: var(--sp-red); border-color: var(--sp-red); color: #fff; } /* ghost */ .sp-btn--ghost { background: transparent; border-color: transparent; color: var(--sp-text-2); } .sp-btn--ghost:hover { background: var(--sp-blue-tint); border-color: transparent; } /* size modifiers */ .sp-btn--sm { font-size: var(--sp-fs-11); padding: 3px var(--sp-s-3); } .sp-btn--block { width: 100%; } .sp-btn[disabled], .sp-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* button row */ .sp-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-s-3); } /* ============================================================================= FORMS ============================================================================= */ .sp-form-group { margin-bottom: var(--sp-s-4); } .sp-label { display: block; font-size: var(--sp-fs-12); font-weight: 500; color: var(--sp-text-2); margin-bottom: var(--sp-s-1); letter-spacing: 0.01em; } .sp-label-required::after { content: ' *'; color: var(--sp-red); } .sp-input, .sp-select, .sp-textarea { display: block; width: 100%; padding: var(--sp-s-2) var(--sp-s-3); font-family: var(--sp-font-ui); font-size: var(--sp-fs-14); color: var(--sp-text-1); background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); transition: border-color var(--sp-dur-fast) var(--sp-ease-out), box-shadow var(--sp-dur-fast) var(--sp-ease-out); -webkit-appearance: none; appearance: none; } .sp-input:focus, .sp-select:focus, .sp-textarea:focus { outline: none; border-color: var(--sp-gold); box-shadow: 0 0 0 3px rgba(201, 150, 44, 0.15); } .sp-input::placeholder, .sp-textarea::placeholder { color: var(--sp-text-3); } .sp-input--mono { font-family: var(--sp-font-mono); font-size: var(--sp-fs-13); } .sp-textarea { resize: vertical; min-height: 96px; line-height: var(--sp-lh-normal); } /* custom caret for select */ .sp-select { padding-right: var(--sp-s-6); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238494ab'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sp-s-3) center; cursor: pointer; } .sp-form-hint { margin-top: var(--sp-s-1); font-size: var(--sp-fs-12); color: var(--sp-text-3); } .sp-form-error { margin-top: var(--sp-s-1); font-size: var(--sp-fs-12); color: var(--sp-red); } /* field error state */ .sp-input--error, .sp-select--error, .sp-textarea--error { border-color: var(--sp-red); } .sp-input--error:focus, .sp-select--error:focus, .sp-textarea--error:focus { box-shadow: 0 0 0 3px rgba(181, 58, 47, 0.15); } /* ============================================================================= LOGIN PAGE ============================================================================= */ .sp-login-root { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--sp-bg-page); padding: var(--sp-s-6); } .sp-login-box { width: 100%; max-width: 380px; } .sp-login-logo { margin-bottom: var(--sp-s-6); text-align: center; } .sp-login-wordmark { font-size: var(--sp-fs-20); font-weight: 700; color: var(--sp-text-1); letter-spacing: 0.01em; } .sp-login-wordmark span { color: var(--sp-gold); } .sp-login-sub { margin-top: var(--sp-s-1); font-size: var(--sp-fs-12); color: var(--sp-text-3); text-align: center; letter-spacing: var(--sp-ls-wide); } .sp-login-card { background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); box-shadow: var(--sp-shadow-md); padding: var(--sp-s-6); } /* ============================================================================= EMPTY STATE ============================================================================= */ .sp-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sp-s-7) var(--sp-s-5); color: var(--sp-text-3); border: 1px dashed var(--sp-border); border-radius: var(--sp-radius-md); background: var(--sp-blue-tint); } .sp-empty-state-title { font-size: var(--sp-fs-16); font-weight: 600; color: var(--sp-text-2); margin-bottom: var(--sp-s-2); } .sp-empty-state-body { font-size: var(--sp-fs-13); color: var(--sp-text-3); max-width: 36ch; line-height: var(--sp-lh-normal); } .sp-empty-state-action { margin-top: var(--sp-s-4); } /* ============================================================================= STUB — unimplemented section placeholder ============================================================================= */ .sp-stub { display: flex; align-items: center; justify-content: center; min-height: 240px; border: 2px dashed var(--sp-border); border-radius: var(--sp-radius-md); background: var(--sp-bg-card); color: var(--sp-text-3); font-size: var(--sp-fs-13); letter-spacing: var(--sp-ls-wide); text-align: center; padding: var(--sp-s-6); } /* ============================================================================= DATA GRID — generic two-column property list ============================================================================= */ .sp-data-grid { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-s-2) var(--sp-s-5); font-size: var(--sp-fs-13); align-items: baseline; } .sp-data-label { font-size: var(--sp-fs-12); font-weight: 500; color: var(--sp-text-3); white-space: nowrap; } .sp-data-value { color: var(--sp-text-1); } .sp-data-value--mono { font-family: var(--sp-font-mono); font-size: var(--sp-fs-12); color: var(--sp-text-2); } /* ============================================================================= PAGINATION ============================================================================= */ .sp-pagination { display: flex; align-items: center; gap: var(--sp-s-2); padding-top: var(--sp-s-4); border-top: 1px solid var(--sp-border); font-size: var(--sp-fs-12); color: var(--sp-text-3); } .sp-pagination-info { flex: 1; } /* ============================================================================= RESPONSIVE — below 768px the sidebar collapses out of the flow ============================================================================= */ @media (max-width: 768px) { .sp-kpi-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .sp-kpi-grid { grid-template-columns: 1fr; } } /* ============================================================================= MISSING UTILITY PATCHES ============================================================================= */ .sp-accent { color: var(--sp-gold); } .sp-btn--full { width: 100%; } .sp-field { margin-bottom: var(--sp-s-4); } .sp-empty-state-text { font-size: var(--sp-fs-13); color: var(--sp-text-3); max-width: 36ch; line-height: var(--sp-lh-normal); } /* ============================================================================= MISSING KPI VARIANTS ============================================================================= */ .sp-kpi--warn { border-top: 3px solid #d08c20; } .sp-kpi--alert { border-top: 3px solid var(--sp-red); } /* ============================================================================= MISSING BADGE VARIANTS — client type ============================================================================= */ .sp-badge--persona { background: var(--sp-blue-tint); color: var(--sp-text-2); } .sp-badge--empresa { background: var(--sp-amber-bg); color: var(--sp-amber); } .sp-badge--pendiente { background: var(--sp-blue-tint); color: var(--sp-text-3); } /* ============================================================================= TOOLBAR — page action bar above tables ============================================================================= */ .sp-toolbar { display: flex; align-items: center; gap: var(--sp-s-3); margin-bottom: var(--sp-s-4); flex-wrap: wrap; } .sp-toolbar-spacer { flex: 1; } /* ============================================================================= STUB — content details ============================================================================= */ .sp-stub { flex-direction: column; gap: var(--sp-s-2); } .sp-stub-title { font-size: var(--sp-fs-16); font-weight: 600; color: var(--sp-text-2); } .sp-stub-desc { font-size: var(--sp-fs-13); color: var(--sp-text-3); max-width: 40ch; text-align: center; } /* ============================================================================= ERROR PAGES ============================================================================= */ .sp-error-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--sp-bg-page); padding: var(--sp-s-6); } .sp-error-wrap { text-align: center; max-width: 480px; } .sp-error-code { font-family: var(--sp-font-mono); font-size: var(--sp-fs-32); font-weight: 700; color: var(--sp-gold); line-height: 1; margin-bottom: var(--sp-s-3); } .sp-error-title { font-size: var(--sp-fs-20); font-weight: 700; color: var(--sp-text-1); margin-bottom: var(--sp-s-2); } .sp-error-desc { font-size: var(--sp-fs-14); color: var(--sp-text-3); line-height: var(--sp-lh-normal); margin-bottom: var(--sp-s-5); } /* ============================================================================= OAUTH WINDOW — consent UI ============================================================================= */ .sp-window { background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-lg); max-width: 440px; width: 100%; overflow: hidden; } .sp-window-tb { display: flex; align-items: center; gap: var(--sp-s-2); padding: var(--sp-s-3) var(--sp-s-4); background: var(--sp-bg-page); border-bottom: 1px solid var(--sp-border); } .sp-window-tb-title { font-size: var(--sp-fs-12); font-weight: 600; color: var(--sp-text-2); letter-spacing: 0.01em; } .sp-form-body { padding: var(--sp-s-6); } /* ============================================================================= SAAS POLISH — animations + micro-interactions ============================================================================= */ @keyframes sp-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes sp-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* page content entrance */ .sp-content { animation: sp-fade-in var(--sp-dur-base) var(--sp-ease-out) both; } /* flash slide-in */ .sp-flash { animation: sp-slide-down var(--sp-dur-base) var(--sp-ease-out) both; } /* card hover lift */ .sp-card { transition: box-shadow var(--sp-dur-base) var(--sp-ease-out), transform var(--sp-dur-base) var(--sp-ease-out); } .sp-card:hover { box-shadow: var(--sp-shadow-md); transform: translateY(-1px); } /* KPI hover lift */ .sp-kpi { transition: box-shadow var(--sp-dur-base) var(--sp-ease-out), transform var(--sp-dur-base) var(--sp-ease-out); } .sp-kpi:hover { box-shadow: var(--sp-shadow-md); transform: translateY(-2px); } /* button micro-bounce */ .sp-btn:hover { transform: translateY(-1px); } .sp-btn:active { transform: translateY(0) scale(0.98); } /* ============================================================================= MODAL — delete confirmation + generic dialogs ============================================================================= */ .sp-modal-backdrop { position: fixed; inset: 0; background: rgba(10, 22, 40, 0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity var(--sp-dur-base) var(--sp-ease-out); backdrop-filter: blur(2px); } .sp-modal-backdrop.is-open { opacity: 1; pointer-events: auto; } .sp-modal { background: var(--sp-bg-card); border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-lg); padding: var(--sp-s-6); max-width: 420px; width: 90%; transform: translateY(16px) scale(0.98); transition: transform var(--sp-dur-base) var(--sp-ease-out); } .sp-modal-backdrop.is-open .sp-modal { transform: translateY(0) scale(1); } .sp-modal-header { margin-bottom: var(--sp-s-4); } .sp-modal-title { font-size: var(--sp-fs-16); font-weight: 700; color: var(--sp-text-1); margin-bottom: var(--sp-s-1); } .sp-modal-body { font-size: var(--sp-fs-14); color: var(--sp-text-2); line-height: var(--sp-lh-normal); margin-bottom: var(--sp-s-5); } .sp-modal-footer { display: flex; justify-content: flex-end; gap: var(--sp-s-3); } /* ============================================================================= TABS — expediente view ============================================================================= */ .sp-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--sp-border); margin-bottom: var(--sp-s-5); overflow-x: auto; scrollbar-width: none; } .sp-tabs::-webkit-scrollbar { display: none; } .sp-tab { padding: var(--sp-s-2) var(--sp-s-4); font-size: var(--sp-fs-13); font-weight: 500; color: var(--sp-text-3); cursor: pointer; white-space: nowrap; border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color var(--sp-dur-fast) var(--sp-ease-out), border-color var(--sp-dur-fast) var(--sp-ease-out); text-decoration: none; } .sp-tab:hover { color: var(--sp-text-1); } .sp-tab.active { color: var(--sp-text-1); font-weight: 600; border-bottom-color: var(--sp-gold); } .sp-tab-panel { display: none; } .sp-tab-panel.is-active { display: block; animation: sp-fade-in var(--sp-dur-fast) var(--sp-ease-out) both; } /* ============================================================================= FILE UPLOAD — drag-drop zone ============================================================================= */ .sp-file-drop { /* The hidden inside is inset:0 — without a positioned parent it escaped and covered the page, so clicking a document row opened the upload picker instead of downloading. */ position: relative; border: 2px dashed var(--sp-border); border-radius: var(--sp-radius-md); padding: var(--sp-s-6) var(--sp-s-5); text-align: center; cursor: pointer; transition: border-color var(--sp-dur-fast) var(--sp-ease-out), background var(--sp-dur-fast) var(--sp-ease-out); background: var(--sp-bg-page); } .sp-file-drop:hover, .sp-file-drop.is-dragover { border-color: var(--sp-gold); background: rgba(201, 150, 44, 0.04); } .sp-file-drop-label { font-size: var(--sp-fs-13); color: var(--sp-text-3); pointer-events: none; } .sp-file-drop-label strong { color: var(--sp-gold); } /* multi-file selection list */ .sp-import-files { list-style: none; margin: var(--sp-s-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-s-2); } .sp-import-file { display: flex; align-items: center; gap: var(--sp-s-3); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); padding: var(--sp-s-2) var(--sp-s-3); background: var(--sp-bg-card); } .sp-import-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sp-text-1); } .sp-import-file-size { color: var(--sp-text-3); font-size: var(--sp-fs-13); white-space: nowrap; } .sp-import-file.is-invalid { border-color: var(--sp-red); } .sp-import-file.is-invalid .sp-import-file-size { color: var(--sp-red); } /* ============================================================================= CALENDAR GRID ============================================================================= */ .sp-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-s-4); } .sp-cal-title { font-size: var(--sp-fs-16); font-weight: 700; color: var(--sp-text-1); } .sp-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-bottom: 1px; } .sp-cal-weekday { padding: var(--sp-s-2); text-align: center; font-size: var(--sp-fs-11); font-weight: 600; letter-spacing: var(--sp-ls-wider); text-transform: uppercase; color: var(--sp-text-3); } .sp-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--sp-border); border-radius: var(--sp-radius-md); overflow: hidden; } .sp-cal-cell { background: var(--sp-bg-card); padding: var(--sp-s-2); min-height: 88px; vertical-align: top; } .sp-cal-cell--other-month { background: var(--sp-bg-page); } .sp-cal-cell--today { background: rgba(201, 150, 44, 0.06); } .sp-cal-day { font-size: var(--sp-fs-12); font-family: var(--sp-font-mono); color: var(--sp-text-3); margin-bottom: var(--sp-s-1); line-height: 1; } .sp-cal-cell--today .sp-cal-day { background: var(--sp-gold); color: #fff; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .sp-cal-events { display: flex; flex-direction: column; gap: 2px; } .sp-cal-event { font-size: 10px; font-weight: 500; padding: 1px 4px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .sp-cal-event--activa { background: var(--sp-green-bg); color: var(--sp-green); } .sp-cal-event--por_renovar { background: var(--sp-amber-bg); color: var(--sp-amber); } .sp-cal-event--vencida { background: var(--sp-red-bg); color: var(--sp-red); } /* ---- Cotizador step indicator ------------------------------------------ */ .sp-step-indicator { display: flex; gap: var(--sp-s-3); margin-bottom: var(--sp-s-6); } .sp-step-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--sp-border); display: flex; align-items: center; justify-content: center; font-size: var(--sp-fs-12); font-weight: 600; color: var(--sp-text-3); transition: all var(--sp-dur-base) var(--sp-ease-out); } .sp-step-dot.active { border-color: var(--sp-gold); background: var(--sp-gold); color: #fff; } .sp-step-dot.done { border-color: var(--sp-green); background: var(--sp-green); color: #fff; } .sp-step-line { flex: 1; height: 2px; background: var(--sp-border); align-self: center; transition: background var(--sp-dur-base) var(--sp-ease-out); } .sp-step-line.done { background: var(--sp-green); } .sp-cotizador-step { display: none; } .sp-cotizador-step.is-active { display: block; animation: sp-fade-in var(--sp-dur-base) var(--sp-ease-out) both; } .sp-step-nav { display: flex; justify-content: space-between; margin-top: var(--sp-s-5); padding-top: var(--sp-s-4); border-top: 1px solid var(--sp-border); } /* ============================================================================= PROSPECTOS — pipeline strip + lead inbox ============================================================================= */ .sp-pipeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-s-2); margin-bottom: var(--sp-s-5); } .sp-pipeline-step { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-s-3); background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-top: 3px solid var(--sp-border); border-radius: var(--sp-radius-sm); color: var(--sp-text-2); text-decoration: none; transition: box-shadow var(--sp-dur-fast) var(--sp-ease-out); } .sp-pipeline-step:hover { box-shadow: var(--sp-shadow-sm); } .sp-pipeline-step.is-active { border-color: var(--sp-gold); box-shadow: var(--sp-shadow-sm); } .sp-pipeline-step--nuevo { border-top-color: var(--sp-gold); } .sp-pipeline-step--contactado { border-top-color: var(--sp-amber); } .sp-pipeline-step--cotizado { border-top-color: var(--sp-text-3); } .sp-pipeline-step--ganado { border-top-color: var(--sp-green); } .sp-pipeline-step--perdido { border-top-color: var(--sp-red); } .sp-pipeline-count { font-size: 1.375rem; font-weight: 700; color: var(--sp-text-1); line-height: var(--sp-lh-tight); } .sp-pipeline-label { font-size: var(--sp-fs-12); text-transform: uppercase; letter-spacing: var(--sp-ls-wide); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-lead-toolbar { flex-wrap: wrap; gap: var(--sp-s-3); } .sp-lead-search { min-width: 240px; } .sp-count-pill, .sp-nav-badge { display: inline-block; min-width: 1.25rem; padding: 0 6px; border-radius: 999px; background: var(--sp-red); color: #fff; font-size: .6875rem; font-weight: 700; line-height: 1.25rem; text-align: center; vertical-align: middle; } .sp-lead-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-s-2); } .sp-lead { display: flex; align-items: center; gap: var(--sp-s-4); padding: var(--sp-s-3) var(--sp-s-4); background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); } .sp-lead.is-unread { border-left: 4px solid var(--sp-gold); background: linear-gradient(90deg, var(--sp-blue-tint), var(--sp-bg-card) 40%); } .sp-lead-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; } .sp-lead-top { display: flex; align-items: center; gap: var(--sp-s-2); flex-wrap: wrap; } .sp-lead-name { font-weight: 500; color: var(--sp-text-1); } .sp-lead.is-unread .sp-lead-name { font-weight: 700; } .sp-lead-preview { color: var(--sp-text-2); font-size: var(--sp-fs-13, .8125rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-lead-meta { display: flex; flex-wrap: wrap; gap: 2px var(--sp-s-3); color: var(--sp-text-3); font-size: .75rem; } .sp-lead-actions { display: flex; flex-wrap: wrap; gap: var(--sp-s-1); justify-content: flex-end; flex-shrink: 0; } .sp-lead-actions form { display: contents; } .sp-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sp-gold); flex-shrink: 0; } .sp-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--sp-border); font-size: .6875rem; font-weight: 600; letter-spacing: var(--sp-ls-wide); text-transform: uppercase; color: var(--sp-text-3); } .sp-chip--landing { border-color: var(--sp-gold); color: var(--sp-amber); background: var(--sp-amber-bg); } .sp-chip--booking { border-color: var(--sp-green); color: var(--sp-green); background: var(--sp-green-bg); } .sp-quote { margin: 0; padding: var(--sp-s-3) var(--sp-s-4); border-left: 3px solid var(--sp-gold); background: var(--sp-blue-tint); border-radius: 0 var(--sp-radius-sm) var(--sp-radius-sm) 0; white-space: pre-wrap; line-height: var(--sp-lh-normal); } @media (max-width: 760px) { .sp-pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sp-pipeline-step { padding: var(--sp-s-2); } .sp-pipeline-label { font-size: var(--sp-fs-11); letter-spacing: 0; } .sp-lead { flex-direction: column; align-items: stretch; gap: var(--sp-s-3); } .sp-lead-actions { justify-content: flex-start; } .sp-lead-preview { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .sp-lead-search { min-width: 0; width: 100%; } .sp-lead-toolbar .sp-tabs { overflow-x: auto; max-width: 100%; } } /* ============================================================================= IMPORT BATCH — progress bar + queue list (importar/lote.php) ============================================================================= */ .sp-progress { height: 8px; background: var(--sp-blue-tint); border-radius: 999px; overflow: hidden; } .sp-progress-bar { height: 100%; background: var(--sp-gold); border-radius: 999px; transition: width var(--sp-dur-base) var(--sp-ease-out); } .sp-batch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-s-2); } .sp-batch-item { display: flex; align-items: center; gap: var(--sp-s-4); padding: var(--sp-s-3) var(--sp-s-4); background: var(--sp-bg-card); border: 1px solid var(--sp-border); border-left: 4px solid var(--sp-border); border-radius: var(--sp-radius-md); } .sp-batch-item--parsed { border-left-color: var(--sp-gold); } .sp-batch-item--saved { border-left-color: var(--sp-green); } .sp-batch-item--error { border-left-color: var(--sp-red); } .sp-batch-item--duplicate { border-left-color: var(--sp-amber); } .sp-batch-item--skipped { opacity: .65; } .sp-batch-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .sp-batch-top { display: flex; align-items: center; gap: var(--sp-s-2); flex-wrap: wrap; } .sp-batch-file { font-weight: 500; color: var(--sp-text-1); overflow-wrap: anywhere; } .sp-batch-meta { display: flex; flex-wrap: wrap; gap: 2px var(--sp-s-3); color: var(--sp-text-2); font-size: var(--sp-fs-13); } .sp-batch-error { color: var(--sp-red); font-size: var(--sp-fs-13); } .sp-batch-hint { color: var(--sp-green); font-size: var(--sp-fs-13); } .sp-batch-actions { display: flex; gap: var(--sp-s-1); flex-shrink: 0; } .sp-batch-actions form { display: contents; } @media (max-width: 760px) { .sp-batch-item { flex-direction: column; align-items: stretch; gap: var(--sp-s-3); } } /* ============================================================================= SEARCH — header trigger, full results page, command palette (Ctrl/Cmd+K) ============================================================================= */ /* --- /buscar full results page --- */ .sp-search-form { display: flex; gap: var(--sp-s-2); margin-bottom: var(--sp-s-5); max-width: 560px; } .sp-search-form-input { flex: 1; } .sp-search-summary { font-size: var(--sp-fs-13); color: var(--sp-text-3); margin: 0 0 var(--sp-s-4); } .sp-search-results { display: flex; flex-direction: column; gap: var(--sp-s-5); max-width: 860px; } .sp-search-list { display: flex; flex-direction: column; gap: var(--sp-s-1); } .sp-search-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-s-3); padding: var(--sp-s-2) var(--sp-s-3); border-radius: var(--sp-radius-sm); color: inherit; text-decoration: none; } .sp-search-item:hover { background: var(--sp-blue-tint); } .sp-search-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sp-search-item-title { font-weight: 500; color: var(--sp-text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-search-item-sub { font-size: var(--sp-fs-12); color: var(--sp-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- command palette dialog --- */ dialog.sp-palette { width: min(560px, calc(100vw - 32px)); max-width: 560px; max-height: min(420px, 70vh); margin: 10vh auto auto; padding: 0; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); box-shadow: var(--sp-shadow-lg); background: var(--sp-bg-card); color: var(--sp-text-1); overflow: hidden; display: flex; flex-direction: column; } dialog.sp-palette::backdrop { background: rgba(10, 22, 40, 0.4); } .sp-palette-prompt { display: flex; align-items: center; gap: var(--sp-s-3); padding: var(--sp-s-4); border-bottom: 1px solid var(--sp-border); flex-shrink: 0; } .sp-palette-chev { color: var(--sp-text-3); font-size: var(--sp-fs-16); flex-shrink: 0; } .sp-palette-prompt input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--sp-text-1); font-family: var(--sp-font-ui); font-size: var(--sp-fs-16); } .sp-palette-prompt input::placeholder { color: var(--sp-text-3); } .sp-palette-hint { flex-shrink: 0; padding: 2px 6px; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-sm); color: var(--sp-text-3); font-size: var(--sp-fs-11); text-transform: uppercase; letter-spacing: var(--sp-ls-wide); } .sp-palette-results { overflow-y: auto; padding: var(--sp-s-2); } .sp-palette-group { padding: var(--sp-s-2) var(--sp-s-3) 4px; color: var(--sp-text-3); font-size: var(--sp-fs-11); text-transform: uppercase; letter-spacing: var(--sp-ls-wide); } .sp-palette-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-s-3); padding: var(--sp-s-2) var(--sp-s-3); border-radius: var(--sp-radius-sm); color: var(--sp-text-1); text-decoration: none; } .sp-palette-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--sp-fs-14); } .sp-palette-item-sub { flex-shrink: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sp-text-3); font-size: var(--sp-fs-12); } .sp-palette-item[aria-selected="true"] { background: var(--sp-blue-tint); } .sp-palette-item[aria-selected="true"] .sp-palette-item-sub { color: var(--sp-text-2); } .sp-palette-empty { padding: var(--sp-s-5) var(--sp-s-3); text-align: center; color: var(--sp-text-3); font-size: var(--sp-fs-13); } .sp-palette-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } @media (max-width: 480px) { dialog.sp-palette { width: calc(100vw - 24px); margin-top: 5vh; } } /* ============================================================================= ICON BUTTONS, DOCUMENT LIST, UPLOAD STATUS ============================================================================= */ .sp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .sp-ico { flex-shrink: 0; display: block; } .sp-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--sp-radius-sm); border: 1px solid transparent; background: none; color: var(--sp-text-2); cursor: pointer; transition: background var(--sp-dur-fast) var(--sp-ease-out), color var(--sp-dur-fast) var(--sp-ease-out); } .sp-icon-btn:hover { background: var(--sp-blue-tint); color: var(--sp-text-1); } .sp-icon-btn:focus-visible { outline: 2px solid var(--sp-gold); outline-offset: 1px; } .sp-icon-btn--danger:hover { background: var(--sp-red-bg); color: var(--sp-red); } .sp-td-actions form { display: contents; } .sp-doc-name { display: inline-flex; align-items: center; gap: var(--sp-s-2); color: var(--sp-text-1); font-weight: 500; word-break: break-word; } .sp-doc-name .sp-ico { color: var(--sp-text-3); } .sp-doc-name:hover span { text-decoration: underline; } .sp-upload-status { margin-top: var(--sp-s-2); font-size: var(--sp-fs-13); min-height: 20px; color: var(--sp-text-2); } .sp-upload-status.is-ok { color: var(--sp-green); } .sp-upload-status.is-error { color: var(--sp-red); } /* ============================================================================= BITÁCORA — quick-log bar on the expediente, timeline, "último contacto" ============================================================================= */ .sp-logbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-s-2); padding: var(--sp-s-3) var(--sp-s-5); border-top: 1px solid var(--sp-border); background: var(--sp-bg-page); border-radius: 0 0 var(--sp-radius-md) var(--sp-radius-md); } .sp-logbar-kinds { display: flex; flex-wrap: wrap; gap: var(--sp-s-1); border: 0; margin: 0; padding: 0; } .sp-logbar-kind { position: relative; cursor: pointer; } .sp-logbar-kind input { position: absolute; opacity: 0; pointer-events: none; } .sp-logbar-kind span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--sp-border); background: var(--sp-bg-card); font-size: var(--sp-fs-13); color: var(--sp-text-2); transition: background var(--sp-dur-fast), border-color var(--sp-dur-fast), color var(--sp-dur-fast); } .sp-logbar-kind:hover span { border-color: var(--sp-text-3); color: var(--sp-text-1); } .sp-logbar-kind input:checked + span { background: var(--sp-text-1); border-color: var(--sp-text-1); color: #fff; } .sp-logbar-kind input:focus-visible + span { outline: 2px solid var(--sp-gold); outline-offset: 1px; } .sp-logbar-text { flex: 1 1 220px; min-width: 0; } .sp-last-contact { font-weight: 500; margin-right: var(--sp-s-2); } .sp-last-contact.is-cold { color: var(--sp-amber); } .sp-contact-cold { color: var(--sp-amber); } .sp-timeline { list-style: none; margin: 0; padding: 0; } .sp-tl-item { display: flex; align-items: flex-start; gap: var(--sp-s-3); padding: var(--sp-s-3) 0; border-bottom: 1px solid var(--sp-border); } .sp-tl-item:last-child { border-bottom: 0; } .sp-tl-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sp-blue-tint); color: var(--sp-text-1); } .sp-tl-item--whatsapp .sp-tl-icon { background: var(--sp-green-bg); color: var(--sp-green); } .sp-tl-item--llamada .sp-tl-icon, .sp-tl-item--visita .sp-tl-icon { background: var(--sp-amber-bg); color: var(--sp-amber); } .sp-tl-body { flex: 1; min-width: 0; } .sp-tl-head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sp-s-2); font-size: var(--sp-fs-14); } .sp-tl-head .sp-muted { font-size: var(--sp-fs-12); } .sp-tl-text { margin: 2px 0 0; white-space: pre-wrap; word-break: break-word; color: var(--sp-text-1); } .sp-tl-item.is-system { color: var(--sp-text-2); } .sp-tl-item.is-system .sp-tl-icon { background: none; border: 1px solid var(--sp-border); color: var(--sp-text-3); } .sp-tl-item.is-system .sp-tl-head { font-size: var(--sp-fs-13); } .sp-tl-del { flex-shrink: 0; opacity: .5; } .sp-tl-item:hover .sp-tl-del, .sp-tl-del:focus-within { opacity: 1; } @media (max-width: 760px) { .sp-logbar { padding: var(--sp-s-3); } .sp-logbar .sp-btn { flex: 1 0 100%; } .sp-tl-del { opacity: 1; } } .sp-ren-meta .sp-ico { display: inline-block; vertical-align: -1px; margin-right: 2px; } .sp-ren-meta.sp-contact-cold { color: var(--sp-amber); } /* ============================================================================= MI CARTERA — bar rows (one series each: label · bar · value), no chart lib. Value and share are always printed; the bar is a reading aid, not the data. ============================================================================= */ .sp-bars { list-style: none; margin: 0; padding: var(--sp-s-2) 0; } .sp-bar-row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 8.5rem; align-items: center; gap: var(--sp-s-3); padding: 6px var(--sp-s-5); color: inherit; text-decoration: none; } .sp-bar-row:hover { background: var(--sp-blue-tint); } .sp-bar-row:focus-visible { outline: 2px solid var(--sp-gold); outline-offset: -2px; } .sp-bar-label { display: flex; flex-direction: column; min-width: 0; font-weight: 500; color: var(--sp-text-1); overflow-wrap: anywhere; } .sp-bar-sub { font-size: var(--sp-fs-12); font-weight: 400; color: var(--sp-text-3); } .sp-bar-track { height: 10px; border-radius: 0 4px 4px 0; background: var(--sp-blue-tint); overflow: hidden; } .sp-bar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--sp-text-1); } .sp-bar-row:hover .sp-bar-fill { background: var(--sp-gold); } .sp-bar-value { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--sp-font-mono); font-size: var(--sp-fs-13); color: var(--sp-text-1); white-space: nowrap; } .sp-bar-value .sp-bar-sub { font-family: var(--sp-font-ui); } .sp-bars--months .sp-bar-row { padding-top: 3px; padding-bottom: 3px; } .sp-cartera-note { display: flex; align-items: center; gap: var(--sp-s-2); flex-wrap: wrap; margin: var(--sp-s-4) 0 0; font-size: var(--sp-fs-13); color: var(--sp-amber); } .sp-cartera-note .sp-ico { display: inline-block; } @media (max-width: 640px) { .sp-bar-row { grid-template-columns: minmax(0, 1fr) auto; padding: var(--sp-s-2) var(--sp-s-4); } .sp-bar-track { grid-column: 1 / -1; grid-row: 2; } } /* ============================================================================= COMISIONES — "Tu año": cobrado + por cobrar + renovaciones = total esperado ============================================================================= */ .sp-proj { margin-bottom: var(--sp-s-4); } .sp-proj-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1.1fr; align-items: center; gap: var(--sp-s-2); padding: var(--sp-s-4) var(--sp-s-5); } .sp-proj-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sp-proj-label { font-size: var(--sp-fs-12); color: var(--sp-text-2); } .sp-proj-num { font-size: var(--sp-fs-20); font-weight: 600; color: var(--sp-text-1); font-variant-numeric: tabular-nums; white-space: nowrap; } .sp-proj-op { font-size: var(--sp-fs-20); color: var(--sp-text-3); } .sp-proj-cell.is-total { padding: var(--sp-s-2) var(--sp-s-3); border-radius: var(--sp-radius-sm); background: var(--sp-amber-bg); } .sp-proj-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-s-2); margin: 0; padding: var(--sp-s-3) var(--sp-s-5); border-top: 1px solid var(--sp-border); font-size: var(--sp-fs-13); color: var(--sp-text-2); background: var(--sp-bg-page); } .sp-proj-foot .sp-ico { display: inline-block; } .sp-proj-warn { color: var(--sp-amber); } @media (max-width: 900px) { .sp-proj-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-s-3); } .sp-proj-op { display: none; } .sp-proj-num { font-size: var(--sp-fs-16); } } /* ============================================================================= FLOTILLAS — bien asegurado on policy forms and lists, per-client policy filter ============================================================================= */ .sp-fieldset { border: 1px dashed var(--sp-border); border-radius: var(--sp-radius-sm); margin: 0 0 var(--sp-s-4); padding: var(--sp-s-3) var(--sp-s-4) 0; } .sp-fieldset legend { padding: 0 var(--sp-s-1); } .sp-bien { display: block; color: var(--sp-text-1); } .sp-bien-id { display: block; font-family: var(--sp-font-mono); font-size: 11.5px; color: var(--sp-text-3); } .sp-pol-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-s-2); margin-bottom: var(--sp-s-3); } .sp-pol-tools .sp-filter-search { flex: 1 1 240px; } .sp-pol-chip { cursor: pointer; font: inherit; font-size: var(--sp-fs-13); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--sp-border); background: var(--sp-bg-card); color: var(--sp-text-2); } .sp-pol-chip.is-on { background: var(--sp-text-1); border-color: var(--sp-text-1); color: #fff; } .sp-pol-count { font-size: var(--sp-fs-13); color: var(--sp-text-3); margin-left: auto; } .sp-today-sub { font-size: var(--sp-fs-12); color: var(--sp-text-3); } .sp-table tr[hidden] { display: none !important; }