/* Vet theme — applied when body.vet-mode is set by vet_layout.js.
*
* Shifts the citrus orange of SITI default toward medical teal so the
* clinic feels its own thing. Only overrides the primary token chain;
* the rest of the design system (bg, text, border, success/danger) is
* inherited so nav and cards stay consistent across modes.
*/
body.vet-mode,
html.vet-mode body {
--primary: #14B8A6;
--primary-light: #5EEAD4;
--primary-dark: #0F766E;
--gradient-primary: linear-gradient(135deg, #14B8A6, #0EA5E9);
}
/* ── Pre-paint vet-mode guard ──────────────────────────────────────
* When vet-mode was restored from localStorage before JS runs (see
* the inline script in index.html), these rules hide the generic
* business UI immediately so it never flashes on refresh. Once
* vet_layout.js runs it adds .hidden to the same elements, making
* these rules redundant but harmless. */
html.vet-mode #my-entity-container,
html.vet-mode #greeting-text,
html.vet-mode #greeting-date {
display: none !important;
}
html.vet-mode .user-sidebar-nav [data-sidebar-view]:not([data-sidebar-view="dashboard"]):not([data-sidebar-view="pets"]):not([data-sidebar-view="bookings"]) {
display: none !important;
}
html.vet-mode .sidebar-section-divider > .sidebar-section-label {
display: none !important;
}
/* In vet mode the global `.btn-primary` (orange gradient) clashes with
* the teal theme. Repaint it teal so the "+ Registro" toolbar button
* and any other primary CTAs stay on-brand. */
body.vet-mode .btn-primary {
background: linear-gradient(135deg, #14B8A6, #0EA5E9);
box-shadow: 0 4px 14px -4px rgba(20, 184, 166, .45);
}
body.vet-mode .btn-primary:hover {
box-shadow: 0 8px 22px -4px rgba(20, 184, 166, .55);
}
/* Native date inputs look raw across browsers. Tint the calendar
* indicator so it matches the teal accent and stays visible in both
* light and dark themes. */
body.vet-mode input[type="date"]::-webkit-calendar-picker-indicator {
opacity: .55;
cursor: pointer;
transition: opacity .15s;
}
body.vet-mode input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: .9; }
/* Sidebar branding tints to make the mode obvious at a glance. */
body.vet-mode .sidebar-logo {
filter: hue-rotate(150deg) saturate(0.7);
}
/* Avatar fallback in the entity switcher uses gradient-primary; this
* keeps the orange→teal swap consistent there too. */
body.vet-mode .entity-switcher-avatar-fallback {
background: var(--gradient-primary);
}
/* Section divider label and any "Gestión Comercial"-style headers stay
* subtle. Override only if needed; for now inherit. */
/* ── Vet dashboard widget ──────────────────────────────────────── */
/* Hero greeting — gradient teal panel with a subtle paw pattern
* spinning behind the text. Sets the tone for the whole vet console. */
.vet-hero {
position: relative;
margin-top: 16px;
padding: 26px 28px;
border-radius: 24px;
overflow: hidden;
color: #fff;
background: linear-gradient(135deg, #0f766e 0%, #14b8a6 55%, #0ea5e9 110%);
box-shadow: 0 20px 40px -24px rgba(15, 118, 110, .55);
isolation: isolate;
}
.vet-hero-bg {
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 90% 10%, rgba(255,255,255,.22), transparent 35%),
radial-gradient(circle at 5% 100%, rgba(94, 234, 212, .35), transparent 45%),
url("data:image/svg+xml;utf8,");
background-size: auto, auto, 120px 120px;
background-repeat: no-repeat, no-repeat, repeat;
z-index: -1;
}
.vet-hero-date {
font-size: 12px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: rgba(255, 255, 255, .85);
}
.vet-hero-greet {
margin: 6px 0 4px;
font-size: 30px; font-weight: 800; line-height: 1.15;
letter-spacing: -.02em;
}
.vet-hero-sub {
margin: 0 0 16px;
font-size: 14px; font-weight: 500;
color: rgba(255, 255, 255, .92);
max-width: 640px;
}
.vet-hero-sub strong {
background: rgba(255, 255, 255, .18);
padding: 1px 8px; border-radius: 999px;
font-weight: 800;
}
.vet-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.vet-hero-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 18px;
background: rgba(255, 255, 255, .15);
border: 1px solid rgba(255, 255, 255, .3);
color: #fff;
font-size: 13px; font-weight: 700;
border-radius: 999px;
cursor: pointer;
backdrop-filter: blur(6px);
transition: background .15s, transform .12s;
}
.vet-hero-btn:hover { background: rgba(255, 255, 255, .25); transform: translateY(-1px); }
.vet-hero-btn-primary {
background: #fff; color: #0f766e;
border-color: #fff;
box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .35);
}
.vet-hero-btn-primary:hover { background: #f0fdfa; }
@media (max-width: 560px) {
.vet-hero { padding: 22px; border-radius: 20px; }
.vet-hero-greet { font-size: 24px; }
}
/* KPI tiles */
.vet-dash-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
margin-top: 16px;
}
.vet-dash-stat {
position: relative;
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: 16px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 6px;
text-align: left;
cursor: default;
overflow: hidden;
transition: transform .15s, box-shadow .15s, border-color .15s;
}
button.vet-dash-stat { cursor: pointer; }
button.vet-dash-stat:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px -16px rgba(15, 23, 42, .25);
}
.vet-dash-stat::after {
/* soft tinted blob in the corner — picks up the tone via color-mix */
content: '';
position: absolute;
right: -30px; top: -30px;
width: 120px; height: 120px;
border-radius: 50%;
background: currentColor;
opacity: .08;
pointer-events: none;
}
.vet-dash-stat-icon {
font-size: 22px; line-height: 1;
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 12px;
background: var(--bg-input);
margin-bottom: 2px;
}
.vet-dash-stat-value {
font-size: 30px; font-weight: 800; line-height: 1.05; color: var(--text);
font-variant-numeric: tabular-nums;
}
.vet-dash-stat-label {
font-size: 11px; font-weight: 700; color: var(--text-muted);
text-transform: uppercase; letter-spacing: .06em;
}
.vet-dash-stat[data-tone="danger"] { color: #dc2626; border-color: rgba(239,68,68,.35); }
.vet-dash-stat[data-tone="danger"] .vet-dash-stat-value { color: #dc2626; }
.vet-dash-stat[data-tone="danger"] .vet-dash-stat-icon { background: rgba(239,68,68,.12); }
.vet-dash-stat[data-tone="warning"] { color: #d97706; border-color: rgba(245,158,11,.35); }
.vet-dash-stat[data-tone="warning"] .vet-dash-stat-value { color: #d97706; }
.vet-dash-stat[data-tone="warning"] .vet-dash-stat-icon { background: rgba(245,158,11,.14); }
.vet-dash-stat[data-tone="primary"] { color: var(--primary-dark); border-color: rgba(20,184,166,.4); }
.vet-dash-stat[data-tone="primary"] .vet-dash-stat-value { color: var(--primary-dark); }
.vet-dash-stat[data-tone="primary"] .vet-dash-stat-icon {
background: var(--gradient-primary); color: #fff;
}
.vet-dash-stat[data-tone="success"] { color: #16a34a; border-color: rgba(34,197,94,.32); }
.vet-dash-stat[data-tone="success"] .vet-dash-stat-value { color: #16a34a; }
.vet-dash-stat[data-tone="success"] .vet-dash-stat-icon { background: rgba(34,197,94,.14); }
.vet-dash-stat[data-tone="muted"] { color: var(--text-muted); }
.vet-dash-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 14px;
margin-top: 14px;
}
@media (max-width: 760px) {
.vet-dash-grid { grid-template-columns: 1fr; }
}
.vet-dash-card {
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: 18px;
padding: 18px;
transition: box-shadow .15s, border-color .15s;
}
.vet-dash-card:hover { box-shadow: 0 12px 32px -20px rgba(15, 23, 42, .18); }
.vet-dash-card--accent {
background: linear-gradient(180deg, rgba(20,184,166,.06), transparent 60%), var(--bg-card-solid);
border-color: rgba(20, 184, 166, .25);
}
.vet-dash-card-head {
display: flex; align-items: flex-start; gap: 12px;
margin-bottom: 14px;
}
.vet-dash-card-icon {
width: 36px; height: 36px;
border-radius: 12px;
background: rgba(20, 184, 166, .12);
display: inline-flex; align-items: center; justify-content: center;
font-size: 16px; flex-shrink: 0;
}
.vet-dash-card-head > div:nth-child(2) { flex: 1; min-width: 0; }
.vet-dash-card-title { font-size: 15px; font-weight: 800; color: var(--text); }
.vet-dash-card-sub {
font-size: 12px; color: var(--text-muted); margin: 2px 0 0;
}
.vet-dash-card-action {
background: none; border: none;
color: var(--primary); font-weight: 700; font-size: 12px;
cursor: pointer; padding: 4px 0; flex-shrink: 0; white-space: nowrap;
}
.vet-dash-card-action:hover { text-decoration: underline; }
.vet-dash-card-footer { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.vet-dash-link {
background: none; border: none; color: var(--primary); font-weight: 700;
font-size: 12px; cursor: pointer; padding: 0;
}
.vet-dash-empty {
display: flex; flex-direction: column; align-items: center;
gap: 10px; padding: 24px 16px;
font-size: 13px; color: var(--text-muted); text-align: center;
}
.vet-dash-empty-ic {
font-size: 28px;
width: 56px; height: 56px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 16px;
background: var(--bg-input);
}
/* Today's appointments — compact rows */
.vet-dash-appts { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.vet-dash-appt {
display: grid;
grid-template-columns: 56px 4px 1fr auto;
gap: 10px; align-items: center;
padding: 10px 12px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 12px;
cursor: pointer; text-align: left; width: 100%;
transition: background .15s, transform .12s, border-color .15s;
}
.vet-dash-appt:hover {
background: var(--glass-strong);
border-color: var(--primary);
transform: translateX(2px);
}
.vet-dash-appt-time { text-align: center; }
.vet-dash-appt-hour { font-size: 14px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.vet-dash-appt-dur { font-size: 10px; color: var(--text-muted); font-weight: 600; }
.vet-dash-appt-stripe { align-self: stretch; border-radius: 4px; }
.vet-dash-appt-info { min-width: 0; }
.vet-dash-appt-pet {
font-size: 13px; font-weight: 700; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vet-dash-appt-cat {
font-size: 11px; color: var(--text-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vet-dash-search-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vet-dash-search-divider {
display: flex; align-items: center; gap: 10px;
margin: 14px 0 10px; color: var(--text-muted); font-size: 11px;
text-transform: uppercase; letter-spacing: .4px; font-weight: 700;
}
.vet-dash-search-divider::before,
.vet-dash-search-divider::after {
content: ''; flex: 1; height: 1px; background: var(--border);
}
.vet-dash-new-patient {
width: 100%;
background: rgba(20, 184, 166, .12); color: var(--primary);
border: 1px dashed var(--primary); font-weight: 700;
padding: 10px; border-radius: 10px;
transition: background .15s;
}
.vet-dash-new-patient:hover { background: rgba(20, 184, 166, .2); }
/* ── New patient modal form ───────────────────────────────────── */
.vet-new-section-title {
font-size: 12px; font-weight: 800; text-transform: uppercase;
letter-spacing: .4px; color: var(--text-muted);
margin: 4px 0 8px;
}
.vet-new-section-sub {
font-size: 11px; color: var(--text-muted); margin: -4px 0 12px;
font-style: italic;
}
.vet-new-row { display: flex; gap: 10px; }
@media (max-width: 520px) {
.vet-new-row { flex-direction: column; gap: 0; }
}
.vet-new-actions {
display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px;
padding-top: 12px; border-top: 1px solid var(--border);
}
.vet-dash-agenda { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.vet-dash-agenda-row {
display: flex; align-items: center; gap: 12px; padding: 8px 10px;
background: var(--bg-input); border: 1px solid var(--border);
border-radius: 10px; cursor: pointer; text-align: left; width: 100%;
transition: background .15s;
}
.vet-dash-agenda-row:hover { background: var(--glass-strong); }
.vet-dash-agenda-row.is-overdue { border-color: rgba(239,68,68,.4); }
.vet-dash-agenda-date {
font-size: 11px; font-weight: 800; text-transform: uppercase;
letter-spacing: .3px; color: var(--text-muted); min-width: 56px;
}
.vet-dash-agenda-row.is-overdue .vet-dash-agenda-date { color: #dc2626; }
.vet-dash-agenda-info { flex: 1; min-width: 0; }
.vet-dash-agenda-pet { font-size: 13px; font-weight: 700; color: var(--text); }
.vet-dash-agenda-vac { font-size: 11px; color: var(--text-muted); }
.vet-dash-patients { display: flex; flex-direction: column; gap: 6px; }
.vet-dash-patient-row {
display: flex; align-items: center; gap: 12px; padding: 8px 10px;
background: var(--bg-input); border: 1px solid var(--border);
border-radius: 10px; cursor: pointer; text-align: left; width: 100%;
transition: background .15s;
}
.vet-dash-patient-row:hover { background: var(--glass-strong); }
.vet-dash-patient-photo {
width: 36px; height: 36px; border-radius: 10px; object-fit: cover; flex-shrink: 0;
}
.vet-dash-patient-photo-fallback {
background: var(--gradient-primary);
display: inline-flex; align-items: center; justify-content: center;
font-size: 16px;
}
.vet-dash-patient-meta { flex: 1; min-width: 0; }
.vet-dash-patient-name { font-size: 13px; font-weight: 700; color: var(--text); }
.vet-dash-patient-sub { font-size: 11px; color: var(--text-muted); }
.vet-dash-chev { color: var(--text-muted); font-size: 18px; }
/* ── Expediente (full-page) ────────────────────────────────────── */
.exp-toolbar {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 16px;
}
.exp-back {
background: none; border: none; color: var(--text-secondary);
font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px 0;
}
.exp-back:hover { color: var(--text); }
.exp-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.exp-pdf-btn {
background: var(--bg-input); color: var(--text-secondary);
border: 1px solid var(--border); padding: 6px 12px;
font-size: 12px; font-weight: 700; cursor: pointer;
border-radius: 8px; transition: background .15s;
}
.exp-pdf-btn:hover { background: var(--glass-strong); color: var(--text); }
/* ── Status pill (Mi paciente / Tomar como paciente) ─────────── */
.exp-status-wrap { position: relative; }
.exp-status-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 999px;
font-size: 12px; font-weight: 700; cursor: pointer;
border: 1px solid transparent; background: none;
}
.exp-status-active {
background: rgba(34, 197, 94, .15); color: #16a34a;
border-color: rgba(34, 197, 94, .3);
}
.exp-status-active:hover { background: rgba(34, 197, 94, .22); }
.exp-status-dot { font-size: 8px; line-height: 1; }
.exp-status-chev { width: 12px; height: 12px; transition: transform .15s; }
.exp-status-wrap.is-open .exp-status-chev { transform: rotate(180deg); }
.exp-status-add {
background: rgba(20, 184, 166, .12); color: var(--primary);
border: 1px dashed var(--primary);
}
.exp-status-add:hover { background: rgba(20, 184, 166, .2); }
.exp-status-menu {
position: absolute; top: calc(100% + 6px); right: 0;
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 12px; padding: 12px; width: 280px; z-index: 30;
box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
display: none;
}
.exp-status-wrap.is-open .exp-status-menu { display: block; }
.exp-status-menu p {
font-size: 12px; color: var(--text-secondary);
margin: 0 0 10px; line-height: 1.4;
}
.exp-status-leave {
width: 100%; background: rgba(239, 68, 68, .12); color: #dc2626;
border: 1px solid rgba(239, 68, 68, .3); padding: 8px;
font-weight: 700; border-radius: 8px; font-size: 13px;
}
.exp-status-leave:hover { background: rgba(239, 68, 68, .2); }
.exp-memorial {
background: rgba(100, 116, 139, .15); border: 1px solid var(--border);
border-radius: 10px; padding: 10px 14px; margin-bottom: 12px;
font-size: 13px; color: var(--text-secondary);
}
.exp-pet-header {
display: flex; align-items: center; gap: 24px; padding: 20px;
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 14px; margin-bottom: 16px;
}
.exp-pet-photo {
width: 160px; height: 160px; border-radius: 20px;
object-fit: cover; flex-shrink: 0;
}
.exp-pet-photo-fallback {
background: var(--gradient-primary);
display: inline-flex; align-items: center; justify-content: center;
color: white; font-weight: 800; font-size: 64px;
}
@media (max-width: 640px) {
.exp-pet-header { gap: 16px; padding: 14px; }
.exp-pet-photo { width: 112px; height: 112px; border-radius: 16px; }
.exp-pet-photo-fallback { font-size: 44px; }
}
.exp-pet-info { flex: 1; min-width: 0; }
.exp-pet-name { font-size: 22px; font-weight: 800; color: var(--text); }
.exp-pet-meta { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.exp-pet-code {
font-family: monospace; font-size: 12px; color: var(--text-muted);
margin-top: 6px; letter-spacing: .5px;
}
.exp-microchip {
display: flex; flex-direction: column; gap: 2px; padding: 8px 12px;
background: var(--bg-input); border: 1px solid var(--border);
border-radius: 10px;
}
.exp-microchip-label {
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .3px; color: var(--text-muted);
}
.exp-microchip-value { font-family: monospace; font-size: 12px; color: var(--text); }
.exp-tabs {
display: flex; gap: 4px; overflow-x: auto;
border-bottom: 1px solid var(--border); margin-bottom: 16px;
scrollbar-width: thin;
}
.exp-tab {
background: none; border: none; color: var(--text-muted);
font-size: 13px; font-weight: 700; cursor: pointer;
padding: 10px 14px; border-bottom: 2px solid transparent;
white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
transition: color .15s, border-color .15s;
}
.exp-tab:hover { color: var(--text); }
.exp-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.exp-tab-count {
background: var(--bg-input); color: var(--text-secondary);
padding: 1px 6px; border-radius: 999px; font-size: 11px;
font-weight: 700;
}
.exp-tab.is-active .exp-tab-count {
background: rgba(20, 184, 166, .15); color: var(--primary);
}
.exp-tab-content { min-height: 240px; }
.exp-empty {
text-align: center; padding: 48px 16px; color: var(--text-muted);
font-size: 13px;
}
.exp-error {
padding: 24px; background: rgba(239, 68, 68, .08);
border: 1px solid rgba(239, 68, 68, .3); border-radius: 12px;
color: #dc2626;
}
/* ── Record row (timeline tabs) ───────────────────────────────── */
.exp-list { display: flex; flex-direction: column; gap: 10px; }
.exp-row {
display: flex; background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 14px; overflow: hidden;
}
.exp-row-stripe { width: 4px; flex-shrink: 0; }
.exp-row-main { flex: 1; padding: 12px 14px; min-width: 0; }
.exp-row-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.exp-row-icon {
width: 26px; height: 26px; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 14px;
}
.exp-row-type { color: var(--text); }
.exp-row-vet {
background: rgba(34, 197, 94, .15); color: #16a34a;
padding: 1px 6px; border-radius: 5px; font-size: 10px; font-weight: 700;
}
.exp-row-summary { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.exp-row-note {
margin-top: 6px;
padding: 6px 10px 6px 12px;
background: var(--bg-input);
border-left: 3px solid var(--primary);
border-radius: 6px;
font-size: 12px; line-height: 1.45;
color: var(--text-secondary);
font-style: italic;
white-space: pre-wrap;
word-wrap: break-word;
}
.exp-row-note::before {
content: '🗨 ';
font-style: normal;
opacity: .55;
margin-right: 2px;
}
.exp-row-files { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.exp-row-file-link { font-size: 11px; color: var(--primary); text-decoration: underline; }
.exp-row-author { font-size: 11px; color: var(--text-muted); margin-top: 8px; }
.exp-row-date {
padding: 12px 14px; text-align: right; flex-shrink: 0;
border-left: 1px solid var(--border);
}
.exp-row-day { font-size: 22px; font-weight: 800; line-height: 1; color: var(--text); }
.exp-row-month {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .3px; color: var(--text-muted); margin-top: 2px;
}
.exp-row-year { font-size: 10px; color: var(--text-muted); }
.exp-chip {
display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
border-radius: 6px; font-size: 11px; font-weight: 700; margin-top: 6px;
}
.exp-chip-due { background: rgba(245, 158, 11, .12); color: #d97706; }
.exp-chip-overdue { background: rgba(239, 68, 68, .12); color: #dc2626; }
.exp-chip-file { background: rgba(20, 184, 166, .12); color: var(--primary); text-decoration: none; }
.exp-chip-warning { background: rgba(245, 158, 11, .12); color: #d97706; }
.exp-chip-purple { background: rgba(168, 85, 247, .12); color: #9333ea; }
/* ── Resumen tab (summary cards) ──────────────────────────────── */
.exp-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
}
.exp-sum-card {
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 14px; padding: 14px;
display: flex; flex-direction: column; gap: 8px;
}
.exp-sum-card-title {
font-size: 13px; font-weight: 800; color: var(--text);
text-transform: uppercase; letter-spacing: .3px;
display: flex; align-items: center; gap: 6px;
}
.exp-sum-count {
background: var(--bg-input); color: var(--text-secondary);
padding: 1px 6px; border-radius: 999px; font-size: 11px;
font-weight: 700;
}
.exp-sum-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 6px;
}
.exp-sum-list li {
display: flex; justify-content: space-between; align-items: center;
font-size: 13px; color: var(--text); gap: 8px;
}
.exp-sum-date { font-size: 11px; color: var(--text-muted); }
.exp-sum-chip {
display: inline-flex; align-items: center; padding: 2px 8px;
border-radius: 6px; font-size: 11px; font-weight: 700;
}
.exp-sum-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Dynamic chip sizing — driven by the count from JS. With a single
* allergen the chip becomes a hero-sized statement; long lists shrink
* back to a normal density. The .exp-sum-chip selectors below are
* scoped under the size modifier so they only override when present. */
.exp-sum-chips--xl .exp-sum-chip {
font-size: 22px; font-weight: 800;
padding: 10px 22px;
letter-spacing: -.01em;
border-radius: 14px;
}
.exp-sum-chips--lg .exp-sum-chip {
font-size: 16px; font-weight: 800;
padding: 6px 14px;
border-radius: 10px;
}
.exp-sum-chips--md .exp-sum-chip {
font-size: 13px; font-weight: 700;
padding: 4px 10px;
border-radius: 8px;
}
.exp-sum-chips--sm .exp-sum-chip {
font-size: 11px; font-weight: 700;
padding: 2px 8px;
}
.exp-sum-empty { font-size: 12px; color: var(--text-muted); padding: 8px 0; }
.exp-sum-weight {
font-size: 28px; font-weight: 800; color: var(--primary-dark); line-height: 1;
}
.exp-sum-card-sub { font-size: 11px; color: var(--text-muted); }
.exp-sum-card-footer {
margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border);
}
.exp-sum-link {
background: none; border: none; color: var(--primary);
font-weight: 700; font-size: 12px; cursor: pointer; padding: 0;
}
/* ── Weight tab — SVG chart ────────────────────────────────────── */
.exp-chart-card {
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 14px; padding: 16px; margin-bottom: 14px;
}
.exp-chart-head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 12px; margin-bottom: 12px;
}
.exp-chart-title { font-size: 14px; font-weight: 800; color: var(--text); }
.exp-chart-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.exp-chart-legend { display: flex; gap: 10px; font-size: 11px; color: var(--text-muted); }
.exp-chart-legend-kg { color: var(--primary); font-weight: 700; }
.exp-chart-legend-bcs { color: #d97706; font-weight: 700; }
.exp-chart { width: 100%; height: auto; display: block; }
.exp-chart-area { fill: var(--primary); opacity: .08; }
.exp-chart-line { fill: none; stroke: var(--primary); stroke-width: 2.5; }
.exp-chart-dot { fill: var(--primary); stroke: var(--bg-card-solid); stroke-width: 2; }
.exp-chart-bcs-line {
fill: none; stroke: #d97706; stroke-width: 1.8;
stroke-dasharray: 5 4;
}
.exp-chart-grid {
stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3;
}
.exp-chart-tick { font-size: 10px; fill: var(--text-muted); }
/* ── Studies tab — gallery ─────────────────────────────────────── */
.exp-studies { display: flex; flex-direction: column; gap: 14px; }
.exp-study-card {
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: 14px; padding: 16px;
}
.exp-study-head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 8px; flex-wrap: wrap; gap: 6px;
}
.exp-study-name { font-size: 15px; font-weight: 800; color: var(--text); }
.exp-study-meta { font-size: 11px; color: var(--text-muted); }
.exp-study-findings {
font-size: 13px; color: var(--text-secondary);
line-height: 1.4; margin-bottom: 12px;
padding: 10px 12px; background: var(--bg-input);
border-left: 3px solid var(--primary); border-radius: 8px;
}
.exp-study-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.exp-study-thumb {
position: relative; aspect-ratio: 1; width: 100%;
background: var(--bg-input); border: 1px solid var(--border);
border-radius: 10px; overflow: hidden; cursor: zoom-in; padding: 0;
transition: transform .15s, border-color .15s;
}
.exp-study-thumb:hover { transform: translateY(-2px); border-color: var(--primary); }
.exp-study-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp-study-thumb-name {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 4px 8px; background: rgba(0, 0, 0, .55); color: white;
font-size: 10px; font-weight: 600; text-align: left;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.exp-study-pdf {
aspect-ratio: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 4px;
background: var(--bg-input); border: 1px solid var(--border);
border-radius: 10px; padding: 12px; text-decoration: none;
text-align: center; transition: transform .15s, border-color .15s;
}
.exp-study-pdf:hover { transform: translateY(-2px); border-color: var(--primary); }
.exp-study-pdf-icon { font-size: 32px; }
.exp-study-pdf-name {
font-size: 11px; font-weight: 700; color: var(--text);
overflow: hidden; text-overflow: ellipsis;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
word-break: break-all;
}
.exp-study-pdf-open { font-size: 10px; color: var(--primary); font-weight: 700; }
.exp-study-noattach {
font-size: 12px; color: var(--text-muted); font-style: italic;
padding: 8px 0;
}
/* ── Lightbox ──────────────────────────────────────────────────── */
.exp-lightbox {
position: fixed; inset: 0; z-index: 9999;
background: rgba(0, 0, 0, .92);
display: flex; flex-direction: column;
animation: expLightboxIn .15s ease-out;
}
@keyframes expLightboxIn { from { opacity: 0; } to { opacity: 1; } }
body.exp-lightbox-open { overflow: hidden; }
.exp-lightbox-bar {
display: flex; align-items: center; gap: 12px;
padding: 12px 20px; background: rgba(0, 0, 0, .6);
color: white; flex-shrink: 0;
}
.exp-lightbox-name {
flex: 1; font-size: 14px; font-weight: 700;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.exp-lightbox-open {
color: #5EEAD4; text-decoration: none; font-size: 12px; font-weight: 700;
padding: 4px 10px; border: 1px solid rgba(94, 234, 212, .3); border-radius: 6px;
}
.exp-lightbox-open:hover { background: rgba(94, 234, 212, .12); }
.exp-lightbox-close {
background: none; border: none; color: white; font-size: 28px;
line-height: 1; cursor: pointer; padding: 0 8px;
}
.exp-lightbox-stage {
flex: 1; display: flex; align-items: center; justify-content: center;
padding: 20px; min-height: 0;
}
.exp-lightbox-img {
max-width: 100%; max-height: 100%; object-fit: contain;
cursor: zoom-out; box-shadow: 0 12px 48px rgba(0, 0, 0, .4);
}
/* ── Empty state with primary CTA (per-tab quick add) ─────────── */
.exp-empty-cta {
display: flex; flex-direction: column; align-items: center;
gap: 14px; padding: 48px 20px; text-align: center;
}
.exp-empty-cta-icon {
width: 56px; height: 56px; border-radius: 18px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 26px;
background: rgba(20, 184, 166, .12);
border: 1px solid rgba(20, 184, 166, .25);
}
.exp-empty-cta-title {
font-size: 15px; font-weight: 700; color: var(--text);
}
.exp-empty-cta-sub {
font-size: 13px; color: var(--text-muted); max-width: 360px;
line-height: 1.45;
}
.exp-empty-cta-btn {
margin-top: 4px;
display: inline-flex; align-items: center; gap: 8px;
background: var(--primary); color: #fff;
border: none; border-radius: 12px;
padding: 10px 18px;
font-size: 13px; font-weight: 700;
cursor: pointer;
box-shadow: 0 4px 12px rgba(20, 184, 166, .25);
transition: transform .15s, box-shadow .15s, background .15s;
}
.exp-empty-cta-btn:hover {
background: var(--primary-dark);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(20, 184, 166, .32);
}
/* ── Modern theme-aware modal for the Vet console ───────────── */
.modal-vet .modal-content {
background: var(--bg-card-solid);
color: var(--text);
border: 1px solid var(--border);
border-radius: 20px;
box-shadow: 0 24px 60px -16px rgba(15, 23, 42, .25);
padding: 22px 24px 24px;
}
.modal-vet .modal-header {
padding: 0 0 16px;
border-bottom: 1px solid var(--border);
margin-bottom: 18px;
display: flex; align-items: center; justify-content: space-between;
}
.modal-vet .modal-title {
font-size: 16px; font-weight: 800; color: var(--text);
letter-spacing: -.01em;
}
.modal-vet .modal-close {
background: none; border: none; color: var(--text-muted);
font-size: 22px; line-height: 1; cursor: pointer;
padding: 4px 8px; border-radius: 8px;
transition: background .15s, color .15s;
}
.modal-vet .modal-close:hover {
background: var(--bg-input); color: var(--text);
}
.modal-vet .form-group { margin-bottom: 16px; }
.modal-vet .form-label {
color: var(--text-secondary); font-weight: 600;
font-size: 12px; margin-bottom: 6px; display: block;
letter-spacing: .01em;
}
.modal-vet .form-input {
background: var(--bg-input);
border: 1px solid var(--border);
color: var(--text);
border-radius: 12px;
padding: 11px 14px;
width: 100%;
font-size: 14px;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.modal-vet .form-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(20, 184, 166, .15);
outline: none;
}
.modal-vet .form-input::placeholder { color: var(--text-muted); }
.modal-vet select.form-input {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748B'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
padding-right: 36px;
}
/* Native date picker indicator — keep visible but tint subtly. */
.modal-vet input[type="date"].form-input::-webkit-calendar-picker-indicator {
opacity: .55; cursor: pointer;
}
.modal-vet input[type="date"].form-input:hover::-webkit-calendar-picker-indicator { opacity: .9; }
/* Submit button inside the vet modal. Overrides .btn-submit so we
* don't have to set inline styles in the JS templates. */
.modal-vet .btn-submit {
width: 100%;
background: var(--primary);
color: #fff;
border: none;
border-radius: 14px;
padding: 13px 16px;
font-size: 14px; font-weight: 700;
cursor: pointer;
box-shadow: 0 6px 16px rgba(20, 184, 166, .28);
transition: transform .15s, box-shadow .15s, background .15s;
margin-top: 4px;
}
.modal-vet .btn-submit:hover {
background: var(--primary-dark);
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(20, 184, 166, .34);
}
.modal-vet .btn-submit:active { transform: translateY(0); }
/* Modern file picker: hide the raw and use the
* surrounding label as a styled button + filename caption. */
.vet-file-picker {
display: flex; align-items: center; gap: 12px;
background: var(--bg-input); border: 1px dashed var(--border);
border-radius: 12px; padding: 12px 14px;
transition: border-color .15s, background .15s;
}
.vet-file-picker:hover { border-color: var(--primary); }
.vet-file-picker input[type="file"] {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); border: 0;
}
.vet-file-picker-btn {
display: inline-flex; align-items: center; gap: 6px;
background: var(--bg-card-solid); color: var(--text);
border: 1px solid var(--border); border-radius: 10px;
padding: 8px 12px; font-size: 12px; font-weight: 700;
cursor: pointer; flex-shrink: 0;
transition: background .15s, border-color .15s;
}
.vet-file-picker:hover .vet-file-picker-btn {
background: var(--primary); color: #fff; border-color: var(--primary);
}
.vet-file-picker-hint {
font-size: 12px; color: var(--text-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Read-only pill used in the edit modal to show the type without
* letting the vet change it (changing type would invalidate payload
* shape and move the row to another tab). */
.vet-readonly-pill {
display: inline-flex; align-items: center; gap: 6px;
background: var(--bg-input); color: var(--text);
border: 1px solid var(--border); border-radius: 10px;
padding: 8px 14px; font-size: 13px; font-weight: 700;
}
/* ── Pet header health badges ─────────────────────────────────── */
.exp-pet-badges {
display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.exp-pet-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 999px;
font-size: 11px; font-weight: 700;
border: 1px solid transparent;
white-space: nowrap;
}
.exp-pet-badge--ok {
background: rgba(34, 197, 94, .12); color: #16a34a;
border-color: rgba(34, 197, 94, .25);
}
.exp-pet-badge--warn {
background: rgba(245, 158, 11, .12); color: #d97706;
border-color: rgba(245, 158, 11, .25);
}
.exp-pet-badge--danger {
background: rgba(239, 68, 68, .12); color: #dc2626;
border-color: rgba(239, 68, 68, .28);
}
.exp-pet-badge--neutral {
background: var(--bg-input); color: var(--text-secondary);
border-color: var(--border);
}
.exp-pet-badge--purple {
background: rgba(168, 85, 247, .12); color: #9333ea;
border-color: rgba(168, 85, 247, .25);
}
/* ── Per-row actions menu (edit / delete own records) ────────── */
.exp-row-head { position: relative; }
.exp-row-actions {
margin-left: auto; position: relative;
}
.exp-row-actions-btn {
background: none; border: none;
color: var(--text-muted);
font-size: 18px; line-height: 1;
padding: 2px 8px; border-radius: 8px;
cursor: pointer;
transition: background .15s, color .15s;
}
.exp-row-actions-btn:hover {
background: var(--bg-input); color: var(--text);
}
.exp-row-actions-menu {
display: none;
position: absolute; top: calc(100% + 4px); right: 0;
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: 10px; padding: 4px;
box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
z-index: 20;
min-width: 140px;
}
.exp-row-actions-menu.is-open { display: flex; flex-direction: column; }
.exp-row-actions-item {
background: none; border: none;
color: var(--text);
font-size: 13px; font-weight: 600;
padding: 8px 12px; border-radius: 8px;
cursor: pointer; text-align: left;
display: flex; align-items: center; gap: 8px;
transition: background .15s, color .15s;
}
.exp-row-actions-item:hover { background: var(--bg-input); }
.exp-row-actions-danger { color: #dc2626; }
.exp-row-actions-danger:hover { background: rgba(239, 68, 68, .1); }
/* ─── Vet bookings ─────────────────────────────────────────────────────── */
.vb-tabs {
display: flex; gap: 4px;
border-bottom: 1px solid var(--border);
margin: 16px 0 18px;
}
.vb-tab {
background: none; border: none;
padding: 10px 16px; cursor: pointer;
font-size: 14px; font-weight: 600;
color: var(--text-muted);
border-bottom: 2px solid transparent;
transition: color .15s, border-color .15s;
}
.vb-tab:hover { color: var(--text); }
.vb-tab.active { color: var(--vet-accent, #0d9488); border-color: var(--vet-accent, #0d9488); }
.vb-card {
background: var(--card-bg, #fff);
border: 1px solid var(--border);
border-radius: 14px;
padding: 18px;
}
.vb-card + .vb-card { margin-top: 14px; }
.vb-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.vb-card-title { font-size: 15px; font-weight: 700; color: var(--text); }
.vb-card-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.vb-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }
.vb-error { padding: 16px; background: rgba(239,68,68,.08); color: #dc2626; border-radius: 10px; }
.vb-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.vb-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.vb-field > span { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.vb-field small { font-size: 11px; color: var(--text-muted); }
.vb-field input, .vb-field textarea, .vb-field select {
width: 100%; padding: 10px 12px;
background: var(--bg-input); border: 1px solid var(--border);
border-radius: 10px; font-size: 14px; color: var(--text);
}
/* Radios and checkboxes inside a .vb-field must not inherit the
* width:100% rule above — otherwise the input box stretches and the
* adjacent label is shoved to the far edge of the row. */
.vb-field input[type="radio"],
.vb-field input[type="checkbox"] {
width: auto;
padding: 0;
background: none;
border: none;
flex-shrink: 0;
}
/* Color picker — preset swatches + a "custom" tile that opens the
* native color dialog. Used in the category editor; the native
* was unusable when stretched by .vb-field. */
.vb-color-picker {
display: flex; flex-wrap: wrap; gap: 8px;
align-items: center;
}
.vb-color-swatch {
width: 30px; height: 30px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
padding: 0;
position: relative;
box-shadow: 0 0 0 1px rgba(15, 23, 42, .12) inset;
transition: transform .12s, box-shadow .15s;
}
.vb-color-swatch:hover { transform: scale(1.08); }
.vb-color-swatch.is-selected {
border-color: var(--bg-card-solid, #fff);
box-shadow: 0 0 0 2px var(--primary), 0 0 0 1px rgba(15, 23, 42, .12) inset;
}
.vb-color-swatch.is-selected::after {
content: '✓';
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 14px; font-weight: 800;
text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.vb-color-custom {
width: 30px; height: 30px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--bg-input);
border: 1px dashed var(--border);
cursor: pointer;
position: relative;
overflow: hidden;
margin: 0;
transition: border-color .15s;
}
.vb-color-custom:hover { border-color: var(--primary); }
.vb-color-custom input[type="color"] {
position: absolute; inset: -4px;
width: calc(100% + 8px); height: calc(100% + 8px);
opacity: 0; cursor: pointer;
padding: 0; border: none; background: none;
}
.vb-color-custom-ic { font-size: 14px; line-height: 1; }
/* Segmented control — used for radio groups (e.g. "Tipo" in the
* exception modal). Each option is a card; the active one is teal. */
.vb-seg {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
@media (max-width: 460px) { .vb-seg { grid-template-columns: 1fr; } }
.vb-seg-opt {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 12px;
cursor: pointer;
font-size: 13px; font-weight: 600; color: var(--text);
transition: border-color .15s, background .15s, box-shadow .15s;
margin: 0;
}
.vb-seg-opt:hover { border-color: var(--primary); }
.vb-seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.vb-seg-opt.is-active {
background: rgba(20, 184, 166, .08);
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(20, 184, 166, .12);
color: var(--primary-dark, #0f766e);
}
.vb-seg-ic {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 8px;
background: rgba(20, 184, 166, .12);
font-size: 14px; flex-shrink: 0;
}
.vb-seg-opt.is-active .vb-seg-ic {
background: var(--primary); color: #fff;
}
.vb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vb-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .vb-grid-3 { grid-template-columns: 1fr; } .vb-grid-2 { grid-template-columns: 1fr; } }
.vb-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.vb-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.vb-switch input { display: none; }
.vb-switch-slider {
position: absolute; inset: 0; cursor: pointer;
background: #cbd5e1; border-radius: 999px;
transition: background .2s;
}
.vb-switch-slider::before {
content: ''; position: absolute; top: 2px; left: 2px;
width: 20px; height: 20px; background: #fff;
border-radius: 50%; transition: transform .2s;
box-shadow: 0 2px 4px rgba(0,0,0,.18);
}
.vb-switch input:checked + .vb-switch-slider { background: var(--vet-accent, #0d9488); }
.vb-switch input:checked + .vb-switch-slider::before { transform: translateX(20px); }
.vb-set-title { font-size: 14px; font-weight: 600; color: var(--text); }
.vb-set-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
/* Categories list */
.vb-cat-list { display: flex; flex-direction: column; gap: 8px; }
.vb-cat-row {
display: flex; align-items: center; gap: 12px;
padding: 12px; background: var(--bg-input);
border-radius: 10px;
}
.vb-cat-swatch { width: 10px; align-self: stretch; border-radius: 4px; flex-shrink: 0; }
.vb-cat-info { flex: 1; min-width: 0; }
.vb-cat-name { font-size: 14px; font-weight: 600; color: var(--text); }
.vb-cat-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.vb-cat-actions { display: flex; gap: 6px; flex-shrink: 0; }
.vb-pill-muted {
display: inline-block; background: var(--border); color: var(--text-muted);
padding: 1px 6px; border-radius: 999px; font-size: 10px; margin-left: 6px;
}
/* Schedule grid */
.vb-sched-grid { display: flex; flex-direction: column; gap: 6px; }
.vb-sched-row {
display: grid; grid-template-columns: 140px 1fr; gap: 12px;
padding: 8px 10px; background: var(--bg-input); border-radius: 10px;
align-items: center;
}
.vb-sched-day { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.vb-sched-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vb-sched-block { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vb-sched-block input[type=time] {
padding: 6px 8px; background: var(--card-bg, #fff);
border: 1px solid var(--border); border-radius: 6px;
font-size: 13px; color: var(--text);
}
.vb-sched-block input[type=time]:disabled { opacity: .45; }
@media (max-width: 720px) {
.vb-sched-row { grid-template-columns: 1fr; }
.vb-sched-blocks { grid-template-columns: 1fr; }
}
/* Exceptions */
.vb-exc-list { display: flex; flex-direction: column; gap: 8px; }
.vb-exc-row {
display: grid; grid-template-columns: 180px 1fr auto; gap: 12px;
padding: 10px 12px; background: var(--bg-input);
border-radius: 10px; align-items: center;
}
.vb-exc-date { font-size: 13px; font-weight: 600; color: var(--text); }
.vb-exc-detail { font-size: 12px; color: var(--text-muted); }
/* Agenda — day strip */
.vb-day-strip {
display: flex; gap: 8px;
overflow-x: auto; overflow-y: hidden;
padding: 4px 2px 10px;
margin: 6px 0 14px;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
border-bottom: 1px solid var(--border);
}
.vb-day-strip::-webkit-scrollbar { height: 6px; }
.vb-day-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.vb-day-chip {
flex: 0 0 auto;
min-width: 64px;
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 8px 10px 6px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 12px;
cursor: pointer;
color: var(--text);
transition: transform .12s, background .15s, border-color .15s, box-shadow .15s;
position: relative;
}
.vb-day-chip:hover {
transform: translateY(-1px);
border-color: var(--primary);
}
.vb-day-chip.is-empty { opacity: .55; }
.vb-day-chip.is-empty:hover { opacity: 1; }
.vb-day-chip-wk {
font-size: 10px; font-weight: 800; letter-spacing: .06em;
color: var(--text-muted); text-transform: uppercase;
}
.vb-day-chip-num {
font-size: 20px; font-weight: 800; line-height: 1; color: var(--text);
}
.vb-day-chip-mo {
font-size: 10px; font-weight: 700; color: var(--text-muted);
text-transform: uppercase; letter-spacing: .04em;
}
.vb-day-chip-count {
margin-top: 2px;
min-width: 18px; padding: 1px 6px;
background: var(--primary, #0d9488); color: #fff;
border-radius: 999px;
font-size: 10px; font-weight: 800; line-height: 1.5;
}
.vb-day-chip-dot-empty {
margin-top: 6px;
width: 4px; height: 4px; border-radius: 50%;
background: var(--border);
}
.vb-day-chip.is-today {
border-color: var(--primary);
background: rgba(20, 184, 166, .08);
}
.vb-day-chip.is-today .vb-day-chip-wk,
.vb-day-chip.is-today .vb-day-chip-mo { color: var(--primary); }
.vb-day-chip.is-selected {
background: var(--primary);
border-color: var(--primary);
box-shadow: 0 6px 18px -8px rgba(20, 184, 166, .65);
opacity: 1;
}
.vb-day-chip.is-selected .vb-day-chip-num,
.vb-day-chip.is-selected .vb-day-chip-wk,
.vb-day-chip.is-selected .vb-day-chip-mo { color: #fff; }
.vb-day-chip.is-selected .vb-day-chip-count {
background: rgba(255,255,255,.25); color: #fff;
}
/* Agenda — filters row */
.vb-agenda-filters {
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
margin-bottom: 12px;
}
.vb-agenda-filters input[type="date"],
.vb-agenda-filters select {
padding: 7px 10px; background: var(--bg-input);
border: 1px solid var(--border); border-radius: 8px;
font-size: 13px; color: var(--text);
}
.vb-range {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 8px;
background: var(--bg-input);
border: 1px solid var(--border); border-radius: 10px;
}
.vb-range input[type="date"] {
background: transparent; border: none; padding: 4px 2px;
}
.vb-range input[type="date"]:focus { outline: none; }
.vb-range-lbl {
font-size: 11px; font-weight: 700; color: var(--text-muted);
text-transform: uppercase; letter-spacing: .04em;
}
.vb-chip-reset {
background: var(--bg-input); color: var(--text);
border: 1px solid var(--border);
padding: 7px 14px; border-radius: 999px;
font-size: 12px; font-weight: 700;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.vb-chip-reset:hover { border-color: var(--primary); color: var(--primary); }
.vb-agenda-day { margin-top: 14px; }
.vb-agenda-day-header {
font-size: 12px; font-weight: 700; text-transform: uppercase;
color: var(--text-muted); letter-spacing: .04em;
margin-bottom: 6px;
}
.vb-agenda-row {
display: grid; grid-template-columns: 88px 8px 1fr auto;
gap: 12px; padding: 12px;
background: var(--bg-input); border-radius: 10px;
align-items: center; margin-bottom: 6px;
border-left: 4px solid transparent;
transition: opacity .15s, background .15s, transform .12s, box-shadow .15s;
}
.vb-agenda-row.is-clickable { cursor: pointer; }
.vb-agenda-row.is-clickable:hover {
background: var(--bg-card-solid, #fff);
box-shadow: 0 4px 14px rgba(13, 148, 136, 0.12);
transform: translateY(-1px);
}
.vb-agenda-row.is-clickable:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.35);
}
/* Status row modifiers — make attended/no-show/cancelled visually distinct. */
.vb-agenda-row.is-confirmed { border-left-color: #3b82f6; }
.vb-agenda-row.is-attended {
background: rgba(34, 197, 94, .08);
border-left-color: #16a34a;
}
.vb-agenda-row.is-attended .vb-agenda-hour,
.vb-agenda-row.is-attended .vb-agenda-pet > span:first-child { color: #15803d; }
.vb-agenda-row.is-no-show {
background: rgba(245, 158, 11, .08);
border-left-color: #d97706;
}
.vb-agenda-row.is-cancelled-by-citizen,
.vb-agenda-row.is-cancelled-by-vet {
background: rgba(148, 163, 184, .12);
border-left-color: #94a3b8;
opacity: .72;
}
.vb-agenda-row.is-cancelled-by-citizen .vb-agenda-hour,
.vb-agenda-row.is-cancelled-by-vet .vb-agenda-hour,
.vb-agenda-row.is-cancelled-by-citizen .vb-agenda-pet > span:first-child,
.vb-agenda-row.is-cancelled-by-vet .vb-agenda-pet > span:first-child {
text-decoration: line-through;
text-decoration-thickness: 1.5px;
}
.vb-agenda-time { text-align: center; }
.vb-agenda-hour { font-size: 16px; font-weight: 700; color: var(--text); }
.vb-agenda-dur { font-size: 11px; color: var(--text-muted); }
.vb-agenda-swatch { align-self: stretch; border-radius: 4px; }
.vb-agenda-pet { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 10px; }
.vb-agenda-cat { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.vb-agenda-status { display: flex; align-items: center; gap: 8px; }
.vb-status {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 800; padding: 4px 10px;
border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
border: 1px solid transparent;
}
.vb-status-ic { font-size: 12px; line-height: 1; }
.vb-status-confirmed {
background: rgba(59, 130, 246, .12); color: #1d4ed8;
border-color: rgba(59, 130, 246, .25);
}
.vb-status-attended {
background: #16a34a; color: #fff;
border-color: #16a34a;
box-shadow: 0 2px 8px -2px rgba(22, 163, 74, .55);
}
.vb-status-no-show {
background: rgba(245, 158, 11, .15); color: #b45309;
border-color: rgba(245, 158, 11, .35);
}
.vb-status-cancelled-by-citizen,
.vb-status-cancelled-by-vet {
background: rgba(239, 68, 68, .1); color: #b91c1c;
border-color: rgba(239, 68, 68, .25);
}
.vb-link { background: none; border: none; color: var(--vet-accent, #0d9488); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
.vb-link:hover { text-decoration: underline; }
.vb-appt-meta { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text); margin-bottom: 12px; }
.vb-ready-sent {
background: #dcfce7;
color: #15803d;
padding: 8px 12px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
margin-top: 4px;
}
.vb-ready-btn {
background: linear-gradient(135deg, #0d9488, #14b8a6);
border: none;
color: #fff;
padding: 12px;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: transform .1s, box-shadow .15s;
box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25);
}
.vb-ready-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(13, 148, 136, 0.35);
}
.vb-ready-btn:disabled { opacity: .7; cursor: not-allowed; }
.vb-ready-btn svg { flex-shrink: 0; }
/* ═══════════════════════════════════════════════════════════════════
* Agenda UX pack — KPI strip, quick chips, search, today indicators,
* species avatars, countdown, "ahora" line, empty-day illustration.
* ═════════════════════════════════════════════════════════════════ */
/* KPI strip — today summary above the day chips. */
.vb-kpi-strip {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 10px;
margin-bottom: 14px;
}
.vb-kpi-card {
background: var(--bg-card-solid, #fff);
border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
border-radius: 12px;
padding: 12px 14px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 72px;
}
.vb-kpi-main {
background: linear-gradient(135deg, rgba(13, 148, 136, 0.10), rgba(20, 184, 166, 0.04));
border-color: rgba(13, 148, 136, 0.25);
}
.vb-kpi-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--vet-accent, #0d9488);
margin-bottom: 2px;
}
.vb-kpi-headline {
font-size: 22px;
font-weight: 800;
line-height: 1.1;
color: var(--text);
}
.vb-kpi-sub {
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
.vb-kpi-num {
font-size: 24px;
font-weight: 800;
line-height: 1;
color: var(--text);
}
.vb-kpi-lbl {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--text-muted);
margin-top: 4px;
}
.vb-kpi-pos .vb-kpi-num { color: #15803d; }
.vb-kpi-warn { background: rgba(245, 158, 11, .08); border-color: rgba(217, 119, 6, .25); }
.vb-kpi-warn .vb-kpi-num { color: #b45309; }
@media (max-width: 720px) {
.vb-kpi-strip { grid-template-columns: 1fr 1fr; }
.vb-kpi-main { grid-column: 1 / -1; }
}
/* Quick chips — preset ranges + status. */
.vb-quick-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
margin: 4px 0 10px;
}
.vb-quick-chip {
border: 1px solid var(--border, rgba(15, 23, 42, 0.12));
background: var(--bg-input);
color: var(--text);
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
border-radius: 999px;
cursor: pointer;
transition: background .12s, border-color .12s, color .12s, transform .1s;
}
.vb-quick-chip:hover { border-color: var(--vet-accent, #0d9488); }
.vb-quick-chip.is-active {
background: var(--vet-accent, #0d9488);
border-color: var(--vet-accent, #0d9488);
color: #fff;
box-shadow: 0 4px 10px -4px rgba(13, 148, 136, .55);
}
.vb-quick-chip-status.is-active {
background: #1e293b;
border-color: #1e293b;
box-shadow: 0 4px 10px -4px rgba(15, 23, 42, .55);
}
.vb-quick-divider {
width: 1px;
height: 18px;
background: var(--border, rgba(15, 23, 42, 0.15));
margin: 0 4px;
}
/* Search box — live filter across pet/owner/category. */
.vb-search-row {
position: relative;
margin-bottom: 12px;
}
.vb-search-row input {
width: 100%;
padding: 10px 36px 10px 38px;
font-size: 14px;
border: 1px solid var(--border, rgba(15, 23, 42, 0.12));
border-radius: 10px;
background: var(--bg-input);
color: var(--text);
box-sizing: border-box;
}
.vb-search-row input:focus {
outline: none;
border-color: var(--vet-accent, #0d9488);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18);
}
.vb-search-icon {
position: absolute;
left: 12px; top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
display: flex; align-items: center;
pointer-events: none;
}
.vb-search-clear {
position: absolute;
right: 8px; top: 50%;
transform: translateY(-50%);
width: 24px; height: 24px;
border-radius: 50%;
border: none;
background: var(--border, rgba(15, 23, 42, 0.12));
color: var(--text);
cursor: pointer;
font-size: 14px;
line-height: 1;
display: flex; align-items: center; justify-content: center;
}
.vb-search-clear:hover { background: rgba(15, 23, 42, 0.2); }
/* Advanced filters — collapsed behind a disclosure. */
.vb-agenda-filters-adv {
margin-bottom: 12px;
}
.vb-agenda-filters-adv > summary {
cursor: pointer;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
padding: 4px 0;
user-select: none;
list-style: none;
}
.vb-agenda-filters-adv > summary::-webkit-details-marker { display: none; }
.vb-agenda-filters-adv > summary::before {
content: '▸';
display: inline-block;
margin-right: 6px;
transition: transform .15s;
}
.vb-agenda-filters-adv[open] > summary::before { transform: rotate(90deg); }
.vb-agenda-filters-adv .vb-agenda-filters { margin-top: 8px; margin-bottom: 0; }
/* "HOY" badge inside the day chip — sits in the normal flow so it
* never gets clipped by the strip's overflow:hidden. */
.vb-day-chip-today {
display: inline-block;
background: var(--vet-accent, #0d9488);
color: #fff;
font-size: 9px;
font-weight: 800;
letter-spacing: .06em;
padding: 2px 7px;
border-radius: 999px;
margin-bottom: 4px;
line-height: 1.2;
}
.vb-day-chip.is-selected .vb-day-chip-today {
background: #fff;
color: var(--vet-accent, #0d9488);
}
/* "HOY" badge inside the agenda day-header. */
.vb-today-badge {
display: inline-block;
margin-left: 8px;
background: var(--vet-accent, #0d9488);
color: #fff;
font-size: 10px;
font-weight: 800;
letter-spacing: .06em;
padding: 2px 8px;
border-radius: 999px;
vertical-align: middle;
}
/* "Ahora" separator inside today's group. */
.vb-now-line {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 8px 0;
height: 14px;
}
.vb-now-line::before {
content: '';
position: absolute;
left: 0; right: 0;
top: 50%;
height: 2px;
background: linear-gradient(90deg, transparent, #ef4444 20%, #ef4444 80%, transparent);
border-radius: 2px;
opacity: .55;
}
.vb-now-pill {
position: relative;
background: #ef4444;
color: #fff;
font-size: 10px;
font-weight: 800;
letter-spacing: .06em;
padding: 3px 10px;
border-radius: 999px;
box-shadow: 0 2px 8px rgba(239, 68, 68, .35);
}
.vb-now-line.is-end .vb-now-pill { background: #94a3b8; box-shadow: none; }
.vb-now-line.is-end::before { background: linear-gradient(90deg, transparent, #94a3b8 20%, #94a3b8 80%, transparent); opacity: .4; }
/* Pet avatar in the row — photo when we have one, stroked species
* pictograph otherwise. Same footprint either way. */
.vb-species-ic {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(13, 148, 136, .1);
color: var(--vet-accent, #0d9488);
flex-shrink: 0;
margin-right: 8px;
overflow: hidden;
}
.vb-species-ic svg { width: 18px; height: 18px; }
.vb-species-ic-photo {
background: var(--bg-input);
box-shadow: 0 0 0 1px var(--border, rgba(15, 23, 42, 0.1));
}
.vb-species-ic-photo img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* Countdown text under the time. */
.vb-agenda-countdown {
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
.vb-agenda-row.is-next {
border-left-color: #ef4444 !important;
background: rgba(239, 68, 68, 0.04);
}
.vb-agenda-row.is-next .vb-agenda-countdown {
color: #b91c1c;
font-weight: 700;
}
.vb-agenda-row.is-next .vb-agenda-hour { color: #b91c1c; }
/* Empty state — illustrated. */
.vb-empty-day {
text-align: center;
padding: 36px 24px;
color: var(--text-muted);
}
.vb-empty-illus {
font-size: 40px;
margin-bottom: 8px;
}
.vb-empty-illus-svg {
width: 64px; height: 64px;
color: var(--vet-accent, #0d9488);
opacity: .55;
margin-bottom: 10px;
}
.vb-empty-title {
font-size: 16px;
font-weight: 700;
color: var(--text);
margin-bottom: 4px;
}
.vb-empty-sub {
font-size: 13px;
line-height: 1.45;
}
/* vetConfirm / vetPrompt — styled replacement for native
* window.confirm / window.prompt. Stacks on top of any existing
* modal-overlay via a higher z-index so it works from inside the
* appointment detail modal too. */
.vet-confirm-overlay {
z-index: 4000;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(2px);
}
.vet-confirm-dialog {
background: var(--bg-card-solid, #fff);
color: var(--text, #0f172a);
border-radius: 16px;
padding: 22px 22px 18px;
width: min(440px, calc(100vw - 32px));
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
animation: vet-confirm-in .14s ease-out;
}
@keyframes vet-confirm-in {
from { opacity: 0; transform: translateY(8px) scale(.98); }
to { opacity: 1; transform: none; }
}
.vet-confirm-title {
font-size: 17px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 6px;
}
.vet-confirm-message {
font-size: 14px;
color: var(--text-muted, #475569);
line-height: 1.45;
margin-bottom: 14px;
}
.vet-confirm-label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--text-muted, #475569);
margin-bottom: 6px;
}
.vet-confirm-input {
width: 100%;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--border, rgba(15, 23, 42, 0.15));
background: var(--bg, #fff);
color: var(--text, #0f172a);
font-size: 14px;
font-family: inherit;
margin-bottom: 16px;
box-sizing: border-box;
resize: vertical;
}
.vet-confirm-input:focus {
outline: none;
border-color: var(--vet-accent, #0d9488);
box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.18);
}
.vet-confirm-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.vet-confirm-actions .btn {
min-width: 96px;
height: 38px;
padding: 0 16px;
font-size: 13px;
font-weight: 600;
border-radius: 10px;
}
/* Patient hero block at the top of the appointment detail modal. */
.vb-appt-hero {
display: flex;
align-items: center;
gap: 14px;
padding: 4px 0 14px;
margin-bottom: 8px;
border-bottom: 1px solid var(--border, rgba(15, 23, 42, 0.08));
}
.vb-appt-photo {
width: 112px; height: 112px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 0 0 3px var(--bg-card-solid, #fff), 0 0 0 5px rgba(13, 148, 136, .35);
background: var(--bg-input);
display: block;
}
.vb-appt-photo-btn {
border: none;
padding: 0;
background: transparent;
cursor: zoom-in;
border-radius: 50%;
position: relative;
flex-shrink: 0;
transition: transform .15s;
}
.vb-appt-photo-btn:hover { transform: scale(1.04); }
.vb-appt-photo-btn:hover .vb-appt-photo {
box-shadow: 0 0 0 3px var(--bg-card-solid, #fff), 0 0 0 5px rgba(13, 148, 136, .65);
}
.vb-appt-photo-btn:focus-visible { outline: none; }
.vb-appt-photo-btn:focus-visible .vb-appt-photo {
box-shadow: 0 0 0 3px var(--bg-card-solid, #fff), 0 0 0 6px rgba(13, 148, 136, .8);
}
.vb-appt-photo-btn::after {
content: '';
position: absolute;
right: 4px; bottom: 4px;
width: 26px; height: 26px;
border-radius: 50%;
background: var(--vet-accent, #0d9488) url("data:image/svg+xml;utf8,") center / 14px no-repeat;
box-shadow: 0 2px 6px rgba(15, 23, 42, .25);
}
.vb-appt-photo-fallback {
display: flex;
align-items: center;
justify-content: center;
background: rgba(13, 148, 136, .12);
color: var(--vet-accent, #0d9488);
}
.vb-appt-photo-fallback svg { width: 56px; height: 56px; }
/* Lightbox — fullscreen preview when the avatar is clicked. */
.vb-lightbox {
position: fixed;
inset: 0;
z-index: 5000;
background: rgba(15, 23, 42, 0.88);
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
animation: vb-lb-in .14s ease-out;
cursor: zoom-out;
}
@keyframes vb-lb-in { from { opacity: 0; } to { opacity: 1; } }
.vb-lightbox-figure {
margin: 0;
max-width: min(90vw, 720px);
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
animation: vb-lb-zoom .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes vb-lb-zoom { from { transform: scale(.92); } to { transform: none; } }
.vb-lightbox-figure img {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
border-radius: 12px;
background: #000;
box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
cursor: default;
}
.vb-lightbox-figure figcaption {
color: #fff;
font-size: 15px;
font-weight: 600;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.vb-lightbox-close {
position: absolute;
top: 16px; right: 20px;
width: 40px; height: 40px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, .15);
color: #fff;
font-size: 28px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s;
}
.vb-lightbox-close:hover { background: rgba(255, 255, 255, .28); }
.vb-appt-hero-info { min-width: 0; }
.vb-appt-hero-name {
font-size: 18px;
font-weight: 800;
color: var(--text);
line-height: 1.2;
}
.vb-appt-hero-sub {
font-size: 13px;
color: var(--text-muted);
margin-top: 2px;
text-transform: capitalize;
}
/* Appointment modal footer — proportional, evenly spaced action row.
* Each button stretches to share width equally and stays vertically
* centered regardless of label length. */
.vb-appt-actions {
display: flex;
align-items: center;
gap: 10px;
padding-top: 4px;
}
.vb-appt-actions .btn {
flex: 1 1 0;
min-width: 0;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 14px;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
border-radius: 10px;
}
/* ═══════════════════════════════════════════════════════════════════
* UI/Visual polish pack — shimmer, trading-card header, SVG empty
* states, inline-saving indicator, unified timeline, dark/light tuning.
* Scoped to .vet-mode so it never bleeds into the citizen app.
* ═════════════════════════════════════════════════════════════════ */
/* ── 1. Shimmer — repaint the global .skeleton with teal in vet mode.
* The default style.css uses an orange band that clashes with teal. */
body.vet-mode .skeleton {
background: linear-gradient(
90deg,
var(--bg-card-solid) 0%,
var(--glass-strong) 40%,
rgba(20, 184, 166, 0.14) 50%,
var(--glass-strong) 60%,
var(--bg-card-solid) 100%
);
background-size: 300% 100%;
animation: vetShimmer 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
border-radius: 14px;
}
@keyframes vetShimmer {
0% { background-position: 100% 50%; }
100% { background-position: -100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
body.vet-mode .skeleton { animation: none; }
}
/* ── 2. Trading-card pet header.
* Replaces the flat .exp-pet-header look with a gradient ring around
* the photo, a clean badge row and a soft teal halo on the card. */
.exp-pet-card {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 22px;
align-items: center;
padding: 22px;
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: 20px;
margin-bottom: 16px;
overflow: hidden;
isolation: isolate;
}
.exp-pet-card::before {
/* Soft teal halo bleeding from the top-right corner. */
content: '';
position: absolute;
top: -120px; right: -120px;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(20, 184, 166, .18), transparent 65%);
z-index: -1;
pointer-events: none;
}
.exp-pet-card-photo-wrap {
position: relative;
width: 132px; height: 132px;
border-radius: 22px;
padding: 3px;
background: linear-gradient(135deg, #14B8A6, #0EA5E9 60%, #6366F1);
flex-shrink: 0;
box-shadow: 0 14px 32px -16px rgba(15, 118, 110, .55);
}
.exp-pet-card-photo {
width: 100%; height: 100%;
border-radius: 19px;
object-fit: cover;
display: block;
background: var(--bg-card-solid);
}
.exp-pet-card-photo-fallback {
width: 100%; height: 100%;
border-radius: 19px;
background: linear-gradient(135deg, #14B8A6, #0EA5E9);
display: inline-flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-size: 56px;
letter-spacing: -.02em;
}
.exp-pet-card-info { min-width: 0; }
.exp-pet-card-name {
font-size: 26px; font-weight: 800; color: var(--text);
letter-spacing: -.02em; line-height: 1.1;
}
.exp-pet-card-code {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 8px;
padding: 3px 10px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 999px;
font-family: 'SF Mono', Menlo, monospace;
font-size: 11px; color: var(--text-secondary);
letter-spacing: .04em;
}
.exp-pet-card-code-ic { font-size: 11px; opacity: .7; }
/* Premium code badge — bigger, segmented (label · digits), with an
* inline copy button. Replaces the cramped monospace pill that read
* "chafa" in the design review. */
.exp-pet-code-badge {
display: inline-flex; align-items: center; gap: 10px;
margin-top: 10px;
padding: 6px 10px 6px 12px;
background: linear-gradient(135deg,
rgba(20, 184, 166, .12),
rgba(14, 165, 233, .08));
border: 1px solid rgba(20, 184, 166, .3);
border-radius: 12px;
position: relative;
}
.exp-pet-code-icon {
width: 16px; height: 16px;
color: var(--primary);
flex-shrink: 0;
}
.exp-pet-code-prefix {
font-size: 10px; font-weight: 800;
letter-spacing: .14em; text-transform: uppercase;
color: var(--primary);
}
.exp-pet-code-sep {
color: var(--primary); opacity: .55;
font-weight: 700;
user-select: none;
}
.exp-pet-code-digits {
font-family: 'SF Mono', Menlo, monospace;
font-size: 15px; font-weight: 700;
color: var(--text);
letter-spacing: .08em;
-webkit-user-select: all; user-select: all;
}
.exp-pet-code-copy {
background: rgba(20, 184, 166, .15);
border: none;
color: var(--primary);
width: 26px; height: 26px;
border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background .15s, transform .12s, color .15s;
flex-shrink: 0;
margin-left: 2px;
}
.exp-pet-code-copy svg { width: 14px; height: 14px; }
.exp-pet-code-copy:hover {
background: var(--primary); color: #fff;
transform: translateY(-1px);
}
.exp-pet-code-copy:active { transform: translateY(0); }
/* ═══════════════════════════════════════════════════════════════════
* Micro-interaction layer — action toast (undo), confetti canvas,
* KPI flash, optimistic-save skeleton overlay, hero view-transitions.
* ═════════════════════════════════════════════════════════════════ */
/* Action toast — taller than the default to host the action button +
* a progress bar that drains toward auto-commit. */
.vet-action-toast {
display: flex; flex-direction: column;
min-width: 280px; max-width: 420px;
padding: 12px 14px 0;
background: var(--bg-card-solid);
border: 1px solid var(--border);
color: var(--text);
border-radius: 14px;
box-shadow: 0 14px 32px -16px rgba(15, 23, 42, .45);
opacity: 1;
transition: opacity .2s ease-out;
}
.vet-action-toast-row {
display: flex; align-items: center; gap: 12px;
padding-bottom: 10px;
}
.vet-action-toast-msg {
flex: 1; min-width: 0;
font-size: 13px; font-weight: 600; color: var(--text);
}
.vet-action-toast-btn {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(20, 184, 166, .14);
color: var(--primary);
border: 1px solid rgba(20, 184, 166, .3);
padding: 6px 12px;
border-radius: 999px;
font-size: 12px; font-weight: 800;
cursor: pointer;
flex-shrink: 0;
transition: background .15s, transform .12s, color .15s;
}
.vet-action-toast-btn:hover {
background: var(--primary); color: #fff;
transform: translateY(-1px);
}
.vet-action-toast-ic { font-size: 13px; line-height: 1; }
.vet-action-toast-progress {
height: 3px; width: 100%;
background: var(--bg-input);
border-radius: 0 0 14px 14px;
position: relative;
overflow: hidden;
}
.vet-action-toast-progress::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, var(--primary), #0EA5E9);
transform-origin: left;
animation: vetActionToastDrain var(--vat-duration, 5000ms) linear forwards;
}
@keyframes vetActionToastDrain {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
.vet-action-toast-progress::before { animation: none; transform: scaleX(0); }
}
/* Confetti canvas — fullscreen overlay, pass-through clicks. */
.vet-confetti-canvas {
position: fixed; inset: 0;
width: 100vw; height: 100vh;
pointer-events: none;
z-index: 9998;
}
/* Flash gold — applied to KPI tiles when their value changes. */
@keyframes vetFlashGold {
0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .65); }
40% { box-shadow: 0 0 0 8px rgba(245, 158, 11, .25); }
100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
.vet-flash-gold {
animation: vetFlashGold 1s ease-out forwards;
}
.vet-flash-gold .vet-dash-stat-value {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(135deg, #F59E0B, #F97316);
transition: -webkit-text-fill-color .6s;
animation: vetFlashGoldText 1s ease-out forwards;
}
@keyframes vetFlashGoldText {
0% { -webkit-text-fill-color: transparent; }
100% { -webkit-text-fill-color: currentColor; }
}
/* Optimistic record placeholder — appears in the tab while the API
* call is in-flight; gets removed (or solidified) on response. */
.exp-row.is-pending,
.exp-timeline-item.is-pending {
opacity: .85;
position: relative;
overflow: hidden;
}
.exp-row.is-pending::after,
.exp-timeline-item.is-pending::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg,
transparent,
rgba(20, 184, 166, .12),
transparent);
background-size: 200% 100%;
animation: vetPendingShimmer 1.4s linear infinite;
pointer-events: none;
}
@keyframes vetPendingShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.exp-row.is-failed,
.exp-timeline-item.is-failed {
animation: vetShake .45s cubic-bezier(.36, .07, .19, .97);
border-color: rgba(239, 68, 68, .5) !important;
}
@keyframes vetShake {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX(2px); }
30%, 50%, 70% { transform: translateX(-4px); }
40%, 60% { transform: translateX(4px); }
}
/* View transitions — when supported, fade the old image out while
* the new one fades in (default), but lengthen the duration so the
* morph reads as intentional. */
::view-transition-old(*),
::view-transition-new(*) {
animation-duration: 320ms;
animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
::view-transition-group(.vet-pet-portrait),
::view-transition-group(.vet-pet-name) {
animation-duration: 380ms;
}
/* Clickable pet portrait — show the user it's interactive without
* making the borders shout. */
.exp-pet-card-photo[role="button"] {
cursor: zoom-in;
transition: transform .18s, box-shadow .18s;
}
.exp-pet-card-photo[role="button"]:hover {
transform: scale(1.02);
box-shadow: 0 14px 32px -14px rgba(15, 118, 110, .45);
}
.exp-pet-card-photo[role="button"]:focus-visible {
outline: 3px solid var(--primary);
outline-offset: 2px;
}
.exp-pet-card-owner-avatar-img[role="button"] {
cursor: zoom-in;
transition: transform .15s;
}
.exp-pet-card-owner-avatar-img[role="button"]:hover {
transform: scale(1.08);
}
.exp-pet-card-owner-avatar-img[role="button"]:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* Inline pill row: especie · raza · sexo · edad · color */
.exp-pet-card-pills {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 10px;
}
.exp-pet-card-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 999px;
font-size: 11px; font-weight: 600; color: var(--text-secondary);
white-space: nowrap;
}
.exp-pet-card-pill-ic { font-size: 12px; line-height: 1; }
.exp-pet-card-pill--male {
background: rgba(59, 130, 246, .1); color: #3b82f6;
border-color: rgba(59, 130, 246, .25);
}
.exp-pet-card-pill--female {
background: rgba(236, 72, 153, .1); color: #ec4899;
border-color: rgba(236, 72, 153, .25);
}
.exp-pet-card-side {
display: flex; flex-direction: column; gap: 8px; align-items: stretch;
flex-shrink: 0;
}
.exp-pet-card-microchip {
display: flex; flex-direction: column; gap: 2px;
padding: 8px 12px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 12px;
min-width: 140px;
}
/* Owner mini-card: initials avatar + name + tel: link. Sits at the top
* of the side column so the vet sees who to call without scrolling. */
.exp-pet-card-owner {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: linear-gradient(135deg,
rgba(20, 184, 166, .08),
rgba(14, 165, 233, .06));
border: 1px solid rgba(20, 184, 166, .22);
border-radius: 12px;
min-width: 180px; max-width: 240px;
}
.exp-pet-card-owner-avatar {
width: 36px; height: 36px; flex-shrink: 0;
border-radius: 50%;
background: linear-gradient(135deg, #14B8A6, #0EA5E9);
display: inline-flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-size: 13px;
letter-spacing: .02em;
}
.exp-pet-card-owner-avatar-img {
object-fit: cover;
display: block;
background: var(--bg-input);
}
.exp-pet-card-owner-meta { min-width: 0; flex: 1; }
.exp-pet-card-owner-label {
font-size: 9px; font-weight: 800; text-transform: uppercase;
letter-spacing: .08em; color: var(--text-muted);
display: flex; align-items: center; gap: 4px;
}
.exp-pet-card-owner-check {
display: inline-flex; align-items: center; justify-content: center;
width: 12px; height: 12px;
background: #16a34a; color: #fff;
border-radius: 50%; font-size: 9px; font-weight: 800;
line-height: 1;
}
.exp-pet-card-owner-name {
font-size: 13px; font-weight: 700; color: var(--text);
margin-top: 1px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.exp-pet-card-owner-phone {
display: inline-flex; align-items: center; gap: 5px;
margin-top: 4px;
font-family: 'SF Mono', Menlo, monospace;
font-size: 12px; font-weight: 700;
color: var(--primary);
text-decoration: none;
}
.exp-pet-card-owner-phone:hover { text-decoration: underline; }
.exp-pet-card-owner-phone-ic { font-size: 11px; }
/* ── Unified patient search — single input that auto-detects pet/owner/
* phone/code. Lives on /app/pacientes above the roster. */
.vet-search-card {
margin-top: 16px;
padding: 12px 14px;
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: 16px;
transition: border-color .15s, box-shadow .15s;
}
.vet-search-card:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(20, 184, 166, .12);
}
.vet-search-row {
display: flex; align-items: center; gap: 10px;
}
.vet-search-ic {
width: 18px; height: 18px;
color: var(--text-muted);
flex-shrink: 0;
}
.vet-search-input {
flex: 1; min-width: 0;
background: none;
border: none;
outline: none;
color: var(--text);
font-size: 15px;
font-family: inherit;
padding: 6px 0;
}
.vet-search-input::placeholder {
color: var(--text-muted); font-weight: 500;
font-size: 13px;
}
.vet-search-clear {
background: var(--bg-input);
border: 1px solid var(--border);
color: var(--text-muted);
width: 26px; height: 26px;
border-radius: 50%;
font-size: 18px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; flex-shrink: 0;
transition: background .15s, color .15s, border-color .15s;
}
.vet-search-clear:hover {
background: var(--primary); color: #fff; border-color: var(--primary);
}
.vet-search-hints {
margin-top: 8px;
min-height: 0;
display: flex; flex-wrap: wrap; gap: 6px;
}
.vet-search-hint-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px;
background: rgba(20, 184, 166, .1);
border: 1px solid rgba(20, 184, 166, .25);
color: var(--primary);
border-radius: 999px;
font-size: 11px; font-weight: 700;
letter-spacing: .02em;
}
/* ── Patients list — row with pet info + owner chip on the right. */
.vet-patient-card {
display: flex; align-items: center; gap: 14px;
padding: 12px 14px;
margin-bottom: 10px;
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: 14px;
cursor: pointer;
transition: transform .12s, border-color .15s, box-shadow .15s;
}
.vet-patient-card:hover {
transform: translateY(-1px);
border-color: rgba(20, 184, 166, .35);
box-shadow: 0 10px 26px -18px rgba(15, 23, 42, .35);
}
.vet-patient-card-info { flex: 1; min-width: 0; }
.vet-patient-card-name { font-size: 15px; font-weight: 700; color: var(--text); }
.vet-patient-card-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.vet-patient-card-code {
display: inline-block;
margin-top: 6px;
padding: 2px 8px;
font-family: 'SF Mono', Menlo, monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: .02em;
color: #0F766E;
background: rgba(20, 184, 166, .10);
border: 1px solid rgba(20, 184, 166, .22);
border-radius: 999px;
}
.vet-patient-card-chev { color: var(--text-muted); flex-shrink: 0; }
.vet-patient-card-owner {
display: flex; align-items: center; gap: 8px;
padding: 6px 10px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 999px;
flex-shrink: 0;
max-width: 220px;
}
.vet-patient-card-owner-empty {
font-size: 11px; color: var(--text-muted);
padding: 4px 8px;
background: var(--bg-input);
border: 1px dashed var(--border);
border-radius: 999px;
flex-shrink: 0;
}
.vet-pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 14px;
padding: 10px 14px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: 14px;
flex-wrap: wrap;
}
.vet-pagination-count {
font-size: 12px;
color: var(--text-muted);
}
.vet-pagination-count strong {
color: var(--text);
font-weight: 700;
}
.vet-pagination-controls {
display: flex;
align-items: center;
gap: 8px;
}
.vet-pagination-page {
font-size: 12px;
font-weight: 600;
color: var(--text);
padding: 0 6px;
min-width: 110px;
text-align: center;
}
.vet-pagination-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
border-radius: 10px;
background: var(--bg-input);
border: 1px solid var(--border);
color: var(--text);
cursor: pointer;
transition: background .15s, border-color .15s, transform .1s;
}
.vet-pagination-btn:hover:not(:disabled) {
background: rgba(20, 184, 166, .10);
border-color: rgba(20, 184, 166, .35);
color: #0F766E;
}
.vet-pagination-btn:active:not(:disabled) {
transform: scale(.96);
}
.vet-pagination-btn:disabled {
opacity: .4;
cursor: not-allowed;
}
.vet-search-hint-count {
background: var(--bg-input);
border-color: var(--border);
color: var(--text-muted);
font-weight: 700;
}
@media (max-width: 480px) {
.vet-pagination { flex-direction: column; align-items: stretch; }
.vet-pagination-controls { justify-content: space-between; }
.vet-pagination-page { flex: 1; }
}
.vet-patient-card-owner-avatar {
width: 28px; height: 28px; flex-shrink: 0;
border-radius: 50%;
background: linear-gradient(135deg, #14B8A6, #0EA5E9);
display: inline-flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-size: 11px;
}
.vet-patient-card-owner-avatar-img {
object-fit: cover; display: block;
background: var(--bg-input);
}
.vet-patient-card-owner-meta { min-width: 0; line-height: 1.15; }
.vet-patient-card-owner-name {
font-size: 12px; font-weight: 700; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
max-width: 160px;
}
.vet-patient-card-owner-phone {
font-family: 'SF Mono', Menlo, monospace;
font-size: 11px; font-weight: 600; color: var(--primary);
text-decoration: none;
}
.vet-patient-card-owner-phone:hover { text-decoration: underline; }
@media (max-width: 640px) {
.vet-patient-card { flex-wrap: wrap; }
.vet-patient-card-owner {
order: 4;
width: 100%;
max-width: none;
margin-top: 4px;
}
.vet-patient-card-owner-name { max-width: none; }
}
.exp-pet-card-microchip-label {
font-size: 9px; font-weight: 800; text-transform: uppercase;
letter-spacing: .08em; color: var(--text-muted);
}
.exp-pet-card-microchip-value {
font-family: 'SF Mono', Menlo, monospace;
font-size: 12px; color: var(--text); font-weight: 600;
}
/* Health-badge row sits right below the card. */
.exp-pet-card + .exp-pet-badges-row {
margin-top: -8px; margin-bottom: 16px;
display: flex; flex-wrap: wrap; gap: 6px;
}
@media (max-width: 720px) {
.exp-pet-card {
grid-template-columns: auto 1fr;
gap: 14px; padding: 16px;
}
.exp-pet-card-photo-wrap { width: 92px; height: 92px; border-radius: 18px; padding: 2px; }
.exp-pet-card-photo, .exp-pet-card-photo-fallback { border-radius: 16px; }
.exp-pet-card-photo-fallback { font-size: 36px; }
.exp-pet-card-name { font-size: 20px; }
.exp-pet-card-side {
grid-column: 1 / -1;
flex-direction: column;
}
.exp-pet-card-microchip,
.exp-pet-card-owner { width: 100%; max-width: none; min-width: 0; }
}
/* ── 3. SVG-illustrated empty states.
* Replaces the single big emoji with a clean line illustration. */
.exp-empty-cta-illu {
width: 120px; height: 120px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 28px;
background:
radial-gradient(circle at 30% 30%, rgba(20,184,166,.18), transparent 60%),
var(--bg-input);
border: 1px solid var(--border);
position: relative;
}
.exp-empty-cta-illu::before {
/* Soft pulsing teal dot in the corner. */
content: '';
position: absolute; bottom: 14px; right: 14px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--primary);
box-shadow: 0 0 0 0 rgba(20, 184, 166, .55);
animation: vetPulse 2.2s ease-out infinite;
}
@keyframes vetPulse {
0% { box-shadow: 0 0 0 0 rgba(20, 184, 166, .55); }
70% { box-shadow: 0 0 0 14px rgba(20, 184, 166, 0); }
100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); }
}
@media (prefers-reduced-motion: reduce) {
.exp-empty-cta-illu::before { animation: none; }
}
.exp-empty-cta-illu svg { width: 76px; height: 76px; }
.exp-empty-cta-illu .exp-illu-stroke { stroke: var(--primary); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.exp-empty-cta-illu .exp-illu-fill { fill: var(--primary); opacity: .14; }
.exp-empty-cta-illu .exp-illu-soft { stroke: var(--text-muted); stroke-width: 1.4; fill: none; opacity: .55; stroke-linecap: round; }
/* ── 4. Inline saving indicator (submit button states). */
.btn-submit.is-saving,
.exp-empty-cta-btn.is-saving,
.btn-primary.is-saving {
position: relative;
pointer-events: none;
opacity: .85;
}
.btn-submit.is-saving::after,
.exp-empty-cta-btn.is-saving::after,
.btn-primary.is-saving::after {
content: '';
position: absolute;
right: 16px; top: 50%;
width: 16px; height: 16px;
margin-top: -8px;
border: 2px solid rgba(255,255,255,.35);
border-top-color: #fff;
border-radius: 50%;
animation: vetSpin .65s linear infinite;
}
@keyframes vetSpin { to { transform: rotate(360deg); } }
.btn-submit.is-saved,
.btn-primary.is-saved {
background: #16a34a !important;
box-shadow: 0 6px 16px rgba(22, 163, 74, .28) !important;
}
.btn-submit.is-saved::after {
content: '✓';
position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
font-size: 16px; font-weight: 800; color: #fff;
border: none; width: auto; height: auto; margin: 0; animation: none;
}
.vet-inline-note {
font-size: 11px; color: var(--text-muted);
margin-top: 6px; min-height: 14px;
transition: color .15s;
}
.vet-inline-note.is-error { color: #dc2626; }
.vet-inline-note.is-ok { color: #16a34a; }
/* ── 5. Unified timeline tab (Cronología). */
.exp-timeline {
position: relative;
padding-left: 28px;
}
.exp-timeline::before {
content: '';
position: absolute; left: 13px; top: 4px; bottom: 4px;
width: 2px;
background: linear-gradient(180deg, var(--border), transparent 95%);
border-radius: 2px;
}
.exp-timeline-group {
position: relative;
margin-bottom: 18px;
}
.exp-timeline-group-label {
position: relative;
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px; font-weight: 800;
text-transform: uppercase; letter-spacing: .08em;
color: var(--text-muted);
margin: 0 0 10px -28px;
padding: 4px 12px;
background: var(--bg-input);
border-radius: 999px;
border: 1px solid var(--border);
}
.exp-timeline-item {
position: relative;
display: flex; gap: 14px;
padding: 12px 14px;
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: 14px;
margin-bottom: 8px;
transition: transform .12s, border-color .15s, box-shadow .15s;
}
.exp-timeline-item:hover {
transform: translateX(2px);
border-color: rgba(20, 184, 166, .35);
box-shadow: 0 8px 22px -16px rgba(15, 23, 42, .35);
}
.exp-timeline-item::before {
/* The colored dot anchored to the spine. */
content: '';
position: absolute;
left: -23px; top: 22px;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--tl-color, var(--primary));
border: 3px solid var(--bg-card-solid);
box-shadow: 0 0 0 1px var(--tl-color, var(--primary));
}
.exp-timeline-icon {
width: 34px; height: 34px; flex-shrink: 0;
border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 17px;
background: color-mix(in srgb, var(--tl-color, var(--primary)) 14%, transparent);
color: var(--tl-color, var(--primary));
}
.exp-timeline-body { flex: 1; min-width: 0; }
.exp-timeline-head {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
font-size: 14px; font-weight: 700; color: var(--text);
}
.exp-timeline-type-label { color: var(--text); }
.exp-timeline-date {
margin-left: auto;
font-size: 11px; color: var(--text-muted);
font-weight: 700; letter-spacing: .02em;
white-space: nowrap;
}
.exp-timeline-summary {
font-size: 13px; color: var(--text-secondary);
margin-top: 4px; line-height: 1.4;
}
.exp-timeline-meta {
display: flex; gap: 8px; flex-wrap: wrap;
margin-top: 6px;
}
.exp-timeline-meta .exp-chip { margin-top: 0; }
.exp-timeline-author {
font-size: 11px; color: var(--text-muted); margin-top: 6px;
}
.exp-timeline-vet-pill {
display: inline-flex; align-items: center; gap: 4px;
background: rgba(34, 197, 94, .14); color: #16a34a;
padding: 1px 7px; border-radius: 5px;
font-size: 10px; font-weight: 800; letter-spacing: .02em;
}
@media (max-width: 540px) {
.exp-timeline { padding-left: 22px; }
.exp-timeline::before { left: 9px; }
.exp-timeline-item::before { left: -19px; top: 20px; width: 10px; height: 10px; }
.exp-timeline-group-label { margin-left: -22px; }
}
/* ── 6. Dark/light tuning for vet surfaces.
* The global tokens already handle theme switching; these refine
* borders, glow and contrast so the vet console feels intentional
* in both modes instead of being a recolor of the citizen app. */
/* Default (dark): give cards a subtle teal-tinted top border glow,
* deepen the hero, and lift surfaces with an inner highlight. */
body.vet-mode .vet-dash-card,
body.vet-mode .exp-pet-card,
body.vet-mode .exp-sum-card,
body.vet-mode .exp-row,
body.vet-mode .exp-chart-card,
body.vet-mode .exp-study-card,
body.vet-mode .exp-timeline-item {
background: linear-gradient(180deg,
rgba(20, 184, 166, .035),
transparent 60%),
var(--bg-card-solid);
}
body.vet-mode .vet-hero {
background:
radial-gradient(circle at 88% -10%, rgba(94, 234, 212, .35), transparent 55%),
linear-gradient(135deg, #042f2e 0%, #115e59 45%, #0f766e 100%);
box-shadow: 0 28px 56px -28px rgba(8, 51, 47, .85);
}
body.vet-mode .vet-dash-stat {
background: linear-gradient(180deg,
rgba(20, 184, 166, .06),
transparent 70%),
var(--bg-card-solid);
}
/* Light mode adjustments: a real `[data-theme="light"]` exists at the
* root, so override there. We tone down the teal washes (too vibrant
* on white) and tighten borders. */
[data-theme="light"] body.vet-mode .vet-dash-card,
[data-theme="light"] body.vet-mode .exp-pet-card,
[data-theme="light"] body.vet-mode .exp-sum-card,
[data-theme="light"] body.vet-mode .exp-row,
[data-theme="light"] body.vet-mode .exp-chart-card,
[data-theme="light"] body.vet-mode .exp-study-card,
[data-theme="light"] body.vet-mode .exp-timeline-item {
background: #ffffff;
border-color: #e2e8f0;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
[data-theme="light"] body.vet-mode .vet-dash-card:hover,
[data-theme="light"] body.vet-mode .exp-timeline-item:hover {
box-shadow: 0 8px 24px -16px rgba(15, 118, 110, .28);
}
[data-theme="light"] body.vet-mode .vet-hero {
background:
radial-gradient(circle at 88% -10%, rgba(94, 234, 212, .5), transparent 55%),
linear-gradient(135deg, #14b8a6 0%, #0d9488 50%, #0891b2 100%);
}
[data-theme="light"] body.vet-mode .exp-pet-card-microchip,
[data-theme="light"] body.vet-mode .exp-pet-card-code,
[data-theme="light"] body.vet-mode .exp-pet-card-pill {
background: #f8fafc;
border-color: #e2e8f0;
}
[data-theme="light"] body.vet-mode .exp-pet-card-owner {
background: linear-gradient(135deg,
rgba(20, 184, 166, .07),
rgba(14, 165, 233, .05));
border-color: rgba(20, 184, 166, .28);
}
[data-theme="light"] body.vet-mode .skeleton {
background: linear-gradient(
90deg,
#f1f5f9 0%,
#e2e8f0 40%,
rgba(20, 184, 166, 0.12) 50%,
#e2e8f0 60%,
#f1f5f9 100%
);
background-size: 300% 100%;
}
[data-theme="light"] body.vet-mode .exp-timeline::before {
background: linear-gradient(180deg, #e2e8f0, transparent 95%);
}
[data-theme="light"] body.vet-mode .exp-empty-cta-illu {
background:
radial-gradient(circle at 30% 30%, rgba(20,184,166,.14), transparent 60%),
#f8fafc;
border-color: #e2e8f0;
}