:root { --sidebar-bg: #111827; --sidebar-link: #cbd5e1; --primary-soft: #eef3ff; --surface: #ffffff; } html, body { height: 100%; } body { background: #f3f6fb; color: #1f2937; } body.sidebar-lock { overflow: hidden; } .public-navbar { background: linear-gradient(90deg, #111827 0%, #1f2937 100%); } .hero-gradient { background: linear-gradient(135deg, #ffffff 0%, #eef3ff 100%); } .card, .metric-card { border: 0; border-radius: 18px; box-shadow: 0 10px 30px rgba(15, 23, 42, .08); } .metric-card .card-body { padding: 1.25rem; } .metric-card.emphasis { background: linear-gradient(135deg, #0d6efd 0%, #4f8cff 100%); color: #fff; } .metric-label { color: #6b7280; font-size: .92rem; } .metric-card.emphasis .metric-label { color: rgba(255,255,255,.8); } .metric-number { font-size: 2rem; font-weight: 700; } .table td, .table th { white-space: nowrap; } .slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .75rem; } .admin-shell { min-height: 100vh; position: relative; } .sidebar { width: 270px; background: var(--sidebar-bg); color: white; padding: 1.1rem; position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; overflow-y: auto; transition: transform .25s ease; box-shadow: 8px 0 30px rgba(15, 23, 42, .10); } .admin-shell.sidebar-hidden .sidebar { transform: translateX(-100%); } .sidebar-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 35; } .admin-shell.sidebar-open .sidebar-overlay { opacity: 1; pointer-events: auto; } .sidebar-brand { padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 1rem; } .sidebar-user { color: #9ca3af; } .sidebar-nav { display: flex; flex-direction: column; gap: .35rem; } .sidebar-link { color: var(--sidebar-link); text-decoration: none; padding: .7rem .9rem; border-radius: 12px; transition: .2s ease; display: flex; align-items: center; gap: .75rem; } .sidebar-link:hover { background: rgba(255,255,255,.08); color: white; } .sidebar-divider { border-top: 1px solid rgba(255,255,255,.08); margin: .7rem 0; } .site-mini-logo { width: 32px; height: 32px; object-fit: cover; border-radius: 10px; background: rgba(255,255,255,.12); } .admin-main { min-width: 0; margin-left: 270px; transition: margin-left .25s ease; } .admin-shell.sidebar-hidden .admin-main { margin-left: 0; } .topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: rgba(255,255,255,.78); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(15,23,42,.06); position: sticky; top: 0; z-index: 20; } .admin-content { padding: 1.5rem; } .week-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; padding: 1rem; } .week-strip.compact { padding: 0; } .week-day-card { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden; } .week-day-header { padding: .85rem 1rem; background: #fff; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; gap: .5rem; font-weight: 600; } .week-day-header span { color: #6b7280; font-size: .88rem; font-weight: 500; } .week-day-body { padding: 1rem; display: flex; flex-direction: column; gap: .6rem; min-height: 140px; } .mini-appointment, .appointment-card { background: #fff; border-radius: 14px; padding: .8rem .9rem; border-left: 4px solid #0d6efd; box-shadow: 0 6px 16px rgba(15,23,42,.05); } .slot-pill { display: inline-flex; align-items: center; justify-content: center; padding: .35rem .65rem; border-radius: 999px; background: var(--primary-soft); color: #0d6efd; font-size: .85rem; font-weight: 600; } .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1rem; } .calendar-column { display: flex; flex-direction: column; min-width: 0; } .calendar-column-header { background: #111827; color: white; border-radius: 16px; padding: .9rem 1rem; margin-bottom: .75rem; } .calendar-column-header small { color: rgba(255,255,255,.75); } .calendar-column-body { display: flex; flex-direction: column; gap: .75rem; } .empty-state { background: #fff; border: 1px dashed #cbd5e1; color: #64748b; padding: 1rem; border-radius: 16px; text-align: center; } .audit-line { padding: .8rem 0; border-bottom: 1px solid #e5e7eb; } .audit-line:last-child { border-bottom: 0; } .code-box { background: #0f172a; color: #e2e8f0; padding: 1rem; border-radius: 14px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; } .floating-alerts { position: sticky; top: 1rem; z-index: 50; display: flex; flex-direction: column; gap: .65rem; margin-bottom: 1rem; } .geo-search-wrap { display: flex; flex-direction: column; gap: .35rem; } .geo-search-input { border-radius: 12px; font-size: .92rem; } .recipe-verify-card { border: 0; border-radius: 1rem; box-shadow: 0 10px 30px rgba(15, 23, 42, .08); } .recipe-status-pill { border-radius: 999px; padding: .35rem .8rem; font-weight: 600; } .form-hint { color: #64748b; font-size: .9rem; } @media (max-width: 1199.98px) { .calendar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 991.98px) { .sidebar { transform: translateX(-100%); } .admin-shell.sidebar-open .sidebar { transform: translateX(0); } .admin-main { margin-left: 0; } .calendar-grid { grid-template-columns: 1fr; } .admin-content { padding: 1rem; } } /* v5 layout and UX */ .admin-main { margin-left: 270px; transition: margin-left .25s ease; } .admin-shell.sidebar-collapsed .admin-main { margin-left: 88px; } .admin-shell.sidebar-collapsed .sidebar { width: 88px; } .admin-shell.sidebar-collapsed .sidebar .sidebar-brand-text, .admin-shell.sidebar-collapsed .sidebar .sidebar-link span, .admin-shell.sidebar-collapsed .sidebar .sidebar-divider, .admin-shell.sidebar-collapsed .sidebar .sidebar-user { display: none; } .admin-shell.sidebar-collapsed .sidebar .sidebar-link { justify-content: center; } @media (max-width: 991.98px) { .sidebar { transform: translateX(-100%); width: 290px; } .admin-main { margin-left: 0 !important; } .admin-shell.sidebar-open .sidebar { transform: translateX(0); } } .wide-table .table td, .wide-table .table th { white-space: normal; } .filter-toolbar { background: #f8fbff; border: 1px solid #e7eef8; border-radius: 16px; padding: 1rem; } .empty-state { text-align: center; padding: 3rem 1rem; color: #6b7280; } .empty-state i { font-size: 2rem; display: block; margin-bottom: .75rem; } .searchable-select-wrap { display: flex; flex-direction: column; gap: .4rem; } .searchable-select-input { border-radius: 12px; border-color: #dbe5f0; background: #fff; } .searchable-select-wrap .form-select { border-radius: 14px; min-height: 44px; } .modal .form-select, .modal .form-control, .modal textarea { border-radius: 14px; } .form-hint { font-size: .85rem; color: #6b7280; } .html-editor { font-family: Consolas, monospace; min-height: 300px; } .recipe-verify-card { border-radius: 24px; } .sidebar-divider.with-label { position: relative; margin: 1rem 0 .8rem; border-top: 1px solid rgba(255,255,255,.08); padding-top: .85rem; } .sidebar-divider.with-label span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #93a3b8; } .filter-toolbar { background: #f8fbff; border: 1px solid #e7eef8; border-radius: 18px; padding: 1rem; } .section-card { border: 1px solid #edf2f7; border-radius: 18px; padding: 1rem; background: #fbfdff; } .section-title { font-size: .88rem; font-weight: 700; text-transform: uppercase; color: #64748b; margin-bottom: .75rem; } .modal-content { border: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 28px 70px rgba(15,23,42,.22); } .modal-header { background: linear-gradient(135deg, #0f172a 0%, #1f2937 100%); color: #fff; border-bottom: 0; padding: 1.1rem 1.35rem; } .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(10); opacity: .9; } .modal-footer { border-top: 1px solid #edf2f7; background: #f8fafc; padding: 1rem 1.35rem; } .modal-body { padding: 1.35rem; } .modal .form-control, .modal .form-select { min-height: 46px; border-radius: 14px !important; } .select2-container { width: 100% !important; } .select2-container--bootstrap-5 .select2-selection { min-height: 46px; border-radius: 14px !important; border: 1px solid #d9e2ec; background: #fff; box-shadow: none !important; padding: .35rem .2rem; } .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { line-height: 1.8rem; color: #1f2937; padding-left: .55rem; } .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder { color: #94a3b8; } .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow { height: 44px; right: .55rem; } .select2-dropdown { border: 1px solid #dbe5f0; border-radius: 16px; box-shadow: 0 18px 45px rgba(15,23,42,.14); overflow: hidden; z-index: 3000; } .select2-search--dropdown { padding: .55rem; background: #fff; } .select2-search--dropdown .select2-search__field { border: 1px solid #d9e2ec !important; border-radius: 12px !important; min-height: 40px; padding: .5rem .75rem; } .select2-results__option { padding: .6rem .8rem; border-radius: 12px; } .select2-results__option--highlighted[aria-selected] { background: #0d6efd !important; } .select2-main-label { font-weight: 600; } .select2-sub-label { font-size: .78rem; color: #64748b; } .field-placeholder::placeholder, .modal textarea::placeholder, .modal input::placeholder { color: #94a3b8; } .tabbed-card .nav-tabs { border-bottom: 1px solid #eef2f7; padding: 0 1rem; } .tabbed-card .nav-link { border: 0; color: #64748b; font-weight: 600; padding: 1rem .95rem; } .tabbed-card .nav-link.active { color: #0f172a; border-bottom: 3px solid #0d6efd; background: transparent; } .recipe-verify-hero { background: linear-gradient(135deg,#ffffff 0%,#f6f9ff 100%); border-radius: 28px; border: 1px solid #e6edf7; } .recipe-verify-result { border: 1px solid #e8eef6; border-radius: 24px; } .recipe-logo { max-height: 58px; width: auto; } .page-toolbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom: 1rem; } .table-panel { border: 0; border-radius: 22px; box-shadow: 0 10px 30px rgba(15, 23, 42, .08); } .table-panel .card-header { background:#fff; border-bottom:1px solid #edf2f7; padding:1rem 1.25rem; } .top-logo-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; } .modal-professional .modal-dialog { max-width: min(1140px, calc(100vw - 2rem)); margin: 1rem auto; } .modal-professional .modal-content { display: flex; flex-direction: column; max-height: calc(100vh - 2rem); border: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22); } .modal-professional .modal-header { flex: 0 0 auto; position: relative; z-index: 3; padding: 1rem 1.25rem; border-bottom: 0; background: linear-gradient(135deg, #0f172a 0%, #172554 100%); color: #fff; } .modal-professional .modal-title { margin: 0; font-size: 1.05rem; font-weight: 700; } .modal-professional .modal-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 1.25rem; background: #f8fafc; } .modal-professional .modal-footer { flex: 0 0 auto; position: relative; z-index: 3; padding: 1rem 1.25rem; border-top: 1px solid #e5e7eb; background: #fff; } .modal-professional .section-card { background: #fff; border: 1px solid #e6ebf2; border-radius: 18px; padding: 1rem; box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05); } .modal-professional .section-title { margin-bottom: 0.85rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #334155; } .modal-professional .form-label { font-weight: 600; color: #334155; margin-bottom: 0.4rem; } .modal-professional .form-control, .modal-professional .form-select { min-height: 46px; border-radius: 14px; } .modal-professional .form-control:focus, .modal-professional .form-select:focus { box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15); } .modal-professional .modal-body .row { --bs-gutter-y: 1rem; } .modal-professional .modal-body > *:first-child { margin-top: 0 !important; } .modal-professional .modal-body .section-card:first-child { margin-top: 0 !important; } @media (max-width: 991.98px) { .modal-professional .modal-dialog { max-width: calc(100vw - 1rem); margin: 0.5rem auto; } .modal-professional .modal-content { max-height: calc(100vh - 1rem); } .modal-professional .modal-body { padding: 1rem; } .modal-professional .modal-footer { padding: 0.9rem 1rem; } } @media (max-width: 991.98px) { .modal-dialog { margin: .6rem; } .page-toolbar { align-items: stretch; } } .modal-dialog.modal-dialog-scrollable { height: calc(100vh - 2rem); max-height: calc(100vh - 2rem); } .modal-dialog-scrollable .modal-content { max-height: 100%; } .modal-dialog-scrollable .modal-body { overflow-y: auto; overscroll-behavior: contain; } .modal-xl .modal-body, .modal-lg .modal-body { max-height: calc(100vh - 210px); } .modal-backdrop.show { opacity: .55; } @media (max-width: 991.98px) { .modal-dialog.modal-dialog-scrollable { height: calc(100vh - 1rem); max-height: calc(100vh - 1rem); } .modal-xl .modal-body, .modal-lg .modal-body { max-height: calc(100vh - 185px); } } /* v5.1.2 modal and select fixes */ .modal-body > .modal-form-grid { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; margin: 0; } .modal-body > .modal-form-grid > [class*="col-"] { min-width: 0; } .modal-dialog-scrollable .modal-content { overflow: hidden; } .modal-dialog-scrollable .modal-header, .modal-dialog-scrollable .modal-footer { position: relative; z-index: 2; } .modal-dialog-scrollable .modal-body { position: relative; z-index: 1; } .select2-container { display: block; max-width: 100%; } .select2-container .select2-selection--single, .select2-container .select2-selection--multiple { box-sizing: border-box; } .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { padding-right: 1.75rem; } .select2-container--open { z-index: 3100; } .select2-dropdown { min-width: 220px; } .modal .section-card { height: auto; } @media (max-width: 991.98px) { .modal-body { padding: 1rem; } .modal-body > .modal-form-grid { --bs-gutter-x: .85rem; --bs-gutter-y: .85rem; } } /* public frontend refresh */ .public-header { background: #fff; box-shadow: 0 2px 18px rgba(15,23,42,.06); z-index: 1030; } .public-topbar { background: #1f6fb2; color: #fff; font-size: .92rem; } .public-topbar .container-xl { min-height: 42px; } .public-topbar-info span, .public-topbar a { color: #fff; text-decoration: none; } .public-top-link { font-weight: 600; opacity: .95; } .public-social-link { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; } .public-branding { background: #fff; border-bottom: 1px solid #e8eef5; } .public-branding .container-xl { min-height: 76px; } .public-logo-img { width: 44px; height: 44px; object-fit: cover; border-radius: 12px; } .public-site-title { font-size: 1.35rem; font-weight: 700; color: #2c4964; } .public-site-subtitle { font-size: .9rem; color: #6c7a89; } .public-nav a { color: #2c4964; text-decoration: none; font-weight: 600; padding: .45rem .7rem; border-radius: 10px; } .public-nav a:hover { background: #eef6fc; } .public-main { padding: 0 0 2rem; } .public-footer { background: #0f2b45; color: #fff; } .public-footer a { color: rgba(255,255,255,.88); text-decoration: none; } .public-hero-section { padding: 3rem 0 2rem; background: linear-gradient(180deg,#f3f9fd 0%,#ffffff 100%); } .public-why-card { background: linear-gradient(180deg,#1977cc 0%,#0f5c9c 100%); color: #fff; border-radius: 22px; padding: 2rem; box-shadow: 0 15px 35px rgba(25,119,204,.22); } .public-why-card .btn-light { color: #1977cc; font-weight: 700; } .public-hero-main { background: #fff; border-radius: 22px; padding: 2rem; box-shadow: 0 15px 35px rgba(15,23,42,.08); } .public-hero-welcome h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: #2c4964; margin-bottom: .75rem; } .public-hero-welcome p { font-size: 1.05rem; color: #444; max-width: 820px; } .public-icon-card { background: #fff; border: 1px solid #eef2f7; border-radius: 18px; padding: 1.2rem; text-align: center; box-shadow: 0 8px 22px rgba(15,23,42,.06); } .public-icon-card i { font-size: 2rem; color: #1977cc; display: inline-block; margin-bottom: .75rem; } .public-section-block { padding: 4rem 0; } .public-section-muted { background: #f7fbff; } .public-section-title { margin-bottom: 2rem; } .public-section-title span { display: inline-block; font-size: .88rem; text-transform: uppercase; letter-spacing: .08em; color: #1977cc; font-weight: 700; margin-bottom: .5rem; } .public-section-title h2 { color: #2c4964; font-weight: 800; margin-bottom: 0; } .public-soft-card, .public-info-panel, .public-service-card, .public-doctor-card { background: #fff; border: 1px solid #e8eef5; border-radius: 20px; box-shadow: 0 12px 28px rgba(15,23,42,.06); } .public-soft-card { padding: 1rem 1.1rem; } .public-soft-card h6 { color: #2c4964; font-weight: 700; } .public-soft-card p { margin-bottom: 0; color: #5f6f7d; } .public-info-panel { padding: 1.5rem; } .public-info-panel h4 { color: #2c4964; font-weight: 800; margin-bottom: 1rem; } .public-service-card, .public-doctor-card { padding: 1.3rem; } .public-service-card h5, .public-doctor-card h5 { color: #2c4964; font-weight: 700; } .public-doctor-avatar { width: 52px; height: 52px; border-radius: 16px; background: #e8f2fb; color: #1977cc; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: .9rem; } @media (max-width: 991.98px) { .public-nav { width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: .25rem; } .public-branding .container-xl { padding-top: .75rem; padding-bottom: .75rem; } } /* geo native inputs */ .geo-native-input { min-height: 46px; border-radius: 14px; } input[list].geo-native-input::-webkit-calendar-picker-indicator { opacity: 0.6; } /* stacked recipe auth modal */ #recipeAuthModal .modal-content { border-radius: 22px; } #recipeAuthModal .modal-dialog { max-width: 620px; } #recipeAuthModal .modal-footer { position: sticky; bottom: 0; z-index: 2; } .compact-alert { max-width: 620px; width: fit-content; min-width: min(320px, 100%); border: 0; border-radius: 16px; padding: .8rem 2.5rem .8rem 1rem; box-shadow: 0 12px 30px rgba(15, 23, 42, .10) !important; } .floating-alerts { align-items: flex-start; } .compact-alert.alert-success { background: #ecfdf3; color: #166534; } .compact-alert.alert-danger { background: #fef2f2; color: #b42318; } .compact-alert.alert-warning { background: #fff8e1; color: #9a6700; } .compact-alert.alert-info, .compact-alert.alert-primary { background: #eff6ff; color: #1d4ed8; } #confirmActionModal .modal-content { border-radius: 20px; } #confirmActionModal .modal-body { font-size: .96rem; color: #475569; } /* Admin premium + configurable theme */ .admin-body { background: var(--admin-body-bg, #f3f6fb); color: var(--admin-text-color, #1f2937); font-family: var(--admin-font-family, Inter, Roboto, system-ui, sans-serif); font-size: var(--admin-font-size, 15px); } .admin-body .sidebar { background: var(--admin-sidebar-bg, #111827); } .admin-body .sidebar-link { color: var(--admin-sidebar-text, #cbd5e1); } .admin-body .sidebar-link:hover, .admin-body .sidebar-link.active { background: var(--admin-sidebar-active-bg, #243447); color: var(--admin-sidebar-active-text, #fff); } .admin-body .card, .admin-body .metric-card, .admin-body .table-panel, .admin-body .section-card, .admin-body .soft-box, .admin-body .week-day-card, .admin-body .empty-state, .admin-body .modal-content { background: var(--admin-surface-bg, #fff); color: var(--admin-text-color, #1f2937); border-radius: var(--admin-radius, 18px); } .admin-body .modal-content { background: var(--admin-modal-bg, var(--admin-surface-bg, #fff)); } .admin-body .section-card { background: var(--admin-section-bg, var(--admin-surface-bg, #fff)); } .admin-body h1,.admin-body h2,.admin-body h3,.admin-body h4,.admin-body h5,.admin-body h6, .admin-body .order-card-title { color: var(--admin-title-color, #0f172a); } .admin-body .text-muted,.admin-body .form-hint,.admin-body .order-subtext,.admin-body .metric-label { color: var(--admin-muted-text-color, #64748b) !important; } .admin-body .btn-primary { --bs-btn-bg: var(--admin-primary-color, #0d6efd); --bs-btn-border-color: var(--admin-primary-color, #0d6efd); } .admin-body .form-control,.admin-body .form-select,.admin-body .select2-container--bootstrap-5 .select2-selection { background-color: var(--admin-input-bg, #fff); border-color: var(--admin-input-border, #dbe4f0); color: var(--admin-text-color, #1f2937); border-radius: calc(var(--admin-radius, 18px) - 4px); } .admin-body .topbar { background: color-mix(in srgb, var(--admin-surface-bg, #fff) 86%, transparent); } .admin-body .page-toolbar { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; } .admin-body .nav-tabs { overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap; } .admin-body .nav-tabs .nav-link { white-space:nowrap; border-radius: 14px 14px 0 0; color: var(--admin-muted-text-color, #64748b); } .admin-body .nav-tabs .nav-link.active { color: var(--admin-primary-color, #0d6efd); font-weight:700; } .admin-footer { background: var(--admin-footer-bg, #fff); } [data-admin-theme="dark"].admin-body, body.admin-dark { --admin-body-bg:#0b1220; --admin-surface-bg:#111827; --admin-text-color:#e5e7eb; --admin-muted-text-color:#9ca3af; --admin-title-color:#f8fafc; --admin-section-bg:#0f172a; --admin-modal-bg:#111827; --admin-input-bg:#0f172a; --admin-input-border:#334155; --admin-sidebar-bg:#020617; --admin-sidebar-text:#cbd5e1; --admin-sidebar-active-bg:#1e293b; --admin-sidebar-active-text:#ffffff; } body.admin-dark .table, body.admin-dark .modal-recipe .modal-body, body.admin-dark .modal-recipe .modal-footer { color:#e5e7eb; background:#111827; } body.admin-dark .table > :not(caption) > * > * { background-color: transparent; color:#e5e7eb; border-color:#334155; } body.admin-dark .alert-light { background:#0f172a; color:#e5e7eb; border-color:#334155; } body.admin-dark .btn-outline-secondary { color:#d1d5db; border-color:#475569; } .form-grid-tabs .tab-pane { padding-top: 1rem; } @media (max-width: 575.98px) { .admin-content { padding:.75rem; } .topbar { align-items:flex-start; } .admin-body .card-body { padding:1rem; } .admin-body .page-toolbar .btn { width:100%; } .table-responsive { border-radius: 16px; } .modal-dialog { margin:.5rem; } } /* v6 contrast hardening + full frontend/admin theme control */ .public-topbar, .header .topbar { background: var(--site-topbar-bg, var(--site-primary, #1977cc)) !important; color: var(--site-topbar-text, #fff) !important; } .public-topbar *, .header .topbar *, .header .topbar a { color: var(--site-topbar-text, #fff) !important; } .header, .public-header, .public-branding { background: var(--site-header-bg, #fff) !important; color: var(--site-header-text, #2c4964) !important; } .header .logo h1, .public-site-title, .sitename { color: var(--site-header-text, var(--site-title-color, #2c4964)) !important; } .navmenu a, .public-nav a { color: var(--site-nav-text, #2c4964) !important; } .navmenu a:hover, .navmenu .active, .public-nav a:hover { color: var(--site-nav-hover, var(--site-primary, #1977cc)) !important; } .hero, .public-hero-section { background: var(--site-hero-bg, #f3f9fd) !important; } .hero .content .icon-box, .public-hero-main, .public-why-card { border-radius: var(--site-radius, 20px) !important; } .public-hero-main { background: var(--site-hero-surface, #fff) !important; color: var(--site-card-text, #444) !important; } section, .section, .public-section-block { background: var(--site-section-bg, #fff); color: var(--site-card-text, #444); } .light-background, .public-section-muted { background: var(--site-section-muted-bg, #f7fbff) !important; } .card, .public-soft-card, .public-info-panel, .public-service-card, .public-doctor-card, .services .service-item, .doctors .team-member, .faq .faq-container .faq-item, .stats .stats-item, .testimonials .swiper, .appointment .php-email-form .form-control { background: var(--site-card-bg, #fff); color: var(--site-card-text, #444); border-radius: var(--site-radius, 20px); } .public-soft-card p, .public-info-panel p, .public-service-card p, .public-doctor-card p, .services .service-item p, .doctors .team-member p { color: var(--site-card-text, #444) !important; } h1, h2, h3, h4, h5, h6, .section-title h2, .public-section-title h2, .public-service-card h5, .public-doctor-card h5, .public-soft-card h6 { color: var(--site-title-color, #2c4964) !important; } .btn-primary, .cta-btn, .appointment .php-email-form button[type=submit] { background: var(--site-primary, #1977cc) !important; border-color: var(--site-primary, #1977cc) !important; color: var(--site-button-text, #fff) !important; } .footer, .public-footer { background: var(--site-footer-bg, #0f2b45) !important; color: var(--site-footer-text, #fff) !important; } .footer *, .public-footer * { color: var(--site-footer-text, #fff); } .admin-body { background: var(--admin-body-bg, #f3f6fb) !important; color: var(--admin-text-color, #1f2937) !important; } .admin-body .topbar { background: color-mix(in srgb, var(--admin-surface-bg, #fff) 94%, transparent) !important; color: var(--admin-text-color, #1f2937) !important; border-color: color-mix(in srgb, var(--admin-input-border, #dbe4f0) 70%, transparent) !important; } .admin-body .card, .admin-body .metric-card, .admin-body .table-panel, .admin-body .section-card, .admin-body .soft-box, .admin-body .week-day-card, .admin-body .empty-state, .admin-body .modal-content, .admin-body .list-group-item, .admin-body .dropdown-menu, .admin-body .toast, .admin-body .accordion-item, .admin-body .filter-toolbar, .admin-body .table-panel .card-header, .admin-body .modal-footer, .admin-body .week-day-header, .admin-body .week-day-body, .admin-body .mini-appointment, .admin-body .appointment-card { background-color: var(--admin-surface-bg, #fff) !important; color: var(--admin-text-color, #1f2937) !important; border-color: var(--admin-input-border, #dbe4f0) !important; } .admin-body .section-card, .admin-body .filter-toolbar, .admin-body .modal-body { background-color: var(--admin-section-bg, var(--admin-surface-bg, #fff)) !important; color: var(--admin-text-color, #1f2937) !important; } .admin-body .modal-header { background: var(--admin-sidebar-bg, #111827) !important; color: var(--admin-sidebar-active-text, #fff) !important; } .admin-body .modal-header * { color: var(--admin-sidebar-active-text, #fff) !important; } .admin-body .form-control, .admin-body .form-select, .admin-body textarea, .admin-body input, .admin-body .select2-container--bootstrap-5 .select2-selection, .admin-body .html-editor-preview { background-color: var(--admin-input-bg, #fff) !important; color: var(--admin-text-color, #1f2937) !important; border-color: var(--admin-input-border, #dbe4f0) !important; } .admin-body .form-control::placeholder, .admin-body textarea::placeholder, .admin-body input::placeholder { color: var(--admin-muted-text-color, #64748b) !important; opacity: .9; } .admin-body .table { --bs-table-bg: transparent; --bs-table-color: var(--admin-text-color, #1f2937); --bs-table-border-color: var(--admin-input-border, #dbe4f0); color: var(--admin-text-color, #1f2937) !important; } .admin-body .table > :not(caption) > * > * { background-color: transparent !important; color: var(--admin-text-color, #1f2937) !important; border-color: var(--admin-input-border, #dbe4f0) !important; } .admin-body .text-bg-light, .admin-body .bg-light, .admin-body .alert-light { background-color: var(--admin-section-bg, #f8fafc) !important; color: var(--admin-text-color, #1f2937) !important; border-color: var(--admin-input-border, #dbe4f0) !important; } .admin-body .text-dark { color: var(--admin-title-color, #0f172a) !important; } .admin-body .btn-outline-secondary { color: var(--admin-text-color, #1f2937) !important; border-color: var(--admin-input-border, #dbe4f0) !important; } .admin-body .btn-outline-secondary:hover { background: var(--admin-section-bg, #f8fafc) !important; } .admin-body .nav-tabs { border-color: var(--admin-input-border, #dbe4f0) !important; } .admin-body .nav-tabs .nav-link { color: var(--admin-muted-text-color, #64748b) !important; background: transparent !important; } .admin-body .nav-tabs .nav-link.active { color: var(--admin-primary-color, #0d6efd) !important; background: var(--admin-surface-bg, #fff) !important; border-color: var(--admin-input-border, #dbe4f0) var(--admin-input-border, #dbe4f0) var(--admin-surface-bg, #fff) !important; } .admin-body .select2-dropdown, .admin-body .select2-search--dropdown { background: var(--admin-surface-bg, #fff) !important; color: var(--admin-text-color, #1f2937) !important; border-color: var(--admin-input-border, #dbe4f0) !important; } .admin-body .select2-results__option { color: var(--admin-text-color, #1f2937) !important; } .admin-body .select2-results__option--highlighted[aria-selected] { background: var(--admin-primary-color, #0d6efd) !important; color: #fff !important; } .admin-body .html-editor-toolbar { background: var(--admin-section-bg, #f8fafc) !important; border-color: var(--admin-input-border, #dbe4f0) !important; } .admin-footer { background: var(--admin-footer-bg, var(--admin-surface-bg, #fff)) !important; color: var(--admin-text-color, #1f2937) !important; } body.admin-dark { --admin-body-bg:#0b1220; --admin-surface-bg:#111827; --admin-text-color:#e5e7eb; --admin-muted-text-color:#b6c2d2; --admin-title-color:#f8fafc; --admin-section-bg:#0f172a; --admin-modal-bg:#111827; --admin-input-bg:#0b1220; --admin-input-border:#334155; --admin-sidebar-bg:#020617; --admin-sidebar-text:#cbd5e1; --admin-sidebar-active-bg:#1e293b; --admin-sidebar-active-text:#ffffff; --admin-footer-bg:#020617; } body.admin-dark .card, body.admin-dark .metric-card, body.admin-dark .table-panel, body.admin-dark .section-card, body.admin-dark .modal-content, body.admin-dark .modal-body, body.admin-dark .modal-footer, body.admin-dark .list-group-item, body.admin-dark .dropdown-menu, body.admin-dark .toast { box-shadow: 0 12px 32px rgba(0,0,0,.28) !important; } body.admin-dark .btn-close { filter: invert(1) grayscale(1) brightness(2); } body.admin-dark .badge.text-bg-light { background:#1e293b !important; color:#e5e7eb !important; } body.admin-dark .alert-success { background:#052e1a !important; color:#bbf7d0 !important; border-color:#166534 !important; } body.admin-dark .alert-danger { background:#3b0a0a !important; color:#fecaca !important; border-color:#991b1b !important; } body.admin-dark .alert-warning { background:#422006 !important; color:#fde68a !important; border-color:#a16207 !important; } body.admin-dark .alert-info, body.admin-dark .alert-primary { background:#082f49 !important; color:#bae6fd !important; border-color:#0369a1 !important; } @media (max-width: 575.98px) { .admin-body .topbar { align-items: stretch; } .admin-body .topbar > div { width: 100%; } .admin-body .topbar .btn { flex: 1 1 auto; } .admin-body .nav-tabs { padding-bottom: .25rem; } } /* Avoid white-on-white when Bootstrap utility text classes are left on neutral admin surfaces */ .admin-body .card.text-white:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark), .admin-body .metric-card.text-white:not(.emphasis), .admin-body .section-card.text-white, .admin-body .table-panel.text-white { color: var(--admin-text-color, #1f2937) !important; } .admin-body .card.text-white:not(.bg-primary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-dark) *:not(.btn):not(.badge), .admin-body .section-card.text-white *:not(.btn):not(.badge), .admin-body .table-panel.text-white *:not(.btn):not(.badge) { color: var(--admin-text-color, #1f2937) !important; } body.admin-dark .text-white-50 { color: rgba(229,231,235,.72) !important; } /* v6.1 critical dark preload + calendar/chat contrast fixes */ html.admin-dark-preload, html.admin-dark-preload body, html.admin-dark-preload body.admin-body { background: #0b1220 !important; color: #e5e7eb !important; } html.admin-dark-preload .admin-shell, html.admin-dark-preload .admin-main, html.admin-dark-preload .admin-content { background: #0b1220 !important; } html.admin-dark-preload .topbar, html.admin-dark-preload .card, html.admin-dark-preload .metric-card, html.admin-dark-preload .table-panel, html.admin-dark-preload .section-card, html.admin-dark-preload .modal-content, html.admin-dark-preload .calendar-column-header, html.admin-dark-preload .messenger-shell { background: #111827 !important; color: #e5e7eb !important; } /* Calendario: evita fondos blancos y texto sin contraste en dark/admin configurable */ .admin-body .calendar-grid, .admin-body .calendar-column, .admin-body .calendar-column-body { background: transparent !important; color: var(--admin-text-color, #1f2937) !important; } .admin-body .calendar-column-header { background: var(--admin-sidebar-bg, #111827) !important; color: var(--admin-sidebar-active-text, #fff) !important; border: 1px solid var(--admin-input-border, #334155) !important; } .admin-body .calendar-column-header small, .admin-body .calendar-column-header * { color: var(--admin-sidebar-active-text, #fff) !important; } body.admin-dark .calendar-grid, body.admin-dark .calendar-column, body.admin-dark .calendar-column-body { background: transparent !important; } body.admin-dark .calendar-column-header { background:#020617 !important; color:#f8fafc !important; border-color:#334155 !important; } body.admin-dark .mini-appointment, body.admin-dark .appointment-card, body.admin-dark .week-day-card, body.admin-dark .week-day-header, body.admin-dark .week-day-body, body.admin-dark .empty-state { background:#111827 !important; color:#e5e7eb !important; border-color:#334155 !important; } /* Chat/messenger: neutraliza blancos hardcodeados del template y Bootstrap */ .admin-body .messenger-shell, .admin-body .messenger-sidebar, .admin-body .messenger-conv-toolbar, .admin-body .messenger-chat-area, .admin-body .chatHeader, .admin-body .chatComposer, .admin-body .composerBox, .admin-body .commentCard, .admin-body .convItem.active, .admin-body .empty-chat-state, .admin-body .empty-chat-state .bigIcon { background: var(--admin-surface-bg, #fff) !important; color: var(--admin-text-color, #1f2937) !important; border-color: var(--admin-input-border, #dbe4f0) !important; } .admin-body .messenger-sidebar, .admin-body .messenger-conv-toolbar, .admin-body .composerBox, .admin-body .empty-chat-state .bigIcon { background: var(--admin-section-bg, #f8fafc) !important; } .admin-body .chatMessagesWrap { background: linear-gradient(180deg, var(--admin-surface-bg, #fff) 0%, var(--admin-section-bg, #f8fafc) 100%) !important; color: var(--admin-text-color, #1f2937) !important; } .admin-body .messenger-search-input, .admin-body .composerBox textarea { background: var(--admin-input-bg, #fff) !important; color: var(--admin-text-color, #1f2937) !important; border-color: var(--admin-input-border, #dbe4f0) !important; } .admin-body .convItem, .admin-body .convItem:hover { color: var(--admin-text-color, #1f2937) !important; border-color: var(--admin-input-border, #dbe4f0) !important; } .admin-body .convItem:hover { background: var(--admin-section-bg, #f8fafc) !important; } .admin-body .convName, .admin-body .chatTitle, .admin-body .commentName, .admin-body .fw-semibold[style] { color: var(--admin-title-color, #0f172a) !important; } .admin-body .convMessage, .admin-body .convDate, .admin-body .chatMeta, .admin-body .commentHeader, .admin-body .composerFile, .admin-body .empty-chat-state { color: var(--admin-muted-text-color, #64748b) !important; } .admin-body .chatRow.me .commentCard, .admin-body .chatRow.me .commentCard * { background: var(--admin-primary-color, #0d6efd) !important; color:#fff !important; } body.admin-dark .messenger-shell, body.admin-dark .messenger-sidebar, body.admin-dark .messenger-conv-toolbar, body.admin-dark .messenger-chat-area, body.admin-dark .chatHeader, body.admin-dark .chatComposer, body.admin-dark .composerBox, body.admin-dark .commentCard, body.admin-dark .convItem.active, body.admin-dark .empty-chat-state, body.admin-dark .empty-chat-state .bigIcon { background:#111827 !important; color:#e5e7eb !important; border-color:#334155 !important; } body.admin-dark .messenger-sidebar, body.admin-dark .messenger-conv-toolbar, body.admin-dark .composerBox, body.admin-dark .empty-chat-state .bigIcon { background:#0f172a !important; } body.admin-dark .chatMessagesWrap { background:linear-gradient(180deg,#111827 0%,#0f172a 100%) !important; color:#e5e7eb !important; } body.admin-dark .messenger-search-input, body.admin-dark .composerBox textarea { background:#0b1220 !important; color:#e5e7eb !important; border-color:#334155 !important; } body.admin-dark .convItem, body.admin-dark .convItem:hover { color:#e5e7eb !important; border-color:#334155 !important; } body.admin-dark .convItem:hover { background:#1e293b !important; } body.admin-dark .convName, body.admin-dark .chatTitle, body.admin-dark .commentName, body.admin-dark .fw-semibold[style] { color:#f8fafc !important; } body.admin-dark .convMessage, body.admin-dark .convDate, body.admin-dark .chatMeta, body.admin-dark .commentHeader, body.admin-dark .composerFile, body.admin-dark .empty-chat-state { color:#b6c2d2 !important; } body.admin-dark .memberAvatarCircle { border-color:#111827 !important; } body.admin-dark .attachmentPill { background:#0b1220 !important; color:#e5e7eb !important; box-shadow: inset 0 0 0 1px #334155 !important; } /* Fase 3: booking multi-institución */ .booking-tenant-hero, .booking-filter-card, .booking-results-card { border: 0; border-radius: 24px; background: var(--admin-surface-bg, #fff); color: var(--admin-text-color, #1f2937); } .booking-tenant-hero { padding: 1.5rem; box-shadow: 0 12px 30px rgba(15,23,42,.08); } .booking-mode-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; } .booking-mode-grid .btn { border-radius: 16px; padding: .9rem 1rem; } .booking-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; } .booking-summary div { background: color-mix(in srgb, var(--admin-surface-bg, #ffffff) 88%, var(--admin-primary-color, #0d6efd)); border: 1px solid color-mix(in srgb, var(--admin-text-color, #1f2937), transparent 88%); border-radius: 16px; padding: .8rem .9rem; } .booking-summary span { display: block; color: var(--admin-muted-text-color, #64748b); font-size: .82rem; } .booking-summary strong { color: var(--admin-title-color, #0f172a); } @media (min-width: 768px) { .booking-mode-grid { grid-template-columns: 1fr 1fr; } } body.admin-dark .booking-tenant-hero, body.admin-dark .booking-filter-card, body.admin-dark .booking-results-card, body.admin-dark .booking-summary div { background: var(--admin-surface-bg, #111827); color: var(--admin-text-color, #e5e7eb); } body.admin-dark .booking-summary strong { color: var(--admin-title-color, #f8fafc); } /* Apex Rich Text v2 - editor enriquecido local sin dependencias vendor */ .apex-rte-wrapper { border: 1px solid var(--admin-input-border, #dbe4f0); background: var(--admin-input-bg, #ffffff); box-shadow: 0 10px 26px rgba(15, 23, 42, .04); } .apex-rte-toolbar { background: linear-gradient(180deg, var(--admin-section-bg, #f8fafc) 0%, #eef4fb 100%); border-color: var(--admin-input-border, #dbe4f0) !important; } .apex-rte-toolbar .btn, .apex-rte-toolbar .form-select { border-radius: 12px; font-size: .82rem; } .apex-rte-format { max-width: 155px; } .apex-rte-surface { min-height: 180px; outline: none; color: var(--admin-text-color, #1f2937); line-height: 1.55; background: var(--admin-input-bg, #ffffff); } .apex-rte-surface:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--admin-primary-color, #0d6efd) 35%, transparent); } .apex-rte-surface table { width: 100%; border-collapse: collapse; margin: .5rem 0; } .apex-rte-surface td, .apex-rte-surface th { border: 1px solid #dbe4f0; padding: .45rem .55rem; } .apex-rte-surface blockquote { border-left: 4px solid var(--admin-primary-color, #0d6efd); padding: .45rem .85rem; background:#f8fafc; border-radius:12px; } .apex-clinical-editor + .apex-rte-wrapper .apex-rte-surface { min-height: 150px; } body.admin-dark .apex-rte-wrapper, body.admin-dark .apex-rte-surface { background:#0b1220 !important; color:#e5e7eb !important; border-color:#334155 !important; } body.admin-dark .apex-rte-toolbar { background:#111827 !important; border-color:#334155 !important; } /* Fase 11 - Booking Wizard compartido frontend + Chatbot IA */ .booking-wizard-page { background: linear-gradient(180deg, #f6f9fd 0%, #fff 60%); min-height: 75vh; } .booking-wizard-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px; gap: 1rem; align-items: start; } .booking-progress-card, .booking-wizard-card, .booking-summary-panel .card { background:#fff; border:1px solid rgba(15,23,42,.08); border-radius: 24px; box-shadow:0 18px 45px rgba(15,23,42,.08); } .booking-progress-card { padding: 1rem; } .booking-progress-icon { width:42px; height:42px; border-radius: 16px; background: color-mix(in srgb, var(--site-primary, #1977cc) 12%, #fff); color: var(--site-primary, #1977cc); display:flex; align-items:center; justify-content:center; font-size:1.2rem; } .booking-progress-bar { height: 9px; background:#e8eef6; border-radius: 999px; overflow:hidden; } .booking-progress-bar span { display:block; height:100%; background: linear-gradient(90deg, var(--site-primary, #1977cc), #0dcaf0); border-radius:999px; transition: width .25s ease; } .booking-step-list { list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.55rem; } .booking-step-list li { display:flex; align-items:center; gap:.55rem; color:#64748b; font-size:.88rem; } .booking-step-list li span { width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#edf2f7; color:#64748b; font-weight:700; font-size:.78rem; } .booking-step-list li.active span, .booking-step-list li.done span { background: var(--site-primary, #1977cc); color:#fff; } .booking-step-list li.active b { color:#0f172a; } .booking-wizard-card { padding: 1.25rem; min-height: 560px; } .booking-wizard-header { border-bottom:1px solid rgba(15,23,42,.08); padding-bottom:1rem; margin-bottom:1rem; } .booking-wizard-content { min-height: 330px; } .booking-wizard-actions { display:flex; justify-content:space-between; gap:.75rem; border-top:1px solid rgba(15,23,42,.08); padding-top:1rem; margin-top:1rem; } .booking-card-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap:.85rem; } .booking-card-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .booking-choice-card { border:1px solid #dbe4f0; background:#fff; border-radius:20px; padding:1rem; text-align:left; min-height:98px; transition:.18s ease; display:flex; flex-direction:column; gap:.35rem; } .booking-choice-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15,23,42,.09); border-color: color-mix(in srgb, var(--site-primary, #1977cc) 35%, #dbe4f0); } .booking-choice-card.active { border-color: var(--site-primary, #1977cc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-primary, #1977cc) 16%, transparent); background: color-mix(in srgb, var(--site-primary, #1977cc) 5%, #fff); } .booking-choice-card.big { min-height: 150px; } .booking-choice-card.big i { font-size:1.8rem; color:var(--site-primary, #1977cc); } .booking-choice-card small, .booking-choice-card span { color:#64748b; } .booking-help { display:flex; gap:.5rem; align-items:flex-start; padding:.85rem 1rem; border-radius:18px; background:#f1f7ff; color:#335; border:1px solid #dbeafe; } .booking-slots .slot-group { border:1px solid #e2e8f0; border-radius:18px; padding:.85rem; margin-bottom:.75rem; background:#fff; } .slot-group-title { font-weight:700; margin-bottom:.55rem; } .slot-group-title span { color:#64748b; font-weight:500; font-size:.85rem; } .booking-slots .slot-grid { display:flex; flex-wrap:wrap; gap:.5rem; } .slot-btn { border:1px solid #dbe4f0; background:#fff; border-radius:999px; padding:.5rem .8rem; font-weight:700; } .slot-btn.active { background: var(--site-primary, #1977cc); border-color: var(--site-primary, #1977cc); color:#fff; } .booking-wizard-summary { display:grid; gap:.55rem; } .summary-row { display:flex; justify-content:space-between; gap:1rem; border-bottom:1px dashed #e2e8f0; padding-bottom:.45rem; } .summary-row span { color:#64748b; font-size:.84rem; } .summary-row strong { text-align:right; font-size:.88rem; color:#0f172a; } .sticky-summary { position:sticky; top:90px; } .booking-confirm-box { border:1px solid #e2e8f0; background:#fff; border-radius:22px; padding:1rem; } .booking-review-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.75rem; } .booking-review-grid div { border-radius:16px; background:#f8fafc; padding:.8rem; } .booking-review-grid span { display:block; color:#64748b; font-size:.82rem; } .booking-review-grid strong { color:#0f172a; } @media (max-width: 1100px){ .booking-wizard-shell { grid-template-columns:1fr; } .booking-progress-card, .booking-summary-panel { order:initial; } .booking-step-list { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .sticky-summary { position:static; } } @media (max-width: 640px){ .booking-card-grid.two { grid-template-columns:1fr; } .booking-wizard-card { padding:1rem; } .booking-wizard-actions { position:sticky; bottom:0; background:#fff; z-index:3; } } .ai-booking-card .booking-wizard-card { box-shadow:none; border-radius:18px; min-height:0; padding:.75rem; } .ai-booking-card .booking-wizard-header { padding-bottom:.6rem; margin-bottom:.6rem; } .ai-booking-card .booking-wizard-content { min-height:0; } .ai-booking-card .booking-card-grid { grid-template-columns:1fr; gap:.55rem; } .ai-booking-card .booking-choice-card { min-height:0; padding:.75rem; border-radius:16px; } .ai-booking-card .booking-progress-card, .ai-booking-card .booking-summary-panel { display:none; } .ai-booking-card .booking-wizard-actions { padding-top:.6rem; margin-top:.6rem; } /* Fase 11B: corrección visual de Turnos / Booking Wizard. Evita la barra horizontal en el iframe público y mejora la pantalla final. */ body.index-page { max-width: 100%; overflow-x: hidden; } body.index-page .main, .booking-wizard-page, .booking-success-page, .appointment.section { max-width: 100%; overflow-x: clip; } @supports not (overflow: clip) { body.index-page .main, .booking-wizard-page, .booking-success-page, .appointment.section { overflow-x: hidden; } } .booking-wizard-page *, .booking-success-page *, .booking-iframe-shell *, .booking-public-iframe { box-sizing: border-box; } .booking-wizard-shell, .booking-wizard-card, .booking-progress-card, .booking-summary-panel, .booking-summary-panel .card, .booking-wizard-content, .booking-choice-card, .booking-confirm-box, .booking-review-grid, .booking-success-card, .booking-success-grid { min-width: 0; } .booking-wizard-content, .booking-choice-card, .booking-confirm-box, .booking-review-grid, .booking-success-card, .booking-success-item { overflow-wrap: anywhere; } .booking-iframe-shell { width: 100%; max-width: 1180px; margin: 0 auto; border-radius: 28px; overflow: hidden; background: linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%); border: 1px solid rgba(15, 23, 42, .06); box-shadow: 0 22px 65px rgba(15, 23, 42, .09); } .booking-public-iframe { display: block; width: 100%; min-height: 760px; border: 0; background: #f7fbff; } .booking-success-page { background: linear-gradient(180deg, #f6f9fd 0%, #ffffff 72%); min-height: 70vh; } .booking-success-container { width: 100%; } .booking-success-card { width: 100%; max-width: 920px; margin: 0 auto; padding: 30px; border-radius: 28px; background: #ffffff; border: 1px solid rgba(15, 23, 42, .08); box-shadow: 0 18px 45px rgba(15, 23, 42, .10); } .booking-success-header { display: flex; gap: 18px; align-items: flex-start; } .booking-success-icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; color: #15803d; background: #dcfce7; font-size: 2rem; } .booking-success-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(15, 23, 42, .10), transparent); margin: 24px 0; } .booking-success-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .booking-success-item { padding: 14px 16px; border-radius: 18px; background: #f8fafc; border: 1px solid #e8eef6; } .booking-success-item span { display: block; color: #64748b; font-size: .82rem; margin-bottom: 4px; } .booking-success-item strong { color: #0f172a; font-weight: 700; } .booking-success-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .booking-success-actions .btn { border-radius: 999px; padding-inline: 18px; } @media (max-width: 992px) { .booking-public-iframe { min-height: 920px; } } @media (max-width: 768px) { .booking-iframe-shell { border-radius: 20px; } .booking-public-iframe { min-height: 980px; } .booking-success-card { padding: 22px 18px; border-radius: 22px; } .booking-success-header { flex-direction: column; } .booking-success-grid { grid-template-columns: 1fr; } .booking-success-actions .btn { width: 100%; } } /* Fase 13 SEO técnico + A11y frontend */ .skip-link { position: absolute; left: 12px; top: -48px; z-index: 100000; background: #ffffff; color: #0f172a; border: 2px solid var(--site-primary, #1977cc); border-radius: 999px; padding: 10px 16px; font-weight: 800; text-decoration: none; box-shadow: 0 12px 30px rgba(15, 23, 42, .18); transition: top .2s ease; } .skip-link:focus { top: 12px; } .index-page a:focus-visible, .index-page button:focus-visible, .index-page input:focus-visible, .index-page textarea:focus-visible, .index-page select:focus-visible { outline: 3px solid color-mix(in srgb, var(--site-primary, #1977cc) 75%, #ffffff); outline-offset: 3px; } .index-page .hero h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 4.25rem); line-height: 1.08; font-weight: 800; color: var(--site-title-color, #2c4964); } .index-page img { max-width: 100%; height: auto; } .index-page .footer a, .index-page .topbar a { text-underline-offset: 3px; } .index-page .footer a:focus-visible, .index-page .topbar a:focus-visible { outline-color: #fff; } .seo-score-card { border: 1px solid rgba(25, 119, 204, .16); background: linear-gradient(135deg, rgba(25, 119, 204, .08), rgba(13, 202, 240, .08)); border-radius: 18px; padding: 1rem; }