/* ============================================================ cliniko.css — Tema cálido-clínico completo para Django + Bootstrap 4 ------------------------------------------------------------ Estrategia: - Tokens en :root para repintar paleta sin tocar el resto - Clases utilitarias con prefijo `ck-` para que no choquen con Bootstrap / SB Admin 2 - Overrides puntuales sobre selectores Bootstrap dentro de `.ck-app` para los puntos donde no podemos cambiar el HTML (DataTables, bootstrap-table, modales, formularios Django) ============================================================ */ /* ---------- Fuentes -------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300..800&family=Geist+Mono:wght@300..700&display=swap'); /* ---------- Tokens -------------------------------------------- */ :root { --ck-paper: #faf6ef; --ck-paper-2: #fdfbf6; --ck-card: #ffffff; --ck-ink: #1f1a14; --ck-ink-2: #2c241a; --ck-mute: #6b6258; --ck-faint: #9b9384; --ck-line: #ebe4d5; --ck-line-2: #d5cbb1; --ck-sage: #5a7a6a; --ck-sage-soft: #cbd9d0; --ck-sage-tint: rgba(90,122,106,.10); --ck-clay: #c4756a; --ck-clay-soft: #f0d5cd; --ck-clay-tint: rgba(196,117,106,.12); --ck-ochre: #d4a04b; --ck-ochre-soft: #f3e3c4; --ck-ochre-tint: rgba(212,160,75,.14); --ck-danger: #b3463b; --ck-info: #3d6b80; --ck-serif: 'Instrument Serif', 'Georgia', serif; --ck-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --ck-mono: 'Geist Mono', 'JetBrains Mono', monospace; --ck-radius-sm: 6px; --ck-radius: 10px; --ck-radius-lg: 14px; --ck-shadow-sm: 0 1px 0 rgba(31,26,20,.04); --ck-shadow: 0 4px 16px -8px rgba(31,26,20,.18), 0 1px 0 rgba(31,26,20,.04); --ck-shadow-lg: 0 12px 40px -12px rgba(31,26,20,.22); } /* ============================================================ GLOBAL · ámbito `.ck-app` (lo añadimos a en base.html) ============================================================ */ .ck-app, .ck-app body { background: var(--ck-paper); color: var(--ck-ink); font-family: var(--ck-sans); font-size: 14px; } .ck-app * { box-sizing: border-box; } .ck-app a { color: var(--ck-sage); } .ck-app a:hover { color: var(--ck-ink); } /* ============================================================ TIPOGRAFÍA ============================================================ */ .ck-display { font-family: var(--ck-serif); font-weight: 400; letter-spacing: -.3px; line-height: 1.05; } .ck-display-xl { font-size: 44px; } .ck-display-lg { font-size: 34px; } .ck-display-md { font-size: 26px; } .ck-display-sm { font-size: 20px; } .ck-italic { font-style: italic; } .ck-eyebrow { font-family: var(--ck-mono); font-size: 18px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ck-clay); font-weight: 600; } .ck-eyebrow--faint { color: var(--ck-faint); } .ck-eyebrow--sage { color: var(--ck-sage); } .ck-eyebrow--ochre { color: var(--ck-ochre); } .ck-eyebrow--ink { color: var(--ck-ink); } .ck-mono { font-family: var(--ck-mono); } .ck-serif { font-family: var(--ck-serif); } /* Override de h1-h6 dentro de la app — sin tocar Bootstrap fuera */ .ck-app .ck-page h1, .ck-app .ck-page h2 { font-family: var(--ck-serif); font-weight: 400; color: var(--ck-ink); letter-spacing: -.3px; } .ck-app .ck-page h3 { font-family: var(--ck-serif); font-weight: 400; color: var(--ck-ink); font-size: 22px; } .ck-app .ck-page h4, .ck-app .ck-page h5, .ck-app .ck-page h6 { font-family: var(--ck-sans); font-weight: 600; color: var(--ck-ink); } /* ============================================================ LAYOUT · SIDEBAR + TOPBAR (reemplaza SB Admin 2) ============================================================ */ .ck-app #wrapper { display: flex; } /* Garantiza que #content-wrapper ocupe el espacio restante junto al sidebar */ .ck-app #wrapper #content-wrapper { width: 0; flex: 1; background-color: var(--ck-paper); overflow-x: hidden; } /* Sidebar */ .ck-sidebar { width: 260px; flex-shrink: 0; order: -1; min-height: 100vh; background: var(--ck-paper-2); border-right: 1px solid var(--ck-line); padding: 24px 18px 16px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; } .ck-sidebar__brand { display: flex; align-items: center; justify-content: center; padding: 4px 0 12px; border-bottom: 1px solid var(--ck-line); } .ck-sidebar__brand img { height: 50px; max-width: 100%; object-fit: contain; } .ck-sidebar__role-badge { background: var(--ck-clay-soft); color: var(--ck-clay); font-family: var(--ck-mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; text-align: center; padding: 7px 10px; border-radius: var(--ck-radius); } .ck-sidebar__heading { font-family: var(--ck-mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ck-faint); padding: 0 10px; margin: 14px 0 6px; } .ck-sidebar__nav { display: flex; flex-direction: column; gap: 2px; list-style: none; padding: 0; margin: 0; } .ck-sidebar__nav a, .ck-sidebar__nav .nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 7px; color: var(--ck-mute); font-size: 15px; font-weight: 500; text-decoration: none; transition: background .15s, color .15s; } .ck-sidebar__nav a i, .ck-sidebar__nav .nav-link i { width: 16px; text-align: center; color: var(--ck-faint); font-size: 14px; } .ck-sidebar__nav a:hover, .ck-sidebar__nav .nav-link:hover { background: var(--ck-paper); color: var(--ck-ink); } .ck-sidebar__nav .active > a, .ck-sidebar__nav a.active, .ck-sidebar__nav .nav-link.active { background: #efe7d6; color: var(--ck-ink); font-weight: 600; } .ck-sidebar__nav .active > a i, .ck-sidebar__nav a.active i, .ck-sidebar__nav .nav-link.active i { color: var(--ck-clay); } .ck-sidebar__footer { margin-top: auto; padding: 14px; background: var(--ck-paper); border: 1px solid var(--ck-line); border-radius: 10px; font-family: var(--ck-serif); font-style: italic; font-size: 15px; color: var(--ck-ink); line-height: 1.35; } /* Topbar */ .ck-app #content-wrapper { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ck-topbar { height: 64px; padding: 0 28px; background: var(--ck-paper-2); border-bottom: 1px solid var(--ck-line); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0 !important; box-shadow: none !important; } .ck-topbar__title { display: flex; align-items: baseline; gap: 10px; } .ck-topbar__title .ck-serif { font-size: 24px; letter-spacing: .5px; color: var(--ck-ink); } .ck-topbar__title .ck-eyebrow { color: var(--ck-faint); } .ck-topbar__right { display: flex; align-items: center; gap: 14px; } .ck-topbar__user { display: flex; align-items: center; gap: 10px; } .ck-topbar__sep { width: 1px; height: 22px; background: var(--ck-line); } .ck-topbar__menu-btn { background: transparent; border: none; cursor: pointer; color: var(--ck-mute); font-size: 18px; padding: 6px 8px; } /* Avatar (placeholder con monograma) */ .ck-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 35% 30%, #f0c39a, #d68a76 70%); color: #fff; font-family: var(--ck-serif); font-size: 15px; letter-spacing: .5px; box-shadow: inset 0 -2px 6px rgba(0,0,0,.18); } .ck-avatar--sm { width: 28px; height: 28px; font-size: 12px; } .ck-avatar--lg { width: 64px; height: 64px; font-size: 26px; } .ck-avatar--xl { width: 96px; height: 96px; font-size: 38px; } .ck-avatar--therapist { background: radial-gradient(circle at 35% 30%, #98b6c9, #5a7a8f 70%); } .ck-avatar--patient { background: radial-gradient(circle at 35% 30%, #f0c39a, #d68a76 70%); } .ck-avatar--sage { background: radial-gradient(circle at 35% 30%, #7a9c8c, var(--ck-sage) 70%); } /* Content padding */ .ck-app #content { flex: 1; } .ck-app .container-fluid { padding: 28px 32px; } /* ============================================================ CARDS · reemplazo de .card de Bootstrap (manteniendo class) ============================================================ */ .ck-app .card { background: var(--ck-card); border: 1px solid var(--ck-line); border-radius: var(--ck-radius-lg); box-shadow: var(--ck-shadow-sm); } .ck-app .card.shadow, .ck-app .card.shadow-sm { box-shadow: var(--ck-shadow); } .ck-app .card-header { background: var(--ck-paper-2); border-bottom: 1px solid var(--ck-line); border-top-left-radius: var(--ck-radius-lg); border-top-right-radius: var(--ck-radius-lg); padding: 14px 20px; } .ck-app .card-header h6 { font-family: var(--ck-mono) !important; font-size: 10px !important; letter-spacing: 1.4px !important; text-transform: uppercase; color: var(--ck-faint) !important; font-weight: 600 !important; margin: 0; } .ck-app .card-body { padding: 20px 22px; } /* Bordes laterales semánticos (mantenemos los nombres SB Admin 2) */ .ck-app .border-left-primary { border-left: 3px solid var(--ck-ink) !important; } .ck-app .border-left-success { border-left: 3px solid var(--ck-sage) !important; } .ck-app .border-left-warning { border-left: 3px solid var(--ck-ochre) !important; } .ck-app .border-left-info { border-left: 3px solid var(--ck-info) !important; } .ck-app .border-left-danger { border-left: 3px solid var(--ck-clay) !important; } .ck-app .border-left-secondary{ border-left: 3px solid var(--ck-line-2) !important; } .ck-app .border-bottom-primary{ border-bottom: 2px solid var(--ck-ink) !important; } .ck-app .border-bottom-success{ border-bottom: 2px solid var(--ck-sage) !important; } /* ============================================================ CK CARDS · paneles propios ============================================================ */ .ck-card { background: var(--ck-card); border: 1px solid var(--ck-line); border-radius: var(--ck-radius-lg); padding: 20px 22px; box-shadow: var(--ck-shadow-sm); } .ck-card--accent-clay { background: var(--ck-clay-soft); border-color: var(--ck-clay-soft); } .ck-card--accent-sage { background: var(--ck-sage); color: #f3ede0; border-color: var(--ck-sage); } .ck-card--accent-sage .ck-eyebrow, .ck-card--accent-sage .ck-mono { color: rgba(243, 237, 224, .75); } /* ============================================================ GRID utilitario ============================================================ */ .ck-grid { display: grid; gap: 14px; } .ck-grid--2 { grid-template-columns: 1fr 1fr; } .ck-grid--3 { grid-template-columns: repeat(3, 1fr); } .ck-grid--4 { grid-template-columns: repeat(4, 1fr); } .ck-grid--hero { grid-template-columns: 1.4fr 1fr; } .ck-grid--3-1 { grid-template-columns: 1.5fr 1fr; } @media (max-width: 991.98px) { .ck-grid--3, .ck-grid--4, .ck-grid--hero, .ck-grid--3-1 { grid-template-columns: 1fr; } .ck-grid--2 { grid-template-columns: 1fr; } } /* ============================================================ KPI strip ============================================================ */ .ck-kpi { background: var(--ck-card); border: 1px solid var(--ck-line); border-radius: var(--ck-radius-lg); padding: 16px 20px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; box-shadow: var(--ck-shadow-sm); } .ck-kpi__label { font-family: var(--ck-mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ck-faint); } .ck-kpi__value { font-family: var(--ck-serif); font-size: 36px; line-height: 1; margin-top: 4px; } .ck-kpi__value--sage { color: var(--ck-sage); } .ck-kpi__value--clay { color: var(--ck-clay); } .ck-kpi__value--ochre { color: var(--ck-ochre); } .ck-kpi__value--ink { color: var(--ck-ink); } .ck-kpi__sub { font-size: 11px; color: var(--ck-mute); margin-top: 4px; } .ck-kpi__sub strong { color: var(--ck-ink); } /* ============================================================ BUTTONS · override Bootstrap (mantenemos sus clases para no tener que tocar el HTML), más utilidades ck-btn ============================================================ */ .ck-app .btn { font-family: var(--ck-sans); font-weight: 600; border-radius: var(--ck-radius); border: none; padding: 9px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; transition: background .15s, transform .1s, box-shadow .15s; } .ck-app .btn:hover { transform: translateY(-1px); } .ck-app .btn-sm { padding: 6px 12px; font-size: 12px; } .ck-app .btn-lg { padding: 12px 22px; font-size: 14px; } .ck-app .btn-block{ width: 100%; } .ck-app .btn-primary, .ck-app .btn-primary:focus { background: var(--ck-ink) !important; color: var(--ck-paper) !important; border-color: var(--ck-ink) !important; } .ck-app .btn-primary:hover { background: var(--ck-ink-2) !important; color: var(--ck-paper) !important; } .ck-app .btn-success, .ck-app .btn-success:focus { background: var(--ck-sage) !important; color: #fff !important; border-color: var(--ck-sage) !important; } .ck-app .btn-success:hover { background: #496a59 !important; } .ck-app .btn-warning, .ck-app .btn-warning:focus { background: var(--ck-ochre) !important; color: #fff !important; border-color: var(--ck-ochre) !important; } .ck-app .btn-warning:hover { background: #b38839 !important; color: #fff !important; } .ck-app .btn-danger, .ck-app .btn-danger:focus { background: var(--ck-clay) !important; color: #fff !important; border-color: var(--ck-clay) !important; } .ck-app .btn-danger:hover { background: #b46259 !important; } .ck-app .btn-info, .ck-app .btn-info:focus { background: var(--ck-info) !important; color: #fff !important; border-color: var(--ck-info) !important; } .ck-app .btn-info:hover { background: #305468 !important; } .ck-app .btn-secondary, .ck-app .btn-secondary:focus { background: var(--ck-card) !important; color: var(--ck-ink) !important; box-shadow: inset 0 0 0 1px var(--ck-line) !important; border: none !important; } .ck-app .btn-secondary:hover { background: var(--ck-paper) !important; } .ck-app .btn-light, .ck-app .btn-outline-primary, .ck-app .btn-outline-secondary, .ck-app .btn-outline-success, .ck-app .btn-outline-info, .ck-app .btn-outline-danger { background: var(--ck-card) !important; color: var(--ck-ink) !important; box-shadow: inset 0 0 0 1px var(--ck-line) !important; border: none !important; } .ck-app .btn-outline-primary:hover { background: var(--ck-ink) !important; color: var(--ck-paper) !important; } .ck-app .btn-outline-success:hover { background: var(--ck-sage) !important; color: #fff !important; } .ck-app .btn-outline-info:hover { background: var(--ck-info) !important; color: #fff !important; } .ck-app .btn-outline-danger:hover { background: var(--ck-clay) !important; color: #fff !important; } .ck-app .btn[disabled], .ck-app .btn.disabled { background: var(--ck-line) !important; color: var(--ck-faint) !important; cursor: not-allowed; box-shadow: none !important; } .ck-app .btn-circle { width: 34px; height: 34px; border-radius: 50% !important; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; } /* Utilidad: variantes ck propias */ .ck-btn { font-family: var(--ck-sans); font-weight: 600; border-radius: var(--ck-radius); border: none; padding: 9px 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; text-decoration: none; transition: background .15s, transform .1s; } .ck-btn:hover { transform: translateY(-1px); text-decoration: none; } .ck-btn--primary{ background: var(--ck-ink); color: var(--ck-paper); } .ck-btn--sage { background: var(--ck-sage); color: #fff; } .ck-btn--clay { background: var(--ck-clay); color: #fff; } .ck-btn--outline{ background: var(--ck-card); color: var(--ck-ink); box-shadow: inset 0 0 0 1px var(--ck-line); } .ck-btn--ghost { background: transparent; color: var(--ck-mute); padding: 6px 8px; font-family: var(--ck-mono); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; } .ck-btn--lg { padding: 12px 22px; font-size: 14px; } .ck-btn--block { width: 100%; justify-content: center; } /* ============================================================ BADGES · override .badge para que parezcan pills cálidos ============================================================ */ .ck-app .badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ck-mono); font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; } .ck-app .badge-success { background: var(--ck-sage-soft); color: var(--ck-sage); } .ck-app .badge-warning { background: var(--ck-ochre-soft); color: #8a6620; } .ck-app .badge-danger { background: var(--ck-clay-soft); color: var(--ck-clay); } .ck-app .badge-info { background: rgba(61,107,128,.14); color: var(--ck-info); } .ck-app .badge-primary { background: rgba(31,26,20,.10); color: var(--ck-ink); } .ck-app .badge-secondary { background: var(--ck-line); color: var(--ck-mute); } .ck-app .badge-light { background: var(--ck-paper-2); color: var(--ck-mute); } /* Animación "bounce" mantenida (estado En curso) */ .ck-app .badge.bounce { animation: ck-pulse 1.6s ease-in-out infinite; } @keyframes ck-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } } .ck-pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ck-mono); font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; } .ck-pill--sage { background: var(--ck-sage-soft); color: var(--ck-sage); } .ck-pill--clay { background: var(--ck-clay-soft); color: var(--ck-clay); } .ck-pill--ochre { background: var(--ck-ochre-soft); color: #8a6620; } .ck-pill--mute { background: var(--ck-line); color: var(--ck-mute); } .ck-pill--ink { background: var(--ck-ink); color: var(--ck-paper); } /* ============================================================ FORMS · sobre los selectores Bootstrap ============================================================ */ .ck-app .form-control, .ck-app .custom-select { background: var(--ck-card) !important; border: 1px solid var(--ck-line) !important; border-radius: var(--ck-radius) !important; padding: 10px 14px !important; font-family: var(--ck-serif) !important; font-size: 15px !important; color: var(--ck-ink) !important; height: auto !important; box-shadow: none !important; } .ck-app .form-control:focus, .ck-app .custom-select:focus { border-color: var(--ck-sage) !important; box-shadow: 0 0 0 3px var(--ck-sage-tint) !important; } .ck-app .form-control-sm { padding: 6px 10px !important; font-size: 13px !important; } .ck-app textarea.form-control { font-family: var(--ck-serif) !important; line-height: 1.5; } .ck-app .form-group label, .ck-app .col-form-label, .ck-app form label { font-family: var(--ck-mono); font-size: 10px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ck-mute); margin-bottom: 6px; } .ck-app .form-group small.form-text, .ck-app .form-text { font-family: var(--ck-serif); font-style: italic; font-size: 12px; color: var(--ck-faint) !important; text-transform: none; letter-spacing: 0; } .ck-app .form-row > .col, .ck-app .form-row > [class*="col-"] { padding-right: 7px; padding-left: 7px; } /* Custom file input */ .ck-app .custom-file-label { background: var(--ck-card); border: 1px solid var(--ck-line); border-radius: var(--ck-radius); font-family: var(--ck-serif); font-size: 15px; } /* ============================================================ TABS · .nav-tabs Bootstrap + .ck-tabs propio ============================================================ */ .ck-app .nav-tabs { border-bottom: 1px solid var(--ck-line); padding: 0 16px; } .ck-app .nav-tabs .nav-link { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 14px 16px; font-family: var(--ck-sans); font-size: 13px; font-weight: 600; color: var(--ck-mute) !important; position: relative; transition: color .15s; } .ck-app .nav-tabs .nav-link:hover { color: var(--ck-ink) !important; } .ck-app .nav-tabs .nav-link.active { background: transparent !important; color: var(--ck-ink) !important; border-bottom: 2px solid var(--ck-clay) !important; margin-bottom: -1px; } .ck-app .nav-tabs .nav-link .badge { margin-left: 6px; } /* Tabs propios (login switcher, filtros) */ .ck-tabs { display: flex; gap: 4px; background: var(--ck-card); border: 1px solid var(--ck-line); border-radius: var(--ck-radius); padding: 4px; width: fit-content; margin-bottom: 16px; } .ck-tab { border: none; cursor: pointer; background: transparent; color: var(--ck-mute); font-family: var(--ck-sans); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 7px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .ck-tab.is-active { background: var(--ck-ink); color: var(--ck-paper); } .ck-tab:hover:not(.is-active) { background: var(--ck-paper); color: var(--ck-ink); text-decoration: none; } .ck-tab__count { font-family: var(--ck-mono); font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; background: var(--ck-clay-soft); color: var(--ck-clay); } .ck-tab.is-active .ck-tab__count { background: rgba(255,255,255,.2); color: var(--ck-paper); } /* ============================================================ TABLES · override de .table Bootstrap + DataTables ============================================================ */ .ck-app .table { background: transparent; margin-bottom: 0; color: var(--ck-ink); } .ck-app .table thead th, .ck-app .thead-light th { background: var(--ck-paper-2) !important; border-bottom: 1px solid var(--ck-line) !important; border-top: none !important; font-family: var(--ck-mono); font-size: 10px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ck-faint); padding: 12px 16px; } .ck-app .table tbody td { padding: 14px 16px; border-top: 1px solid var(--ck-line); vertical-align: middle; font-size: 14px; } .ck-app .table tbody tr:first-child td { border-top: none; } .ck-app .table tbody tr:hover { background: var(--ck-paper); } .ck-app .table-bordered { border: none; } .ck-app .table-bordered th, .ck-app .table-bordered td { border: none; } .ck-app .table-bordered { border-radius: var(--ck-radius-lg); overflow: hidden; } .ck-cell-title { font-family: var(--ck-serif); font-size: 17px; line-height: 1.2; } .ck-cell-sub { font-family: var(--ck-mono); font-size: 11px; color: var(--ck-faint); margin-top: 2px; letter-spacing: .3px; } .ck-grade { font-family: var(--ck-serif); font-size: 22px; } .ck-grade small, .ck-grade .ck-grade__max { font-size: 12px; color: var(--ck-faint); } /* DataTables wrapper */ .ck-app .dataTables_wrapper { font-family: var(--ck-sans); } .ck-app .dataTables_length, .ck-app .dataTables_filter, .ck-app .dataTables_info, .ck-app .dataTables_paginate { padding: 12px 16px; color: var(--ck-faint); font-size: 12px; } .ck-app .dataTables_filter input, .ck-app .dataTables_length select { background: var(--ck-card); border: 1px solid var(--ck-line) !important; border-radius: var(--ck-radius-sm) !important; padding: 6px 10px !important; font-family: var(--ck-sans); } .ck-app .pagination .page-item .page-link { border: 1px solid var(--ck-line); color: var(--ck-mute); background: var(--ck-card); font-family: var(--ck-mono); font-size: 12px; border-radius: var(--ck-radius-sm) !important; margin: 0 2px; } .ck-app .pagination .page-item.active .page-link { background: var(--ck-ink) !important; color: var(--ck-paper) !important; border-color: var(--ck-ink) !important; } /* bootstrap-table */ .ck-app .bootstrap-table .fixed-table-toolbar { padding: 12px 16px; } .ck-app .bootstrap-table .search input.form-control { font-family: var(--ck-sans); } /* ============================================================ MODALS · override .modal-* Bootstrap ============================================================ */ .ck-app .modal-content { border: none !important; border-radius: var(--ck-radius-lg) !important; box-shadow: var(--ck-shadow-lg) !important; background: var(--ck-card); overflow: hidden; } .ck-app .modal-header { background: var(--ck-paper-2) !important; border-bottom: 1px solid var(--ck-line) !important; color: var(--ck-ink) !important; padding: 16px 22px; } .ck-app .modal-header.bg-info, .ck-app .modal-header.bg-success, .ck-app .modal-header.bg-primary, .ck-app .modal-header.bg-danger { background: var(--ck-paper-2) !important; color: var(--ck-ink) !important; border-bottom: 2px solid var(--ck-clay) !important; } .ck-app .modal-title { font-family: var(--ck-serif) !important; font-size: 22px; font-weight: 400; letter-spacing: -.2px; color: var(--ck-ink) !important; } .ck-app .modal-header .close, .ck-app .modal-header .close.text-white { color: var(--ck-mute) !important; text-shadow: none !important; opacity: 1; font-size: 24px; } .ck-app .modal-body { padding: 22px; } .ck-app .modal-footer { border-top: 1px solid var(--ck-line) !important; background: var(--ck-paper-2); padding: 14px 22px; } /* ============================================================ ALERTS ============================================================ */ .ck-app .alert { border: 1px solid var(--ck-line); border-radius: var(--ck-radius); padding: 12px 16px; font-size: 14px; background: var(--ck-card); color: var(--ck-ink); } .ck-app .alert-success { background: var(--ck-sage-tint); border-color: var(--ck-sage-soft); color: var(--ck-sage); } .ck-app .alert-warning { background: var(--ck-ochre-tint); border-color: var(--ck-ochre-soft); color: #8a6620; } .ck-app .alert-danger { background: var(--ck-clay-tint); border-color: var(--ck-clay-soft); color: var(--ck-clay); } .ck-app .alert-info { background: rgba(61,107,128,.10); border-color: rgba(61,107,128,.22); color: var(--ck-info); } .ck-app .alert-light { background: var(--ck-paper-2); border-color: var(--ck-line); color: var(--ck-ink); } /* ============================================================ PROGRESS BARS ============================================================ */ .ck-app .progress { background: rgba(0,0,0,.05); height: 6px; border-radius: 3px; overflow: hidden; } .ck-app .progress-sm { height: 5px !important; } .ck-app .progress-bar { background: var(--ck-sage); } .ck-app .progress-bar.bg-success { background: var(--ck-sage) !important; } .ck-app .progress-bar.bg-warning { background: var(--ck-ochre) !important; } .ck-app .progress-bar.bg-danger { background: var(--ck-clay) !important; } .ck-app .progress-bar.bg-primary { background: var(--ck-ink) !important; } .ck-app .progress-bar.bg-info { background: var(--ck-info) !important; } /* ============================================================ HERO / SECTION HEADERS ============================================================ */ .ck-hero { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; } .ck-hero__greeting { font-family: var(--ck-serif); font-weight: 400; font-size: 44px; line-height: 1.05; letter-spacing: -.5px; margin: 4px 0 0; } .ck-hero__greeting em { font-style: italic; color: var(--ck-sage); } .ck-hero__actions { display: flex; gap: 8px; align-items: center; } .ck-hero__sub { color: var(--ck-mute); font-size: 14px; margin-top: 6px; max-width: 480px; } .ck-hero__sub strong { color: var(--ck-ink); } /* Replaces SB Admin 2 page-heading h1 */ .ck-app .ck-page-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; } .ck-app .ck-page-heading h1, .ck-app .ck-page-heading .h3 { font-family: var(--ck-serif); font-weight: 400; font-size: 40px; letter-spacing: -.3px; color: var(--ck-ink) !important; margin: 0; } .ck-app .ck-page-heading h1 em { font-style: italic; color: var(--ck-sage); } .ck-app .ck-page-heading__eyebrow { font-family: var(--ck-mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ck-clay); margin-bottom: 6px; display: block; } /* ============================================================ CHAT BUBBLES (sala.html) ============================================================ */ .ck-chat-shell { display: flex; flex-direction: column; height: 100%; } .ck-chat-stage { flex: 1; padding: 20px 24px; overflow: auto; background: var(--ck-paper); } .ck-chat-msg { display: flex; gap: 10px; margin-bottom: 18px; align-items: flex-start; } .ck-chat-msg--user { flex-direction: row-reverse; } .ck-chat-msg__bubble { max-width: 72%; padding: 12px 16px; border-radius: 14px 14px 14px 4px; background: var(--ck-card); border: 1px solid var(--ck-line); color: var(--ck-ink); font-family: var(--ck-serif); font-size: 16px; line-height: 1.45; box-shadow: var(--ck-shadow-sm); } .ck-chat-msg--user .ck-chat-msg__bubble { background: var(--ck-sage); color: #fff; border-color: var(--ck-sage); border-radius: 14px 14px 4px 14px; } .ck-chat-msg__role { font-family: var(--ck-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ck-clay); margin-bottom: 4px; display: block; } .ck-chat-msg--user .ck-chat-msg__role { color: var(--ck-sage); text-align: right; } .ck-chat-msg__time { font-family: var(--ck-mono); font-size: 10px; opacity: .75; display: block; margin-top: 4px; } .ck-chat-msg--user .ck-chat-msg__time { text-align: right; } .ck-chat-composer { border-top: 1px solid var(--ck-line); background: var(--ck-paper-2); padding: 14px; } .ck-chat-stage [v-if="cargandoRespuesta"], .ck-chat-loading { display: inline-flex; align-items: center; gap: 8px; background: var(--ck-paper-2); border: 1px solid var(--ck-line); border-radius: 14px; padding: 8px 14px; font-family: var(--ck-serif); font-style: italic; color: var(--ck-mute); font-size: 14px; } /* Stage direction text [*algo*] dentro de mensajes */ .ck-stage-action { color: var(--ck-clay); font-style: italic; } /* ============================================================ PATIENT SIDEBAR (sala.html) ============================================================ */ .ck-patient-card { background: var(--ck-card); border: 1px solid var(--ck-line); border-radius: var(--ck-radius-lg); padding: 18px 18px 16px; box-shadow: var(--ck-shadow-sm); } .ck-patient-card__photo { display: flex; justify-content: center; margin: 8px 0; } .ck-patient-card__name { font-family: var(--ck-serif); font-size: 22px; font-weight: 400; text-align: center; margin: 12px 0 2px; } .ck-patient-card__sub { text-align: center; font-size: 12px; color: var(--ck-mute); } .ck-patient-card__tags { display: flex; gap: 6px; justify-content: center; margin-top: 10px; flex-wrap: wrap; } .ck-patient-bio { margin-top: 14px; padding: 10px 12px; background: var(--ck-paper); border-radius: 8px; font-family: var(--ck-serif); font-size: 13px; font-style: italic; color: var(--ck-mute); line-height: 1.4; } /* Session stats panel */ .ck-session-stat { display: flex; align-items: center; gap: 12px; padding: 10px 0; } .ck-session-stat__icon { width: 38px; height: 38px; border-radius: 8px; background: var(--ck-paper); color: var(--ck-clay); display: flex; align-items: center; justify-content: center; font-size: 16px; } .ck-session-stat__label { font-family: var(--ck-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ck-faint); } .ck-session-stat__value { font-family: var(--ck-serif); font-size: 22px; line-height: 1; } /* Timeline / phase bar */ .ck-phase-bar { display: flex; align-items: center; gap: 14px; background: var(--ck-card); border: 1px solid var(--ck-line); border-radius: var(--ck-radius-lg); padding: 14px 18px; box-shadow: var(--ck-shadow-sm); } .ck-phase-bar__track { flex: 1; height: 8px; background: var(--ck-line); border-radius: 4px; position: relative; overflow: hidden; } .ck-phase-bar__progress { position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(90deg, var(--ck-sage), var(--ck-clay)); border-radius: 4px; } /* ============================================================ LOGIN / AUTH SPLIT layout ============================================================ */ .ck-auth { width: 100%; min-height: 100vh; display: flex; background: var(--ck-paper); color: var(--ck-ink); font-family: var(--ck-sans); } .ck-auth__panel { width: 46%; flex-shrink: 0; background: var(--ck-sage); color: #f3ede0; padding: 40px 48px; display: flex; flex-direction: column; position: relative; overflow: hidden; } .ck-auth__panel-decoration { position: absolute; right: -180px; bottom: -180px; width: 520px; height: 520px; opacity: .08; } .ck-auth__panel-quote-eyebrow { font-family: var(--ck-mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(243,237,224,.7); } .ck-auth__panel-headline { font-family: var(--ck-serif); font-weight: 400; font-size: 54px; line-height: 1.05; letter-spacing: -.5px; margin: 14px 0 18px; color: #f3ede0; } .ck-auth__panel-quote { font-family: var(--ck-serif); font-size: 20px; font-style: italic; line-height: 1.4; margin: 0; color: rgba(243,237,224,.85); } .ck-auth__panel-stats { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(243,237,224,.18); display: flex; gap: 32px; font-size: 12px; color: rgba(243,237,224,.7); font-family: var(--ck-mono); letter-spacing: .5px; text-transform: uppercase; } .ck-auth__panel-stats > div > div { font-family: var(--ck-serif); font-size: 24px; color: #f3ede0; font-style: italic; margin-bottom: 2px; } .ck-auth__main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 60px; position: relative; } .ck-auth__main-inner { width: 100%; max-width: 420px; } .ck-auth__title { font-family: var(--ck-serif); font-weight: 400; font-size: 44px; margin: 8px 0 4px; letter-spacing: -.5px; } .ck-auth__title em { color: var(--ck-clay); } .ck-auth__sub { font-size: 14px; color: var(--ck-mute); margin: 0 0 20px; } .ck-auth__footer { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--ck-line); display: flex; justify-content: space-between; font-family: var(--ck-mono); font-size: 11px; color: var(--ck-faint); letter-spacing: .5px; text-transform: uppercase; } @media (max-width: 767.98px) { .ck-auth { flex-direction: column; } .ck-auth__panel { width: 100%; min-height: 220px; padding: 24px; } .ck-auth__panel-headline { font-size: 32px; } .ck-auth__main { padding: 24px; } } /* Login form fields override (uses .form-control via Django) */ .ck-auth .form-control { background: var(--ck-card) !important; border: 1px solid var(--ck-line) !important; border-radius: var(--ck-radius) !important; padding: 12px 14px !important; font-family: var(--ck-serif) !important; font-size: 16px !important; color: var(--ck-ink) !important; } /* ============================================================ HEATMAP cell (calificaciones, dashboard prof) ============================================================ */ .ck-heat-cell { height: 46px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--ck-serif); font-size: 18px; font-weight: 500; cursor: pointer; transition: transform .12s; } .ck-heat-cell:hover { transform: scale(1.05); } .ck-heat-cell--empty { background: rgba(0,0,0,.04); color: var(--ck-faint); box-shadow: inset 0 0 0 1px var(--ck-line); } .ck-heat-cell--fail { background: var(--ck-clay); } .ck-heat-cell--pass { background: var(--ck-ochre); } .ck-heat-cell--good { background: var(--ck-sage); } .ck-heat-cell--great { background: var(--ck-ink); } .ck-heat-legend { display: flex; gap: 14px; font-family: var(--ck-mono); font-size: 11px; color: var(--ck-mute); } .ck-heat-legend > span { display: inline-flex; align-items: center; gap: 5px; } .ck-heat-legend > span > i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; } /* ============================================================ Mini-bars (sparkline replacement) ============================================================ */ .ck-mini-bars { display: flex; gap: 3px; align-items: flex-end; height: 36px; } .ck-mini-bars__bar { flex: 1; background: var(--ck-clay-soft); border-radius: 2px; min-height: 4px; } .ck-mini-bars__bar.is-last { background: var(--ck-clay); } .ck-mini-bars--sage .ck-mini-bars__bar { background: var(--ck-sage-soft); } .ck-mini-bars--sage .ck-mini-bars__bar.is-last { background: var(--ck-sage); } /* ============================================================ EMPTY state ============================================================ */ .ck-empty { text-align: center; padding: 40px 20px; color: var(--ck-faint); } .ck-empty__icon { font-size: 32px; margin-bottom: 8px; display: block; color: var(--ck-line); } .ck-empty__text { font-family: var(--ck-serif); font-style: italic; font-size: 16px; } /* ============================================================ UTILITIES — override Bootstrap colour utilities y tipografía ============================================================ */ .ck-app .text-primary { color: var(--ck-ink) !important; } .ck-app .text-success { color: var(--ck-sage) !important; } .ck-app .text-warning { color: var(--ck-ochre) !important; } .ck-app .text-info { color: var(--ck-info) !important; } .ck-app .text-danger { color: var(--ck-clay) !important; } .ck-app .text-secondary { color: var(--ck-faint) !important; } .ck-app .text-muted { color: var(--ck-mute) !important; } .ck-app .text-gray-300 { color: var(--ck-line) !important; } .ck-app .text-gray-500 { color: var(--ck-faint) !important; } .ck-app .text-gray-600 { color: var(--ck-mute) !important; } .ck-app .text-gray-700 { color: var(--ck-ink) !important; } .ck-app .text-gray-800 { color: var(--ck-ink) !important; } .ck-app .text-white-50 { color: rgba(255,255,255,.7) !important; } .ck-app .bg-light { background: var(--ck-paper-2) !important; } .ck-app .bg-gray-100 { background: var(--ck-paper-2) !important; } .ck-app .bg-white { background: var(--ck-card) !important; } .ck-app .bg-info { background: var(--ck-info) !important; } .ck-app .bg-success { background: var(--ck-sage) !important; } .ck-app .bg-primary { background: var(--ck-ink) !important; } .ck-text-sage { color: var(--ck-sage); } .ck-text-clay { color: var(--ck-clay); } .ck-text-ochre { color: var(--ck-ochre); } .ck-text-mute { color: var(--ck-mute); } .ck-text-faint { color: var(--ck-faint); } .ck-text-ink { color: var(--ck-ink); } .ck-mt-0 { margin-top: 0 !important; } .ck-mb-0 { margin-bottom: 0 !important; } /* SweetAlert2 popup ajustes finos */ .ck-app .swal2-popup { font-family: var(--ck-sans) !important; border-radius: var(--ck-radius-lg) !important; } .ck-app .swal2-title { font-family: var(--ck-serif) !important; font-weight: 400 !important; } .ck-app .swal2-confirm.swal2-styled { background: var(--ck-ink) !important; border-radius: var(--ck-radius) !important; } /* Sidebar mobile overlay (mantenemos compatibilidad con sala.html) */ .ck-app .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(31,26,20,.5); z-index: 1040; } @media (max-width: 767.98px) { .ck-app .mobile-sidebar-container { position: fixed; top: 0; right: -100%; width: 85%; height: 100%; background: var(--ck-paper-2); z-index: 1050; transition: right .3s ease-in-out; overflow-y: auto; padding: 1rem; box-shadow: -5px 0 15px rgba(0,0,0,.1); } .ck-app .mobile-sidebar-container.active { right: 0; } .ck-app .sidebar-overlay.active { display: block; } .ck-sidebar { display: none; } }