@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
:root{--ink:#19324a;--muted:#718399;--card:rgba(255,255,255,.88);--line:#dfe9f3;--blue:#5b7cfa;--blue2:#6cc8ff;--green:#55cfa6;--pink:#f48bb5;--purple:#9b7ce7;--orange:#f4b663;--red:#eb6d79;--shadow:0 18px 55px rgba(55,86,120,.12);--radius:24px;--bg1:#eef8ff;--bg2:#f5f1ff;--bg3:#fff8f2}
html[data-theme="pastel-sky"]{--bg1:#eaf7ff;--bg2:#f4f0ff;--bg3:#fff8ef}html[data-theme="pastel-mint"]{--bg1:#eafbf6;--bg2:#f2fbff;--bg3:#fff8ef}html[data-theme="pastel-lavender"]{--bg1:#f3efff;--bg2:#fff2fa;--bg3:#eef8ff}html[data-theme="pastel-peach"]{--bg1:#fff1e8;--bg2:#fff8f2;--bg3:#f3efff}html[data-theme="pastel-cream"]{--bg1:#fffaf0;--bg2:#f6fbef;--bg3:#eef8ff}html[data-theme="pastel-sunset"]{--bg1:#fff0f0;--bg2:#fff2df;--bg3:#f2efff}
*{box-sizing:border-box}html{min-height:100%;background:linear-gradient(135deg,var(--bg1),var(--bg2) 45%,var(--bg3));background-attachment:fixed}body{margin:0;color:var(--ink);font-family:Nunito,system-ui,sans-serif;min-height:100vh;background-image:radial-gradient(circle at 10% 20%,rgba(255,255,255,.8) 0 7px,transparent 8px),radial-gradient(circle at 90% 10%,rgba(255,255,255,.65) 0 9px,transparent 10px);background-size:80px 80px,110px 110px}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}small{display:block;color:var(--muted)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(2rem,3vw,3rem);line-height:1.05}h2{font-size:1.35rem}.app-shell{display:grid;grid-template-columns:270px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:24px 18px;background:linear-gradient(180deg,#183b69,#144e72 58%,#16646c);color:#fff;display:flex;flex-direction:column;z-index:50}.brand{display:flex;align-items:center;gap:12px;padding:2px 8px 25px}.brand-mark{width:46px;height:46px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(135deg,#68d7d0,#78a5ff);font-size:25px;box-shadow:0 10px 22px rgba(0,0,0,.18)}.brand b{font-size:1.5rem}.brand small{color:#bfe7ef}.sidebar nav{display:grid;gap:6px}.sidebar nav a{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:15px;color:#e7f6ff;font-weight:800}.sidebar nav a:hover{background:rgba(255,255,255,.12);transform:translateX(3px)}.nav-label{font-size:.68rem;letter-spacing:.18em;color:#85cbd6;margin:18px 13px 5px}.sidebar-mascot{margin-top:auto;background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:14px;text-align:center}.sidebar-mascot .mini-roger{font-size:55px;animation:floaty 3s ease-in-out infinite}.sidebar-mascot small{color:#cfeaf2}.user-card{margin-top:15px;display:flex;gap:10px;align-items:center;border-top:1px solid rgba(255,255,255,.13);padding:15px 5px 0}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#7da8ff,#75e0c2);color:#fff;font-weight:900}.user-card small{color:#bfe7ef}.main-content{min-width:0}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:rgba(255,255,255,.68);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.8);position:sticky;top:0;z-index:30}.top-title{font-weight:900;font-size:1.13rem}.top-actions{display:flex;gap:10px;align-items:center}.top-actions form{margin:0}.lang-toggle,.icon-btn{border:0;background:#fff;border-radius:13px;padding:10px 13px;color:var(--ink);box-shadow:0 5px 16px rgba(70,95,125,.1);font-weight:900}.pill,.tag{display:inline-flex;align-items:center;border-radius:999px;padding:6px 11px;background:#edf2ff;color:#4d67bf;font-weight:800;font-size:.78rem}.role-pill{background:#e8faf4;color:#248a69}.page{padding:28px;max-width:1600px;margin:auto}.flash{padding:12px 18px;margin:15px 28px 0;border-radius:14px;background:#e9f8f1;color:#267c61;font-weight:800}.flash.error{background:#fff0f2;color:#b84c5c}.card,.hero-card,.admin-banner,.settings-hero{background:var(--card);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow);border-radius:var(--radius);backdrop-filter:blur(18px)}.hero-card{min-height:230px;padding:34px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;background:linear-gradient(125deg,rgba(220,245,255,.95),rgba(237,230,255,.92),rgba(255,244,231,.95));position:relative}.hero-card:after{content:'🐾  ♡  ✦  🐾';position:absolute;right:4%;top:12%;font-size:24px;opacity:.13;letter-spacing:20px}.hero-card p{max-width:620px;color:#61758c;font-size:1.05rem}.eyebrow{font-size:.73rem;letter-spacing:.16em;font-weight:900;color:#5b7cfa}.hero-actions{display:flex;gap:10px;flex-wrap:wrap}.hero-mascots{display:flex;align-items:flex-end;gap:8px;font-size:clamp(56px,7vw,110px);filter:drop-shadow(0 14px 18px rgba(58,83,110,.16));z-index:2}.hero-mascots span:nth-child(2){font-size:.7em}.hero-mascots span:nth-child(3){font-size:.55em}.bounce{animation:bounce 2.2s ease-in-out infinite}.float{animation:floaty 2.8s ease-in-out infinite}.wiggle{animation:wiggle 2s ease-in-out infinite}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:14px;padding:10px 15px;font-weight:900}.btn.primary{background:linear-gradient(135deg,#4d7df7,#6da7ff);color:#fff;box-shadow:0 9px 22px rgba(79,121,232,.22)}.btn.soft{background:#eef4ff;color:#4565ba}.btn.tiny{padding:7px 10px;font-size:.78rem;background:#f0f4f8}.btn.wide{width:100%;margin-top:10px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0}.stat{padding:20px;border-radius:20px;display:flex;align-items:center;gap:15px;background:var(--card);box-shadow:0 10px 28px rgba(66,92,120,.08)}.stat>span{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;font-size:26px}.stat.blue>span{background:#e5efff}.stat.green>span{background:#e5f9f1}.stat.pink>span{background:#ffecf4}.stat.purple>span{background:#f0eaff}.stat.orange>span{background:#fff0da}.stat b{font-size:1.7rem;display:block}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}.card{padding:22px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:15px}.section-head h2{margin:3px 0}.section-head a{color:#5173ce;font-weight:900}.pet-list,.triage-list{display:grid;gap:10px}.pet-row,.triage-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px;border-radius:16px;background:#f8fbfe}.pet-row:hover{background:#eef5ff}.pet-emoji{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#eaf7ff;font-size:26px}.pet-row>span{font-weight:900;color:#59708a}.triage-row{border-left:5px solid #f0c765}.triage-row.level-1{border-color:#e75d6d;background:#fff2f4}.triage-row.level-2{border-color:#f19a50;background:#fff7ed}.triage-row.level-3{border-color:#eacb4f;background:#fffbed}.triage-row.level-4{border-color:#58c994;background:#eefbf5}.triage-row.level-5{border-color:#65a6e8;background:#eff7ff}.triage-dot{width:12px;height:12px;background:currentColor;border-radius:50%}.triage-row time{font-size:.75rem;color:var(--muted)}.empty{padding:22px;text-align:center;color:var(--muted)}.owner-pets{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin:20px 0}.pet-profile-card,.pet-card{background:var(--card);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}.pet-cover{height:185px;background:linear-gradient(135deg,#dff5ff,#efeaff,#fff0e5);display:grid;place-items:center;position:relative}.big-pet{font-size:110px;animation:floaty 3s infinite}.health-badge{position:absolute;bottom:12px;background:#fff;padding:7px 11px;border-radius:999px;font-weight:800;font-size:.75rem}.pet-profile-body{padding:20px}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:15px 0}.mini-stats span{background:#f7fafc;padding:10px;border-radius:13px;text-align:center}.mini-stats small{font-size:.65rem}.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.news-grid.one{grid-template-columns:1fr}.news-card{padding:18px;border-radius:20px;background:linear-gradient(135deg,#f0f7ff,#faf8ff);border:1px solid #e8eef7}.news-card.offer{background:linear-gradient(135deg,#fff2e7,#fff8e2)}.news-icon{font-size:30px}.page-head{margin-bottom:18px}.search{display:flex;gap:8px}.search input{min-width:280px}.create-box summary,details summary{cursor:pointer;font-weight:900;color:#4a6bc6}.form-split form,.form-grid,.compact-form,.dialog-form{display:grid;gap:11px}.form-grid{grid-template-columns:1fr 1fr}.form-grid .full{grid-column:1/-1}.form-split label,.form-grid label,.compact-form label,.dialog-form label,.card>form label{display:grid;gap:5px;font-weight:800;font-size:.83rem;color:#52687d}input,select,textarea{width:100%;border:1px solid #dce7f0;background:rgba(255,255,255,.9);border-radius:13px;padding:11px 12px;color:var(--ink);outline:none}input:focus,select:focus,textarea:focus{border-color:#7f9cff;box-shadow:0 0 0 3px rgba(91,124,250,.12)}textarea{min-height:85px;resize:vertical}.pet-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}.pet-card{padding:20px;transition:.2s}.pet-card:hover{transform:translateY(-5px);box-shadow:0 20px 45px rgba(61,92,125,.16)}.pet-card-top{display:flex;justify-content:space-between}.pet-face{font-size:58px}.hc{font-size:.72rem;color:#6f83a0}.pet-data{display:flex;gap:8px;flex-wrap:wrap}.pet-data span{font-size:.75rem;background:#f1f6fb;padding:6px 8px;border-radius:10px}.card-link{margin-top:15px;font-weight:900;color:#5072cc}.pet-header{display:flex;align-items:center;gap:20px}.pet-portrait{width:130px;height:130px;display:grid;place-items:center;border-radius:34px;background:linear-gradient(135deg,#dff5ff,#efe7ff,#ffeddf);font-size:80px}.pet-title{flex:1}.pet-kpis{display:flex;gap:10px}.pet-kpis div{min-width:88px;padding:14px;text-align:center;border-radius:17px;background:#f7fafc}.pet-kpis b{display:block;font-size:1.35rem}.tag-row{display:flex;gap:6px}.tag.success{background:#e6f9f0;color:#238565}.tag.danger{background:#ffebef;color:#b54e60}.timeline{border-left:3px solid #e2ebf5;margin-left:8px;padding-left:22px}.timeline article{position:relative;padding:4px 0 22px}.timeline article i{position:absolute;left:-31px;top:7px;width:15px;height:15px;border-radius:50%;background:#6f8fff;border:3px solid #fff;box-shadow:0 0 0 2px #dfe7f4}.timeline time{font-size:.72rem;color:#8795a8}.stack{display:grid;gap:20px}.info-row{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:10px 0;border-bottom:1px dashed #e2eaf3}.info-row>span{font-size:24px}.compact-form{margin-top:10px}.admin-banner,.settings-hero{padding:27px 30px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#e8f7ff,#f2edff,#fff3e6)}.admin-roger,.roger-admin-mascot{font-size:75px;animation:wiggle 2.4s infinite}.admin-roger span{font-size:40px}.admin-grid{align-items:start}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:650px}th,td{text-align:left;padding:12px;border-bottom:1px solid #e9eef4}th{font-size:.7rem;color:#8494a7;text-transform:uppercase;letter-spacing:.08em}td small{margin-top:2px}.user-cell{display:flex;gap:9px;align-items:center}.api-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.api-chip{padding:10px;border-radius:13px;background:#f5f7fa}.api-chip.active{background:#eaf9f3}.api-chip b,.api-chip small{display:block;font-size:.72rem}.audit-feed{display:grid;gap:8px}.audit-feed>div{display:flex;gap:10px;padding:8px}.role-cards{display:grid;gap:9px}.role-cards>div{display:grid;grid-template-columns:auto 1fr;column-gap:8px;padding:10px;border-radius:14px;background:#f8fafc}.role-cards>div small{grid-column:2}.settings-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;margin:20px 0}.palette-bubbles{display:flex;gap:8px}.palette-bubbles i{width:45px;height:45px;border-radius:50%;background:#a9dbff}.palette-bubbles i:nth-child(2){background:#b8eedb}.palette-bubbles i:nth-child(3){background:#dbc6ff}.palette-bubbles i:nth-child(4){background:#ffd1bd}.theme-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 18px}.theme-option input{display:none}.theme-option span{display:block;border:2px solid transparent;border-radius:17px;padding:8px;background:#fff;text-align:center}.theme-option input:checked+span{border-color:#6788f5;box-shadow:0 0 0 3px #e7edff}.theme-option i{display:block;height:55px;border-radius:12px;margin-bottom:7px;background:linear-gradient(135deg,var(--bg1),var(--bg2),var(--bg3))}.theme-option.pastel-sky i{background:linear-gradient(135deg,#eaf7ff,#f4f0ff,#fff8ef)}.theme-option.pastel-mint i{background:linear-gradient(135deg,#eafbf6,#f2fbff,#fff8ef)}.theme-option.pastel-lavender i{background:linear-gradient(135deg,#f3efff,#fff2fa,#eef8ff)}.theme-option.pastel-peach i{background:linear-gradient(135deg,#fff1e8,#fff8f2,#f3efff)}.theme-option.pastel-cream i{background:linear-gradient(135deg,#fffaf0,#f6fbef,#eef8ff)}.theme-option.pastel-sunset i{background:linear-gradient(135deg,#fff0f0,#fff2df,#f2efff)}.switch-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0}.switch-row select{max-width:120px}.api-settings{display:grid;gap:8px}.api-row{display:grid;grid-template-columns:70px 130px minmax(160px,1fr) 85px 110px 75px 70px;gap:8px;align-items:center;padding:9px;border-radius:14px;background:#f8fafc}.api-row input{padding:8px}.inline-check{display:flex!important;align-items:center;gap:4px}.inline-check input{width:auto}.api-status{font-size:.7rem;color:#9a6870}.api-status.ok{color:#278567}.note{font-size:.78rem;color:#718399;background:#f3f6fa;padding:10px;border-radius:12px}.triage-scale{display:flex;gap:9px;flex-wrap:wrap}.triage-scale span{padding:9px 11px;background:#fff;border-radius:12px;font-weight:900}.login-page{min-height:100vh;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;padding:6vw;background:linear-gradient(135deg,#dff5ff,#f2eaff 48%,#fff0df)}.login-art{text-align:center}.login-art h1{font-size:4rem;color:#31557c}.login-art p{max-width:620px;margin:auto;font-size:1.12rem;color:#58728d}.login-pets{font-size:clamp(80px,12vw,180px);filter:drop-shadow(0 22px 25px rgba(65,82,105,.14))}.login-pets span{display:inline-block;animation:floaty 3s infinite}.login-pets span:nth-child(2){animation-delay:.4s}.login-pets span:nth-child(3){animation-delay:.8s}.floating-paws{font-size:30px;opacity:.45;animation:wiggle 4s infinite}.login-card{max-width:460px;width:100%;justify-self:center;background:rgba(255,255,255,.9);border-radius:32px;padding:36px;box-shadow:0 25px 70px rgba(66,85,112,.16)}.login-logo{font-size:50px}.login-card label{display:grid;gap:6px;margin:12px 0;font-weight:800}.roger-fab{position:fixed;right:25px;bottom:25px;width:76px;height:76px;border:0;border-radius:50%;background:linear-gradient(145deg,#66b0ff,#64d8bd);box-shadow:0 14px 35px rgba(57,91,132,.28);z-index:90;font-size:39px;animation:pulse 2.5s infinite}.roger-fab-face{display:block;animation:wiggle 2.2s infinite}.online-dot{position:absolute;right:7px;top:7px;width:15px;height:15px;border-radius:50%;background:#45d18d;border:3px solid #fff}.roger-box{position:fixed;right:24px;bottom:112px;width:min(390px,calc(100vw - 28px));max-height:76vh;background:rgba(255,255,255,.97);box-shadow:0 25px 75px rgba(43,73,108,.25);border-radius:27px;z-index:100;overflow:hidden;display:none;border:1px solid #e4edf6}.roger-box.open{display:flex;flex-direction:column;animation:pop .22s ease}.roger-head{display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(135deg,#4e86ee,#53b7df);color:white}.roger-avatar{font-size:29px}.roger-head small{color:#dff6ff}.roger-head small i{display:inline-block;width:7px;height:7px;background:#55e3a5;border-radius:50%}.roger-head button{margin-left:auto;border:0;background:rgba(255,255,255,.17);color:#fff;width:30px;height:30px;border-radius:10px}.roger-hero{display:grid;grid-template-columns:100px 1fr;align-items:center;padding:13px;background:linear-gradient(135deg,#eaf7ff,#f6efff)}.roger-hero p{font-size:.75rem;margin:4px 0;color:#5d7187}.roger-dog{text-align:center}.roger-dog .ears{font-size:20px;color:#9b613a;height:12px}.roger-dog .face{font-size:56px;animation:floaty 2.5s infinite}.roger-dog .stetho{font-size:18px;margin-top:-6px}.roger-messages{padding:13px;display:grid;gap:8px;overflow:auto;min-height:120px}.msg{padding:9px 11px;border-radius:14px;max-width:88%;white-space:pre-wrap;font-size:.84rem}.msg.bot{background:#f1f5fb;border-bottom-left-radius:4px}.msg.user{background:#5d83ef;color:#fff;justify-self:end;border-bottom-right-radius:4px}.loading{opacity:.65}.roger-quick{display:flex;gap:6px;padding:0 12px 10px;overflow:auto}.roger-quick button{border:0;border-radius:999px;padding:7px 9px;background:#eef4ff;color:#4c68b3;white-space:nowrap;font-size:.72rem}.roger-input{display:flex;gap:7px;padding:10px;border-top:1px solid #e7edf5}.roger-input input{border-radius:999px}.roger-input button{width:42px;border:0;border-radius:50%;background:#5d83ef;color:#fff}.roger-disclaimer{padding:0 12px 10px;text-align:center;font-size:.63rem}.bottom-nav{display:none}dialog{border:0;border-radius:24px;padding:0;box-shadow:0 35px 100px rgba(42,60,85,.3);width:min(700px,94vw)}dialog::backdrop{background:rgba(30,48,72,.35);backdrop-filter:blur(5px)}.dialog-form{padding:22px}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}@keyframes bounce{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-13px) rotate(2deg)}}@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}@keyframes pulse{0%,100%{box-shadow:0 14px 35px rgba(57,91,132,.28)}50%{box-shadow:0 14px 35px rgba(57,91,132,.28),0 0 0 10px rgba(94,162,240,.12)}}@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.mobile-only{display:none}
@media(max-width:1100px){.app-shell{grid-template-columns:86px minmax(0,1fr)}.sidebar{padding:20px 12px}.brand div:not(.brand-mark),.sidebar nav span,.nav-label,.sidebar-mascot b,.sidebar-mascot small,.user-card div:not(.avatar){display:none}.sidebar nav a{justify-content:center;font-size:22px}.sidebar-mascot{padding:8px}.sidebar-mascot .mini-roger{font-size:38px}.user-card{justify-content:center}.settings-layout,.grid-2{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.api-row{grid-template-columns:60px 1fr 1.6fr 80px;}.api-row .api-status,.api-row button{grid-row:2}.hero-mascots{font-size:75px}}
@media(max-width:720px){.app-shell{display:block}.sidebar{position:fixed;left:-285px;width:270px;height:100dvh;transition:.25s}.sidebar.open{left:0;box-shadow:20px 0 70px rgba(24,50,74,.25)}.brand div:not(.brand-mark),.sidebar nav span,.nav-label,.sidebar-mascot b,.sidebar-mascot small,.user-card div:not(.avatar){display:block}.sidebar nav a{justify-content:flex-start;font-size:1rem}.mobile-only{display:inline-flex}.topbar{height:64px;padding:0 12px}.role-pill{display:none}.page{padding:14px 12px 88px}.flash{margin:10px 12px}.hero-card,.admin-banner,.settings-hero{padding:22px;min-height:auto}.hero-mascots{position:absolute;right:-12px;bottom:-10px;opacity:.36;font-size:70px}.hero-card>div:first-child{z-index:2}.stats-grid{grid-template-columns:1fr 1fr;gap:9px}.stat{padding:12px;gap:8px}.stat>span{width:40px;height:40px;font-size:20px}.stat b{font-size:1.25rem}.grid-2,.settings-layout{gap:12px;margin:12px 0}.card{padding:16px}.section-head{align-items:flex-start}.search{width:100%}.search input{min-width:0}.page-head{display:grid}.pet-header{align-items:flex-start;flex-wrap:wrap}.pet-portrait{width:90px;height:90px;font-size:55px}.pet-kpis{width:100%;overflow:auto}.pet-kpis div{flex:1}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.theme-picker{grid-template-columns:repeat(2,1fr)}.api-row{grid-template-columns:55px 1fr}.api-row>*{grid-column:auto!important;grid-row:auto!important}.api-row input[name=api_key]{grid-column:1/-1}.login-page{grid-template-columns:1fr;padding:18px}.login-art p{display:none}.login-pets{font-size:74px}.login-art h1{font-size:2.1rem}.login-card{padding:24px}.roger-fab{width:62px;height:62px;right:16px;bottom:78px;font-size:31px}.roger-box{right:10px;bottom:145px;max-height:70dvh}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:66px;background:rgba(255,255,255,.94);backdrop-filter:blur(20px);border-top:1px solid #e4ebf3;display:grid;grid-template-columns:repeat(4,1fr);z-index:80;padding-bottom:env(safe-area-inset-bottom)}.bottom-nav a,.bottom-nav button{border:0;background:transparent;display:grid;place-items:center;font-size:20px;color:#55708c}.bottom-nav span{font-size:.61rem;font-weight:900}.admin-roger,.roger-admin-mascot{font-size:48px}.table-wrap{margin:0 -10px}.triage-scale{font-size:.75rem}}
.inline-user-settings{display:grid;grid-template-columns:1.3fr .7fr 1.3fr auto;gap:6px;min-width:420px}.inline-user-settings select{padding:7px}
.privacy-panel{padding:22px;border-radius:18px;background:linear-gradient(135deg,#eef6ff,#f5f0ff);color:#5f7288}.privacy-panel>b{display:block;margin:5px 0}.privacy-panel p{margin:0;font-size:.85rem}
.hospital-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;margin-top:18px}.hospital-box{border-top:5px solid #64cda4}.box-head{display:flex;justify-content:space-between;align-items:center;font-weight:900}.hospital-pet{display:flex;align-items:center;gap:12px;font-size:50px;padding:15px 0}.hospital-pet h2,.hospital-pet p{margin:0}.hospital-pet p{font-size:.8rem;color:var(--muted)}.vitals{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.vitals span{padding:8px;background:#f3f7fb;border-radius:10px;text-align:center;font-size:.72rem;font-weight:800}
/* CLINIPET VISUAL PACK 2026 */
.sidebar{background:linear-gradient(180deg,#073d70 0%,#075985 48%,#087f86 100%);overflow:hidden}.sidebar:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 16% 12%,rgba(255,255,255,.16) 0 2px,transparent 3px),radial-gradient(circle at 82% 28%,rgba(255,255,255,.12) 0 4px,transparent 5px);background-size:70px 70px,110px 110px}.sidebar>*{position:relative;z-index:1}.brand-mark{background:linear-gradient(145deg,#5fe5dc,#8ccfff);box-shadow:0 12px 28px rgba(1,23,51,.28)}.brand-paw{animation:pawWave 2.6s ease-in-out infinite}.sidebar nav a{transition:.25s}.sidebar nav a:hover{background:linear-gradient(90deg,rgba(64,222,218,.28),rgba(106,135,255,.22));box-shadow:0 0 0 1px rgba(255,255,255,.16),0 10px 25px rgba(0,0,0,.12)}.vet-mascot-card{position:relative;min-height:142px;background:linear-gradient(145deg,rgba(120,233,231,.2),rgba(255,255,255,.08));overflow:visible}.pet-duo{height:72px;display:flex;justify-content:center;align-items:end}.pet-duo span{font-size:54px;filter:drop-shadow(0 8px 8px rgba(0,0,0,.18))}.pet-dog{animation:petBounce 2.8s infinite}.pet-cat{margin-left:-8px;animation:petBounce 3.2s .35s infinite}.mascot-bubble{position:absolute;right:-3px;top:8px;background:#fff;color:#14707b;padding:5px 9px;border-radius:14px;font-size:.69rem;font-weight:900;animation:bubblePop 3s infinite}.clinipet-welcome{position:relative;display:grid;grid-template-columns:minmax(320px,.9fr) 1.2fr;min-height:300px;border-radius:32px;overflow:hidden;background:linear-gradient(135deg,#d9f7ff 0%,#e9e2ff 52%,#ffe5ef 100%);box-shadow:var(--shadow);margin-bottom:20px}.welcome-copy{padding:38px;align-self:center;z-index:2}.welcome-copy h1{color:#17387f;margin:8px 0 10px}.welcome-copy p{max-width:590px;color:#59738e;font-size:1rem}.welcome-quote{display:inline-flex;margin-top:12px;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.7);font-weight:900;color:#365f9a}.welcome-art{position:relative;overflow:hidden}.welcome-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#e6effd 0%,transparent 25%)}.welcome-art img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(1.05)}.float-paw{position:absolute;font-style:normal;z-index:3;animation:floatPaw 4s ease-in-out infinite}.p1{left:46%;top:15%;font-size:27px}.p2{left:52%;bottom:13%;font-size:23px;animation-delay:.5s}.p3{right:5%;top:9%;font-size:27px;animation-delay:1s}.cute-stats .stat{min-height:140px;position:relative;overflow:hidden;color:#fff;border:0}.cute-stats .stat:after{content:"🐾";position:absolute;right:10px;top:5px;font-size:30px;opacity:.18}.cute-stats .stat.aqua{background:linear-gradient(135deg,#0ea5e9,#27c3d5)}.cute-stats .stat.mint{background:linear-gradient(135deg,#10b981,#46cf92)}.cute-stats .stat.lilac{background:linear-gradient(135deg,#8b5cf6,#bd4ee9)}.cute-stats .stat.peach{background:linear-gradient(135deg,#ff9f1c,#ffbd54)}.cute-stats .stat small,.cute-stats .stat em{color:rgba(255,255,255,.9)}.cute-stats .stat em{display:block;font-style:normal;font-size:.72rem;margin-top:5px}.cute-stats .stat b{font-size:2rem}.stat-mascot{font-size:42px!important;background:rgba(255,255,255,.17)!important;animation:petBounce 3s infinite}.visual-admin-grid{align-items:stretch}.activity-card,.pet-type-card{min-height:360px}.fake-chart{height:230px;border-radius:20px;background:linear-gradient(180deg,#f8fbff,#eef5ff);position:relative;overflow:hidden}.chart-grid{position:absolute;inset:0;background-image:linear-gradient(#dbe7f5 1px,transparent 1px),linear-gradient(90deg,#dbe7f5 1px,transparent 1px);background-size:16.66% 25%;opacity:.65}.fake-chart svg{position:absolute;inset:20px 16px;width:calc(100% - 32px);height:calc(100% - 40px);overflow:visible}.fake-chart path{fill:none;stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 5px 6px rgba(74,120,219,.18))}.line-a{stroke:#218bff;stroke-dasharray:1000;animation:drawLine 2.2s ease both}.line-b{stroke:#a14ef1;stroke-dasharray:1000;animation:drawLine 2.5s .2s ease both}.chart-pet{position:absolute;right:9%;top:18%;font-size:28px;animation:floatPaw 2.6s infinite}.chart-legend{display:flex;justify-content:flex-end;gap:18px;padding-top:10px;font-size:.78rem;font-weight:900}.chart-legend span:first-child{color:#218bff}.chart-legend span:last-child{color:#a14ef1}.soft-chip{background:#eef5ff;color:#4c73be;border-radius:999px;padding:7px 11px;font-size:.72rem;font-weight:900}.pet-donut{display:flex;align-items:center;justify-content:center;gap:34px;padding:12px}.donut-ring{width:178px;height:178px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#1688f5 0 62%,#8c55ef 62% 90%,#ffb62f 90%);position:relative;animation:spinIn .9s ease}.donut-ring:before{content:"";position:absolute;width:92px;height:92px;border-radius:50%;background:#fff}.donut-ring span{position:relative;font-size:31px}.pet-breakdown{display:grid;gap:13px}.pet-breakdown div{display:grid;grid-template-columns:34px 1fr;gap:2px 7px;align-items:center}.pet-breakdown div>b{font-size:.9rem}.pet-breakdown span{grid-column:2;color:var(--muted);font-size:.72rem}.sleeping-pets{text-align:center;font-size:47px;animation:petBounce 4s infinite}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.quick-grid a{min-height:110px;border-radius:22px;display:grid;place-items:center;text-align:center;padding:12px;color:#fff;font-weight:900;box-shadow:0 12px 28px rgba(49,81,118,.14);transition:.25s}.quick-grid a:hover{transform:translateY(-5px) scale(1.02)}.quick-grid a:nth-child(1){background:linear-gradient(145deg,#0ea5e9,#2679ef)}.quick-grid a:nth-child(2){background:linear-gradient(145deg,#22c55e,#47d591)}.quick-grid a:nth-child(3){background:linear-gradient(145deg,#a855f7,#7c3aed)}.quick-grid a:nth-child(4){background:linear-gradient(145deg,#fb923c,#f59e0b)}.quick-grid a:nth-child(5){background:linear-gradient(145deg,#fb7185,#ec4899)}.quick-grid a:nth-child(6){background:linear-gradient(145deg,#22c1c3,#1594bb)}.quick-grid span{font-size:31px}.tiny-mascots{font-size:31px;animation:petBounce 3s infinite}.clinic-love-banner{margin:20px 0 10px;padding:24px 32px;border-radius:28px;background:linear-gradient(90deg,#1f8cf5,#4abce1,#74ded0);color:#fff;display:flex;justify-content:space-between;align-items:center;overflow:hidden;box-shadow:var(--shadow)}.clinic-love-banner b{font-size:1.25rem}.clinic-love-banner small{color:#eaffff;margin-top:4px}.love-pets{font-size:52px;animation:petBounce 3.5s infinite}.settings-hero{background:linear-gradient(135deg,#e4f8ff,#eee7ff,#ffe8ee)}
@keyframes pawWave{0%,100%{transform:rotate(0) scale(1)}40%{transform:rotate(-12deg) scale(1.12)}70%{transform:rotate(8deg)}}@keyframes petBounce{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(2deg)}}@keyframes bubblePop{0%,15%,100%{opacity:0;transform:scale(.8)}25%,80%{opacity:1;transform:scale(1)}}@keyframes floatPaw{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-11px) rotate(8deg)}}@keyframes drawLine{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}@keyframes spinIn{from{transform:rotate(-80deg) scale(.8);opacity:0}to{transform:none;opacity:1}}
@media(max-width:1000px){.clinipet-welcome{grid-template-columns:1fr}.welcome-art{position:absolute;inset:0 0 0 46%;opacity:.42}.welcome-copy{padding:30px}.quick-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.clinipet-welcome{min-height:300px}.welcome-art{inset:0 0 0 33%;opacity:.25}.welcome-copy{padding:24px;max-width:88%}.welcome-copy h1{font-size:2rem}.cute-stats .stat{min-height:118px}.cute-stats .stat em{display:none}.quick-grid{grid-template-columns:repeat(2,1fr)}.pet-donut{flex-direction:column;gap:12px}.clinic-love-banner{padding:18px}.love-pets{font-size:34px}.activity-card,.pet-type-card{min-height:auto}}

/* =========================================================
   CLINIPET - SIDEBAR V3
   Panel izquierdo completo, organizado y responsive
   ========================================================= */

/* Escritorio / laptop */
.app-shell{
    grid-template-columns:300px minmax(0,1fr) !important;
}

.sidebar{
    width:300px !important;
    min-width:300px !important;
    height:100vh !important;
    padding:20px 16px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.28) transparent;
}

.sidebar::-webkit-scrollbar{
    width:6px;
}

.sidebar::-webkit-scrollbar-track{
    background:transparent;
}

.sidebar::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.24);
    border-radius:20px;
}

/* Marca */
.brand{
    flex-shrink:0;
    padding:2px 8px 18px !important;
}

.brand-mark{
    width:52px !important;
    height:52px !important;
    flex:0 0 52px;
}

.brand b{
    font-size:1.55rem !important;
    white-space:nowrap;
}

.brand small{
    white-space:nowrap;
}

/* Menú */
.sidebar nav{
    display:flex !important;
    flex-direction:column;
    gap:4px !important;
    flex-shrink:0;
}

.sidebar nav a{
    min-height:48px;
    padding:11px 14px !important;
    border-radius:15px !important;
    font-size:.98rem !important;
    line-height:1.15;
    transition:
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.sidebar nav a:hover{
    background:linear-gradient(
        90deg,
        rgba(92,205,225,.22),
        rgba(145,118,255,.17)
    ) !important;
    transform:translateX(4px);
    box-shadow:inset 3px 0 0 rgba(126,224,223,.8);
}

.sidebar nav a span{
    display:block !important;
    white-space:normal;
}

.nav-label{
    display:block !important;
    margin:15px 13px 4px !important;
    font-size:.69rem !important;
    letter-spacing:.20em;
}

/* ROGER más compacto */
.sidebar-mascot{
    margin-top:18px !important;
    flex-shrink:0;
    min-height:auto !important;
    padding:14px 12px !important;
}

.sidebar-mascot .pet-duo{
    font-size:34px;
    line-height:1;
    margin-bottom:6px;
}

.sidebar-mascot .pet-dog,
.sidebar-mascot .pet-cat{
    display:inline-block;
    animation:clinipetPetFloat 3s ease-in-out infinite;
}

.sidebar-mascot .pet-cat{
    animation-delay:.45s;
}

.sidebar-mascot b,
.sidebar-mascot small{
    display:block !important;
}

.mascot-bubble{
    margin:8px auto 0;
    width:max-content;
    max-width:100%;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.13);
    color:#fff;
    font-size:.76rem;
}

/* Usuario siempre visible */
.user-card{
    flex-shrink:0;
    margin-top:12px !important;
    padding-bottom:8px;
}

.user-card div:not(.avatar){
    display:block !important;
    min-width:0;
}

.user-card b,
.user-card small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Evita que el contenido principal se apriete */
.main-content{
    min-width:0;
    width:100%;
}

/* Animaciones decorativas */
@keyframes clinipetPetFloat{
    0%,100%{
        transform:translateY(0) rotate(0deg);
    }
    50%{
        transform:translateY(-6px) rotate(3deg);
    }
}

/* =========================================================
   TABLET GRANDE / iPAD HORIZONTAL
   Mantiene menú visible completo
   ========================================================= */
@media (min-width:901px) and (max-width:1250px){

    .app-shell{
        grid-template-columns:255px minmax(0,1fr) !important;
    }

    .sidebar{
        width:255px !important;
        min-width:255px !important;
        padding:16px 12px !important;
    }

    .brand-mark{
        width:45px !important;
        height:45px !important;
        flex-basis:45px;
    }

    .brand b{
        font-size:1.28rem !important;
    }

    .brand small{
        font-size:.72rem;
    }

    .sidebar nav a{
        padding:10px 11px !important;
        font-size:.91rem !important;
    }

    .sidebar-mascot{
        padding:10px !important;
    }
}

/* =========================================================
   TABLET VERTICAL / CELULAR
   El panel se convierte en drawer, pero conserva todo
   ========================================================= */
@media (max-width:900px){

    .app-shell{
        display:block !important;
    }

    .sidebar{
        position:fixed !important;
        top:0;
        left:-305px;
        width:285px !important;
        min-width:285px !important;
        height:100dvh !important;
        z-index:999 !important;
        transition:left .28s ease;
        padding:18px 14px !important;
    }

    .sidebar.open{
        left:0 !important;
        box-shadow:25px 0 80px rgba(20,45,75,.35);
    }

    .brand div:not(.brand-mark),
    .sidebar nav span,
    .nav-label,
    .sidebar-mascot b,
    .sidebar-mascot small,
    .user-card div:not(.avatar){
        display:block !important;
    }

    .sidebar nav a{
        justify-content:flex-start !important;
        font-size:.95rem !important;
    }

    .mobile-only{
        display:inline-flex !important;
    }
}

/* =========================================================
   CELULAR PEQUEÑO
   ========================================================= */
@media (max-width:520px){

    .sidebar{
        width:276px !important;
        min-width:276px !important;
        left:-296px;
    }

    .brand{
        padding-bottom:12px !important;
    }

    .sidebar nav a{
        min-height:44px;
        padding:9px 11px !important;
    }

    .nav-label{
        margin-top:12px !important;
    }

    .sidebar-mascot{
        margin-top:12px !important;
    }
}


/* =========================================================
   CLINIPET - SIDEBAR COMPACTO V4
   ========================================================= */

.app-shell{
    grid-template-columns:230px minmax(0,1fr) !important;
}

.sidebar{
    width:230px !important;
    min-width:230px !important;
    padding:14px 10px !important;
    gap:6px !important;
}

/* Marca más compacta */
.brand{
    padding:0 6px 10px !important;
    gap:10px !important;
}

.brand-mark{
    width:42px !important;
    height:42px !important;
    flex:0 0 42px !important;
    border-radius:13px !important;
}

.brand b{
    font-size:1.18rem !important;
    line-height:1.05 !important;
}

.brand small{
    font-size:.68rem !important;
    line-height:1.1 !important;
}

/* Navegación más compacta */
.sidebar nav{
    gap:2px !important;
}

.sidebar nav a{
    min-height:40px !important;
    padding:8px 10px !important;
    border-radius:12px !important;
    font-size:.86rem !important;
    gap:9px !important;
}

.sidebar nav a .nav-ico,
.sidebar nav a > :first-child{
    font-size:1.02rem !important;
    min-width:22px !important;
}

.nav-label{
    margin:10px 10px 3px !important;
    font-size:.60rem !important;
    letter-spacing:.18em !important;
}

/* Menos separación vertical */
.sidebar hr,
.sidebar .divider{
    margin:6px 0 !important;
}

/* ROGER mucho más pequeño */
.sidebar-mascot{
    margin-top:10px !important;
    padding:10px !important;
    border-radius:16px !important;
}

.sidebar-mascot .pet-duo{
    font-size:26px !important;
    margin-bottom:4px !important;
}

.sidebar-mascot b{
    font-size:.86rem !important;
}

.sidebar-mascot small{
    font-size:.68rem !important;
    line-height:1.2 !important;
}

.mascot-bubble{
    margin-top:5px !important;
    padding:4px 8px !important;
    font-size:.66rem !important;
}

/* Usuario compacto */
.user-card{
    margin-top:8px !important;
    padding:8px 8px !important;
    gap:8px !important;
}

.user-card .avatar{
    width:34px !important;
    height:34px !important;
    flex:0 0 34px !important;
}

.user-card b{
    font-size:.78rem !important;
}

.user-card small{
    font-size:.64rem !important;
}

/* Scroll discreto */
.sidebar::-webkit-scrollbar{
    width:4px !important;
}

/* Hover más sutil */
.sidebar nav a:hover{
    transform:translateX(2px) !important;
}

/* =========================================================
   LAPTOP / TABLET HORIZONTAL
   ========================================================= */
@media (min-width:901px) and (max-width:1250px){

    .app-shell{
        grid-template-columns:215px minmax(0,1fr) !important;
    }

    .sidebar{
        width:215px !important;
        min-width:215px !important;
        padding:12px 8px !important;
    }

    .brand-mark{
        width:38px !important;
        height:38px !important;
        flex-basis:38px !important;
    }

    .brand b{
        font-size:1.05rem !important;
    }

    .brand small{
        font-size:.62rem !important;
    }

    .sidebar nav a{
        min-height:38px !important;
        padding:7px 9px !important;
        font-size:.81rem !important;
    }

    .sidebar-mascot{
        padding:8px !important;
    }
}

/* =========================================================
   TABLET VERTICAL / CELULAR
   ========================================================= */
@media (max-width:900px){

    .sidebar{
        width:250px !important;
        min-width:250px !important;
        left:-270px !important;
        padding:14px 10px !important;
    }

    .sidebar.open{
        left:0 !important;
    }

    .sidebar nav a{
        min-height:40px !important;
        font-size:.86rem !important;
    }
}

/* =========================================================
   CELULAR PEQUEÑO
   ========================================================= */
@media (max-width:520px){

    .sidebar{
        width:238px !important;
        min-width:238px !important;
        left:-255px !important;
    }

    .sidebar nav a{
        min-height:38px !important;
        padding:7px 9px !important;
        font-size:.82rem !important;
    }

    .sidebar-mascot{
        display:none !important;
    }
}


/* ========================================================
   CLINIPET - FILTROS ESPECIES / RAZAS
   ======================================================== */

.clinipet-pet-filters{
    margin-bottom:18px;
    background:
        linear-gradient(135deg,
        rgba(255,255,255,.92),
        rgba(238,248,255,.92));
}

.clinipet-filter-grid{
    display:grid;
    grid-template-columns:
        minmax(200px,1.4fr)
        minmax(160px,1fr)
        minmax(200px,1.2fr);
    gap:14px;
    margin-top:14px;
}

.clinipet-filter-grid label{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-weight:700;
    font-size:.85rem;
}

.clinipet-filter-grid input,
.clinipet-filter-grid select{
    width:100%;
    min-height:44px;
    border-radius:14px;
    padding:9px 12px;
}

#filter-result-count{
    font-size:.82rem;
    opacity:.72;
}

@media(max-width:900px){

    .clinipet-filter-grid{
        grid-template-columns:1fr 1fr;
    }

    .clinipet-filter-grid label:first-child{
        grid-column:1 / -1;
    }
}

@media(max-width:600px){

    .clinipet-filter-grid{
        grid-template-columns:1fr;
    }

    .clinipet-filter-grid label:first-child{
        grid-column:auto;
    }
}



/* =========================================================
   CLINIPET ADMIN DOG ANIMATION
   ========================================================= */

.clp-hero-visual{
    position:relative;
    width:100%;
    min-height:360px;
    height:100%;
    border-radius:28px;
    overflow:hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.55), transparent 28%),
        linear-gradient(135deg, #dff4ff 0%, #cfe8ff 40%, #f5eaff 100%);
}

.clp-hero-bg{
    width:100%;
    height:100%;
    min-height:360px;
    object-fit:cover;
    display:block;
    opacity:.78;
    filter:saturate(1.06) contrast(1.02);
}

.clp-dog-stage{
    position:absolute;
    right:26px;
    bottom:10px;
    width:270px;
    height:255px;
    z-index:5;
    animation:clp-stage-float 3.4s ease-in-out infinite;
}

.clp-dog-bubble{
    position:absolute;
    top:18px;
    left:12px;
    background:rgba(255,255,255,.92);
    color:#29508f;
    font-weight:800;
    font-size:.88rem;
    padding:10px 14px;
    border-radius:999px;
    box-shadow:0 12px 28px rgba(72,117,170,.18);
    animation:clp-bubble-pop 2.9s ease-in-out infinite;
}

.clp-dog-bubble::after{
    content:"";
    position:absolute;
    right:24px;
    bottom:-8px;
    width:16px;
    height:16px;
    background:rgba(255,255,255,.92);
    transform:rotate(45deg);
    border-radius:4px;
}

.clp-dog{
    position:absolute;
    right:10px;
    bottom:0;
    width:210px;
    height:210px;
}

.clp-dog-body{
    position:absolute;
    left:52px;
    top:92px;
    width:112px;
    height:84px;
    background:linear-gradient(180deg, #f9c883 0%, #e7a55d 100%);
    border-radius:50px 54px 46px 46px;
    box-shadow:inset 0 -8px 0 rgba(188,115,48,.16);
}

.clp-dog-tail{
    position:absolute;
    left:142px;
    top:106px;
    width:64px;
    height:18px;
    background:linear-gradient(90deg, #df9755 0%, #f1b26f 100%);
    border-radius:20px;
    transform-origin:left center;
    animation:clp-tail-wag .24s ease-in-out infinite alternate;
    box-shadow:0 2px 0 rgba(149,82,26,.10);
}

.clp-dog-head{
    position:absolute;
    left:35px;
    top:38px;
    width:108px;
    height:104px;
    background:linear-gradient(180deg, #ffd69a 0%, #efb56d 100%);
    border-radius:42px 42px 36px 36px;
    box-shadow:inset 0 -6px 0 rgba(173,107,49,.12);
    animation:clp-head-bob 2s ease-in-out infinite;
}

.clp-dog-ear{
    position:absolute;
    top:6px;
    width:30px;
    height:44px;
    background:linear-gradient(180deg, #a96846 0%, #8d5638 100%);
    border-radius:16px 16px 26px 26px;
    z-index:-1;
}

.clp-dog-ear.ear-left{
    left:4px;
    transform:rotate(-18deg);
    animation:clp-ear-left 2.2s ease-in-out infinite;
}

.clp-dog-ear.ear-right{
    right:4px;
    transform:rotate(18deg);
    animation:clp-ear-right 2.2s ease-in-out infinite;
}

.clp-dog-eye{
    position:absolute;
    top:36px;
    width:10px;
    height:12px;
    background:#27324f;
    border-radius:50%;
    animation:clp-blink 4s infinite;
}

.clp-dog-eye.eye-left{ left:28px; }
.clp-dog-eye.eye-right{ right:28px; }

.clp-dog-muzzle{
    position:absolute;
    left:27px;
    top:50px;
    width:54px;
    height:32px;
    background:#ffe7ca;
    border-radius:20px;
}

.clp-dog-nose{
    position:absolute;
    left:44px;
    top:56px;
    width:18px;
    height:12px;
    background:#553544;
    border-radius:12px 12px 10px 10px;
}

.clp-dog-mouth{
    position:absolute;
    left:47px;
    top:67px;
    width:14px;
    height:10px;
    border-bottom:3px solid #82485c;
    border-radius:0 0 14px 14px;
}

.clp-dog-tongue{
    position:absolute;
    left:47px;
    top:74px;
    width:14px;
    height:18px;
    background:linear-gradient(180deg, #ff7da5 0%, #ff5e8e 100%);
    border-radius:0 0 10px 10px;
    animation:clp-tongue 1.4s ease-in-out infinite;
}

.clp-dog-blush{
    position:absolute;
    top:63px;
    width:12px;
    height:8px;
    background:rgba(255,128,170,.35);
    border-radius:50%;
}

.clp-dog-blush.blush-left{ left:18px; }
.clp-dog-blush.blush-right{ right:18px; }

.clp-dog-leg{
    position:absolute;
    top:154px;
    width:18px;
    height:42px;
    background:linear-gradient(180deg, #f0b16a 0%, #db9853 100%);
    border-radius:12px;
}

.clp-dog-leg::after{
    content:"";
    position:absolute;
    left:-2px;
    bottom:-6px;
    width:22px;
    height:12px;
    background:#f4c17d;
    border-radius:10px;
}

.clp-dog-leg.leg-1{ left:68px; }
.clp-dog-leg.leg-2{ left:92px; }
.clp-dog-leg.leg-3{ left:126px; }
.clp-dog-leg.leg-4{ left:150px; }

.clp-float{
    position:absolute;
    z-index:7;
    pointer-events:none;
}

.clp-float.paw{
    font-size:1.6rem;
    animation:clp-float-paw 4s ease-in-out infinite;
}

.clp-float.paw.paw-1{ top:32px; right:178px; animation-delay:.2s; }
.clp-float.paw.paw-2{ top:82px; right:24px; animation-delay:1.1s; }

.clp-float.heart{
    font-size:1.45rem;
    animation:clp-float-heart 3.8s ease-in-out infinite;
}

.clp-float.heart.heart-1{ top:56px; right:110px; animation-delay:.6s; }
.clp-float.heart.heart-2{ top:18px; right:56px; animation-delay:1.4s; }

@keyframes clp-tail-wag{
    0%   { transform:rotate(18deg); }
    100% { transform:rotate(-26deg); }
}

@keyframes clp-stage-float{
    0%,100% { transform:translateY(0); }
    50%     { transform:translateY(-7px); }
}

@keyframes clp-head-bob{
    0%,100% { transform:translateY(0) rotate(0deg); }
    50%     { transform:translateY(-2px) rotate(1deg); }
}

@keyframes clp-ear-left{
    0%,100% { transform:rotate(-18deg); }
    50%     { transform:rotate(-26deg); }
}

@keyframes clp-ear-right{
    0%,100% { transform:rotate(18deg); }
    50%     { transform:rotate(26deg); }
}

@keyframes clp-blink{
    0%, 44%, 48%, 100% { transform:scaleY(1); }
    46% { transform:scaleY(.1); }
}

@keyframes clp-tongue{
    0%,100% { transform:translateY(0); }
    50%     { transform:translateY(2px); }
}

@keyframes clp-float-paw{
    0%,100% { transform:translateY(0) scale(1) rotate(0deg); opacity:.95; }
    50%     { transform:translateY(-10px) scale(1.08) rotate(6deg); opacity:1; }
}

@keyframes clp-float-heart{
    0%,100% { transform:translateY(0) scale(1); opacity:.9; }
    50%     { transform:translateY(-12px) scale(1.08); opacity:1; }
}

@keyframes clp-bubble-pop{
    0%,100% { transform:translateY(0) scale(1); }
    50%     { transform:translateY(-2px) scale(1.02); }
}

/* Mejora general del héroe */
.hero-card,
.admin-hero,
.dashboard-hero{
    overflow:hidden;
}

@media (max-width:1100px){
    .clp-hero-visual{
        min-height:300px;
    }

    .clp-dog-stage{
        width:220px;
        height:220px;
        right:10px;
        bottom:4px;
        transform:scale(.92);
    }

    .clp-dog-bubble{
        font-size:.8rem;
        padding:8px 12px;
    }
}

@media (max-width:760px){
    .clp-hero-visual{
        min-height:250px;
    }

    .clp-dog-stage{
        width:180px;
        height:180px;
        right:0;
        bottom:-6px;
        transform:scale(.78);
    }

    .clp-dog-bubble{
        top:12px;
        left:4px;
        font-size:.74rem;
        padding:7px 10px;
    }
}

/* =========================================================
   CLINIPET - REFINED ADMIN HERO DOG
   Corrige perro grande, cola rara, exceso de huellas y
   oculta el banner viejo con VETCARE
   ========================================================= */

.clp-hero-visual{
    position:relative !important;
    min-height:340px !important;
    border-radius:28px !important;
    overflow:hidden !important;
    background:
        radial-gradient(circle at 82% 20%, rgba(86,173,255,.22), transparent 18%),
        radial-gradient(circle at 16% 82%, rgba(255,170,213,.18), transparent 18%),
        radial-gradient(circle at 72% 72%, rgba(132,214,255,.16), transparent 16%),
        linear-gradient(135deg, #f4f7ff 0%, #e0f5ff 52%, #f2ecff 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

/* Oculta la imagen vieja que mostraba VETCARE y saturaba el fondo */
.clp-hero-bg{
    display:none !important;
}

/* Patrón decorativo suave */
.clp-hero-visual::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(255,255,255,.75) 2px, transparent 2px);
    background-size:44px 44px;
    opacity:.18;
    pointer-events:none;
}

/* Decoración discreta arriba a la derecha */
.clp-hero-visual::after{
    content:"🐾  💗  💙";
    position:absolute;
    top:18px;
    right:24px;
    font-size:1.15rem;
    letter-spacing:.55rem;
    opacity:.9;
    pointer-events:none;
}

/* Escenario del perro: más pequeño y mejor ubicado */
.clp-dog-stage{
    position:absolute !important;
    right:26px !important;
    bottom:12px !important;
    left:auto !important;
    width:190px !important;
    height:190px !important;
    z-index:6 !important;
    animation:clp-stage-float-refined 3.6s ease-in-out infinite !important;
}

/* Burbuja mejor ubicada */
.clp-dog-bubble{
    position:absolute !important;
    top:26px !important;
    right:108px !important;
    left:auto !important;
    max-width:180px !important;
    padding:10px 14px !important;
    font-size:.82rem !important;
    font-weight:800 !important;
    color:#2f4f91 !important;
    background:rgba(255,255,255,.94) !important;
    border-radius:999px !important;
    box-shadow:0 10px 24px rgba(70,110,170,.14) !important;
    animation:clp-bubble-pop-refined 3.2s ease-in-out infinite !important;
}

.clp-dog-bubble::after{
    content:"";
    position:absolute;
    right:22px;
    bottom:-7px;
    width:13px;
    height:13px;
    background:rgba(255,255,255,.94);
    transform:rotate(45deg);
    border-radius:3px;
}

/* Contenedor del perro */
.clp-dog{
    position:absolute !important;
    right:0 !important;
    bottom:0 !important;
    width:175px !important;
    height:175px !important;
}

/* Sombra suave bajo el perro */
.clp-dog::after{
    content:"";
    position:absolute;
    left:42px;
    bottom:8px;
    width:88px;
    height:16px;
    background:rgba(68,110,170,.16);
    filter:blur(10px);
    border-radius:50%;
    z-index:0;
}

/* Cuerpo más natural */
.clp-dog-body{
    position:absolute !important;
    left:42px !important;
    top:82px !important;
    width:96px !important;
    height:62px !important;
    background:linear-gradient(180deg, #f8ca86 0%, #e6a359 100%) !important;
    border-radius:44px 46px 34px 34px !important;
    box-shadow:inset 0 -6px 0 rgba(172,102,42,.13) !important;
    z-index:2 !important;
}

/* Cola más orgánica y pequeña */
.clp-dog-tail{
    position:absolute !important;
    left:125px !important;
    top:92px !important;
    width:48px !important;
    height:14px !important;
    background:linear-gradient(90deg, #dc9658 0%, #f1b676 100%) !important;
    border-radius:20px !important;
    transform-origin:8px center !important;
    animation:clp-tail-wag-refined .28s ease-in-out infinite alternate !important;
    box-shadow:0 2px 0 rgba(142,82,32,.08) !important;
    z-index:1 !important;
}

/* Cabeza más proporcionada */
.clp-dog-head{
    position:absolute !important;
    left:28px !important;
    top:32px !important;
    width:90px !important;
    height:86px !important;
    background:linear-gradient(180deg, #ffd79b 0%, #efb46d 100%) !important;
    border-radius:38px 38px 32px 32px !important;
    box-shadow:inset 0 -5px 0 rgba(170,104,45,.10) !important;
    animation:clp-head-bob-refined 2.2s ease-in-out infinite !important;
    z-index:3 !important;
}

/* Orejas */
.clp-dog-ear{
    position:absolute !important;
    top:5px !important;
    width:24px !important;
    height:34px !important;
    background:linear-gradient(180deg, #a76846 0%, #865037 100%) !important;
    border-radius:14px 14px 18px 18px !important;
    z-index:2 !important;
}

.clp-dog-ear.ear-left{
    left:5px !important;
    transform:rotate(-18deg) !important;
    animation:clp-ear-left-refined 2.4s ease-in-out infinite !important;
}

.clp-dog-ear.ear-right{
    right:5px !important;
    transform:rotate(18deg) !important;
    animation:clp-ear-right-refined 2.4s ease-in-out infinite !important;
}

/* Ojos */
.clp-dog-eye{
    position:absolute !important;
    top:33px !important;
    width:8px !important;
    height:10px !important;
    background:#2d3450 !important;
    border-radius:50% !important;
    animation:clp-blink-refined 4.2s infinite !important;
}

.clp-dog-eye.eye-left{ left:24px !important; }
.clp-dog-eye.eye-right{ right:24px !important; }

/* Hocico */
.clp-dog-muzzle{
    position:absolute !important;
    left:24px !important;
    top:47px !important;
    width:42px !important;
    height:26px !important;
    background:#ffead0 !important;
    border-radius:18px !important;
}

.clp-dog-nose{
    position:absolute !important;
    left:36px !important;
    top:52px !important;
    width:14px !important;
    height:9px !important;
    background:#563748 !important;
    border-radius:10px !important;
}

.clp-dog-mouth{
    position:absolute !important;
    left:39px !important;
    top:61px !important;
    width:10px !important;
    height:8px !important;
    border-bottom:3px solid #854a5f !important;
    border-radius:0 0 10px 10px !important;
}

.clp-dog-tongue{
    position:absolute !important;
    left:38px !important;
    top:67px !important;
    width:11px !important;
    height:15px !important;
    background:linear-gradient(180deg, #ff85aa 0%, #ff5d8f 100%) !important;
    border-radius:0 0 9px 9px !important;
    animation:clp-tongue-refined 1.6s ease-in-out infinite !important;
}

/* Mejillas */
.clp-dog-blush{
    position:absolute !important;
    top:58px !important;
    width:10px !important;
    height:7px !important;
    background:rgba(255,130,171,.30) !important;
    border-radius:50% !important;
}

.clp-dog-blush.blush-left{ left:14px !important; }
.clp-dog-blush.blush-right{ right:14px !important; }

/* Patas menos rígidas */
.clp-dog-leg{
    position:absolute !important;
    top:136px !important;
    width:14px !important;
    height:32px !important;
    background:linear-gradient(180deg, #efb26c 0%, #d99650 100%) !important;
    border-radius:10px !important;
    z-index:1 !important;
}

.clp-dog-leg::after{
    content:"";
    position:absolute;
    left:-2px;
    bottom:-5px;
    width:18px;
    height:10px;
    background:#f3c383;
    border-radius:10px;
}

.clp-dog-leg.leg-1{ left:58px !important; }
.clp-dog-leg.leg-2{ left:78px !important; }
.clp-dog-leg.leg-3{ left:108px !important; }
.clp-dog-leg.leg-4{ left:128px !important; }

/* Menos ruido visual */
.clp-float{
    position:absolute !important;
    z-index:7 !important;
    pointer-events:none !important;
    opacity:.82 !important;
}

/* Deja solo una huella y un corazón principales */
.clp-float.paw.paw-1{
    top:18px !important;
    right:148px !important;
    font-size:1rem !important;
    animation:clp-float-paw-refined 4s ease-in-out infinite !important;
}

.clp-float.heart.heart-1{
    top:70px !important;
    right:34px !important;
    font-size:1.05rem !important;
    animation:clp-float-heart-refined 4s ease-in-out infinite !important;
}

.clp-float.paw.paw-2,
.clp-float.heart.heart-2{
    display:none !important;
}

/* Animaciones suaves */
@keyframes clp-stage-float-refined{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-5px); }
}

@keyframes clp-tail-wag-refined{
    0%{ transform:rotate(16deg); }
    100%{ transform:rotate(-20deg); }
}

@keyframes clp-head-bob-refined{
    0%,100%{ transform:translateY(0) rotate(0deg); }
    50%{ transform:translateY(-2px) rotate(.8deg); }
}

@keyframes clp-ear-left-refined{
    0%,100%{ transform:rotate(-18deg); }
    50%{ transform:rotate(-24deg); }
}

@keyframes clp-ear-right-refined{
    0%,100%{ transform:rotate(18deg); }
    50%{ transform:rotate(24deg); }
}

@keyframes clp-blink-refined{
    0%,44%,48%,100%{ transform:scaleY(1); }
    46%{ transform:scaleY(.12); }
}

@keyframes clp-tongue-refined{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(2px); }
}

@keyframes clp-float-paw-refined{
    0%,100%{ transform:translateY(0) rotate(0deg); }
    50%{ transform:translateY(-8px) rotate(6deg); }
}

@keyframes clp-float-heart-refined{
    0%,100%{ transform:translateY(0) scale(1); }
    50%{ transform:translateY(-8px) scale(1.06); }
}

@keyframes clp-bubble-pop-refined{
    0%,100%{ transform:translateY(0) scale(1); }
    50%{ transform:translateY(-2px) scale(1.02); }
}

/* Responsivo */
@media (max-width:1100px){
    .clp-hero-visual{
        min-height:290px !important;
    }

    .clp-dog-stage{
        width:165px !important;
        height:165px !important;
        right:14px !important;
        bottom:8px !important;
    }

    .clp-dog-bubble{
        top:18px !important;
        right:90px !important;
        font-size:.76rem !important;
        padding:8px 11px !important;
        max-width:150px !important;
    }
}

@media (max-width:760px){
    .clp-hero-visual{
        min-height:235px !important;
    }

    .clp-dog-stage{
        width:138px !important;
        height:138px !important;
        right:8px !important;
        bottom:0 !important;
    }

    .clp-dog-bubble{
        display:none !important;
    }

    .clp-hero-visual::after{
        top:12px;
        right:14px;
        font-size:.95rem;
        letter-spacing:.35rem;
    }
}


/* =========================================================
   CLINIPET - VETERINARIAN HERO BANNER
   ========================================================= */

.clp-vet-banner{
    position:relative !important;
    width:100% !important;
    min-height:340px !important;
    border-radius:28px !important;
    overflow:hidden !important;
    background:
        linear-gradient(
            135deg,
            rgba(230,242,255,.95),
            rgba(239,233,255,.95)
        ) !important;
    box-shadow:
        0 18px 50px rgba(55,91,140,.10),
        inset 0 1px 0 rgba(255,255,255,.85);
}

.clp-vet-banner-img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:340px !important;
    object-fit:cover !important;
    object-position:center !important;
    border-radius:28px !important;
    animation:clinipetVetBreathing 5s ease-in-out infinite;
}

/* movimiento suave del banner */
@keyframes clinipetVetBreathing{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.012);
    }
}

/* brillo suave */
.clp-vet-banner::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255,255,255,.10) 45%,
            rgba(255,255,255,.26) 50%,
            rgba(255,255,255,.10) 55%,
            transparent 80%
        );
    transform:translateX(-120%);
    animation:clinipetBannerShine 7s ease-in-out infinite;
}

@keyframes clinipetBannerShine{
    0%,65%{
        transform:translateX(-120%);
    }
    85%,100%{
        transform:translateX(120%);
    }
}

/* tablet */
@media(max-width:1100px){

    .clp-vet-banner,
    .clp-vet-banner-img{
        min-height:285px !important;
    }

    .clp-vet-banner-img{
        object-position:center right !important;
    }
}

/* móvil */
@media(max-width:700px){

    .clp-vet-banner,
    .clp-vet-banner-img{
        min-height:220px !important;
    }

    .clp-vet-banner-img{
        object-position:62% center !important;
    }
}


/* ===== CLINIPET CLEAN ADMIN HERO ===== */

.clp-vet-banner{
    width:100% !important;
    min-height:420px !important;
    border-radius:28px !important;
    overflow:hidden !important;
}

.clp-vet-banner-img{
    width:100% !important;
    height:420px !important;
    object-fit:cover !important;
    object-position:center 42% !important;
    border-radius:28px !important;
}

/* Ocultar restos del hero anterior */
.clp-dog-bubble,
.clp-dog-stage,
.hero-copy,
.admin-hero-copy,
.hero-text{
    display:none !important;
}

/* Ocultar tarjetas KPI antiguas del bloque superior */
.metric-grid,
.stats-grid,
.admin-metrics,
.kpi-grid{
    display:none !important;
}

/* Hacer que la imagen ocupe todo el ancho del hero */
.admin-hero,
.hero-card,
.dashboard-hero{
    display:block !important;
    width:100% !important;
    min-height:420px !important;
    padding:0 !important;
    background:transparent !important;
}

@media(max-width:900px){
    .clp-vet-banner,
    .clp-vet-banner-img{
        min-height:300px !important;
        height:300px !important;
    }
}

@media(max-width:600px){
    .clp-vet-banner,
    .clp-vet-banner-img{
        min-height:220px !important;
        height:220px !important;
        object-position:64% center !important;
    }
}

/* =========================================================
   CLINIPET SIDEBAR PASTEL FIX V2
   ========================================================= */

.sidebar nav a{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    min-height:42px !important;
    padding:7px 10px !important;
    border-radius:13px !important;
    white-space:nowrap !important;
    color:#f5fbff !important;
    background:transparent !important;
    transition:.18s ease !important;
}

.sidebar nav a::before{
    content:"🐾";
    width:32px;
    height:32px;
    min-width:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    font-size:16px;
    color:#25466e;
    background:#e5f3ff;
    box-shadow:0 4px 12px rgba(20,60,100,.10);
}

/* Ocultar emoji/icono antiguo si existe como span */
.sidebar nav a > span:first-child{
    display:none !important;
}

/* HOME */
.sidebar nav a[href*="dashboard"]::before,
.sidebar nav a[href="/"]::before{
    content:"🏠";
    background:#d9ecff;
}

/* PETS */
.sidebar nav a[href*="pet"]::before{
    content:"🐶";
    background:#ffe4d5;
}

/* TRIAGE */
.sidebar nav a[href*="triage"]::before{
    content:"💗";
    background:#ffdce8;
}

/* HOSPITAL */
.sidebar nav a[href*="hospital"]::before{
    content:"🏥";
    background:#e9ddff;
}

/* APPOINTMENTS */
.sidebar nav a[href*="appointment"]::before,
.sidebar nav a[href*="cita"]::before{
    content:"📅";
    background:#d9f4ff;
}

/* USERS */
.sidebar nav a[href*="user"]::before{
    content:"👥";
    background:#d9f5e8;
}

/* NEWS */
.sidebar nav a[href*="news"]::before,
.sidebar nav a[href*="offer"]::before{
    content:"📣";
    background:#fff0c9;
}

/* SETTINGS */
.sidebar nav a[href*="setting"]::before{
    content:"⚙️";
    background:#e9e3ff;
}

.sidebar nav a:hover{
    background:rgba(255,255,255,.10) !important;
    transform:translateX(2px);
}

.sidebar nav a:hover::before{
    transform:scale(1.07);
}

.sidebar nav a.active{
    background:rgba(255,255,255,.12) !important;
    box-shadow:inset 3px 0 0 #8ddcf7;
}

/* Texto sin cortes */
.sidebar nav a,
.sidebar nav a *{
    line-height:1.1 !important;
}

.sidebar{
    overflow-x:hidden !important;
}

@media(max-width:1100px){
    .sidebar nav a{
        font-size:.84rem !important;
        gap:8px !important;
    }

    .sidebar nav a::before{
        width:29px;
        height:29px;
        min-width:29px;
        font-size:14px;
    }
}


/* =====================================================
   CLINIPET SIDEBAR DEFINITIVO
   ===================================================== */

/* elimina iconos artificiales duplicados */
.sidebar nav a::before{
    content:none !important;
    display:none !important;
}

/* vuelve a mostrar todos los spans */
.sidebar nav a > span{
    display:inline-flex !important;
}

/* navegación */
.sidebar nav a{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    min-height:43px !important;
    padding:7px 10px !important;
    color:#fff !important;
    white-space:nowrap !important;
    font-size:.88rem !important;
}

/* icono real */
.sidebar nav a .nav-ico{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:32px !important;
    height:32px !important;
    min-width:32px !important;

    border-radius:10px !important;
    background:#e3f3ff !important;

    font-size:16px !important;
    line-height:1 !important;
}

/* colores pastel */
.sidebar nav a:nth-child(1) .nav-ico{
    background:#dceeff !important;
}

.sidebar nav a:nth-child(2) .nav-ico{
    background:#ffe3d6 !important;
}

.sidebar nav a:nth-child(3) .nav-ico{
    background:#ffdce9 !important;
}

.sidebar nav a:nth-child(4) .nav-ico{
    background:#eadfff !important;
}

.sidebar nav a:nth-child(5) .nav-ico{
    background:#daf5ff !important;
}

.sidebar nav a:hover{
    background:rgba(255,255,255,.09) !important;
    transform:translateX(2px) !important;
}

/* evita cualquier texto oculto por CSS anterior */
.sidebar nav a span:not(.nav-ico){
    display:inline-flex !important;
    opacity:1 !important;
    visibility:visible !important;
    width:auto !important;
    height:auto !important;
    font-size:.88rem !important;
}


/* =====================================================
   CLINIPET HERO CLEAN
   ===================================================== */

.clp-vet-banner{
    position:relative !important;

    width:100% !important;
    height:315px !important;

    overflow:hidden !important;

    border-radius:26px !important;

    background:
        linear-gradient(
            135deg,
            #edf8ff,
            #edf1ff,
            #f5edff
        ) !important;
}

.clp-vet-banner-img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    /*
       desplaza el foco hacia
       veterinaria + perro
    */
    object-position:76% 20% !important;

    border-radius:26px !important;

    animation:clinipetHeroSoft 7s ease-in-out infinite !important;
}

@keyframes clinipetHeroSoft{

    0%,100%{
        transform:scale(1.01);
    }

    50%{
        transform:scale(1.025);
    }
}

/* elimina cualquier resto de ROGER del hero */
.clp-dog-stage,
.clp-dog-bubble,
.clp-float{
    display:none !important;
}

/* responsive */
@media(max-width:900px){

    .clp-vet-banner{
        height:270px !important;
    }

    .clp-vet-banner-img{
        object-position:72% 20% !important;
    }
}

@media(max-width:600px){

    .clp-vet-banner{
        height:215px !important;
    }

    .clp-vet-banner-img{
        object-position:77% 20% !important;
    }
}


/* =========================================================
   CLINIPET - SIDEBAR FINAL COMPACTO
   ========================================================= */

.app-shell{
    grid-template-columns:220px minmax(0,1fr) !important;
}

.sidebar{
    width:220px !important;
    min-width:220px !important;
    height:100vh !important;
    padding:12px 10px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
}

/* BRAND */
.brand{
    padding:2px 6px 12px !important;
    gap:9px !important;
}

.brand-mark{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    border-radius:12px !important;
}

.brand b{
    font-size:1.08rem !important;
    line-height:1 !important;
}

.brand small{
    font-size:.62rem !important;
    line-height:1.1 !important;
}

/* MENU */
.sidebar nav{
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
}

.sidebar nav a{
    display:flex !important;
    align-items:center !important;
    gap:9px !important;

    min-height:40px !important;
    padding:6px 8px !important;

    border-radius:12px !important;

    color:#f7fbff !important;

    font-size:.82rem !important;
    font-weight:700 !important;

    white-space:nowrap !important;

    background:transparent !important;

    transition:
        background .18s ease,
        transform .18s ease !important;
}

/* ICONO */
.sidebar nav a .nav-ico{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:30px !important;
    height:30px !important;
    min-width:30px !important;

    border-radius:9px !important;

    font-size:14px !important;

    background:#dff1ff !important;

    box-shadow:
        0 4px 10px rgba(30,60,95,.10),
        inset 0 1px 0 rgba(255,255,255,.8) !important;
}

/* COLORES PASTEL */
.sidebar nav a[href*="pet"] .nav-ico{
    background:#ffe3d7 !important;
}

.sidebar nav a[href*="triage"] .nav-ico{
    background:#ffdce9 !important;
}

.sidebar nav a[href*="hospital"] .nav-ico{
    background:#eadfff !important;
}

.sidebar nav a[href*="appointment"] .nav-ico{
    background:#daf4ff !important;
}

.sidebar nav a[href*="user"] .nav-ico{
    background:#dff5e8 !important;
}

.sidebar nav a[href*="news"] .nav-ico,
.sidebar nav a[href*="offer"] .nav-ico{
    background:#fff0c9 !important;
}

.sidebar nav a[href*="setting"] .nav-ico{
    background:#e8e2ff !important;
}

/* HOVER */
.sidebar nav a:hover{
    background:rgba(255,255,255,.08) !important;
    transform:translateX(2px) !important;
}

.sidebar nav a.active{
    background:rgba(255,255,255,.12) !important;
    box-shadow:inset 3px 0 0 #8ad9f2 !important;
}

/* ADMIN LABEL */
.nav-label{
    margin:10px 8px 3px !important;
    font-size:.58rem !important;
    letter-spacing:.18em !important;
    color:rgba(197,231,245,.82) !important;
}

/* ROGER */
.sidebar-mascot{
    margin-top:10px !important;
    padding:9px !important;

    border-radius:15px !important;

    background:
        linear-gradient(
            135deg,
            rgba(123,213,236,.16),
            rgba(194,174,255,.14)
        ) !important;

    border:1px solid rgba(255,255,255,.16) !important;
}

.sidebar-mascot .pet-duo{
    font-size:25px !important;
    margin-bottom:3px !important;
}

.sidebar-mascot b{
    font-size:.82rem !important;
}

.sidebar-mascot small{
    font-size:.64rem !important;
}

/* USER */
.user-card{
    margin-top:8px !important;
    padding:7px !important;
    gap:7px !important;

    border-radius:12px !important;

    background:rgba(255,255,255,.06) !important;
}

.user-card .avatar{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
}

.user-card b{
    font-size:.75rem !important;
}

.user-card small{
    font-size:.60rem !important;
}

/* SCROLLBAR */
.sidebar::-webkit-scrollbar{
    width:4px !important;
}

.sidebar::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.22) !important;
    border-radius:20px !important;
}

/* LAPTOP / IPAD HORIZONTAL */
@media(min-width:901px) and (max-width:1200px){

    .app-shell{
        grid-template-columns:205px minmax(0,1fr) !important;
    }

    .sidebar{
        width:205px !important;
        min-width:205px !important;
    }

    .sidebar nav a{
        font-size:.78rem !important;
        gap:7px !important;
    }

    .sidebar nav a .nav-ico{
        width:28px !important;
        height:28px !important;
        min-width:28px !important;
    }
}

/* TABLET VERTICAL */
@media(max-width:900px){

    .app-shell{
        display:block !important;
    }

    .sidebar{
        position:fixed !important;

        top:0;
        left:-245px;

        width:230px !important;
        min-width:230px !important;

        height:100dvh !important;

        z-index:999 !important;

        transition:left .25s ease !important;

        box-shadow:20px 0 45px rgba(20,40,70,.22);
    }

    .sidebar.open{
        left:0 !important;
    }
}

/* CELULAR */
@media(max-width:520px){

    .sidebar{
        width:218px !important;
        min-width:218px !important;
        left:-235px !important;
    }

    .sidebar.open{
        left:0 !important;
    }

    .sidebar-mascot{
        display:none !important;
    }

    .sidebar nav a{
        min-height:38px !important;
        font-size:.78rem !important;
    }
}


/* =========================================================
   CLINIPET - SIDEBAR FINAL COMPACTO
   ========================================================= */

.app-shell{
    grid-template-columns:220px minmax(0,1fr) !important;
}

.sidebar{
    width:220px !important;
    min-width:220px !important;
    height:100vh !important;
    padding:12px 10px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
}

/* BRAND */
.brand{
    padding:2px 6px 12px !important;
    gap:9px !important;
}

.brand-mark{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    border-radius:12px !important;
}

.brand b{
    font-size:1.08rem !important;
    line-height:1 !important;
}

.brand small{
    font-size:.62rem !important;
    line-height:1.1 !important;
}

/* MENU */
.sidebar nav{
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
}

.sidebar nav a{
    display:flex !important;
    align-items:center !important;
    gap:9px !important;

    min-height:40px !important;
    padding:6px 8px !important;

    border-radius:12px !important;

    color:#f7fbff !important;

    font-size:.82rem !important;
    font-weight:700 !important;

    white-space:nowrap !important;

    background:transparent !important;

    transition:
        background .18s ease,
        transform .18s ease !important;
}

/* ICONO */
.sidebar nav a .nav-ico{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:30px !important;
    height:30px !important;
    min-width:30px !important;

    border-radius:9px !important;

    font-size:14px !important;

    background:#dff1ff !important;

    box-shadow:
        0 4px 10px rgba(30,60,95,.10),
        inset 0 1px 0 rgba(255,255,255,.8) !important;
}

/* COLORES PASTEL */
.sidebar nav a[href*="pet"] .nav-ico{
    background:#ffe3d7 !important;
}

.sidebar nav a[href*="triage"] .nav-ico{
    background:#ffdce9 !important;
}

.sidebar nav a[href*="hospital"] .nav-ico{
    background:#eadfff !important;
}

.sidebar nav a[href*="appointment"] .nav-ico{
    background:#daf4ff !important;
}

.sidebar nav a[href*="user"] .nav-ico{
    background:#dff5e8 !important;
}

.sidebar nav a[href*="news"] .nav-ico,
.sidebar nav a[href*="offer"] .nav-ico{
    background:#fff0c9 !important;
}

.sidebar nav a[href*="setting"] .nav-ico{
    background:#e8e2ff !important;
}

/* HOVER */
.sidebar nav a:hover{
    background:rgba(255,255,255,.08) !important;
    transform:translateX(2px) !important;
}

.sidebar nav a.active{
    background:rgba(255,255,255,.12) !important;
    box-shadow:inset 3px 0 0 #8ad9f2 !important;
}

/* ADMIN LABEL */
.nav-label{
    margin:10px 8px 3px !important;
    font-size:.58rem !important;
    letter-spacing:.18em !important;
    color:rgba(197,231,245,.82) !important;
}

/* ROGER */
.sidebar-mascot{
    margin-top:10px !important;
    padding:9px !important;

    border-radius:15px !important;

    background:
        linear-gradient(
            135deg,
            rgba(123,213,236,.16),
            rgba(194,174,255,.14)
        ) !important;

    border:1px solid rgba(255,255,255,.16) !important;
}

.sidebar-mascot .pet-duo{
    font-size:25px !important;
    margin-bottom:3px !important;
}

.sidebar-mascot b{
    font-size:.82rem !important;
}

.sidebar-mascot small{
    font-size:.64rem !important;
}

/* USER */
.user-card{
    margin-top:8px !important;
    padding:7px !important;
    gap:7px !important;

    border-radius:12px !important;

    background:rgba(255,255,255,.06) !important;
}

.user-card .avatar{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
}

.user-card b{
    font-size:.75rem !important;
}

.user-card small{
    font-size:.60rem !important;
}

/* SCROLLBAR */
.sidebar::-webkit-scrollbar{
    width:4px !important;
}

.sidebar::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.22) !important;
    border-radius:20px !important;
}

/* LAPTOP / IPAD HORIZONTAL */
@media(min-width:901px) and (max-width:1200px){

    .app-shell{
        grid-template-columns:205px minmax(0,1fr) !important;
    }

    .sidebar{
        width:205px !important;
        min-width:205px !important;
    }

    .sidebar nav a{
        font-size:.78rem !important;
        gap:7px !important;
    }

    .sidebar nav a .nav-ico{
        width:28px !important;
        height:28px !important;
        min-width:28px !important;
    }
}

/* TABLET VERTICAL */
@media(max-width:900px){

    .app-shell{
        display:block !important;
    }

    .sidebar{
        position:fixed !important;

        top:0;
        left:-245px;

        width:230px !important;
        min-width:230px !important;

        height:100dvh !important;

        z-index:999 !important;

        transition:left .25s ease !important;

        box-shadow:20px 0 45px rgba(20,40,70,.22);
    }

    .sidebar.open{
        left:0 !important;
    }
}

/* CELULAR */
@media(max-width:520px){

    .sidebar{
        width:218px !important;
        min-width:218px !important;
        left:-235px !important;
    }

    .sidebar.open{
        left:0 !important;
    }

    .sidebar-mascot{
        display:none !important;
    }

    .sidebar nav a{
        min-height:38px !important;
        font-size:.78rem !important;
    }
}


/* =========================================================
   CLINIPET - DASHBOARD BLOQUE ÚNICO
   Usuarios + Accesos rápidos + Mascotas por tipo
   ========================================================= */

/* Contenedor general de la sección inferior */
.admin-dashboard-grid,
.dashboard-lower-grid,
.dashboard-content-grid,
.admin-panels-grid{
    display:grid !important;
    grid-template-columns:
        minmax(360px,1.35fr)
        minmax(300px,1fr)
        minmax(300px,.95fr) !important;
    gap:18px !important;
    align-items:stretch !important;
}

/* Todas las tarjetas de esta zona */
.admin-dashboard-grid > *,
.dashboard-lower-grid > *,
.dashboard-content-grid > *,
.admin-panels-grid > *{
    min-width:0 !important;
    height:100% !important;
}

/* ---------------------------------------------------------
   USUARIOS
   --------------------------------------------------------- */

.users-card,
.team-card,
.admin-users-card{
    padding:22px !important;
    min-height:340px !important;
}

.users-card .section-head,
.team-card .section-head,
.admin-users-card .section-head{
    margin-bottom:14px !important;
}

.users-card table,
.team-card table,
.admin-users-card table{
    width:100% !important;
}

.users-card th,
.team-card th,
.admin-users-card th{
    font-size:.70rem !important;
    letter-spacing:.06em !important;
}

.users-card td,
.team-card td,
.admin-users-card td{
    padding-top:11px !important;
    padding-bottom:11px !important;
}

/* Botón crear usuario */
.users-card .btn,
.team-card .btn,
.admin-users-card .btn{
    border-radius:13px !important;
    padding:9px 15px !important;
}

/* ---------------------------------------------------------
   ACCESOS RÁPIDOS
   --------------------------------------------------------- */

.quick-actions-card,
.quick-actions,
.admin-quick-actions{
    padding:22px !important;
    min-height:340px !important;
}

.quick-actions-grid,
.quick-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
    margin-top:14px !important;
}

.quick-actions-grid a,
.quick-grid a,
.quick-actions-card a{
    min-height:96px !important;
    padding:13px 10px !important;
    border-radius:18px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    text-align:center !important;
    transition:
        transform .18s ease,
        box-shadow .18s ease !important;
}

.quick-actions-grid a:hover,
.quick-grid a:hover,
.quick-actions-card a:hover{
    transform:translateY(-3px) !important;
    box-shadow:0 12px 24px rgba(40,70,110,.14) !important;
}

.quick-actions-grid a > :first-child,
.quick-grid a > :first-child{
    font-size:1.45rem !important;
}

/* ---------------------------------------------------------
   MASCOTAS POR TIPO
   --------------------------------------------------------- */

.pet-types-card,
.patients-card,
.pets-chart-card{
    padding:22px !important;
    min-height:340px !important;
    max-height:340px !important;
    overflow:hidden !important;
}

.pet-types-card .section-head,
.patients-card .section-head,
.pets-chart-card .section-head{
    margin-bottom:10px !important;
}

.pet-types-body,
.pet-chart-layout,
.pets-type-layout{
    display:grid !important;
    grid-template-columns:150px 1fr !important;
    gap:18px !important;
    align-items:center !important;
    justify-content:center !important;
    max-width:100% !important;
    margin:10px auto 0 !important;
}

/* Donut más compacto */
.pet-types-chart,
.pet-chart,
.donut-chart,
.donut,
.pet-donut{
    width:150px !important;
    height:150px !important;
    max-width:150px !important;
    max-height:150px !important;
    margin:0 auto !important;
}

/* Leyenda compacta */
.pet-types-legend,
.pet-legend,
.chart-legend{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
}

.pet-types-legend > *,
.pet-legend > *,
.chart-legend > *{
    padding:5px 6px !important;
    min-width:0 !important;
}

.pet-types-legend strong,
.pet-legend strong,
.chart-legend strong{
    font-size:.87rem !important;
}

.pet-types-legend small,
.pet-legend small,
.chart-legend small{
    font-size:.68rem !important;
}

/* Decoración inferior mucho más discreta */
.pet-types-decor,
.pet-chart-decor,
.chart-pets{
    margin:8px auto 0 !important;
    font-size:1.4rem !important;
    gap:6px !important;
}

/* Evitar espacio blanco excesivo */
.pet-types-card,
.patients-card,
.pets-chart-card,
.users-card,
.team-card,
.admin-users-card,
.quick-actions-card,
.quick-actions,
.admin-quick-actions{
    margin-bottom:0 !important;
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media(max-width:1250px){

    .admin-dashboard-grid,
    .dashboard-lower-grid,
    .dashboard-content-grid,
    .admin-panels-grid{
        grid-template-columns:
            minmax(340px,1.2fr)
            minmax(280px,1fr) !important;
    }

    .pet-types-card,
    .patients-card,
    .pets-chart-card{
        grid-column:1 / -1 !important;
        min-height:260px !important;
        max-height:none !important;
    }

    .pet-types-body,
    .pet-chart-layout,
    .pets-type-layout{
        grid-template-columns:180px 220px !important;
        justify-content:center !important;
    }
}

/* ---------------------------------------------------------
   MÓVIL
   --------------------------------------------------------- */

@media(max-width:760px){

    .admin-dashboard-grid,
    .dashboard-lower-grid,
    .dashboard-content-grid,
    .admin-panels-grid{
        grid-template-columns:1fr !important;
    }

    .users-card,
    .team-card,
    .admin-users-card,
    .quick-actions-card,
    .quick-actions,
    .admin-quick-actions,
    .pet-types-card,
    .patients-card,
    .pets-chart-card{
        min-height:auto !important;
        max-height:none !important;
    }

    .quick-actions-grid,
    .quick-grid{
        grid-template-columns:repeat(2,1fr) !important;
    }

    .pet-types-body,
    .pet-chart-layout,
    .pets-type-layout{
        grid-template-columns:1fr !important;
    }
}


/* =========================================================
   CLINIPET - MINI DASHBOARD HORIZONTAL
   ========================================================= */

.mini-dash-strip{
    margin: 18px 0 0 0 !important;
    padding: 18px 20px !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(238,245,255,.95), rgba(246,239,255,.92)) !important;
    box-shadow: 0 12px 28px rgba(65,85,120,.08) !important;
    overflow: hidden !important;
}

.mini-dash-header{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    margin-bottom:14px !important;
}

.mini-dash-kicker{
    font-size:.72rem !important;
    font-weight:800 !important;
    letter-spacing:.14em !important;
    color:#6285ff !important;
    margin-bottom:4px !important;
}

.mini-dash-header h3{
    margin:0 !important;
    font-size:1.12rem !important;
    color:#1f3554 !important;
}

.mini-dash-note{
    font-size:.82rem !important;
    color:#7185a2 !important;
    white-space:nowrap !important;
}

.mini-dash-row{
    display:flex !important;
    gap:12px !important;
    overflow-x:auto !important;
    padding-bottom:2px !important;
    scroll-behavior:smooth !important;
}

.mini-dash-row::-webkit-scrollbar{
    height:6px !important;
}

.mini-dash-row::-webkit-scrollbar-thumb{
    background:rgba(130,150,200,.35) !important;
    border-radius:999px !important;
}

.mini-dash-card{
    flex:0 0 185px !important;
    min-height:88px !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    padding:14px 14px !important;
    border-radius:18px !important;
    text-decoration:none !important;
    color:#fff !important;
    box-shadow:0 10px 18px rgba(60,90,130,.10) !important;
    transition:transform .18s ease, box-shadow .18s ease !important;
}

.mini-dash-card:hover{
    transform:translateY(-3px) !important;
    box-shadow:0 14px 24px rgba(60,90,130,.16) !important;
}

.mini-dash-icon{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.18) !important;
    font-size:1.2rem !important;
}

.mini-dash-text strong{
    display:block !important;
    font-size:.95rem !important;
    line-height:1.05 !important;
    margin-bottom:4px !important;
    color:#fff !important;
}

.mini-dash-text small{
    display:block !important;
    font-size:.74rem !important;
    line-height:1.18 !important;
    color:rgba(255,255,255,.88) !important;
}

/* Colores pastel veterinarios */
.mini-dash-card.pets{
    background:linear-gradient(135deg,#35b0f3,#4087f2) !important;
}

.mini-dash-card.citas{
    background:linear-gradient(135deg,#3ccf7b,#34b98d) !important;
}

.mini-dash-card.triage{
    background:linear-gradient(135deg,#9d5df5,#7d44ee) !important;
}

.mini-dash-card.hospi{
    background:linear-gradient(135deg,#ffab38,#f58a22) !important;
}

.mini-dash-card.usuarios{
    background:linear-gradient(135deg,#f4679a,#df4c8d) !important;
}

.mini-dash-card.roger{
    background:linear-gradient(135deg,#32bfd0,#2f92bf) !important;
}

/* Responsive */
@media(max-width:900px){
    .mini-dash-strip{
        padding:16px !important;
    }

    .mini-dash-header{
        flex-direction:column !important;
        align-items:flex-start !important;
    }

    .mini-dash-note{
        white-space:normal !important;
    }
}

@media(max-width:600px){
    .mini-dash-card{
        flex:0 0 165px !important;
        min-height:82px !important;
        padding:12px !important;
    }

    .mini-dash-icon{
        width:38px !important;
        height:38px !important;
        min-width:38px !important;
    }

    .mini-dash-header h3{
        font-size:1rem !important;
    }
}


/* =========================================================
   CLINIPET - POSICIÓN DEFINITIVA MINI DASHBOARD
   ========================================================= */

.mini-dashboard-position{
    position:relative !important;
    display:block !important;
    width:100% !important;
    clear:both !important;

    margin:22px 0 20px 0 !important;
    padding:0 !important;

    z-index:1 !important;
}

.mini-dashboard-position .mini-dash-strip{
    position:relative !important;

    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    transform:none !important;

    width:100% !important;
    max-width:none !important;

    margin:0 !important;

    box-sizing:border-box !important;

    border-radius:22px !important;
}

/* Una sola fila horizontal */
.mini-dashboard-position .mini-dash-row{
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;

    gap:11px !important;

    width:100% !important;

    overflow:visible !important;
}

/* tarjetas compactas */
.mini-dashboard-position .mini-dash-card{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    min-height:82px !important;

    padding:12px !important;

    box-sizing:border-box !important;
}

/* No puede superponerse al banner */
.clp-vet-banner,
.admin-hero,
.dashboard-hero,
.hero-card{
    position:relative !important;
    z-index:2 !important;
}

.mini-dashboard-position{
    z-index:1 !important;
}

/* TABLET */
@media(max-width:1200px){

    .mini-dashboard-position .mini-dash-row{
        grid-template-columns:repeat(3,1fr) !important;
    }
}

/* CELULAR */
@media(max-width:650px){

    .mini-dashboard-position{
        margin-top:14px !important;
    }

    .mini-dashboard-position .mini-dash-row{
        grid-template-columns:repeat(2,1fr) !important;
    }

    .mini-dashboard-position .mini-dash-card{
        min-height:76px !important;
    }
}


/* =========================================================
   CLINIPET DASHBOARD FINAL
   ========================================================= */

.clp-final-hero{
    display:grid;
    grid-template-columns:.82fr 1.18fr;
    min-height:315px;
    margin-bottom:14px;
    border-radius:28px;
    overflow:hidden;
    background:linear-gradient(135deg,#eaf8ff,#edf0ff,#f5eeff);
    box-shadow:0 14px 36px rgba(54,82,120,.08);
}

.clp-final-copy{
    padding:42px 38px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.clp-final-eyebrow{
    font-size:.70rem;
    font-weight:900;
    letter-spacing:.18em;
    color:#6681ff;
}

.clp-final-copy h1{
    margin:12px 0 14px;
    font-size:2.25rem;
    line-height:1.05;
    color:#173d7c;
}

.clp-final-copy p{
    margin:0;
    max-width:520px;
    color:#667b98;
    line-height:1.5;
}

.clp-final-quote{
    margin-top:26px;
    width:max-content;
    max-width:100%;
    padding:11px 15px;
    border-radius:999px;
    background:rgba(255,255,255,.82);
    color:#31558c;
    font-weight:800;
}

.clp-final-image{
    min-width:0;
    overflow:hidden;
}

.clp-final-image img{
    width:100%;
    height:100%;
    min-height:315px;
    display:block;
    object-fit:cover;
    object-position:center;
}


/* =========================================================
   ACCESOS DESTACADOS
   ========================================================= */

.clp-feature-row{
    display:grid;
    grid-template-columns:180px 210px;
    gap:8px;
    margin:0 0 12px;
}

.clp-feature{
    min-height:58px;
    padding:10px 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-decoration:none;
    color:white;
    font-weight:800;
    border-radius:7px;
    transition:.18s ease;
}

.clp-feature:hover{
    transform:translateY(-2px);
}

.clp-feature.users{
    background:linear-gradient(135deg,#2c9cf0,#237fe6);
}

.clp-feature.appearance{
    background:linear-gradient(135deg,#28c2cb,#20a8b5);
}


/* =========================================================
   MINI DASHBOARD
   ========================================================= */

.clp-final-mini{
    padding:13px 14px 14px;
    border-radius:20px;
    background:rgba(247,249,255,.94);
    box-shadow:0 10px 30px rgba(52,78,120,.06);
}

.clp-mini-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    margin-bottom:10px;
}

.clp-mini-heading span{
    display:block;
    font-size:.60rem;
    font-weight:900;
    letter-spacing:.15em;
    color:#6381ff;
}

.clp-mini-heading h3{
    margin:2px 0 0;
    font-size:.92rem;
    color:#273c5d;
}

.clp-mini-heading small{
    color:#8090aa;
    font-size:.67rem;
}

.clp-mini-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:8px;
}

.clp-mini-grid .mini{
    min-width:0;
    min-height:66px;
    padding:10px 11px;
    display:flex;
    align-items:center;
    gap:9px;
    border-radius:14px;
    text-decoration:none;
    color:white;
    transition:.18s ease;
}

.clp-mini-grid .mini:hover{
    transform:translateY(-2px);
    box-shadow:0 9px 16px rgba(50,75,110,.12);
}

.clp-mini-grid .mini > span{
    width:34px;
    height:34px;
    min-width:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:rgba(255,255,255,.18);
}

.clp-mini-grid strong{
    display:block;
    font-size:.76rem;
    color:#fff;
}

.clp-mini-grid small{
    display:block;
    margin-top:2px;
    font-size:.60rem;
    color:rgba(255,255,255,.9);
}

.clp-mini-grid .pets{
    background:linear-gradient(135deg,#43a7f2,#438bed);
}

.clp-mini-grid .citas{
    background:linear-gradient(135deg,#44cd84,#36b986);
}

.clp-mini-grid .triage{
    background:linear-gradient(135deg,#9b56ef,#7d43ea);
}

.clp-mini-grid .hospi{
    background:linear-gradient(135deg,#ffab35,#f58a23);
}

.clp-mini-grid .usuarios{
    background:linear-gradient(135deg,#ee6294,#df4c89);
}

.clp-mini-grid .roger{
    background:linear-gradient(135deg,#34b9ca,#2b9db9);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

    .clp-final-hero{
        grid-template-columns:1fr 1fr;
    }

    .clp-final-copy{
        padding:30px 26px;
    }

    .clp-final-copy h1{
        font-size:1.8rem;
    }

    .clp-mini-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:700px){

    .clp-final-hero{
        grid-template-columns:1fr;
    }

    .clp-final-image img{
        min-height:230px;
    }

    .clp-feature-row{
        grid-template-columns:1fr 1fr;
    }

    .clp-mini-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .clp-mini-heading{
        align-items:flex-start;
        flex-direction:column;
        gap:3px;
    }
}


/* ===== CLINIPET SIN HERO PRINCIPAL ===== */

.clp-final-hero{
    display:none !important;
}

/* subir el contenido restante */
.clp-feature-row{
    margin-top:8px !important;
}

.clp-final-mini{
    margin-top:12px !important;
}


/* Eliminar cualquier resto visual de Mascotas por tipo */
.pet-types-card,
.patients-card,
.pets-chart-card,
.pet-types-body,
.pet-chart-layout,
.pets-type-layout{
    display:none !important;
}


/* Ocultar cualquier resto de Accesos rápidos */
.quick-actions-card,
.quick-actions,
.admin-quick-actions,
.quick-actions-grid,
.quick-grid{
    display:none !important;
}


/* Limpieza de restos antiguos del dashboard */
.legacy-links,
.dashboard-legend,
.old-dashboard-links{
    display:none !important;
}


/* =========================================================
   CLINIPET - DASHBOARD SIMÉTRICO FINAL
   ========================================================= */

/* CONTENIDO PRINCIPAL */
.main-content{
    width:100% !important;
    max-width:none !important;
    padding-left:18px !important;
    padding-right:18px !important;
    box-sizing:border-box !important;
}

/* Área interior uniforme */
.main-content > *,
.dashboard-content,
.admin-dashboard,
.page-content{
    max-width:1600px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* ---------------------------------------------------------
   TARJETAS GENERALES
   --------------------------------------------------------- */

.card,
.panel,
.dashboard-card,
.clp-users-panel{
    box-sizing:border-box !important;
    border-radius:22px !important;
}

/* ---------------------------------------------------------
   EQUIPO Y PROPIETARIOS
   --------------------------------------------------------- */

.clp-users-panel{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;

    min-height:auto !important;

    padding:22px 24px !important;

    grid-column:auto !important;
}

/* si está dentro de un grid antiguo, ocupará una columna real */
.clp-users-panel table{
    width:100% !important;
    table-layout:auto !important;
}

/* ---------------------------------------------------------
   GRIDS ANTIGUOS DEL DASHBOARD
   Reorganización uniforme
   --------------------------------------------------------- */

.admin-dashboard-grid,
.dashboard-lower-grid,
.dashboard-content-grid,
.admin-panels-grid,
.dashboard-grid,
.admin-grid{
    display:grid !important;

    grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;

    gap:16px !important;

    align-items:start !important;

    width:100% !important;

    margin-top:14px !important;
    margin-bottom:14px !important;
}

/* elementos hijos ocupan todo el ancho de su columna */
.admin-dashboard-grid > *,
.dashboard-lower-grid > *,
.dashboard-content-grid > *,
.admin-panels-grid > *,
.dashboard-grid > *,
.admin-grid > *{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;

    margin:0 !important;
}

/* ---------------------------------------------------------
   QUITAR ESPACIOS VERTICALES EXCESIVOS
   --------------------------------------------------------- */

.main-content section{
    margin-top:12px !important;
    margin-bottom:12px !important;
}

.main-content .card{
    margin-top:0 !important;
    margin-bottom:0 !important;
}

/* ---------------------------------------------------------
   NO DEJAR GRANDES ÁREAS VACÍAS
   --------------------------------------------------------- */

.dashboard-spacer,
.empty-dashboard-space,
.dashboard-empty,
.legacy-space{
    display:none !important;
}

/* cualquier contenedor visual antiguo con altura forzada */
.main-content [style*="min-height: 400"],
.main-content [style*="min-height:400"],
.main-content [style*="height: 400"],
.main-content [style*="height:400"]{
    min-height:auto !important;
    height:auto !important;
}

/* ---------------------------------------------------------
   TABLAS
   --------------------------------------------------------- */

.clp-users-panel th{
    padding:10px 14px !important;
}

.clp-users-panel td{
    padding:13px 14px !important;
}

/* ---------------------------------------------------------
   BOTONES
   --------------------------------------------------------- */

.clp-users-panel .btn,
.clp-users-panel button{
    min-height:42px !important;
    padding:9px 16px !important;
    border-radius:13px !important;
}

/* ---------------------------------------------------------
   MINI DASHBOARD
   Mantenerla perfectamente alineada
   --------------------------------------------------------- */

.clp-final-mini,
.mini-dashboard-position,
.mini-dash-strip{
    width:100% !important;
    max-width:1600px !important;

    margin-left:auto !important;
    margin-right:auto !important;

    box-sizing:border-box !important;
}

/* ---------------------------------------------------------
   HERO/BANNER SI AÚN EXISTE
   --------------------------------------------------------- */

.clp-final-hero,
.clp-vet-banner{
    width:100% !important;
    max-width:1600px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:1100px){

    .main-content{
        padding-left:14px !important;
        padding-right:14px !important;
    }

    .admin-dashboard-grid,
    .dashboard-lower-grid,
    .dashboard-content-grid,
    .admin-panels-grid,
    .dashboard-grid,
    .admin-grid{
        grid-template-columns:1fr !important;
    }
}

@media(max-width:600px){

    .main-content{
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .clp-users-panel{
        padding:16px 14px !important;
    }
}


/* =========================================================
   CLINIPET - USUARIOS ANCHO COMPLETO / SIMETRÍA
   ========================================================= */

.main-content{
    width:100% !important;
    max-width:none !important;
    padding:14px 18px 18px !important;
    box-sizing:border-box !important;
}

/* Reduce espacio muerto general */
.main-content section{
    margin-top:10px !important;
    margin-bottom:10px !important;
}

/* Tarjeta usuarios a ancho total */
.clp-users-full{
    width:100% !important;
    max-width:none !important;

    margin:10px 0 14px !important;

    padding:22px 26px !important;

    border-radius:24px !important;

    grid-column:1 / -1 !important;

    box-sizing:border-box !important;
}

/* Si sigue dentro de grid antiguo */
.admin-dashboard-grid,
.dashboard-lower-grid,
.dashboard-content-grid,
.admin-panels-grid,
.dashboard-grid,
.admin-grid{
    width:100% !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
}

/* Toda la tabla aprovecha ancho */
.clp-users-full table{
    width:100% !important;
    table-layout:auto !important;
}

/* Distribución columnas */
.clp-users-full th:nth-child(1),
.clp-users-full td:nth-child(1){
    width:52% !important;
}

.clp-users-full th:nth-child(2),
.clp-users-full td:nth-child(2){
    width:24% !important;
}

.clp-users-full th:nth-child(3),
.clp-users-full td:nth-child(3){
    width:24% !important;
}

/* Compactar filas */
.clp-users-full th{
    padding:9px 14px !important;
}

.clp-users-full td{
    padding:12px 14px !important;
}

/* Botón crear usuario */
.clp-users-full .btn,
.clp-users-full button{
    min-height:40px !important;
    padding:8px 15px !important;
    border-radius:12px !important;
}

/* Quitar huecos heredados */
.dashboard-spacer,
.empty-dashboard-space,
.dashboard-empty,
.legacy-space,
.legacy-links,
.dashboard-legend,
.old-dashboard-links{
    display:none !important;
}

/* Evitar alturas forzadas */
.main-content [style*="min-height"],
.main-content [style*="height"]{
    max-height:none !important;
}

/* Banner más pegado al siguiente módulo */
.clp-final-hero,
.clp-vet-banner{
    margin-bottom:10px !important;
}

/* Responsive */
@media(max-width:900px){

    .main-content{
        padding:12px !important;
    }

    .clp-users-full{
        padding:18px 16px !important;
    }

    .clp-users-full th:nth-child(1),
    .clp-users-full td:nth-child(1),
    .clp-users-full th:nth-child(2),
    .clp-users-full td:nth-child(2),
    .clp-users-full th:nth-child(3),
    .clp-users-full td:nth-child(3){
        width:auto !important;
    }
}


/* =========================================================
   CLINIPET - USUARIOS ANCHO COMPLETO / SIMETRÍA
   ========================================================= */

.main-content{
    width:100% !important;
    max-width:none !important;
    padding:14px 18px 18px !important;
    box-sizing:border-box !important;
}

/* Reduce espacio muerto general */
.main-content section{
    margin-top:10px !important;
    margin-bottom:10px !important;
}

/* Tarjeta usuarios a ancho total */
.clp-users-full{
    width:100% !important;
    max-width:none !important;

    margin:10px 0 14px !important;

    padding:22px 26px !important;

    border-radius:24px !important;

    grid-column:1 / -1 !important;

    box-sizing:border-box !important;
}

/* Si sigue dentro de grid antiguo */
.admin-dashboard-grid,
.dashboard-lower-grid,
.dashboard-content-grid,
.admin-panels-grid,
.dashboard-grid,
.admin-grid{
    width:100% !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
}

/* Toda la tabla aprovecha ancho */
.clp-users-full table{
    width:100% !important;
    table-layout:auto !important;
}

/* Distribución columnas */
.clp-users-full th:nth-child(1),
.clp-users-full td:nth-child(1){
    width:52% !important;
}

.clp-users-full th:nth-child(2),
.clp-users-full td:nth-child(2){
    width:24% !important;
}

.clp-users-full th:nth-child(3),
.clp-users-full td:nth-child(3){
    width:24% !important;
}

/* Compactar filas */
.clp-users-full th{
    padding:9px 14px !important;
}

.clp-users-full td{
    padding:12px 14px !important;
}

/* Botón crear usuario */
.clp-users-full .btn,
.clp-users-full button{
    min-height:40px !important;
    padding:8px 15px !important;
    border-radius:12px !important;
}

/* Quitar huecos heredados */
.dashboard-spacer,
.empty-dashboard-space,
.dashboard-empty,
.legacy-space,
.legacy-links,
.dashboard-legend,
.old-dashboard-links{
    display:none !important;
}

/* Evitar alturas forzadas */
.main-content [style*="min-height"],
.main-content [style*="height"]{
    max-height:none !important;
}

/* Banner más pegado al siguiente módulo */
.clp-final-hero,
.clp-vet-banner{
    margin-bottom:10px !important;
}

/* Responsive */
@media(max-width:900px){

    .main-content{
        padding:12px !important;
    }

    .clp-users-full{
        padding:18px 16px !important;
    }

    .clp-users-full th:nth-child(1),
    .clp-users-full td:nth-child(1),
    .clp-users-full th:nth-child(2),
    .clp-users-full td:nth-child(2),
    .clp-users-full th:nth-child(3),
    .clp-users-full td:nth-child(3){
        width:auto !important;
    }
}


/* =========================================================
   CLINIPET - LIMPIEZA Y ESPACIADO FINAL
   ========================================================= */

/* elimina restos visuales heredados */
.legacy-links,
.old-dashboard-links,
.dashboard-legend,
.dashboard-spacer,
.dashboard-empty,
.empty-dashboard-space{
    display:none !important;
}

/* menos espacio debajo del banner */
.clp-final-hero,
.clp-vet-banner,
.admin-hero,
.dashboard-hero,
.hero-card{
    margin-bottom:8px !important;
}

/* comprime la zona intermedia */
.main-content{
    row-gap:8px !important;
}

.main-content section{
    margin-top:6px !important;
    margin-bottom:6px !important;
}

/* subir la tarjeta de usuarios */
.clp-users-full,
.clp-users-panel,
.users-card,
.team-card,
.admin-users-card{
    margin-top:8px !important;
    margin-bottom:10px !important;
}

/* evitar bloques vacíos con altura heredada */
.main-content > div:empty,
.main-content > section:empty{
    display:none !important;
}

/* tabla de usuarios compacta */
.clp-users-full{
    width:100% !important;
    padding:20px 24px !important;
}

.clp-users-full td{
    padding-top:11px !important;
    padding-bottom:11px !important;
}

/* responsive */
@media(max-width:900px){
    .main-content section{
        margin-top:5px !important;
        margin-bottom:5px !important;
    }
}


/* LIMPIEZA FINAL DE RESTOS Citas / TRIAGE */
.main-content a[href="#"],
.main-content .legacy-links,
.main-content .dashboard-legend,
.main-content .old-dashboard-links{
    display:none !important;
}


/* =====================================================
   CLINIPET - LIMPIEZA DE ESPACIOS HUÉRFANOS
   ===================================================== */

.main-content .legacy-links,
.main-content .dashboard-legend,
.main-content .old-dashboard-links,
.main-content .dashboard-spacer,
.main-content .dashboard-empty,
.main-content .empty-dashboard-space{
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
}

/* Evita grandes huecos entre módulos */
.main-content > section:empty,
.main-content > div:empty{
    display:none !important;
}


/* =========================================================
   CLINIPET - ELIMINACIÓN DEFINITIVA BLOQUE HUÉRFANO
   Citas + TRIAGE + espacio vacío
   ========================================================= */

/* enlaces huérfanos directos en el contenido principal */
main > a[href*="appointment"],
main > a[href*="appointments"],
main > a[href*="triage"],
.main-content > a[href*="appointment"],
.main-content > a[href*="appointments"],
.main-content > a[href*="triage"]{
    display:none !important;
}

/* wrappers que únicamente contienen esos enlaces */
main > div:has(> a[href*="appointment"]):not(:has(.card)):not(:has(.mini)),
main > div:has(> a[href*="triage"]):not(:has(.card)):not(:has(.mini)),
.main-content > div:has(> a[href*="appointment"]):not(:has(.card)):not(:has(.mini)),
.main-content > div:has(> a[href*="triage"]):not(:has(.card)):not(:has(.mini)){
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
}

/* si vienen dentro de UL/OL */
main > ul:has(a[href*="appointment"]),
main > ul:has(a[href*="triage"]),
main > ol:has(a[href*="appointment"]),
main > ol:has(a[href*="triage"]),
.main-content > ul:has(a[href*="appointment"]),
.main-content > ul:has(a[href*="triage"]),
.main-content > ol:has(a[href*="appointment"]),
.main-content > ol:has(a[href*="triage"]){
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
}

/* contenedores vacíos resultantes */
main > div:empty,
main > section:empty,
.main-content > div:empty,
.main-content > section:empty{
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
}

/* No modificar navegación ni mini dashboard */
.sidebar a,
.clp-final-mini a,
.mini-dashboard-position a,
.mini-dash-strip a{
    display:flex;
}

/* Compactar el espacio entre banner y usuarios */
.clp-users-full,
.clp-users-panel{
    margin-top:8px !important;
}


/* =========================================================
   CLINIPET - HERO ALINEADO Y JUSTIFICADO
   ========================================================= */

.clp-final-hero{
    display:grid !important;
    grid-template-columns:minmax(430px,.92fr) minmax(620px,1.35fr) !important;

    width:100% !important;
    max-width:1600px !important;

    min-height:430px !important;
    height:430px !important;

    margin:0 auto 14px !important;

    border-radius:28px !important;
    overflow:hidden !important;

    background:
        linear-gradient(
            135deg,
            #e9f7ff 0%,
            #e9efff 45%,
            #f5edff 100%
        ) !important;

    box-shadow:
        0 16px 38px rgba(52,82,126,.08) !important;
}

/* PANEL IZQUIERDO */
.clp-final-copy{
    height:100% !important;
    min-height:0 !important;

    padding:42px 46px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:flex-start !important;

    box-sizing:border-box !important;
}

.clp-final-eyebrow{
    margin:0 0 14px !important;

    font-size:.75rem !important;
    font-weight:900 !important;
    letter-spacing:.18em !important;

    color:#6482ff !important;
}

.clp-final-copy h1{
    margin:0 0 16px !important;

    font-size:2.7rem !important;
    line-height:1.02 !important;
    letter-spacing:-.02em !important;

    color:#173f84 !important;
}

.clp-final-copy p{
    margin:0 !important;

    max-width:530px !important;

    font-size:1rem !important;
    line-height:1.55 !important;

    color:#647b9a !important;
}

/* FRASE */
.clp-final-quote{
    margin-top:28px !important;

    width:auto !important;
    max-width:100% !important;

    padding:12px 18px !important;

    border-radius:18px !important;

    background:rgba(255,255,255,.82) !important;

    color:#31558b !important;

    font-size:.95rem !important;
    font-weight:800 !important;

    box-shadow:
        0 8px 18px rgba(65,92,130,.05) !important;
}

/* PANEL DERECHO */
.clp-final-image{
    position:relative !important;

    width:100% !important;
    height:100% !important;

    min-width:0 !important;
    min-height:0 !important;

    overflow:hidden !important;
}

/* IMAGEN AJUSTADA AL 100% */
.clp-final-image img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    min-width:100% !important;
    min-height:100% !important;

    object-fit:cover !important;

    /*
      Ajuste pensado para mantener
      veterinaria + mascotas centradas
    */
    object-position:center 46% !important;

    border-radius:0 28px 28px 0 !important;

    transform:none !important;
}

/* Separación visual sutil */
.clp-final-image::before{
    content:"";

    position:absolute;
    inset:0 auto 0 0;

    width:46px;

    z-index:2;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(233,239,255,.88),
            transparent
        );
}


/* =========================================================
   CONTENIDO PRINCIPAL
   ========================================================= */

.main-content{
    width:100% !important;

    padding-left:18px !important;
    padding-right:18px !important;

    box-sizing:border-box !important;
}

.main-content > *{
    box-sizing:border-box !important;
}

/* Evitar hueco debajo del hero */
.clp-final-hero + *{
    margin-top:12px !important;
}


/* =========================================================
   PANTALLAS MEDIAS
   ========================================================= */

@media(max-width:1250px){

    .clp-final-hero{
        grid-template-columns:.9fr 1.1fr !important;

        height:390px !important;
        min-height:390px !important;
    }

    .clp-final-copy{
        padding:32px 32px !important;
    }

    .clp-final-copy h1{
        font-size:2.2rem !important;
    }

    .clp-final-copy p{
        font-size:.92rem !important;
    }

    .clp-final-image img{
        object-position:58% center !important;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

    .clp-final-hero{
        grid-template-columns:1fr !important;

        height:auto !important;
        min-height:0 !important;

        border-radius:24px !important;
    }

    .clp-final-copy{
        min-height:280px !important;

        padding:30px 28px !important;
    }

    .clp-final-copy h1{
        font-size:2rem !important;
    }

    .clp-final-image{
        height:300px !important;
    }

    .clp-final-image img{
        height:300px !important;

        object-position:center 42% !important;

        border-radius:0 0 24px 24px !important;
    }

    .clp-final-image::before{
        display:none !important;
    }
}


/* =========================================================
   CELULAR
   ========================================================= */

@media(max-width:600px){

    .main-content{
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .clp-final-copy{
        min-height:auto !important;

        padding:24px 20px !important;
    }

    .clp-final-copy h1{
        font-size:1.75rem !important;
    }

    .clp-final-copy p{
        font-size:.88rem !important;
    }

    .clp-final-quote{
        margin-top:20px !important;

        padding:10px 13px !important;

        font-size:.82rem !important;
    }

    .clp-final-image{
        height:230px !important;
    }

    .clp-final-image img{
        height:230px !important;

        object-position:60% center !important;
    }
}


/* =========================================================
   CLINIPET - BARRA CLÍNICA HORIZONTAL
   ========================================================= */

.clp-status-bar{
    width:100% !important;
    max-width:1600px !important;

    margin:10px auto 14px !important;

    padding:10px 12px !important;

    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;

    gap:10px !important;

    border-radius:20px !important;

    background:rgba(255,255,255,.82) !important;

    box-shadow:
        0 12px 26px rgba(61,86,126,.07) !important;

    box-sizing:border-box !important;
}

.clp-status-item{
    min-width:0 !important;

    display:flex !important;
    align-items:center !important;

    gap:10px !important;

    padding:10px 12px !important;

    border-radius:15px !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease !important;
}

.clp-status-item:hover{
    transform:translateY(-2px) !important;

    box-shadow:
        0 9px 18px rgba(54,77,112,.10) !important;
}

.clp-status-icon{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:12px !important;

    font-size:1.2rem !important;

    background:rgba(255,255,255,.65) !important;
}

.clp-status-item strong{
    display:block !important;

    font-size:1.18rem !important;
    line-height:1 !important;

    color:#213c60 !important;
}

.clp-status-item span{
    display:block !important;

    margin-top:4px !important;

    font-size:.68rem !important;
    font-weight:700 !important;

    color:#6f829c !important;

    white-space:nowrap !important;
}

.clp-status-item.pets{
    background:linear-gradient(135deg,#e3f3ff,#d8ebff) !important;
}

.clp-status-item.appointments{
    background:linear-gradient(135deg,#dcf8ea,#d2f1e2) !important;
}

.clp-status-item.vaccines{
    background:linear-gradient(135deg,#eee4ff,#e3d7ff) !important;
}

.clp-status-item.hospital{
    background:linear-gradient(135deg,#fff0da,#ffe4c2) !important;
}

.clp-status-item.birthdays{
    background:linear-gradient(135deg,#ffe4ef,#ffd8e8) !important;
}


/* TABLET */
@media(max-width:1050px){

    .clp-status-bar{
        grid-template-columns:repeat(3,1fr) !important;
    }
}


/* CELULAR */
@media(max-width:650px){

    .clp-status-bar{
        grid-template-columns:repeat(2,1fr) !important;
        padding:9px !important;
    }

    .clp-status-item{
        padding:9px !important;
    }

    .clp-status-icon{
        width:36px !important;
        height:36px !important;
        min-width:36px !important;
    }

    .clp-status-item strong{
        font-size:1rem !important;
    }

    .clp-status-item span{
        font-size:.62rem !important;
        white-space:normal !important;
    }
}


/* =====================================================
   CLINIPET - LIMPIEZA DE DUPLICADOS
   ===================================================== */

/* Estos son bloques duplicados creados por parches anteriores */
section.clp-final-mini.clp-users-panel,
.clp-users-full{
    display:none !important;
}

/* =====================================================
   CLINIPET - BARRA CLÍNICA FINAL
   ===================================================== */

.clp-status-final{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:10px !important;

    margin:10px 0 12px !important;
    padding:10px !important;

    box-sizing:border-box !important;
    border-radius:20px !important;

    background:rgba(255,255,255,.76) !important;
    box-shadow:0 10px 24px rgba(47,75,115,.06) !important;
}

.status-box{
    min-height:66px !important;

    display:flex !important;
    align-items:center !important;
    gap:11px !important;

    padding:10px 13px !important;

    border-radius:15px !important;
}

.status-box > span{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:11px !important;
    background:rgba(255,255,255,.62) !important;

    font-size:1.15rem !important;
}

.status-box b{
    display:block !important;
    font-size:1.05rem !important;
    color:#203b60 !important;
}

.status-box small{
    display:block !important;
    margin-top:2px !important;

    color:#657b98 !important;
    font-size:.67rem !important;
    font-weight:700 !important;
}

.status-box.s1{background:#dff1ff !important;}
.status-box.s2{background:#dcf7e9 !important;}
.status-box.s3{background:#ebe0ff !important;}
.status-box.s4{background:#ffecd3 !important;}
.status-box.s5{background:#ffe0eb !important;}

/* Reducir el hueco */
.clp-status-final + .card{
    margin-top:0 !important;
}

@media(max-width:1000px){
    .clp-status-final{
        grid-template-columns:repeat(3,1fr) !important;
    }
}

@media(max-width:600px){
    .clp-status-final{
        grid-template-columns:repeat(2,1fr) !important;
    }
}


/* =========================================================
   CLINIPET - DASHBOARD OBJETIVO FINAL
   ========================================================= */

/* HERO */
.clp-final-hero{
    display:grid !important;
    grid-template-columns:1fr 1.25fr !important;

    width:100% !important;
    max-width:none !important;

    min-height:360px !important;
    height:360px !important;

    margin:0 0 10px !important;

    border-radius:24px !important;
    overflow:hidden !important;

    background:
        linear-gradient(
            135deg,
            #e8f5ff,
            #e8edff,
            #f4edff
        ) !important;
}

/* TEXTO */
.clp-final-copy{
    height:100% !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    padding:30px 38px !important;

    box-sizing:border-box !important;
}

.clp-final-copy h1{
    margin:5px 0 12px !important;

    font-size:2.35rem !important;
    line-height:1.02 !important;

    color:#153e82 !important;
}

.clp-final-copy p{
    margin:0 !important;

    max-width:500px !important;

    font-size:.94rem !important;
    line-height:1.45 !important;

    color:#647b97 !important;
}

.clp-final-quote{
    margin-top:20px !important;

    padding:10px 14px !important;

    width:max-content !important;
    max-width:100% !important;

    border-radius:14px !important;

    background:rgba(255,255,255,.82) !important;

    color:#31588d !important;

    font-size:.85rem !important;
    font-weight:800 !important;
}

/* IMAGEN */
.clp-final-image{
    width:100% !important;
    height:100% !important;

    overflow:hidden !important;
}

.clp-final-image img{
    width:100% !important;
    height:100% !important;

    display:block !important;

    object-fit:cover !important;
    object-position:center 48% !important;

    border-radius:0 24px 24px 0 !important;
}


/* =========================================================
   BARRA CLÍNICA
   ========================================================= */

.clp-status-final{
    display:grid !important;

    grid-template-columns:
        repeat(5,minmax(0,1fr)) !important;

    width:100% !important;

    gap:7px !important;

    padding:7px !important;

    margin:0 0 12px !important;

    border-radius:16px !important;

    background:rgba(255,255,255,.78) !important;

    box-sizing:border-box !important;
}

.clp-status-final .status-box{
    min-height:54px !important;

    padding:7px 9px !important;

    display:flex !important;
    align-items:center !important;

    gap:8px !important;

    border-radius:12px !important;
}

.clp-status-final .status-box > span{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:9px !important;

    background:rgba(255,255,255,.65) !important;

    font-size:.95rem !important;
}

.clp-status-final .status-box b{
    display:block !important;

    font-size:.86rem !important;
    line-height:1 !important;

    color:#263d5c !important;
}

.clp-status-final .status-box small{
    display:block !important;

    margin-top:3px !important;

    font-size:.56rem !important;

    color:#71839d !important;
}


/* =========================================================
   USUARIOS DEBAJO
   ========================================================= */

.clp-users-full,
.clp-users-panel,
.users-card,
.team-card,
.admin-users-card{
    width:100% !important;

    margin:0 0 12px !important;

    box-sizing:border-box !important;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.app-shell{
    grid-template-columns:215px minmax(0,1fr) !important;
}

.sidebar{
    width:215px !important;
    min-width:215px !important;

    padding:10px 8px !important;

    overflow-x:hidden !important;
}

.sidebar nav a{
    min-height:38px !important;

    padding:5px 8px !important;

    gap:8px !important;

    font-size:.78rem !important;

    white-space:nowrap !important;
}

.sidebar-mascot{
    margin-top:8px !important;

    padding:8px !important;
}


/* =========================================================
   CONTENIDO PRINCIPAL
   ========================================================= */

.main-content{
    width:100% !important;

    padding:
        0 14px 18px 14px !important;

    box-sizing:border-box !important;
}

.main-content section{
    margin-top:8px !important;
    margin-bottom:8px !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

    .clp-final-hero{
        grid-template-columns:.95fr 1.05fr !important;
        height:330px !important;
        min-height:330px !important;
    }

    .clp-final-copy{
        padding:26px !important;
    }

    .clp-final-copy h1{
        font-size:1.9rem !important;
    }

    .clp-status-final{
        grid-template-columns:repeat(3,1fr) !important;
    }
}

@media(max-width:800px){

    .clp-final-hero{
        grid-template-columns:1fr !important;

        height:auto !important;
        min-height:0 !important;
    }

    .clp-final-image{
        height:260px !important;
    }

    .clp-final-image img{
        height:260px !important;

        border-radius:
            0 0 24px 24px !important;
    }

    .clp-status-final{
        grid-template-columns:
            repeat(2,1fr) !important;
    }
}


/* =========================================================
   CLINIPET - SIDEBAR PREMIUM FINAL
   ========================================================= */

.app-shell{
    grid-template-columns:205px minmax(0,1fr) !important;
}

/* PANEL */
.sidebar{
    width:205px !important;
    min-width:205px !important;
    height:100vh !important;

    padding:10px 8px !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    background:
        linear-gradient(
            180deg,
            #0f4f7c 0%,
            #116b89 55%,
            #118b8c 100%
        ) !important;

    box-shadow:
        8px 0 26px rgba(31,66,97,.08) !important;
}

/* MARCA */
.brand{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;

    padding:3px 6px 11px !important;
}

.brand-mark{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;

    border-radius:11px !important;

    box-shadow:
        0 7px 16px rgba(0,0,0,.10) !important;
}

.brand b{
    font-size:1rem !important;
    line-height:1 !important;
}

.brand small{
    margin-top:3px !important;
    font-size:.56rem !important;
    opacity:.90 !important;
}

/* NAVEGACIÓN */
.sidebar nav{
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
}

.sidebar nav a{
    min-height:39px !important;

    display:flex !important;
    align-items:center !important;

    gap:8px !important;

    padding:5px 8px !important;

    border-radius:11px !important;

    color:#f7fbff !important;

    font-size:.77rem !important;
    font-weight:750 !important;

    white-space:nowrap !important;

    transition:
        background .16s ease,
        transform .16s ease,
        box-shadow .16s ease !important;
}

/* ICONOS */
.sidebar nav a .nav-ico{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:9px !important;

    font-size:.90rem !important;

    box-shadow:
        0 4px 10px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.72) !important;
}

/* COLORES PASTEL */
.sidebar nav a[href="/"] .nav-ico,
.sidebar nav a[href*="dashboard"] .nav-ico{
    background:#dff0ff !important;
}

.sidebar nav a[href*="pet"] .nav-ico{
    background:#ffe3d6 !important;
}

.sidebar nav a[href*="triage"] .nav-ico{
    background:#ffdce8 !important;
}

.sidebar nav a[href*="hospital"] .nav-ico{
    background:#e9deff !important;
}

.sidebar nav a[href*="appointment"] .nav-ico{
    background:#dcf3ff !important;
}

.sidebar nav a[href*="user"] .nav-ico{
    background:#dcf5e6 !important;
}

.sidebar nav a[href*="news"] .nav-ico{
    background:#fff0cc !important;
}

.sidebar nav a[href*="setting"] .nav-ico{
    background:#e8e1ff !important;
}

/* HOVER */
.sidebar nav a:hover{
    background:rgba(255,255,255,.09) !important;
    transform:translateX(2px) !important;
}

/* ACTIVO */
.sidebar nav a.active{
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.15),
            rgba(255,255,255,.06)
        ) !important;

    box-shadow:
        inset 3px 0 0 #8ee8ef !important;
}

/* ETIQUETA ADMIN */
.nav-label{
    margin:9px 8px 3px !important;

    font-size:.54rem !important;
    font-weight:800 !important;

    letter-spacing:.18em !important;

    color:rgba(205,238,249,.78) !important;
}

/* ROGER */
.sidebar-mascot{
    margin-top:9px !important;

    padding:8px 8px 9px !important;

    border-radius:15px !important;

    background:
        linear-gradient(
            135deg,
            rgba(117,219,235,.15),
            rgba(203,182,255,.12)
        ) !important;

    border:1px solid rgba(255,255,255,.16) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        0 8px 20px rgba(0,0,0,.06) !important;
}

.sidebar-mascot .pet-duo{
    margin-bottom:1px !important;
    font-size:1.65rem !important;
}

.sidebar-mascot b{
    font-size:.78rem !important;
}

.sidebar-mascot small{
    font-size:.57rem !important;
    opacity:.90 !important;
}

/* USUARIO */
.user-card{
    margin-top:7px !important;

    padding:7px 8px !important;

    display:flex !important;
    align-items:center !important;

    gap:7px !important;

    border-radius:12px !important;

    background:rgba(255,255,255,.07) !important;
}

.user-card .avatar{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
}

.user-card b{
    font-size:.69rem !important;
    line-height:1.1 !important;
}

.user-card small{
    margin-top:2px !important;
    font-size:.53rem !important;
}

/* SCROLL */
.sidebar::-webkit-scrollbar{
    width:4px !important;
}

.sidebar::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.22) !important;
    border-radius:999px !important;
}

/* TABLET */
@media(min-width:801px) and (max-width:1100px){

    .app-shell{
        grid-template-columns:190px minmax(0,1fr) !important;
    }

    .sidebar{
        width:190px !important;
        min-width:190px !important;
    }

    .sidebar nav a{
        font-size:.72rem !important;
        gap:6px !important;
    }

    .sidebar nav a .nav-ico{
        width:26px !important;
        height:26px !important;
        min-width:26px !important;
    }
}

/* MÓVIL */
@media(max-width:800px){

    .app-shell{
        display:block !important;
    }

    .sidebar{
        position:fixed !important;

        left:-225px !important;
        top:0 !important;

        width:210px !important;
        min-width:210px !important;

        height:100dvh !important;

        z-index:9999 !important;

        transition:left .22s ease !important;
    }

    .sidebar.open{
        left:0 !important;
    }
}


/* =========================================================
   CLINIPET - HERO AJUSTADO SIN ESPACIOS MUERTOS
   ========================================================= */

.clp-final-hero{
    display:grid !important;
    grid-template-columns:43% 57% !important;
    grid-template-rows:1fr !important;

    width:100% !important;
    max-width:none !important;

    height:420px !important;
    min-height:420px !important;
    max-height:420px !important;

    margin:0 !important;
    padding:0 !important;
    gap:0 !important;

    align-items:stretch !important;

    border-radius:28px !important;
    overflow:hidden !important;

    background:
        linear-gradient(
            135deg,
            #e5f5ff 0%,
            #e7edff 48%,
            #f2eaff 100%
        ) !important;
}


/* PANEL IZQUIERDO */
.clp-final-copy{
    width:100% !important;
    height:420px !important;
    min-height:420px !important;

    margin:0 !important;

    padding:38px 44px !important;

    box-sizing:border-box !important;

    display:flex !important;
    flex-direction:column !important;

    justify-content:center !important;
    align-items:flex-start !important;

    overflow:hidden !important;
}


/* Evita espacios internos */
.clp-final-copy > :first-child{
    margin-top:0 !important;
}

.clp-final-copy > :last-child{
    margin-bottom:0 !important;
}


/* PANEL DE IMAGEN */
.clp-final-image{
    position:relative !important;

    width:100% !important;
    height:420px !important;
    min-height:420px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    align-self:stretch !important;
}


/* IMAGEN LLENANDO TODO EL ESPACIO */
.clp-final-image img{
    position:absolute !important;

    inset:0 !important;

    display:block !important;

    width:100% !important;
    height:100% !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:cover !important;

    /* centra veterinaria + mascotas */
    object-position:center center !important;

    border:0 !important;
    border-radius:0 28px 28px 0 !important;

    transform:none !important;
}


/* eliminar gradientes o capas que creen huecos */
.clp-final-image::before,
.clp-final-image::after{
    pointer-events:none !important;
}


/* El siguiente bloque queda pegado al hero */
.clp-final-hero + .clp-status-final{
    margin-top:8px !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1100px){

    .clp-final-hero{
        grid-template-columns:44% 56% !important;

        height:380px !important;
        min-height:380px !important;
        max-height:380px !important;
    }

    .clp-final-copy,
    .clp-final-image{
        height:380px !important;
        min-height:380px !important;
    }

    .clp-final-copy{
        padding:30px !important;
    }

    .clp-final-copy h1{
        font-size:2rem !important;
    }
}


/* =========================================================
   IPAD VERTICAL / MÓVIL
   ========================================================= */

@media(max-width:800px){

    .clp-final-hero{
        grid-template-columns:1fr !important;
        grid-template-rows:auto 280px !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
    }

    .clp-final-copy{
        height:auto !important;
        min-height:270px !important;

        padding:28px 24px !important;
    }

    .clp-final-image{
        height:280px !important;
        min-height:280px !important;
    }

    .clp-final-image img{
        border-radius:0 0 24px 24px !important;
        object-position:center center !important;
    }
}


/* =========================================================
   CLINIPET - SEPARACIÓN DE BLOQUES EN MASCOTAS
   ========================================================= */

.pets-page .card,
.pets-page section,
.pets-page .panel{
    margin-bottom:16px !important;
}

/* Bloque registrar propietario / mascota */
.pets-page details,
.pets-page .register-card,
.pets-page .owner-register{
    margin-bottom:16px !important;
}

/* Buscador clínico */
.pets-page .filter-card,
.pets-page .search-card,
.pets-page .clinical-search{
    margin-top:0 !important;
    margin-bottom:16px !important;
}

/* Resultado / estado vacío */
.pets-page .empty-state,
.pets-page .patients-list,
.pets-page .results-card{
    margin-top:0 !important;
}

/* Separación interna entre filtros */
.pets-page .filters-grid,
.pets-page .filter-grid{
    gap:14px !important;
}

/* Tablet / móvil */
@media(max-width:800px){
    .pets-page .card,
    .pets-page section,
    .pets-page .panel,
    .pets-page details{
        margin-bottom:12px !important;
    }
}


/* =========================================================
   CLINIPET - MÁS SEPARACIÓN ENTRE BLOQUES DE MASCOTAS
   ========================================================= */

.pets-page .card,
.pets-page section,
.pets-page .panel,
.pets-page details,
.pets-page .register-card,
.pets-page .owner-register,
.pets-page .filter-card,
.pets-page .search-card,
.pets-page .clinical-search,
.pets-page .empty-state,
.pets-page .patients-list,
.pets-page .results-card{
    margin-bottom:28px !important;
}

/* Más aire entre los filtros internos */
.pets-page .filters-grid,
.pets-page .filter-grid{
    gap:18px !important;
}

@media(max-width:800px){
    .pets-page .card,
    .pets-page section,
    .pets-page .panel,
    .pets-page details,
    .pets-page .register-card,
    .pets-page .filter-card,
    .pets-page .empty-state{
        margin-bottom:20px !important;
    }
}


/* =========================================================
   CLINIPET - SEPARACIÓN AMPLIA EN MASCOTAS
   ========================================================= */

.pets-page .card,
.pets-page section,
.pets-page .panel,
.pets-page details,
.pets-page .register-card,
.pets-page .owner-register,
.pets-page .filter-card,
.pets-page .search-card,
.pets-page .clinical-search,
.pets-page .empty-state,
.pets-page .patients-list,
.pets-page .results-card{
    margin-bottom:40px !important;
}

/* separación entre Registrar y Buscador */
.pets-page details + *,
.pets-page .register-card + *,
.pets-page .owner-register + *{
    margin-top:40px !important;
}

/* separación entre Buscador y Resultados */
.pets-page .filter-card + *,
.pets-page .search-card + *,
.pets-page .clinical-search + *{
    margin-top:40px !important;
}

/* filtros internos */
.pets-page .filters-grid,
.pets-page .filter-grid{
    gap:20px !important;
}

@media(max-width:800px){
    .pets-page .card,
    .pets-page section,
    .pets-page .panel,
    .pets-page details,
    .pets-page .register-card,
    .pets-page .filter-card,
    .pets-page .empty-state{
        margin-bottom:28px !important;
    }
}


/* =========================================================
   CLINIPET - SEPARACIÓN 3 CM ENTRE BLOQUES DE MASCOTAS
   ========================================================= */

.pets-page details,
.pets-page .register-card,
.pets-page .owner-register,
.pets-page .filter-card,
.pets-page .search-card,
.pets-page .clinical-search,
.pets-page .empty-state,
.pets-page .patients-list,
.pets-page .results-card,
.pets-page .card,
.pets-page .panel,
.pets-page section{
    margin-bottom:3cm !important;
}

/* separación específica entre bloques consecutivos */
.pets-page details + *,
.pets-page .register-card + *,
.pets-page .owner-register + *,
.pets-page .filter-card + *,
.pets-page .search-card + *,
.pets-page .clinical-search + *{
    margin-top:3cm !important;
}

/* en móvil un poco menos para no exagerar */
@media(max-width:800px){
    .pets-page details,
    .pets-page .register-card,
    .pets-page .filter-card,
    .pets-page .empty-state,
    .pets-page .card,
    .pets-page .panel,
    .pets-page section{
        margin-bottom:1.5cm !important;
    }
}


/* =========================================================
   CLINIPET - PETS PAGE PASTEL FINAL
   ========================================================= */

.pets-page{
    background:#ffffff !important;
    padding:22px !important;
    box-sizing:border-box !important;
}

/* TARJETAS GENERALES */
.pets-page .card,
.pets-page .panel,
.pets-page section,
.pets-page details{
    background:#ffffff !important;
    border:1px solid rgba(120,145,190,.16) !important;
    border-radius:22px !important;
    box-shadow:0 10px 28px rgba(55,75,110,.08) !important;
}

/* REGISTRAR */
.pets-page details{
    margin-bottom:26px !important;
    padding:0 !important;
    overflow:hidden !important;
}

.pets-page details summary{
    min-height:72px !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    padding:0 24px !important;
    cursor:pointer !important;
    font-size:1rem !important;
    font-weight:800 !important;
    color:#274469 !important;
    list-style:none !important;
}

.pets-page details summary::-webkit-details-marker{
    display:none !important;
}

.pets-page details summary::before{
    content:"+";
    width:38px !important;
    height:38px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:50% !important;
    background:linear-gradient(135deg,#f0eaff,#e4f1ff) !important;
    color:#5972d9 !important;
    font-size:1.4rem !important;
    font-weight:700 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.pets-page details[open] summary::before{
    content:"−";
}

/* BUSCADOR */
.pets-page .filter-card,
.pets-page .search-card,
.pets-page .clinical-search{
    margin-bottom:26px !important;
    padding:28px 26px !important;
    background:#ffffff !important;
    border:1px solid rgba(120,145,190,.18) !important;
}

/* TÍTULO */
.pets-page .eyebrow,
.pets-page .section-label{
    display:block !important;
    margin-bottom:8px !important;
    font-size:.72rem !important;
    font-weight:900 !important;
    letter-spacing:.18em !important;
    color:#6785ff !important;
}

.pets-page h2{
    margin:0 0 22px !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    font-size:1.55rem !important;
    color:#213957 !important;
}

.pets-page h2::before{
    content:"🐾";
    width:44px !important;
    height:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:14px !important;
    background:linear-gradient(135deg,#e2f7ff,#e7f6ef) !important;
    box-shadow:0 6px 16px rgba(70,100,140,.08) !important;
}

/* GRID DE FILTROS */
.pets-page .filters-grid,
.pets-page .filter-grid{
    display:grid !important;
    grid-template-columns:1.15fr .85fr 1fr !important;
    gap:18px !important;
    align-items:end !important;
}

/* LABELS */
.pets-page label{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    margin-bottom:8px !important;
    font-size:.82rem !important;
    font-weight:800 !important;
    color:#2d4565 !important;
}

/* INPUTS */
.pets-page input[type="text"],
.pets-page input[type="search"],
.pets-page select{
    width:100% !important;
    min-height:50px !important;
    padding:0 16px !important;
    border-radius:14px !important;
    border:1px solid #d6e2ef !important;
    background:#ffffff !important;
    color:#253d5d !important;
    font-size:.90rem !important;
    box-sizing:border-box !important;
    outline:none !important;
    transition:
        border-color .18s ease,
        box-shadow .18s ease !important;
}

/* CAMPOS PASTEL */
.pets-page .filters-grid > div:nth-child(1) input{
    border-color:#c8ddf4 !important;
}

.pets-page .filters-grid > div:nth-child(2) select{
    border-color:#ccebdc !important;
}

.pets-page .filters-grid > div:nth-child(3) select{
    border-color:#f0d5e4 !important;
}

.pets-page input:focus,
.pets-page select:focus{
    border-color:#8db5ff !important;
    box-shadow:0 0 0 4px rgba(111,150,255,.10) !important;
}

/* RESULTADOS VACÍOS */
.pets-page .empty-state,
.pets-page .results-card,
.pets-page .patients-list{
    min-height:150px !important;
    margin-top:0 !important;
    padding:26px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:10px !important;
    background:#ffffff !important;
    border:1px solid rgba(120,145,190,.16) !important;
    border-radius:22px !important;
    box-shadow:0 10px 28px rgba(55,75,110,.07) !important;
    color:#788aa3 !important;
    text-align:center !important;
}

.pets-page .empty-state::before,
.pets-page .results-card:empty::before{
    content:"🐾";
    width:48px !important;
    height:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:50% !important;
    background:linear-gradient(135deg,#eef1ff,#f3eaff) !important;
    font-size:1.3rem !important;
}

/* BOTONES */
.pets-page .btn,
.pets-page button{
    min-height:42px !important;
    padding:9px 16px !important;
    border-radius:12px !important;
    border:none !important;
    font-weight:800 !important;
    transition:.18s ease !important;
}

.pets-page .btn:hover,
.pets-page button:hover{
    transform:translateY(-2px) !important;
}

/* SEPARACIÓN ENTRE BLOQUES */
.pets-page > * + *{
    margin-top:26px !important;
}

/* RESPONSIVE */
@media(max-width:950px){

    .pets-page .filters-grid,
    .pets-page .filter-grid{
        grid-template-columns:1fr !important;
        gap:14px !important;
    }

    .pets-page{
        padding:16px !important;
    }
}

@media(max-width:600px){

    .pets-page{
        padding:10px !important;
    }

    .pets-page .filter-card,
    .pets-page .search-card,
    .pets-page .clinical-search{
        padding:20px 16px !important;
    }

    .pets-page h2{
        font-size:1.25rem !important;
    }

    .pets-page details summary{
        min-height:64px !important;
        padding:0 16px !important;
        font-size:.90rem !important;
    }
}


/* =========================================================
   CLINIPET - MASCOTAS DISEÑO REAL FINAL
   ========================================================= */

/* Fondo principal blanco y limpio */
.main-content{
    background:#fff !important;
}

/* Quitar cabecera redundante Pets + segundo buscador */
.page-head{
    display:none !important;
}


/* =========================================================
   REGISTRAR PROPIETARIO / MASCOTA
   ========================================================= */

.card.create-box{
    margin:24px 0 28px !important;
    padding:0 !important;

    background:#fff !important;

    border:1px solid #edf0f5 !important;
    border-radius:22px !important;

    box-shadow:
        0 10px 28px rgba(53,72,105,.09) !important;

    overflow:hidden !important;
}

.card.create-box > summary{
    min-height:78px !important;

    padding:0 26px !important;

    display:flex !important;
    align-items:center !important;
    gap:14px !important;

    list-style:none !important;
    cursor:pointer !important;

    color:#203b5d !important;

    font-size:1rem !important;
    font-weight:800 !important;
}

.card.create-box > summary::-webkit-details-marker{
    display:none !important;
}

/* icono pastel */
.card.create-box > summary::before{
    content:"＋";

    width:42px !important;
    height:42px !important;
    min-width:42px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:14px !important;

    background:
        linear-gradient(
            135deg,
            #eef0ff,
            #e7f3ff
        ) !important;

    color:#5d70dc !important;

    font-size:1.35rem !important;
    font-weight:700 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.card.create-box[open] > summary::before{
    content:"−";
}

/* formularios cuando se despliega */
.card.create-box .grid-2{
    padding:4px 24px 24px !important;
    gap:22px !important;
}

.card.create-box form{
    padding:18px !important;

    border-radius:18px !important;

    background:#fbfcff !important;

    border:1px solid #edf1f7 !important;
}


/* =========================================================
   BUSCADOR CLÍNICO
   ========================================================= */

.card.clinipet-pet-filters{
    margin:0 0 28px !important;

    padding:32px 34px 36px !important;

    background:#fff !important;

    border:1px solid #e4ecf6 !important;
    border-radius:24px !important;

    box-shadow:
        0 10px 30px rgba(56,78,110,.08) !important;
}

/* etiqueta BUSCADOR CLÍNICO */
.card.clinipet-pet-filters .eyebrow{
    margin-bottom:8px !important;

    color:#607fff !important;

    font-size:.72rem !important;
    font-weight:900 !important;

    letter-spacing:.18em !important;
}

/* título */
.card.clinipet-pet-filters h2{
    margin:0 0 26px !important;

    display:flex !important;
    align-items:center !important;
    gap:13px !important;

    color:#193651 !important;

    font-size:1.55rem !important;
}

/* icono grande huella */
.card.clinipet-pet-filters h2::before{
    content:"🐾";

    width:46px !important;
    height:46px !important;
    min-width:46px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:15px !important;

    background:
        linear-gradient(
            135deg,
            #e1f8ff,
            #e7f7f0
        ) !important;

    font-size:1.2rem !important;

    box-shadow:
        0 7px 18px rgba(80,110,150,.08) !important;
}


/* =========================================================
   FILTROS
   ========================================================= */

.clinipet-filter-grid{
    display:grid !important;

    grid-template-columns:
        1.1fr 1fr 1.05fr !important;

    gap:28px !important;

    align-items:end !important;
}

.clinipet-filter-grid label{
    display:block !important;

    margin:0 !important;

    color:#203b5c !important;

    font-size:.82rem !important;
    font-weight:800 !important;
}

/* iconitos pastel antes de cada label */
.clinipet-filter-grid label:nth-child(1)::before{
    content:"🔎";
}

.clinipet-filter-grid label:nth-child(2)::before{
    content:"🐾";
}

.clinipet-filter-grid label:nth-child(3)::before{
    content:"🧬";
}

.clinipet-filter-grid label::before{
    width:30px !important;
    height:30px !important;

    margin-right:7px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:9px !important;

    background:#eef7ff !important;

    vertical-align:middle !important;
}

/* Inputs */
#filter-search,
#filter-species,
#filter-breed{
    width:100% !important;

    min-height:52px !important;

    margin-top:10px !important;

    padding:0 16px !important;

    box-sizing:border-box !important;

    background:#fff !important;

    border:1.5px solid #dae4ef !important;
    border-radius:15px !important;

    color:#203852 !important;

    font-size:.88rem !important;

    outline:none !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}

/* tonos individuales */
#filter-search{
    border-color:#cfe4f7 !important;
}

#filter-species{
    border-color:#ccebdd !important;
}

#filter-breed{
    border-color:#f1d5e4 !important;
}

#filter-search:focus{
    border-color:#88bde9 !important;
    box-shadow:0 0 0 4px rgba(109,181,239,.10) !important;
}

#filter-species:focus{
    border-color:#7dd0ae !important;
    box-shadow:0 0 0 4px rgba(102,205,162,.10) !important;
}

#filter-breed:focus{
    border-color:#df99bd !important;
    box-shadow:0 0 0 4px rgba(224,132,179,.10) !important;
}


/* =========================================================
   RESULTADOS / SIN PACIENTES
   ========================================================= */

.pet-cards{
    margin-top:28px !important;
}

.pet-cards .empty.card{
    width:100% !important;

    min-height:145px !important;

    margin:0 !important;
    padding:26px !important;

    display:flex !important;
    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;

    gap:10px !important;

    box-sizing:border-box !important;

    background:#fff !important;

    border:1px solid #edf0f5 !important;
    border-radius:22px !important;

    box-shadow:
        0 10px 28px rgba(50,72,105,.08) !important;

    color:#7487a2 !important;

    text-align:center !important;
}

.pet-cards .empty.card::before{
    content:"🐾";

    width:48px !important;
    height:48px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:50% !important;

    background:
        linear-gradient(
            135deg,
            #eef0ff,
            #f4eaff
        ) !important;

    font-size:1.25rem !important;
}


/* =========================================================
   TARJETAS DE MASCOTAS CUANDO EXISTAN
   ========================================================= */

.pet-cards:not(:has(.empty)){
    display:grid !important;

    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;

    gap:20px !important;
}

.pet-card{
    padding:20px !important;

    background:#fff !important;

    border:1px solid #e8edf4 !important;
    border-radius:20px !important;

    box-shadow:
        0 9px 24px rgba(50,72,105,.08) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease !important;
}

.pet-card:hover{
    transform:translateY(-4px) !important;

    box-shadow:
        0 15px 30px rgba(50,72,105,.12) !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1000px){

    .clinipet-filter-grid{
        grid-template-columns:1fr 1fr !important;
    }

    .clinipet-filter-grid label:first-child{
        grid-column:1 / -1 !important;
    }

    .pet-cards:not(:has(.empty)){
        grid-template-columns:repeat(2,1fr) !important;
    }
}

@media(max-width:650px){

    .card.clinipet-pet-filters{
        padding:24px 18px !important;
    }

    .clinipet-filter-grid{
        grid-template-columns:1fr !important;
        gap:18px !important;
    }

    .clinipet-filter-grid label:first-child{
        grid-column:auto !important;
    }

    .pet-cards:not(:has(.empty)){
        grid-template-columns:1fr !important;
    }

    .card.create-box > summary{
        padding:0 17px !important;
        font-size:.88rem !important;
    }
}


/* =========================================================
   CLINIPET - TRIAGE PREMIUM
   ========================================================= */

/* HERO / BLOQUE SUPERIOR */
.triage-page .hero,
.triage-page .triage-hero,
.triage-page .card.hero,
.triage-page .urgency-card{
    min-height:auto !important;
    padding:24px 26px !important;
    margin-bottom:18px !important;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 55%,
            #fbf7ff 100%
        ) !important;

    border:1px solid #e8edf5 !important;
    border-radius:24px !important;

    box-shadow:
        0 12px 30px rgba(53,74,108,.08) !important;
}


/* TITULO */
.triage-page h1,
.triage-page .triage-title{
    margin:0 0 8px !important;

    font-size:2.25rem !important;
    line-height:1.05 !important;

    color:#183954 !important;
}

.triage-page .eyebrow{
    margin-bottom:7px !important;

    font-size:.72rem !important;
    font-weight:900 !important;
    letter-spacing:.18em !important;

    color:#6784ff !important;
}

.triage-page .hero p,
.triage-page .triage-subtitle{
    margin:0 0 18px !important;

    color:#6d8099 !important;
    font-size:.92rem !important;
}


/* =========================================================
   TARJETAS DE NIVELES
   ========================================================= */

.clp-triage-guide{
    margin:16px 0 !important;
    padding:16px !important;

    background:#fff !important;

    border:1px solid #e8edf5 !important;
    border-radius:20px !important;

    box-shadow:
        0 10px 25px rgba(48,72,105,.06) !important;
}

.clp-triage-guide-head{
    margin-bottom:12px !important;
}

.clp-triage-guide-head h3{
    font-size:.95rem !important;
}

.clp-triage-levels{
    display:grid !important;

    grid-template-columns:
        repeat(5,minmax(0,1fr)) !important;

    gap:10px !important;
}

.clp-triage-level{
    min-height:108px !important;

    padding:12px !important;

    border-radius:15px !important;

    display:flex !important;
    flex-direction:column !important;

    gap:5px !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease !important;

    cursor:default !important;
}

.clp-triage-level:hover{
    transform:translateY(-3px) !important;

    box-shadow:
        0 10px 20px rgba(45,65,95,.10) !important;
}

.clp-triage-level b{
    font-size:.72rem !important;
}

.clp-triage-level strong{
    font-size:.95rem !important;
}

.clp-triage-level span{
    font-size:.62rem !important;
    line-height:1.35 !important;
}

.clp-triage-level small{
    margin-top:auto !important;
    font-size:.58rem !important;
}


/* COLORES PASTEL */
.clp-t1{
    background:
        linear-gradient(135deg,#ffe6ea,#ffd9df) !important;
}

.clp-t2{
    background:
        linear-gradient(135deg,#ffecdf,#ffe0cc) !important;
}

.clp-t3{
    background:
        linear-gradient(135deg,#fff5d9,#ffedbf) !important;
}

.clp-t4{
    background:
        linear-gradient(135deg,#e4f8ed,#d4f1e2) !important;
}

.clp-t5{
    background:
        linear-gradient(135deg,#e4efff,#d6e7ff) !important;
}


/* =========================================================
   EXPLICACION DINAMICA
   ========================================================= */

.clp-triage-explain{
    margin-top:12px !important;

    padding:13px 15px !important;

    border-radius:14px !important;

    background:
        linear-gradient(
            135deg,
            #f9fbff,
            #f6f2ff
        ) !important;

    border:1px solid #e1e7f2 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.clp-triage-explain h4{
    margin:0 0 6px !important;

    font-size:.82rem !important;
    color:#284969 !important;
}

.clp-triage-explain p{
    margin:4px 0 !important;

    font-size:.68rem !important;
    line-height:1.45 !important;

    color:#667b93 !important;
}

.clp-triage-warning{
    margin-top:8px !important;

    padding:8px 10px !important;

    border-radius:10px !important;

    background:#fff8e9 !important;

    font-size:.61rem !important;
}


/* =========================================================
   FORMULARIO NUEVA VALORACION
   ========================================================= */

.triage-page .card,
.triage-page .panel{
    border-radius:20px !important;

    border:1px solid #e8edf5 !important;

    box-shadow:
        0 10px 26px rgba(47,71,105,.07) !important;
}

.triage-page .grid-2,
.triage-page .triage-grid{
    gap:18px !important;
}

.triage-page input,
.triage-page select,
.triage-page textarea{
    min-height:48px !important;

    border:1px solid #d8e3ee !important;
    border-radius:13px !important;

    background:#fff !important;

    color:#223d5c !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease !important;
}

.triage-page input:focus,
.triage-page select:focus,
.triage-page textarea:focus{
    border-color:#8fb2ff !important;

    box-shadow:
        0 0 0 4px rgba(105,145,255,.10) !important;

    outline:none !important;
}


/* =========================================================
   COLA DE PRIORIDAD
   ========================================================= */

.triage-page .queue-card,
.triage-page .priority-card{
    background:#fff !important;

    border-radius:20px !important;
}

.triage-page .empty{
    color:#8392a8 !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

    .clp-triage-levels{
        grid-template-columns:
            repeat(3,1fr) !important;
    }
}

@media(max-width:700px){

    .clp-triage-levels{
        grid-template-columns:1fr !important;
    }

    .triage-page h1,
    .triage-page .triage-title{
        font-size:1.8rem !important;
    }

    .triage-page .hero,
    .triage-page .triage-hero{
        padding:18px !important;
    }
}


/* =========================================================
   CLINIPET - TRIAGE MINI DASHBOARD CORREGIDO
   ========================================================= */

.vc-triage-mini{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;

    margin:0 0 18px 0 !important;
    padding:22px !important;

    box-sizing:border-box !important;

    border-radius:24px !important;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f4f9ff 48%,
            #faf5ff 100%
        ) !important;

    border:1px solid #e8edf5 !important;

    box-shadow:
        0 12px 30px rgba(47,73,110,.08) !important;

    overflow:hidden !important;
}


/* CABECERA */
.vc-triage-head{
    width:100% !important;

    display:grid !important;
    grid-template-columns:1fr auto !important;

    gap:20px !important;

    align-items:center !important;

    margin-bottom:18px !important;
}


.vc-triage-copy{
    min-width:0 !important;
}

.vc-triage-copy .eyebrow{
    display:block !important;

    margin-bottom:6px !important;

    font-size:.68rem !important;
    font-weight:900 !important;

    letter-spacing:.18em !important;

    text-transform:uppercase !important;

    color:#6482ff !important;
}


.vc-triage-title{
    margin:0 0 8px !important;

    font-size:2.1rem !important;
    line-height:1.05 !important;

    color:#173957 !important;

    font-weight:900 !important;
}


.vc-triage-sub{
    max-width:760px !important;

    margin:0 !important;

    color:#667c98 !important;

    font-size:.88rem !important;
    line-height:1.5 !important;
}


/* KPI DERECHA */
.vc-triage-side{
    display:grid !important;
    grid-template-columns:repeat(3,135px) !important;

    gap:8px !important;
}

.vc-kpi{
    min-width:0 !important;

    padding:11px !important;

    border-radius:14px !important;

    background:#fff !important;

    border:1px solid #edf1f7 !important;

    box-shadow:
        0 6px 15px rgba(60,80,110,.05) !important;
}

.vc-kpi b{
    display:block !important;

    margin-bottom:3px !important;

    font-size:.70rem !important;

    color:#284562 !important;
}

.vc-kpi span{
    display:block !important;

    font-size:.58rem !important;
    line-height:1.3 !important;

    color:#7c8fa8 !important;
}


/* =========================================================
   LOS 5 NIVELES
   ========================================================= */

.vc-triage-levels{
    width:100% !important;

    display:grid !important;

    grid-template-columns:
        repeat(5,minmax(0,1fr)) !important;

    gap:10px !important;
}


.vc-level{
    min-width:0 !important;
    min-height:128px !important;

    padding:13px !important;

    display:flex !important;
    flex-direction:column !important;

    border-radius:16px !important;

    border:1px solid rgba(65,85,110,.06) !important;

    box-shadow:
        0 7px 17px rgba(50,70,100,.06) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease !important;
}


.vc-level:hover{
    transform:translateY(-3px) !important;

    box-shadow:
        0 12px 24px rgba(50,70,100,.11) !important;
}


/* PASTELES POR NIVEL */
.vc-level:nth-child(1){
    background:
        linear-gradient(135deg,#ffe9ed,#ffdce3) !important;
}

.vc-level:nth-child(2){
    background:
        linear-gradient(135deg,#fff0e4,#ffe1cd) !important;
}

.vc-level:nth-child(3){
    background:
        linear-gradient(135deg,#fff7dd,#ffedbd) !important;
}

.vc-level:nth-child(4){
    background:
        linear-gradient(135deg,#e5f8ee,#d4f2e2) !important;
}

.vc-level:nth-child(5){
    background:
        linear-gradient(135deg,#e6efff,#d9e7ff) !important;
}


.vc-level-top{
    display:flex !important;

    align-items:center !important;

    gap:9px !important;

    margin-bottom:7px !important;
}


.vc-dot{
    width:15px !important;
    height:15px !important;

    min-width:15px !important;

    border-radius:50% !important;
}


.vc-red{
    background:#e73d55 !important;
}

.vc-orange{
    background:#ff7b46 !important;
}

.vc-yellow{
    background:#e6b326 !important;
}

.vc-green{
    background:#42c47a !important;
}

.vc-blue{
    background:#427be3 !important;
}


.vc-level h4{
    margin:0 !important;

    font-size:.82rem !important;

    color:#213d5c !important;

    font-weight:900 !important;
}


.vc-level small{
    display:block !important;

    margin-top:2px !important;

    color:#607690 !important;

    font-size:.60rem !important;

    font-weight:800 !important;
}


.vc-level p{
    margin:4px 0 0 !important;

    color:#526b87 !important;

    font-size:.63rem !important;

    line-height:1.42 !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1200px){

    .vc-triage-head{
        grid-template-columns:1fr !important;
    }

    .vc-triage-side{
        grid-template-columns:repeat(3,1fr) !important;
    }

    .vc-triage-levels{
        grid-template-columns:
            repeat(3,1fr) !important;
    }
}


@media(max-width:700px){

    .vc-triage-mini{
        padding:15px !important;
    }

    .vc-triage-title{
        font-size:1.65rem !important;
    }

    .vc-triage-side{
        grid-template-columns:1fr !important;
    }

    .vc-triage-levels{
        grid-template-columns:1fr !important;
    }
}


/* TRIAGE MÁS COMPACTO */

.triage-hero,
.hero-triage,
.urgency-hero{
    height:280px !important;
    min-height:280px !important;
    max-height:280px !important;

    background-size:cover !important;
    background-position:center center !important;

    border-radius:22px !important;
}

@media(max-width:1100px){
    .triage-hero,
    .hero-triage,
    .urgency-hero{
        height:240px !important;
        min-height:240px !important;
        max-height:240px !important;
    }
}

@media(max-width:700px){
    .triage-hero,
    .hero-triage,
    .urgency-hero{
        height:200px !important;
        min-height:200px !important;
        max-height:200px !important;
    }
}


.triage-hero,
.hero-triage,
.urgency-hero{
    height:300px !important;
    min-height:300px !important;
    max-height:300px !important;
    overflow:hidden !important;
    border-radius:24px !important;

    background:
      url("/static/triage_lila.png?v=6")
      center center / cover
      no-repeat !important;
}

.triage-hero > *,
.hero-triage > *,
.urgency-hero > *{
    visibility:hidden !important;
}


/* ===== TRIAGE BANNER MÁS COMPACTO ===== */

#triage-lila-banner,
.clp-triage-banner{
    height:220px !important;
    min-height:220px !important;
    max-height:220px !important;
    margin-bottom:16px !important;
    border-radius:22px !important;
}

#triage-lila-banner img,
.clp-triage-banner img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 47% !important;
    display:block !important;
}

@media(max-width:900px){
    #triage-lila-banner,
    .clp-triage-banner{
        height:175px !important;
        min-height:175px !important;
        max-height:175px !important;
    }
}


/* ===== TRIAGE AJUSTE COMPLETO AL CUADRO ===== */

#triage-lila-banner,
.clp-triage-banner{
    height:220px !important;
    min-height:220px !important;
    max-height:220px !important;
    overflow:hidden !important;
    border-radius:22px !important;
    background:#f3e8ff !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

#triage-lila-banner img,
.clp-triage-banner img{
    width:100% !important;
    height:100% !important;

    object-fit:contain !important;
    object-position:center center !important;

    display:block !important;
}

@media(max-width:900px){
    #triage-lila-banner,
    .clp-triage-banner{
        height:175px !important;
        min-height:175px !important;
        max-height:175px !important;
    }
}


/* ===== TRIAGE IMAGEN EXACTA AL RECTANGULO ===== */

body #triage-lila-banner,
body .clp-triage-banner{
    width:100% !important;
    height:220px !important;
    min-height:220px !important;
    max-height:220px !important;
    padding:0 !important;
    margin:0 0 16px 0 !important;
    overflow:hidden !important;
    border-radius:22px !important;
    display:block !important;
    background:transparent !important;
}

body #triage-lila-banner > img,
body .clp-triage-banner > img{
    position:relative !important;
    inset:auto !important;

    width:100% !important;
    height:220px !important;

    min-width:100% !important;
    max-width:100% !important;
    min-height:220px !important;
    max-height:220px !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:fill !important;
    object-position:center !important;

    border-radius:22px !important;
    display:block !important;
}

@media(max-width:900px){
    body #triage-lila-banner,
    body .clp-triage-banner,
    body #triage-lila-banner > img,
    body .clp-triage-banner > img{
        height:175px !important;
        min-height:175px !important;
        max-height:175px !important;
    }
}


/* ===== TRIAGE IMAGEN EXACTA AL RECTANGULO ===== */

body #triage-lila-banner,
body .clp-triage-banner{
    width:100% !important;
    height:220px !important;
    min-height:220px !important;
    max-height:220px !important;
    padding:0 !important;
    margin:0 0 16px 0 !important;
    overflow:hidden !important;
    border-radius:22px !important;
    display:block !important;
    background:transparent !important;
}

body #triage-lila-banner > img,
body .clp-triage-banner > img{
    position:relative !important;
    inset:auto !important;

    width:100% !important;
    height:220px !important;

    min-width:100% !important;
    max-width:100% !important;
    min-height:220px !important;
    max-height:220px !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:fill !important;
    object-position:center !important;

    border-radius:22px !important;
    display:block !important;
}

@media(max-width:900px){
    body #triage-lila-banner,
    body .clp-triage-banner,
    body #triage-lila-banner > img,
    body .clp-triage-banner > img{
        height:175px !important;
        min-height:175px !important;
        max-height:175px !important;
    }
}


/* ===== TRIAGE BANNER FINAL: IMAGEN COMPLETA ===== */
body #triage-lila-banner,
body .clp-triage-banner{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 !important;
    overflow:hidden !important;
    margin:10px 0 18px !important;
}

body #triage-lila-banner img,
body .clp-triage-banner img{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:contain !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
}

/* TRIAGE BANNER PANORÁMICO FINAL */
#triage-lila-banner,
.clp-triage-banner{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
    padding:0 !important;
}

#triage-lila-banner img,
.clp-triage-banner img{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    display:block !important;
}


/* TRIAGE BANNER CLEAN OVERRIDE */
#triage-lila-banner,
.clp-triage-banner{
    display:none !important;
}

#triage-banner-clean{
    width:100% !important;
    aspect-ratio:2712 / 580 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
}

#triage-banner-clean img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
}

/* ===== ROGER_CHAT_PREMIUM_START ===== */

/* VENTANA GENERAL */
.roger-box{
    width:min(430px,calc(100vw - 28px)) !important;
    max-height:78vh !important;
    border-radius:24px !important;
    overflow:hidden !important;
    background:rgba(255,255,255,.98) !important;
    border:1px solid rgba(96,95,190,.14) !important;
    box-shadow:0 24px 70px rgba(37,59,95,.24) !important;
}

/* CABECERA */
.roger-head{
    min-height:72px !important;
    padding:13px 15px !important;
    display:flex !important;
    align-items:center !important;
    gap:11px !important;
    background:linear-gradient(135deg,#7167ed,#49b9ca) !important;
    color:#fff !important;
}

.roger-avatar{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:15px !important;
    background:rgba(255,255,255,.20) !important;
    border:1px solid rgba(255,255,255,.30) !important;
    font-size:30px !important;
}

.roger-head b{
    font-size:1.02rem !important;
    font-weight:900 !important;
}

.roger-head small{
    display:block !important;
    color:rgba(255,255,255,.85) !important;
    font-size:.70rem !important;
}

/* MENSAJES */
.roger-messages{
    padding:15px !important;
    gap:10px !important;
    background:linear-gradient(180deg,#fbfbff,#f6fbfc) !important;
}

.msg{
    max-width:86% !important;
    padding:10px 13px !important;
    border-radius:16px !important;
    font-size:.84rem !important;
    line-height:1.48 !important;
    box-shadow:0 3px 10px rgba(45,62,91,.05) !important;
}

.msg.bot{
    background:#ffffff !important;
    color:#354c66 !important;
    border:1px solid #e6e9f4 !important;
    border-bottom-left-radius:5px !important;
}

.msg.user{
    background:linear-gradient(135deg,#6c70ed,#4f9fe5) !important;
    color:white !important;
    border-bottom-right-radius:5px !important;
}

/* OPCIONES RAPIDAS */
.roger-quick{
    display:flex !important;
    gap:6px !important;
    padding:8px 12px !important;
    overflow-x:auto !important;
    background:#fff !important;
}

.roger-quick button{
    flex:0 0 auto !important;
    min-height:34px !important;
    padding:6px 10px !important;
    border:1px solid #e0e6f1 !important;
    border-radius:999px !important;
    background:#f7f5ff !important;
    color:#53647e !important;
    font-size:.70rem !important;
    font-weight:850 !important;
}

/* CAJA DE ESCRITURA */
.roger-input{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    padding:10px 12px !important;
    background:#fff !important;
    border-top:1px solid #e7ebf3 !important;
}

.roger-input input{
    flex:1 !important;
    min-width:0 !important;
    min-height:44px !important;
    border-radius:14px !important;
    border:1px solid #dce4ef !important;
    background:#f8faff !important;
    padding:0 14px !important;
    font-size:.85rem !important;
    outline:none !important;
}

.roger-input input:focus{
    border-color:#7b79e8 !important;
    box-shadow:0 0 0 3px rgba(123,121,232,.10) !important;
}

.roger-input button{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    border:0 !important;
    border-radius:13px !important;
    background:linear-gradient(135deg,#7468ec,#48b7c8) !important;
    color:white !important;
    font-size:18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

/* AVISO CLINICO */
.roger-disclaimer{
    padding:7px 12px 10px !important;
    text-align:center !important;
    color:#8795a9 !important;
    background:#fff !important;
    font-size:.62rem !important;
}

/* ANIMACION SUAVE */
.roger-box.open{
    animation:rogerPremiumOpen .20s ease-out !important;
}

@keyframes rogerPremiumOpen{
    from{
        opacity:0;
        transform:translateY(8px) scale(.985);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/* MOVIL */
@media(max-width:720px){
    .roger-box{
        right:10px !important;
        width:calc(100vw - 20px) !important;
        max-height:72vh !important;
    }

    .roger-head{
        min-height:64px !important;
    }
}

/* ===== ROGER_CHAT_PREMIUM_END ===== */

/* ===== ROGER_CHAT_LARGE_START ===== */

.roger-box{
    width:min(620px,calc(100vw - 30px)) !important;
    max-height:88vh !important;
    right:22px !important;
    bottom:95px !important;
    border-radius:24px !important;
}

.roger-head{
    min-height:84px !important;
    padding:16px 18px !important;
}

.roger-avatar{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    font-size:34px !important;
}

.roger-head b{
    font-size:1.25rem !important;
}

.roger-head small{
    font-size:.82rem !important;
}

.roger-hero{
    padding:18px !important;
    grid-template-columns:120px 1fr !important;
}

.roger-hero p{
    font-size:.92rem !important;
    line-height:1.5 !important;
}

.roger-dog-face{
    font-size:68px !important;
}

.roger-messages{
    min-height:300px !important;
    max-height:430px !important;
    padding:18px !important;
    gap:12px !important;
    overflow-y:auto !important;
}

.msg{
    max-width:90% !important;
    padding:13px 16px !important;
    font-size:1rem !important;
    line-height:1.55 !important;
    border-radius:17px !important;
}

.roger-quick{
    padding:10px 14px !important;
    gap:8px !important;
}

.roger-quick button{
    min-height:38px !important;
    padding:7px 13px !important;
    font-size:.8rem !important;
}

.roger-input{
    padding:13px 14px !important;
    gap:10px !important;
}

.roger-input input{
    min-height:52px !important;
    padding:0 16px !important;
    font-size:1rem !important;
    border-radius:15px !important;
}

.roger-input button{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    font-size:21px !important;
}

.roger-disclaimer{
    font-size:.72rem !important;
    padding:9px 14px 12px !important;
}

/* TABLET */
@media(max-width:900px){
    .roger-box{
        width:min(560px,calc(100vw - 20px)) !important;
        right:10px !important;
        max-height:84vh !important;
    }
}

/* MÓVIL */
@media(max-width:720px){
    .roger-box{
        left:10px !important;
        right:10px !important;
        width:auto !important;
        max-height:82vh !important;
        bottom:82px !important;
    }

    .roger-messages{
        max-height:360px !important;
        min-height:250px !important;
    }

    .msg{
        font-size:.96rem !important;
        max-width:94% !important;
    }

    .roger-hero{
        grid-template-columns:90px 1fr !important;
    }
}

/* ===== ROGER_CHAT_LARGE_END ===== */

/* ===== ROGER_UI_FIX_FINAL_START ===== */

.roger-box{
    width:min(560px,calc(100vw - 24px)) !important;
    max-height:78vh !important;
    right:18px !important;
    bottom:92px !important;
    display:flex !important;
    flex-direction:column !important;
    border-radius:22px !important;
    overflow:hidden !important;
}

/* HEADER */
.roger-head{
    flex:0 0 auto !important;
    min-height:72px !important;
    padding:12px 15px !important;
}

.roger-avatar{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    font-size:29px !important;
}

/* HERO MÁS COMPACTO */
.roger-hero{
    flex:0 0 auto !important;
    grid-template-columns:92px 1fr !important;
    padding:12px 15px !important;
    min-height:120px !important;
}

.roger-dog-face{
    font-size:54px !important;
}

.roger-hero p{
    font-size:.86rem !important;
    line-height:1.42 !important;
    margin:4px 0 !important;
}

/* MENSAJES */
.roger-messages{
    flex:1 1 auto !important;
    min-height:170px !important;
    max-height:330px !important;
    overflow-y:auto !important;
    padding:14px !important;
    gap:9px !important;
    background:linear-gradient(180deg,#fbfcff,#f7fbfc) !important;
    scrollbar-width:thin !important;
}

.roger-messages:empty{
    min-height:150px !important;
}

.msg{
    max-width:88% !important;
    padding:11px 14px !important;
    font-size:.92rem !important;
    line-height:1.5 !important;
}

/* QUICK ACTIONS SIEMPRE VISIBLES */
.roger-quick{
    flex:0 0 auto !important;
    display:flex !important;
    gap:6px !important;
    padding:8px 10px !important;
    overflow-x:auto !important;
    background:#fff !important;
    border-top:1px solid #edf0f5 !important;
}

.roger-quick button{
    flex:0 0 auto !important;
    min-height:34px !important;
    padding:6px 10px !important;
    font-size:.72rem !important;
    white-space:nowrap !important;
}

/* INPUT */
.roger-input{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    padding:10px 12px !important;
    background:#fff !important;
    border-top:1px solid #e8edf4 !important;
}

.roger-input input{
    min-height:46px !important;
    font-size:.95rem !important;
    padding:0 14px !important;
}

.roger-input button{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    font-size:18px !important;
}

/* DISCLAIMER */
.roger-disclaimer{
    flex:0 0 auto !important;
    font-size:.66rem !important;
    padding:6px 10px 9px !important;
}

/* OCULTAR FAB CUANDO CHAT ESTÁ ABIERTO */


/* TABLET */
@media(max-width:900px){
    .roger-box{
        width:min(520px,calc(100vw - 20px)) !important;
        right:10px !important;
        max-height:76vh !important;
    }
}

/* MÓVIL */
@media(max-width:720px){
    .roger-box{
        left:8px !important;
        right:8px !important;
        width:auto !important;
        bottom:76px !important;
        max-height:78vh !important;
    }

    .roger-hero{
        grid-template-columns:72px 1fr !important;
        min-height:105px !important;
    }

    .roger-dog-face{
        font-size:46px !important;
    }

    .roger-messages{
        min-height:150px !important;
        max-height:300px !important;
    }
}

/* ===== ROGER_UI_FIX_FINAL_END ===== */

/* ===== ROGER_EXPAND_START ===== */

/* Quitar los dos triángulos decorativos */
.roger-dog .ears,
.roger-dog .ear,
.roger-dog-face::before,
.roger-dog-face::after,
.roger-hero .ear,
.roger-hero .ears{
    display:none !important;
    content:none !important;
}

/* Botón ampliar */
#roger-expand-btn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    border:0 !important;
    border-radius:10px !important;
    background:rgba(255,255,255,.18) !important;
    color:#fff !important;
    font-size:18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    margin-left:auto !important;
}

/* Modo ampliado */
.roger-box.roger-expanded{
    width:min(900px,calc(100vw - 40px)) !important;
    height:86vh !important;
    max-height:86vh !important;
    right:20px !important;
    bottom:60px !important;
}

.roger-box.roger-expanded .roger-messages{
    max-height:none !important;
    min-height:0 !important;
    flex:1 1 auto !important;
}

.roger-box.roger-expanded .roger-hero{
    min-height:100px !important;
}

@media(max-width:720px){
    .roger-box.roger-expanded{
        left:6px !important;
        right:6px !important;
        top:6px !important;
        bottom:6px !important;
        width:auto !important;
        height:auto !important;
        max-height:none !important;
    }
}

/* ===== ROGER_EXPAND_END ===== */


/* ===== ROGER_FAB_ALWAYS_VISIBLE ===== */
.roger-fab{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    z-index:99999 !important;
}

/* ===== SIDEBAR_AJUSTE_QUIRURGICO_START ===== */

/* 1. Compactar únicamente el bloque visual de ROGER */
.sidebar .roger-card,
.sidebar .roger-panel,
.sidebar .roger-sidebar-card,
.sidebar .roger-widget{
    padding-top:14px !important;
    padding-bottom:12px !important;
    min-height:0 !important;
}

/* Reducir un poco los personajes sin cambiar su funcionamiento */
.sidebar .roger-card img,
.sidebar .roger-panel img,
.sidebar .roger-sidebar-card img,
.sidebar .roger-widget img{
    max-height:72px !important;
    width:auto !important;
}

/* 2. Evitar que el globo "¡Hola!" se monte sobre ROGER */
.sidebar .roger-card .hello,
.sidebar .roger-card .roger-hello,
.sidebar .roger-panel .hello,
.sidebar .roger-panel .roger-hello,
.sidebar .roger-widget .hello,
.sidebar .roger-widget .roger-hello{
    top:6px !important;
    right:8px !important;
    transform:none !important;
    z-index:2 !important;
}

/* 3. Compactar solamente el espaciado vertical del menú */
.sidebar nav a,
.sidebar .nav-link,
.sidebar-menu a{
    margin-top:2px !important;
    margin-bottom:2px !important;
    padding-top:9px !important;
    padding-bottom:9px !important;
}

/* Perfil admin un poco más compacto */
.sidebar .user-card,
.sidebar .profile-card,
.sidebar .admin-profile{
    padding-top:10px !important;
    padding-bottom:10px !important;
}

/* ===== SIDEBAR_AJUSTE_QUIRURGICO_END ===== */

/* ===== SIDEBAR_SOLO_COMPACTO_START ===== */

/* Solo panel izquierdo */
.sidebar{
    overflow-y:hidden !important;
}

/* Logo / marca */
.sidebar .brand,
.sidebar .sidebar-brand{
    padding-top:6px !important;
    padding-bottom:6px !important;
    margin-bottom:2px !important;
}

/* Menú */
.sidebar nav a,
.sidebar .nav-link,
.sidebar-menu a{
    min-height:0 !important;
    padding-top:6px !important;
    padding-bottom:6px !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    line-height:1.08 !important;
}

/* Etiqueta ADMIN */
.sidebar .nav-label,
.sidebar .nav-section,
.sidebar .section-label{
    margin-top:5px !important;
    margin-bottom:2px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
}

/* Tarjeta ROGER del sidebar */
.sidebar .mini.roger,
.sidebar .roger-card,
.sidebar .roger-sidebar-card{
    margin-top:6px !important;
    margin-bottom:6px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
    min-height:0 !important;
}

.sidebar .mini.roger img,
.sidebar .roger-card img,
.sidebar .roger-sidebar-card img{
    max-height:58px !important;
    width:auto !important;
}

.sidebar .mini.roger strong,
.sidebar .mini.roger small{
    margin-top:1px !important;
    margin-bottom:1px !important;
    line-height:1.05 !important;
}

/* Tarjeta de usuario */
.sidebar .user-card,
.sidebar .profile-card,
.sidebar .sidebar-user{
    margin-top:5px !important;
    margin-bottom:5px !important;
    padding-top:7px !important;
    padding-bottom:7px !important;
    min-height:0 !important;
}

/* Pantallas de menor altura */
@media (max-height:900px){

    .sidebar nav a,
    .sidebar .nav-link,
    .sidebar-menu a{
        padding-top:5px !important;
        padding-bottom:5px !important;
        font-size:0.94em !important;
    }

    .sidebar .mini.roger,
    .sidebar .roger-card,
    .sidebar .roger-sidebar-card{
        padding-top:6px !important;
        padding-bottom:6px !important;
    }
}

/* ===== SIDEBAR_SOLO_COMPACTO_END ===== */

/* ===== SIDEBAR_MENOS_COMPACTO_START ===== */

/* Menú un poco más cómodo */
.sidebar nav a,
.sidebar .nav-link,
.sidebar-menu a{
    padding-top:7px !important;
    padding-bottom:7px !important;
    line-height:1.12 !important;
}

/* ADMIN con un poco más de aire */
.sidebar .nav-label,
.sidebar .nav-section,
.sidebar .section-label{
    margin-top:7px !important;
    margin-bottom:3px !important;
}

/* ROGER ligeramente más grande */
.sidebar .mini.roger,
.sidebar .roger-card,
.sidebar .roger-sidebar-card{
    padding-top:9px !important;
    padding-bottom:9px !important;
    margin-top:7px !important;
    margin-bottom:7px !important;
}

.sidebar .mini.roger img,
.sidebar .roger-card img,
.sidebar .roger-sidebar-card img{
    max-height:64px !important;
}

/* Tarjeta de usuario un poco menos apretada */
.sidebar .user-card,
.sidebar .profile-card,
.sidebar .sidebar-user{
    padding-top:9px !important;
    padding-bottom:9px !important;
    margin-top:6px !important;
    margin-bottom:6px !important;
}

/* En pantallas más bajas, conservar ajuste */
@media (max-height:900px){
    .sidebar nav a,
    .sidebar .nav-link,
    .sidebar-menu a{
        padding-top:6px !important;
        padding-bottom:6px !important;
    }
}

/* ===== SIDEBAR_MENOS_COMPACTO_END ===== */

/* ===== CENTRAR_CLINICA_BI_START ===== */
.sidebar a[href*="clinic-intelligence"],
.sidebar a[href*="clinic_intelligence"]{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
}
/* ===== CENTRAR_CLINICA_BI_END ===== */

/* ===== QUITAR_CORAZON_HEADER_START ===== */

/* Ocultar únicamente adornos de corazón del encabezado superior */
.topbar .heart,
.topbar .floating-heart,
.topbar .float-heart,
.header .heart,
.header .floating-heart,
.header .float-heart,
.page-head .heart,
.page-head .floating-heart,
.page-head .float-heart{
    display:none !important;
}

/* ===== QUITAR_CORAZON_HEADER_END ===== */

/* ===== ROGER_SIN_PARPADEO_START ===== */

/* ROGER nace cerrado ANTES del primer render */
.roger-box{
    display:none !important;
}

/* Solo aparece cuando realmente se abre */
.roger-box.open{
    display:flex !important;
}

/* Mantener expansión funcionando */
.roger-box.open.roger-expanded{
    display:flex !important;
}

/* ===== ROGER_SIN_PARPADEO_END ===== */

/* ===== QUITAR_CORAZON_P3_START ===== */
.float-paw.p3{
    display:none !important;
}
/* ===== QUITAR_CORAZON_P3_END ===== */


/* ===== USUARIOS_REGISTRADOS_UI_START ===== */

.clp-owner-admin{
    margin:16px 0 18px !important;
    padding:18px 20px !important;
    background:#fff !important;
    border:1px solid #e7edf6 !important;
    border-radius:20px !important;
    box-shadow:0 8px 24px rgba(44,65,110,.06) !important;
}

.clp-owner-admin .section-head{
    margin-bottom:12px !important;
}

.clp-owner-admin .eyebrow{
    display:block !important;
    margin-bottom:3px !important;
    font-size:11px !important;
    font-weight:900 !important;
    letter-spacing:.16em !important;
    color:#6582f5 !important;
}

.clp-owner-admin h2{
    margin:0 !important;
    font-size:22px !important;
    color:#19324e !important;
}

.clp-owner-list{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) !important;
    gap:12px !important;
}

.clp-owner-row{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:14px !important;
    padding:13px 15px !important;
    background:#f9fbff !important;
    border:1px solid #e8eef7 !important;
    border-radius:16px !important;
    min-width:0 !important;
}

.clp-owner-row strong{
    display:block !important;
    font-size:15px !important;
    color:#213955 !important;
}

.clp-owner-row small{
    display:block !important;
    margin-top:3px !important;
    font-size:12px !important;
    color:#8391a6 !important;
}

.clp-owner-pets{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:5px !important;
    margin-top:7px !important;
}

.clp-owner-pets span{
    display:inline-flex !important;
    align-items:center !important;
    padding:4px 8px !important;
    border-radius:999px !important;
    background:#edf5ff !important;
    color:#42638c !important;
    font-size:11px !important;
    font-weight:700 !important;
}

.clp-delete-owner{
    border:0 !important;
    border-radius:11px !important;
    padding:8px 11px !important;
    background:#fff0f2 !important;
    color:#d64d61 !important;
    font-size:12px !important;
    font-weight:800 !important;
    cursor:pointer !important;
    white-space:nowrap !important;
}

.clp-delete-owner:hover{
    background:#ffe1e6 !important;
}

@media(max-width:700px){
    .clp-owner-list{
        grid-template-columns:1fr !important;
    }

    .clp-owner-row{
        align-items:flex-start !important;
        flex-direction:column !important;
    }
}

/* ===== USUARIOS_REGISTRADOS_UI_END ===== */