/* =========================================================
   HUELLINK v1.0 PREMIUM
   Visual-only layer. No business logic changes.
   ========================================================= */

:root{
  --hp-bg:#f5f4ef;
  --hp-bg-2:#f9f8f4;
  --hp-panel:#ffffff;
  --hp-panel-soft:#faf9f6;
  --hp-line:#e8e5dd;
  --hp-line-strong:#ddd9cf;

  --hp-ink:#1e2925;
  --hp-muted:#727a76;
  --hp-muted-2:#9aa09c;

  --hp-green:#2e6454;
  --hp-green-dark:#244f43;
  --hp-green-soft:#e8f1ed;

  --hp-champagne:#d3bb8c;
  --hp-champagne-soft:#f6efe3;

  --hp-rose:#c9827c;
  --hp-rose-soft:#f9ece9;

  --hp-blue:#6d8fa0;
  --hp-blue-soft:#edf4f7;

  --hp-lilac:#8e88aa;
  --hp-lilac-soft:#f1eff6;

  --hp-shadow-xs:0 2px 10px rgba(37,49,43,.035);
  --hp-shadow-sm:0 8px 24px rgba(37,49,43,.055);
  --hp-shadow-md:0 14px 38px rgba(37,49,43,.075);
  --hp-shadow-lg:0 22px 60px rgba(37,49,43,.10);

  --hp-r-sm:12px;
  --hp-r-md:18px;
  --hp-r-lg:24px;
}

/* ---------- Global ---------- */

html,body,.hl-app{
  background:
    radial-gradient(circle at 5% 2%, rgba(224,233,227,.68), transparent 22%),
    radial-gradient(circle at 94% 0%, rgba(239,229,211,.72), transparent 22%),
    linear-gradient(180deg,var(--hp-bg-2),var(--hp-bg))!important;
  color:var(--hp-ink)!important;
}

body{
  font-family:"Segoe UI Variable","Aptos","Inter","Segoe UI",Arial,sans-serif!important;
  letter-spacing:-.008em;
}

::selection{
  background:#dfece6;
  color:#203a31;
}

a{transition:.16s ease}

/* ---------- Shell ---------- */

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

.hl-sidebar{
  width:auto!important;
  padding:18px 15px!important;
  background:
    linear-gradient(180deg,rgba(252,252,249,.98),rgba(247,248,245,.98))!important;
  border-right:1px solid var(--hp-line)!important;
  box-shadow:6px 0 24px rgba(32,43,38,.025);
}

.hl-premium-brand-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 4px 18px;
}

.hl-brand{
  padding:5px 4px!important;
  gap:10px!important;
}

.hl-brand img{
  width:35px!important;
  height:35px!important;
  filter:saturate(.85);
}

.hl-brand strong{
  color:var(--hp-ink)!important;
  font-size:1.32rem!important;
  letter-spacing:-.055em!important;
  font-weight:800!important;
}

.hl-brand small{
  color:#8a918d!important;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.55rem!important;
  font-weight:700;
}

.hl-plan-chip{
  display:inline-flex;
  padding:5px 7px;
  border-radius:999px;
  background:linear-gradient(135deg,#f7f0e3,#efe1c4);
  border:1px solid #e7d8ba;
  color:#81683b;
  font-size:.55rem;
  font-weight:900;
  letter-spacing:.10em;
}

.hl-nav-label{
  padding:8px 12px 7px;
  color:#a0a5a2;
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:800;
}

.hl-nav{
  gap:4px!important;
}

.hl-nav a{
  min-height:43px;
  padding:10px 12px!important;
  border-radius:12px!important;
  border:1px solid transparent!important;
  color:#69716d!important;
  font-size:.84rem!important;
  font-weight:700!important;
}

.hl-nav a .ico{
  width:22px!important;
  color:#8a918d;
}

.hl-nav a:hover{
  color:var(--hp-green)!important;
  background:#f4f6f3!important;
  border-color:#e7ebe7!important;
  transform:translateX(1px);
}

.hl-nav a.active{
  color:var(--hp-green-dark)!important;
  background:
    linear-gradient(135deg,#eaf2ee,#f2f6f2)!important;
  border-color:#dce8e1!important;
  box-shadow:var(--hp-shadow-xs)!important;
}

.hl-nav a.active .ico{
  color:var(--hp-green)!important;
}

.hl-nav-bottom{
  margin-top:9px;
}

.hl-premium-side-card{
  padding:15px;
  border:1px solid #e6e0d4;
  border-radius:18px;
  background:
    radial-gradient(circle at 95% 5%,rgba(211,187,140,.22),transparent 32%),
    linear-gradient(145deg,#f5f7f3,#fbf6ed);
  box-shadow:var(--hp-shadow-xs);
}

.hl-premium-side-icon{
  width:34px;
  height:34px;
  border-radius:11px;
  display:grid;
  place-items:center;
  margin-bottom:9px;
  background:#fff;
  border:1px solid #e9e3d8;
  color:#9b7d49;
}

.hl-premium-side-card strong{
  display:block;
  color:#3b4943;
  font-size:.8rem;
  margin-bottom:5px;
}

.hl-premium-side-card p{
  color:#7f8782;
  font-size:.68rem;
  line-height:1.45;
  margin:0 0 9px;
}

.hl-premium-side-card a{
  color:var(--hp-green);
  font-size:.68rem;
  font-weight:800;
  text-decoration:none;
}

/* ---------- Topbar ---------- */

.hl-topbar{
  height:76px!important;
  padding:0 28px!important;
  background:rgba(249,248,244,.87)!important;
  border-bottom:1px solid rgba(226,224,216,.92)!important;
  box-shadow:0 6px 20px rgba(41,52,47,.025)!important;
}

.hl-topbar-title{
  min-width:125px;
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.hl-topbar-eyebrow{
  color:#9a9f9b;
  font-size:.55rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:800;
}

.hl-topbar-title strong{
  color:#35413c;
  font-size:.86rem;
  margin-top:3px;
}

.hl-search{
  width:min(460px,42vw)!important;
}

.hl-search input{
  height:42px!important;
  border-radius:999px!important;
  border:1px solid #e4e3dd!important;
  background:rgba(255,255,255,.90)!important;
  padding-left:42px!important;
  box-shadow:var(--hp-shadow-xs)!important;
}

.hl-search input::placeholder{
  color:#a0a6a2;
}

.hl-icon-btn{
  width:41px!important;
  height:41px!important;
  border-radius:50%!important;
  border:1px solid #e4e2db!important;
  background:rgba(255,255,255,.92)!important;
  color:#5f6d66!important;
  box-shadow:var(--hp-shadow-xs)!important;
}

.hl-icon-btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--hp-shadow-sm)!important;
}

.hl-user-pill{
  min-height:43px;
  border-radius:999px!important;
  padding:5px 12px 5px 6px!important;
  background:rgba(255,255,255,.94)!important;
  border-color:#e4e2da!important;
  box-shadow:var(--hp-shadow-xs)!important;
}

.hl-user-avatar{
  width:32px!important;
  height:32px!important;
  background:
    linear-gradient(145deg,#e5efe9,#f2e8d8)!important;
  border:1px solid #e0e5df;
  color:var(--hp-green)!important;
  font-size:.75rem;
}

.hl-user-pill strong{
  font-size:.76rem!important;
  color:#394640!important;
}

.hl-user-pill small{
  color:#929894!important;
  font-size:.58rem!important;
}

/* ---------- Content ---------- */

.hl-content{
  max-width:1520px!important;
  padding:30px 32px 52px!important;
}

.hl-page-intro,
.hero{
  margin-bottom:24px!important;
}

.hl-page-intro h1,
.hero h1{
  font-family:"Segoe UI Variable Display","Aptos Display","Segoe UI",Arial,sans-serif!important;
  font-size:clamp(2rem,3vw,2.6rem)!important;
  color:#24302b!important;
  letter-spacing:-.055em!important;
  font-weight:750!important;
}

.hl-page-intro p,
.hero p{
  color:#7e8681!important;
  font-size:.9rem!important;
}

.hl-date-note{
  background:#f4efe5!important;
  border:1px solid #e9ddc9;
  color:#806f51!important;
  font-style:normal!important;
  border-radius:999px!important;
  padding:8px 12px!important;
}

/* ---------- Cards ---------- */

.card{
  background:rgba(255,255,255,.95)!important;
  border:1px solid var(--hp-line)!important;
  border-radius:20px!important;
  box-shadow:var(--hp-shadow-sm)!important;
}

.card:hover{
  border-color:#dfddd5!important;
}

.card h2{
  font-size:1rem!important;
  color:#33403a;
  font-weight:800!important;
}

.section-head,
.hl-panel-title{
  padding-bottom:3px;
}

/* metric cards */

.dashboard-cards{
  gap:15px!important;
  margin-bottom:20px!important;
}

.metric-card{
  min-height:132px!important;
  border:1px solid #e6e3dc!important;
  border-radius:19px!important;
  box-shadow:var(--hp-shadow-sm)!important;
  overflow:hidden;
  position:relative;
}

.metric-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:#dfe7e2;
}

.dashboard-cards .metric-card:nth-child(1){
  background:linear-gradient(145deg,#f1f7f4,#ffffff)!important;
}
.dashboard-cards .metric-card:nth-child(1)::before{background:#9bc5b5}

.dashboard-cards .metric-card:nth-child(2){
  background:linear-gradient(145deg,#f0f5f7,#ffffff)!important;
}
.dashboard-cards .metric-card:nth-child(2)::before{background:#9ab7c6}

.dashboard-cards .metric-card:nth-child(3){
  background:linear-gradient(145deg,#faf0ef,#ffffff)!important;
}
.dashboard-cards .metric-card:nth-child(3)::before{background:#d89a96}

.dashboard-cards .metric-card:nth-child(4){
  background:linear-gradient(145deg,#f3f1f7,#ffffff)!important;
}
.dashboard-cards .metric-card:nth-child(4)::before{background:#aaa3c0}

.dashboard-cards .metric-card:nth-child(5){
  background:linear-gradient(145deg,#faf5eb,#ffffff)!important;
}
.dashboard-cards .metric-card:nth-child(5)::before{background:#d3bb8c}

.metric-card span{
  color:#75807a!important;
  font-size:.72rem!important;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.metric-card strong{
  color:#25312c!important;
  font-size:2.2rem!important;
  font-weight:750!important;
}

.metric-card small{
  color:#929995!important;
}

.metric-card:hover{
  transform:translateY(-3px)!important;
  box-shadow:var(--hp-shadow-md)!important;
}

/* ---------- Lists / rows ---------- */

.dashboard-row{
  padding:12px 6px!important;
  border-bottom-color:#efede7!important;
}

.dashboard-row:hover{
  background:#fafaf7!important;
}

.hl-mini-pet{
  border-radius:13px!important;
  background:#f0f2ef!important;
  border:1px solid #e7e9e5;
}

.hl-date-badge{
  border-radius:12px!important;
  background:#faf7f1!important;
  border-color:#ebe3d7!important;
}

/* ---------- Buttons ---------- */

.btn{
  min-height:40px!important;
  padding:8px 14px!important;
  border-radius:999px!important;
  background:#fff!important;
  border:1px solid #e1dfd8!important;
  color:#4d5a54!important;
  font-size:.78rem!important;
  font-weight:750!important;
  box-shadow:var(--hp-shadow-xs)!important;
}

.btn:hover{
  background:#fafaf7!important;
  border-color:#d7d5ce!important;
  transform:translateY(-1px);
}

.btn.primary{
  background:linear-gradient(135deg,#315f51,#3d7161)!important;
  border-color:#315f51!important;
  color:white!important;
  box-shadow:0 7px 18px rgba(49,95,81,.17)!important;
}

.btn.primary:hover{
  background:linear-gradient(135deg,#294f44,#356757)!important;
}

.btn.whatsapp{
  background:#edf6f1!important;
  border-color:#d6e9df!important;
  color:#2f6d53!important;
}

.danger-btn{
  background:linear-gradient(135deg,#bf6e68,#cb8079)!important;
  border-color:#bf6e68!important;
  color:white!important;
}

/* ---------- Status ---------- */

.status-pill{
  min-height:24px;
  padding:5px 9px!important;
  border-radius:999px!important;
  font-size:.60rem!important;
  letter-spacing:.06em!important;
  border:1px solid transparent;
}

.status-ok{
  background:#ebf4ef!important;
  color:#477660!important;
  border-color:#dcebe3;
}

.status-lost{
  background:#f8e9e7!important;
  color:#a85b56!important;
  border-color:#efd6d3;
}

.status-online{
  background:#ecf4f0!important;
  color:#3f735d!important;
  border-color:#d8e8e0;
}

.status-offline{
  background:#f2f2ef!important;
  color:#7b817d!important;
  border-color:#e6e6e1;
}

/* ---------- Forms ---------- */

label{
  color:#68736d!important;
  text-transform:uppercase;
  letter-spacing:.055em;
  font-size:.62rem!important;
  font-weight:850!important;
}

input,
select,
textarea{
  min-height:42px;
  border-radius:13px!important;
  border:1px solid #e2e0d9!important;
  background:#fdfdfb!important;
  color:#334039!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}

textarea{
  min-height:92px;
}

input:focus,
select:focus,
textarea:focus{
  border-color:#aac7bb!important;
  box-shadow:0 0 0 4px rgba(74,128,107,.075)!important;
  background:#fff!important;
}

/* ---------- Tables ---------- */

.table-wrap{
  border:1px solid #ebe8e1;
  border-radius:15px!important;
  background:#fff;
}

th{
  padding:12px!important;
  background:#f8f8f5!important;
  color:#858d88!important;
  font-size:.61rem!important;
  letter-spacing:.08em!important;
}

td{
  padding:12px!important;
  color:#505d56;
}

tbody tr:hover{
  background:#fafaf7!important;
}

/* ---------- Mascotas cards ---------- */

.hl-pets-grid{
  gap:20px!important;
}

.hl-pet-card{
  border-radius:22px!important;
  border-color:#e5e2db!important;
  box-shadow:var(--hp-shadow-sm)!important;
}

.hl-pet-card:hover{
  transform:translateY(-4px)!important;
  box-shadow:var(--hp-shadow-lg)!important;
}

.hl-pet-photo-wrap{
  background:
    radial-gradient(circle at 25% 15%,rgba(231,240,234,.8),transparent 38%),
    linear-gradient(145deg,#f6f4ee,#eff4f0)!important;
}

.hl-pet-card-photo{
  border:1px solid #ece9e2;
  box-shadow:0 8px 22px rgba(41,53,47,.055);
}

.hl-pet-card-title h2{
  color:#28352f;
  font-weight:800;
}

.hl-pet-info{
  border:1px solid rgba(101,119,109,.04)!important;
}

.pastel-mint{background:#eef5f1!important}
.pastel-blue{background:#eff4f6!important}
.pastel-lilac{background:#f3f1f7!important}
.pastel-peach{background:#faf2e9!important}

/* ---------- Pet profile ---------- */

.hl-pet-profile-hero{
  background:
    radial-gradient(circle at 8% 12%,rgba(228,238,231,.72),transparent 30%),
    radial-gradient(circle at 95% 5%,rgba(239,227,207,.62),transparent 28%),
    #fff!important;
  border-color:#e5e1d8!important;
  box-shadow:var(--hp-shadow-md)!important;
}

.hl-pet-title-row h1{
  color:#21302a!important;
  font-weight:750!important;
}

.hl-profile-kpi{
  border:1px solid #e8e5de!important;
  box-shadow:var(--hp-shadow-xs);
}

.hl-profile-tabs{
  background:#fbfbf8!important;
  border-color:#e6e3db!important;
}

.hl-profile-tabs button{
  color:#7c837f!important;
}

.hl-profile-tabs button.active{
  background:#e9f1ed!important;
  color:#315f51!important;
}

.hl-data-item{
  background:#fafaf7!important;
  border-color:#eceae4!important;
}

/* ---------- Owner portal ---------- */

.owner-bg{
  background:
    radial-gradient(circle at 12% 4%,rgba(228,237,230,.8),transparent 25%),
    radial-gradient(circle at 90% 2%,rgba(242,230,211,.75),transparent 26%),
    #f6f5f1!important;
}

.owner-welcome{
  background:
    radial-gradient(circle at 92% 20%,rgba(211,187,140,.14),transparent 30%),
    linear-gradient(135deg,#edf4f0,#fbf4e8)!important;
  border-color:#e6e0d5!important;
  box-shadow:var(--hp-shadow-sm);
}

.owner-welcome h1{
  color:#27342e;
}

.owner-pet{
  box-shadow:var(--hp-shadow-md)!important;
}

/* ---------- Public lost page ---------- */

.hl-public-page{
  background:
    radial-gradient(circle at 10% 6%,rgba(227,237,230,.78),transparent 25%),
    radial-gradient(circle at 90% 2%,rgba(241,228,208,.72),transparent 25%),
    #f6f5f1!important;
}

.hl-public-nav{
  background:rgba(251,250,246,.90)!important;
  border-bottom-color:#e6e2d9!important;
}

.public-hero{
  background:
    radial-gradient(circle at 14% 20%,rgba(222,234,226,.76),transparent 34%),
    radial-gradient(circle at 88% 22%,rgba(241,225,204,.62),transparent 31%),
    linear-gradient(135deg,#f8f6f0,#f4f7f4)!important;
  border-color:#e5e1d7!important;
  box-shadow:var(--hp-shadow-sm)!important;
}

.public-hero h1{
  color:#26332d!important;
}

.lost-card{
  border-color:#e5e1d9!important;
  box-shadow:var(--hp-shadow-sm)!important;
}

.lost-card:hover{
  box-shadow:var(--hp-shadow-lg)!important;
}

/* ---------- Alerts ---------- */

.alert,
.publish-warning,
.publish-success,
.hl-profile-alert{
  border-radius:16px!important;
}

.publish-warning,
.hl-profile-alert-warning{
  background:#fbf5e7!important;
  border-color:#ead9b6!important;
}

.publish-success,
.hl-profile-alert-success{
  background:#edf5f1!important;
  border-color:#d3e6dc!important;
}

/* ---------- Mobile ---------- */

.hl-mobile-backdrop{
  display:none;
}

@media(max-width:940px){
  .hl-shell{
    grid-template-columns:1fr!important;
  }

  .hl-sidebar{
    width:252px!important;
    left:-270px!important;
    box-shadow:16px 0 50px rgba(31,44,37,.18)!important;
  }

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

  .hl-mobile-backdrop{
    position:fixed;
    inset:0;
    z-index:45;
    background:rgba(25,35,30,.24);
    backdrop-filter:blur(2px);
  }

  .hl-mobile-backdrop.show{
    display:block;
  }

  .hl-topbar-title{
    display:none;
  }

  .hl-content{
    padding:24px 18px 44px!important;
  }
}

@media(max-width:700px){
  .hl-topbar{
    height:66px!important;
    padding:0 14px!important;
  }

  .hl-user-pill{
    padding-right:7px!important;
  }

  .hl-user-pill>div:last-child{
    display:none;
  }

  .hl-page-intro h1,
  .hero h1{
    font-size:1.9rem!important;
  }

  .dashboard-cards{
    gap:10px!important;
  }

  .metric-card{
    min-height:112px!important;
  }
}

@media(max-width:480px){
  .hl-content{
    padding:18px 11px 38px!important;
  }

  .card{
    border-radius:17px!important;
  }

  .btn{
    min-height:39px!important;
  }
}