/* LabDental CRM custom styles. Bootstrap 5.3 dark/light theming is driven by the data-bs-theme attribute on , set in _Layout.cshtml from a cookie. */ /* ============================================================ DESIGN TOKENS — Ardem Blue brand system ============================================================ */ :root { /* Marca — Ardem Blue (rampa derivada del logo #3F5D7A) */ --ld-brand-50: #EEF2F7; --ld-brand-100: #D4DEEA; --ld-brand-200: #A8BDD3; --ld-brand-400: #6783A2; --ld-brand-600: #3F5D7A; --ld-brand-800: #2A4361; --ld-brand-900: #1A2D44; /* Neutros — warm stone */ --ld-stone-50: #FAFAF7; --ld-stone-100: #F1F0EC; --ld-stone-200: #E2E0D9; --ld-stone-400: #9C9A92; --ld-stone-600: #5E5D58; --ld-stone-800: #3A3A37; --ld-stone-900: #1C1C1A; /* Semánticos */ --ld-success-bg: #E1F5EE; --ld-success-fg: #0F6E56; --ld-success-600: #1F9E75; --ld-danger-bg: #FEE2E2; --ld-danger-fg: #991B1B; /* Layout */ --ld-sidebar-width: 260px; --ld-radius: 0.5rem; /* Sidebar — fondo oscuro en ambos temas (sobreescrito en dark) */ --ld-sidebar-bg: var(--ld-brand-900); /* Superficies light */ --ld-surface: #ffffff; --ld-surface-glass: rgba(255, 255, 255, 0.85); --ld-border: var(--ld-stone-200); /* Aplicación a Bootstrap */ --bs-primary: var(--ld-brand-600); --bs-primary-rgb: 63, 93, 122; --bs-body-bg: var(--ld-stone-50); --bs-body-color: var(--ld-stone-900); --bs-border-color: var(--ld-stone-200); --bs-secondary-color: var(--ld-stone-600); --bs-link-color: var(--ld-brand-600); --bs-link-hover-color: var(--ld-brand-800); } [data-bs-theme="dark"] { /* Tres capas de superficie */ --ld-surface-chassis: #0A1422; --ld-surface-body: #0F1B2A; --ld-surface-card: #162538; --ld-surface-hover: #1F324A; /* Bordes */ --ld-border-soft: #1A2D44; --ld-border-medium: #2A4361; /* Texto */ --ld-text-primary: #FAFAF7; --ld-text-secondary: #A8BDD3; --ld-text-tertiary: #6783A2; /* Acentos */ --ld-accent: #85B7EB; --ld-accent-fg: #B5D4F4; /* Semánticos dark */ --ld-success-bg: #0F2A21; --ld-success-fg: #5DCAA5; --ld-success-600: #5DCAA5; --ld-danger-bg: #2D1515; --ld-danger-fg: #FC8181; /* Sidebar — capa más oscura */ --ld-sidebar-bg: var(--ld-surface-chassis); /* Superficies dark */ --ld-surface: var(--ld-surface-card); --ld-surface-glass: rgba(15, 27, 42, 0.85); --ld-border: var(--ld-border-medium); /* Override Bootstrap */ --bs-body-bg: var(--ld-surface-body); --bs-body-color: var(--ld-text-primary); --bs-border-color: var(--ld-border-medium); --bs-secondary-color: var(--ld-text-secondary); --bs-tertiary-bg: var(--ld-surface-card); --bs-link-color: var(--ld-accent); --bs-link-hover-color: var(--ld-accent-fg); } /* ============================================================ LOGIN LAYOUT ============================================================ */ .ld-login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; } .ld-login-shell { position: relative; width: 100%; max-width: 28rem; } .ld-theme-toggle-corner { position: fixed; top: 1rem; right: 1rem; margin: 0; } .ld-login-main .card { border: 1px solid var(--bs-border-color); border-radius: 1rem; box-shadow: 0 10px 30px rgba(0,0,0,0.12); background-color: var(--ld-surface-glass); backdrop-filter: blur(8px); } .ld-login-hero { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; margin-bottom: 1.5rem; } .ld-login-logo-box { width: clamp(88px, 26vw, 168px); height: clamp(88px, 26vw, 168px); border-radius: clamp(18px, 5vw, 32px); background-color: #395D8D; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); flex-shrink: 0; } /* En pantallas bajas/celulares: logo y espaciados más compactos para que todo el formulario de login quepa sin scroll. */ @media (max-height: 760px), (max-width: 480px) { .ld-login-hero { gap: 0.5rem; margin-bottom: 1rem; } .ld-login-logo-box { width: clamp(72px, 20vw, 110px); height: clamp(72px, 20vw, 110px); border-radius: clamp(14px, 4vw, 22px); } .ld-login-welcome { font-size: 1.25rem; } } .ld-login-logo { width: 64%; height: 64%; object-fit: contain; display: block; color: #ffffff; } .ld-login-welcome { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.4px; margin: 0; text-align: center; color: var(--bs-body-color); } /* ============================================================ AUTHED APP SHELL ============================================================ */ .ld-app-body { min-height: 100vh; } .ld-app-shell { display: flex; min-height: 100vh; } .ld-sidebar { width: var(--ld-sidebar-width); flex-shrink: 0; background-color: var(--ld-sidebar-bg); border-right: 1px solid rgba(26, 45, 68, 0.6); flex-direction: column; padding: 1.25rem 0.85rem; } /* En escritorio, el sidebar se fija al alto visible: la navegación scrollea por dentro (si hay muchos ítems) y el pie "Cerrar sesión" queda siempre a la vista sin tener que bajar hasta el final de la página. No afecta al offcanvas móvil. */ @media (min-width: 992px) { .ld-sidebar { position: sticky; top: 0; height: 100vh; align-self: flex-start; overflow: hidden; } } .ld-sidebar-brand { display: flex; align-items: center; gap: 0.6rem; padding: 0.25rem 0.5rem 1.25rem; } .ld-brand-mark { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; flex-shrink: 0; } .ld-brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; } .ld-brand-text-wrap { display: flex; flex-direction: column; gap: 0; } .ld-brand-text { font-weight: 500; font-size: 22px; letter-spacing: -0.3px; color: #ffffff; line-height: 1.2; } .ld-brand-eyebrow { font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ld-brand-200); line-height: 1; } .ld-sidebar-nav { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; overflow-y: auto; padding: 0.25rem 0; } .ld-nav-link { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 0.4rem; color: var(--ld-brand-200); text-decoration: none; font-size: 15px; font-weight: 400; transition: color 100ms ease; } .ld-nav-link i { font-size: 18px; width: 1rem; text-align: center; flex-shrink: 0; } .ld-nav-link:hover { color: #ffffff; } .ld-nav-link.active { background-color: var(--ld-brand-600); color: #fff; border-left: 2px solid var(--ld-brand-100); padding-left: 8px; } .ld-nav-link.active:hover { background-color: var(--ld-brand-600); color: #fff; } .ld-nav-link[data-implemented="false"] { opacity: 0.45; cursor: not-allowed; } .ld-nav-link[data-implemented="false"]:hover { color: var(--ld-brand-200); } .ld-sidebar-footer { border-top: 1px solid rgba(26, 45, 68, 0.5); padding-top: 0.85rem; padding-bottom: calc(0.85rem + env(safe-area-inset-bottom)); margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; } .ld-sidebar-logout { display: flex; align-items: center; gap: 8px; padding: 9px 10px; color: var(--ld-brand-200); text-decoration: none; font-size: 15px; border-radius: 0.4rem; transition: color 100ms ease; } .ld-sidebar-logout i { font-size: 18px; } .ld-sidebar-logout:hover { color: #ffffff; } .ld-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* ============================================================ TOPBAR ============================================================ */ .ld-topbar { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.5rem; border-bottom: 1px solid var(--bs-border-color); background-color: var(--ld-surface); position: sticky; top: 0; z-index: 1020; } .ld-page-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; color: var(--bs-secondary-color); line-height: 1; margin-bottom: 2px; } .ld-page-title { font-size: 18px; font-weight: 500; margin: 0; line-height: 1.2; } .ld-order-id { font-family: var(--bs-font-monospace); font-size: 11px; color: var(--ld-brand-600); } [data-bs-theme="dark"] .ld-order-id { color: var(--ld-accent); } .ld-topbar-search { flex: 0 1 22rem; margin-left: 1rem; } .ld-topbar-search .input-group-text, .ld-topbar-search .form-control { background-color: var(--bs-body-bg); border-color: var(--bs-border-color); } .ld-bell { width: 2.25rem; height: 2.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .ld-bell-dot { width: 0.55rem; height: 0.55rem; } .ld-theme-toggle { width: 2.25rem; height: 2.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .ld-hamburger { width: 2.25rem; height: 2.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .ld-user-button { border: 1px solid var(--bs-border-color); background-color: transparent; padding: 0.25rem 0.55rem; border-radius: 999px; color: var(--bs-body-color); } .ld-user-button:hover, .ld-user-button:focus, .ld-user-button[aria-expanded="true"] { background-color: var(--ld-brand-50); border-color: var(--ld-brand-200); color: var(--bs-body-color); } [data-bs-theme="dark"] .ld-user-button:hover, [data-bs-theme="dark"] .ld-user-button:focus, [data-bs-theme="dark"] .ld-user-button[aria-expanded="true"] { background-color: var(--ld-surface-hover); border-color: var(--ld-border-medium); } .ld-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--ld-brand-600); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.02em; } .ld-user-button-name { font-size: 0.85rem; font-weight: 600; } .ld-user-button-role { font-size: 0.7rem; } /* ============================================================ CONTENT ============================================================ */ .ld-content { flex: 1; padding: 1.5rem; } .ld-content .card { border: 0.5px solid var(--bs-border-color); border-radius: var(--ld-radius); background-color: var(--ld-surface); } /* ============================================================ OFF-CANVAS (mobile sidebar) ============================================================ */ .ld-sidebar-offcanvas { width: var(--ld-sidebar-width); background-color: var(--ld-sidebar-bg); border-right: none; } .ld-sidebar-offcanvas .ld-sidebar { width: 100%; border-right: 0; background: transparent; padding: 0.5rem 0.75rem 1rem; } /* ============================================================ BOOTSTRAP PRIMARY OVERRIDE ============================================================ */ .btn-primary, .btn-primary:focus { --bs-btn-bg: var(--ld-brand-600); --bs-btn-border-color: var(--ld-brand-600); --bs-btn-hover-bg: var(--ld-brand-800); --bs-btn-hover-border-color: var(--ld-brand-800); --bs-btn-active-bg: var(--ld-brand-800); --bs-btn-active-border-color: var(--ld-brand-800); --bs-btn-disabled-bg: var(--ld-brand-600); --bs-btn-disabled-border-color: var(--ld-brand-600); } .btn-outline-primary { --bs-btn-color: var(--ld-brand-600); --bs-btn-border-color: var(--ld-brand-600); --bs-btn-hover-bg: var(--ld-brand-600); --bs-btn-hover-border-color: var(--ld-brand-600); --bs-btn-active-bg: var(--ld-brand-800); --bs-btn-active-border-color: var(--ld-brand-800); } .text-primary { color: var(--ld-brand-600) !important; } .bg-primary { background-color: var(--ld-brand-600) !important; } /* ============================================================ STATUS BADGES ============================================================ */ .ld-badge-status { display: inline-block; padding: 2px 6px; font-size: 11px; font-weight: 500; border-radius: 3px; border: 1px solid transparent; line-height: 1.5; } .ld-badge-solicitado { background: #EEF2F7; color: #2A4361; border-color: #D4DEEA; } .ld-badge-recoleccion { background: #B5D4F4; color: #042C53; } .ld-badge-produccion { background: #6783A2; color: #FFFFFF; } .ld-badge-entregado { background: #3F5D7A; color: #FFFFFF; } .ld-badge-pagado { background: #1F9E75; color: #FFFFFF; } [data-bs-theme="dark"] .ld-badge-solicitado { background: #1A2D44; color: #A8BDD3; border-color: #2A4361; } [data-bs-theme="dark"] .ld-badge-recoleccion { background: #0C447C; color: #B5D4F4; } [data-bs-theme="dark"] .ld-badge-produccion { background: #2A4361; color: #D4DEEA; } [data-bs-theme="dark"] .ld-badge-entregado { background: #3F5D7A; color: #FAFAF7; } [data-bs-theme="dark"] .ld-badge-pagado { background: #0F2A21; color: #5DCAA5; } /* ============================================================ KPI CARDS — dashboard ============================================================ */ .ld-kpi-card { padding: 12px 14px; border: 0.5px solid var(--bs-border-color); border-radius: 8px; background-color: var(--ld-surface); } .ld-kpi-label { font-size: 11px; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; color: var(--bs-secondary-color); display: flex; justify-content: space-between; align-items: center; } .ld-kpi-label i { font-size: 14px; color: var(--ld-stone-400); } [data-bs-theme="dark"] .ld-kpi-label i { color: var(--ld-text-tertiary); } .ld-kpi-num { font-size: 26px; font-weight: 500; line-height: 1.15; margin-top: 4px; display: flex; align-items: baseline; gap: 8px; } .ld-kpi-breakdown { font-size: 10px; color: var(--bs-secondary-color); margin-top: 2px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .ld-kpi-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .ld-dot-solicitado { background: #EEF2F7; border: 1px solid #D4DEEA; } .ld-dot-recoleccion { background: #B5D4F4; } .ld-dot-produccion { background: #6783A2; } .ld-dot-entregado { background: #3F5D7A; } .ld-dot-pagado { background: #1F9E75; } [data-bs-theme="dark"] .ld-dot-solicitado { background: #1A2D44; border-color: #2A4361; } [data-bs-theme="dark"] .ld-dot-recoleccion { background: #85B7EB; } [data-bs-theme="dark"] .ld-dot-produccion { background: #6783A2; } [data-bs-theme="dark"] .ld-dot-entregado { background: #D4DEEA; } [data-bs-theme="dark"] .ld-dot-pagado { background: #5DCAA5; } .ld-delta { font-size: 10px; font-weight: 500; padding: 2px 5px; border-radius: 4px; } .ld-delta-up { background: var(--ld-success-bg); color: var(--ld-success-fg); } .ld-delta-down { background: var(--ld-danger-bg); color: var(--ld-danger-fg); } /* ============================================================ TABLES ============================================================ */ .table thead th { font-size: 10px; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; color: var(--bs-secondary-color); border-bottom-width: 1px; } .table td, .table th { padding-top: 7px; padding-bottom: 7px; font-size: 13px; border-bottom: 0.5px solid var(--bs-border-color); } .table-hover > tbody > tr:hover > td { background-color: var(--ld-stone-100); } [data-bs-theme="dark"] .table-hover > tbody > tr:hover > td { background-color: var(--ld-surface-hover); } /* ============================================================ SEARCHABLE PICKER ============================================================ */ [x-cloak] { display: none !important; } /* Suprimir botón X nativo de type="search" — el picker tiene el suyo */ .ld-picker input[type="search"]::-webkit-search-cancel-button, .ld-picker input[type="search"]::-webkit-search-decoration { display: none; } .ld-picker .ld-picker-list { z-index: 1080; max-height: 240px; overflow-y: auto; margin-top: 2px; } .ld-picker .ld-picker-list .list-group-item { cursor: pointer; padding: 0.4rem 0.75rem; } /* Portal Pedido — paso "Tipo de trabajo": el campo Producto se destaca con un borde negro de 2px en el buscador, y la lista desplegable lo hereda para leerse como parte del mismo control. --bs-emphasis-color es negro en tema claro y blanco en dark mode, donde un borde negro desaparecería contra el fondo oscuro. */ .ld-product-field .ld-picker .form-control { border: 2px solid var(--bs-emphasis-color); } .ld-product-field .ld-picker .ld-picker-list { border: 2px solid var(--bs-emphasis-color); } /* ============================================================ POSTAL ADDRESS PICKER ============================================================ */ .ld-postal-address .ld-picker-list, .ld-postal-address .ld-picker-list-search { z-index: 1080; max-height: 360px; overflow-y: auto; margin-top: 2px; background-color: var(--bs-body-bg); } .ld-postal-address .ld-picker-list .list-group-item, .ld-postal-address .ld-picker-list-search .list-group-item { cursor: pointer; padding: 0.5rem 0.75rem; background-color: var(--bs-body-bg); } .ld-postal-address .ld-picker-list .list-group-item.active, .ld-postal-address .ld-picker-list-search .list-group-item.active { background-color: var(--ld-brand-50); color: var(--bs-body-color); border-color: var(--bs-border-color); } [data-bs-theme="dark"] .ld-postal-address .ld-picker-list .list-group-item.active, [data-bs-theme="dark"] .ld-postal-address .ld-picker-list-search .list-group-item.active { background-color: var(--ld-surface-hover); } /* ============================================================ LANDING ============================================================ */ .ld-landing { display: flex; align-items: center; justify-content: center; min-height: 60vh; } .ld-brand-mark--xl { width: 8rem; height: 8rem; border-radius: 1.75rem; background: var(--ld-brand-600); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 4rem; font-weight: 700; } /* ============================================================ FORM COMPONENTS — shared across order/doctor/user forms ============================================================ */ /* Scoped label baseline inside any .order-form */ .order-form .form-label { font-size: 11px; font-weight: 500; margin-bottom: 4px; } /* "— opcional" suffix on optional field labels */ .form-label-optional { color: var(--ld-stone-400); font-weight: 400; font-size: 10px; margin-left: 4px; } [data-bs-theme="dark"] .form-label-optional { color: var(--ld-text-tertiary); } /* Left-border indicator on required inputs */ .form-control-required { border-left: 2px solid var(--ld-brand-600) !important; } [data-bs-theme="dark"] .form-control-required { border-left-color: var(--ld-accent) !important; } /* Section block header */ .form-section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .form-section-number { width: 18px; height: 18px; border-radius: 50%; background: var(--ld-brand-600); color: #fff; font-size: 10px; font-weight: 500; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .form-section-title { font-size: 13px; font-weight: 500; color: var(--bs-body-color); } .form-section-hint { font-size: 10px; color: var(--ld-stone-400); } [data-bs-theme="dark"] .form-section-hint { color: var(--ld-text-tertiary); } /* Section card container */ .form-section-card { background: #ffffff; border: 0.5px solid var(--bs-border-color); border-radius: 8px; padding: 14px 16px; margin-bottom: 22px; display: flex; flex-direction: column; gap: 12px; } [data-bs-theme="dark"] .form-section-card { background: var(--ld-surface-card); } /* Focus visible — scoped to order forms for minimal blast radius */ .order-form :focus-visible { outline: 2px solid var(--ld-brand-400); outline-offset: 2px; } /* Segmented control (print type, payment method) */ .segmented-control { display: inline-flex; background: var(--ld-stone-100); border-radius: 6px; padding: 2px; gap: 2px; } [data-bs-theme="dark"] .segmented-control { background: var(--ld-surface-hover); } .segmented-control input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .segmented-control label { padding: 5px 18px; font-size: 12px; color: var(--bs-secondary-color); cursor: pointer; border-radius: 4px; line-height: 1.4; user-select: none; margin: 0; } .segmented-control input[type="radio"]:checked + label { background: #ffffff; color: var(--bs-body-color); font-weight: 500; box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.06); } [data-bs-theme="dark"] .segmented-control input[type="radio"]:checked + label { background: var(--ld-surface-card); } /* Calculated total display (read-only) */ .form-calculated-total { display: block; background: var(--ld-brand-50); border: 0.5px dashed var(--ld-brand-200); border-radius: 5px; padding: 7px 10px; } [data-bs-theme="dark"] .form-calculated-total { background: var(--ld-surface-hover); border-color: var(--ld-border-medium); } [data-bs-theme="dark"] [data-role="first-order-banner"] { background: var(--ld-brand-900) !important; border-color: var(--ld-brand-400) !important; border-left-color: var(--ld-accent) !important; color: var(--ld-accent-fg) !important; } .form-calculated-label { font-size: 9px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--bs-secondary-color); display: block; margin-bottom: 2px; } .form-calculated-value { display: flex; align-items: baseline; gap: 3px; } .form-calculated-value .amount { font-size: 16px; font-weight: 500; } .form-calculated-value .currency { font-size: 10px; color: var(--bs-secondary-color); } /* Styled file upload area */ .form-file-upload { display: flex; align-items: center; gap: 6px; background: var(--ld-stone-50); border: 0.5px dashed var(--ld-brand-200); border-radius: 5px; padding: 7px 10px; cursor: pointer; width: 100%; } [data-bs-theme="dark"] .form-file-upload { background: var(--ld-surface-hover); border-color: var(--ld-border-medium); } .form-file-upload-label { color: var(--ld-brand-600); font-weight: 500; font-size: 12px; } [data-bs-theme="dark"] .form-file-upload-label { color: var(--ld-accent); } .form-file-upload-hint { color: var(--bs-secondary-color); font-size: 10px; margin-left: auto; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 991.98px) { .ld-content { padding: 1rem; } .ld-topbar { padding: 0.75rem 1rem; } } @media (max-width: 767.98px) { /* Order form mobile: action footer stacks hint above buttons */ .order-form-footer-hint { width: 100%; order: -1; } } /* ============================================================ PEDIDO PORTAL — capture section widgets (odontograma, VITA) ============================================================ */ .ld-section-field { max-width: 32rem; } /* Red halo on a required field whose value is missing when "Siguiente" is blocked (set via fieldCls in pedido-portal.js). box-shadow doesn't affect layout, so no reflow; works over inputs and button groups alike. */ .ld-field-invalid { border-radius: .5rem; box-shadow: 0 0 0 3px rgba(220, 53, 69, .35); } /* Odontograma: each arch stays on a SINGLE line (never wraps); when it doesn't fit, the chart scrolls horizontally instead. Both arches share one scroll container so upper/lower stay vertically aligned. */ .ld-odontograma { overflow-x: auto; padding-bottom: .25rem; } .ld-odontograma > div { width: max-content; /* the arch row sizes to its teeth so flex-nowrap children never compress/wrap */ } .ld-odontograma::-webkit-scrollbar { height: 4px; } .ld-odontograma::-webkit-scrollbar-thumb { background-color: var(--bs-border-color); border-radius: 2px; } /* Compact, fixed-width tooth buttons so the arches read as a grid; never shrink (would break the single-line arch). */ .ld-tooth { min-width: 2.5rem; flex: 0 0 auto; font-variant-numeric: tabular-nums; } /* VITA shade buttons: uniform width. */ .ld-shade { min-width: 3rem; } /* Materiales: keep the quantity input narrow next to the material name. */ .ld-mat-qty { max-width: 6rem; flex: 0 0 auto; } /* ------------------------------------------------------------ Guided wizard chrome: left-rail stepper, progress, step motion ------------------------------------------------------------ */ /* Left rail: a vertical list of step buttons. */ .ld-portal-stepper { display: flex; flex-direction: column; gap: .25rem; } .ld-step-item { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .5rem .625rem; border: 1px solid transparent; border-radius: .5rem; background: transparent; color: inherit; text-align: left; /* Rows are clickable to jump to that step (see _SummaryPanel.cshtml / Resumen instructions). */ cursor: pointer; transition: background-color .12s ease, border-color .12s ease; } .ld-step-item:hover { background-color: var(--bs-secondary-bg); } .ld-step-item.active { background-color: var(--bs-primary-bg-subtle); border-color: var(--bs-primary-border-subtle); } .ld-step-label { flex: 1 1 auto; font-size: .925rem; line-height: 1.2; } /* Numbered status circle. Colour conveys the section state; the JS swaps the number for ✓ when Valid. */ .ld-step-num { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: .8rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; background-color: var(--bs-secondary-bg); color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); transition: background-color .12s ease, color .12s ease, border-color .12s ease; } .ld-step-num-active { background-color: var(--bs-primary); color: #fff; border-color: var(--bs-primary); } .ld-step-num-done { background-color: var(--bs-success); color: #fff; border-color: var(--bs-success); } .ld-step-num-partial { background-color: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border-color: var(--bs-warning-border-subtle); } /* Step nav (Atrás / Siguiente): pinned to the bottom of the viewport while the step is in view, so the actions are always reachable without scrolling to the end of a long step. The card background covers content scrolling under it; the negative inline margins + padding let the bar span the card's padding to the edges. */ .ld-portal-nav { position: sticky; bottom: 0; z-index: 3; margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; padding-bottom: .75rem; background-color: var(--bs-card-bg); } /* Center panel: slim progress bar + the conversational step heading. */ .ld-portal-progress { height: .375rem; border-radius: 1rem; } .ld-portal-prompt { font-weight: 600; } /* Subtle enter motion each time a step becomes the active one (replays on display:none → block). */ .ld-portal-section { animation: ldStepIn .18s ease; } @keyframes ldStepIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .ld-portal-section { animation: none; } } /* Reference charts (VITA guide, FDI odontograma) — the same images the Telegram bot shows for these steps. Capped so they read as a reference without dominating the step; white frame keeps charts legible in dark theme. */ .ld-ref-figure { margin: 0; } /* Keep the clickable link (zoom-to-full-size) constrained to the image itself, not the full-width figure row — otherwise the empty space to the right of the chart is clickable too. */ .ld-ref-figure a { display: inline-block; line-height: 0; } .ld-ref-img { display: block; width: auto; max-width: 100%; max-height: 18rem; padding: .25rem; background: #fff; border: 1px solid var(--bs-border-color); border-radius: .5rem; cursor: zoom-in; } /* Mobile (< lg, where the summary panel stacks full-width): turn the vertical step rail into a horizontal, tab-like strip of labelled chips (status circle + section name). It scrolls horizontally like a tab bar; the active chip is highlighted and auto-scrolled into view by the component. Keeping the label answers "which step is this"; the chip stays tappable to jump. The persistent submit button is hidden here — submit lives in the last step's nav. */ @media (max-width: 991.98px) { .ld-portal-stepper { flex-direction: row; flex-wrap: nowrap; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } /* The base rule sets width:100%; that must be reset or every chip becomes a full-width "slide". */ .ld-step-item { width: auto; flex: 0 0 auto; gap: .4rem; padding: .375rem .7rem; border: 1px solid var(--bs-border-color); border-radius: 2rem; background-color: var(--bs-secondary-bg); white-space: nowrap; scroll-snap-align: center; } .ld-step-item.active { background-color: var(--bs-primary-bg-subtle); border-color: var(--bs-primary); } .ld-step-label { font-size: .85rem; } /* Smaller status circle so the chip stays compact. */ .ld-step-num { width: 1.4rem; height: 1.4rem; font-size: .72rem; } /* Slim the scrollbar so the strip doesn't show the chunky default one. */ .ld-portal-stepper::-webkit-scrollbar { height: 4px; } .ld-portal-stepper::-webkit-scrollbar-thumb { background-color: var(--bs-border-color); border-radius: 2px; } .ld-portal-summary-footer { display: none; } }