/* ==========================================================
   Multi-Pet Nutrición Natural — Área de Membros (App v2)
   Estética alinhada à LP (Inter + verde garrafa/mostarda)
   Foco: menos texto, mais interação, dinâmico, profundidade
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500&display=swap');

:root{
  --primary:#1E3A2F;
  --primary-soft:#2D5142;
  --primary-10:#E8EDE9;
  --primary-20:#D0DAD3;
  --action:#D9A441;
  --action-dark:#B5862C;
  --action-10:#FCF4DF;
  --action-20:#F8E9C2;
  --bg:#F7F2E7;
  --bg-deep:#EFE7D2;
  --bg-card:#FFFCF4;
  --ink:#2A2520;
  --ink-soft:#5C5247;
  --ink-mute:#8A7F70;
  --warn:#C76A4A;
  --warn-bg:#FBE9DD;
  --crit:#C44545;
  --crit-bg:#FBE9E9;
  --mod:#C9A227;
  --mod-bg:#F6EDC8;
  --success:#5E8B6E;
  --success-bg:#E0EDDE;

  --shadow-sm:0 1px 2px rgba(42,37,32,.04),0 2px 8px rgba(42,37,32,.06);
  --shadow:0 4px 14px rgba(42,37,32,.08),0 10px 30px rgba(42,37,32,.10);
  --shadow-lg:0 10px 30px rgba(42,37,32,.12),0 24px 60px rgba(42,37,32,.16);
  --shadow-cta:0 8px 24px rgba(217,164,65,.32);
  --radius:14px;
  --radius-lg:20px;
  --radius-xl:26px;

  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:.16s var(--ease);
  --t:.28s var(--ease);
  --t-slow:.5s var(--ease);

  --sidebar-w:280px;
}

*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.65}
body{background-image:radial-gradient(1200px 600px at 100% -10%,rgba(217,164,65,.07),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(30,58,47,.06),transparent 55%)}

/* ===== Tipografia ===== */
h1,h2,h3,h4{font-family:'Inter',sans-serif;color:var(--primary);font-weight:800;letter-spacing:-.025em;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(1.8rem,4.5vw,2.6rem);font-weight:900;letter-spacing:-.035em;line-height:1.1}
h2{font-size:clamp(1.35rem,3vw,1.85rem);font-weight:800;letter-spacing:-.025em;margin-top:1.2em}
h3{font-size:clamp(1.05rem,2.2vw,1.28rem);font-weight:700;color:var(--ink)}
h4{font-size:1rem;font-weight:700;color:var(--primary)}
p{margin:0 0 1em}
strong{color:var(--ink);font-weight:700}
em{color:var(--primary-soft);font-style:italic}
a{color:var(--action-dark);text-decoration:none;font-weight:600}
a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
ul,ol{margin:0 0 1em;padding-left:1.5em}
li{margin-bottom:.35em}
img{max-width:100%;height:auto;display:block;border-radius:10px}
.muted{color:var(--ink-mute)}
.tiny{font-size:.82rem}

/* ===== Layout ===== */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--primary) 0%,#19302642 0,var(--primary) 0,#173026 100%);color:var(--bg);padding:1.5rem 1.2rem;overflow-y:auto;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.main{padding:2.5rem 2.6rem;max-width:1000px;width:100%}
.section{margin:2.4em 0}
.section:first-of-type{margin-top:1.4em}

/* ===== Sidebar ===== */
.brand{display:flex;align-items:center;gap:.6em;color:var(--action);font-weight:800;font-size:1.05rem;margin-bottom:1.6rem;letter-spacing:-.01em}
.brand .paw{font-size:1.4em}
.brand small{display:block;color:rgba(247,242,231,.7);font-weight:500;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;margin-top:.1em}

.sidebar-progress{background:rgba(247,242,231,.06);border:1px solid rgba(247,242,231,.1);border-radius:12px;padding:.9rem 1rem;margin-bottom:1.4rem}
.sidebar-progress .sp-top{display:flex;align-items:center;justify-content:space-between;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(247,242,231,.6);font-weight:700;margin-bottom:.5em}
.sidebar-progress .sp-pct{color:var(--action);font-weight:800}
.sp-bar{height:7px;border-radius:6px;background:rgba(247,242,231,.12);overflow:hidden}
.sp-fill{height:100%;width:0;background:linear-gradient(90deg,var(--action),var(--success));border-radius:6px;transition:width .8s var(--ease)}

.nav-section{margin-bottom:1.2rem}
.nav-section-title{color:rgba(247,242,231,.5);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.5em;padding:0 .8em}
.nav-list{list-style:none;padding:0;margin:0;display:grid;gap:.15em}
.nav-link{display:flex;align-items:center;gap:.7em;padding:.62em .9em;border-radius:10px;color:rgba(247,242,231,.85);text-decoration:none;font-weight:500;font-size:.94rem;transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast);position:relative}
.nav-link:hover{background:rgba(217,164,65,.12);color:var(--bg);text-decoration:none;transform:translateX(2px)}
.nav-link.active{background:var(--action);color:var(--primary);font-weight:700;box-shadow:0 6px 16px rgba(217,164,65,.28)}
.nav-link .icon{font-size:1.1em;width:1.4em;text-align:center}
.nav-link .nav-dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--action);opacity:0;transform:scale(.4);transition:opacity var(--t),transform var(--t)}
.nav-link.has-progress .nav-dot{opacity:1;transform:scale(1)}
.nav-link.active .nav-dot{background:var(--primary)}

.sidebar-footer{margin-top:auto;padding-top:1.4rem;border-top:1px solid rgba(247,242,231,.1);color:rgba(247,242,231,.5);font-size:.78rem;line-height:1.5}

/* ===== Mobile nav ===== */
.menu-toggle{display:none;position:fixed;top:1rem;left:1rem;z-index:100;background:var(--primary);color:var(--action);border:0;width:46px;height:46px;border-radius:12px;font-size:1.4rem;cursor:pointer;box-shadow:var(--shadow)}
.menu-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90;backdrop-filter:blur(2px)}

@media (max-width:880px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;top:0;left:0;width:284px;height:100vh;transform:translateX(-100%);transition:transform var(--t);z-index:95}
  .sidebar.open{transform:translateX(0)}
  .main{padding:5rem 1.15rem 3rem;max-width:none}
  .menu-toggle{display:flex;align-items:center;justify-content:center}
  .menu-overlay.active{display:block}
}

/* ===== Hero da página ===== */
.page-hero{margin-bottom:1.8em;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:.4em;background:var(--action-10);color:var(--action-dark);padding:.38em 1em;border-radius:30px;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1em;box-shadow:inset 0 0 0 1px rgba(181,134,44,.16)}
.page-hero h1{margin-bottom:.3em}
.page-hero .lead{font-size:1.08rem;color:var(--ink-soft);max-width:660px;line-height:1.55}

/* ===== Reveal (scroll) ===== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.06s}
.reveal[data-d="2"]{transition-delay:.12s}
.reveal[data-d="3"]{transition-delay:.18s}
.reveal[data-d="4"]{transition-delay:.24s}
.reveal[data-d="5"]{transition-delay:.30s}

/* ===== Cards ===== */
.card{background:var(--bg-card);border-radius:var(--radius);padding:1.5em;box-shadow:var(--shadow-sm);margin-bottom:1.1em;border:1px solid rgba(42,37,32,.05);transition:box-shadow var(--t),transform var(--t)}
.card.hover:hover,.card.lift:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.card.bordered{border-left:4px solid var(--action)}
.card.bordered-primary{border-left:4px solid var(--primary)}
.card.bordered-warn{border-left:4px solid var(--warn)}
.card.bordered-crit{border-left:4px solid var(--crit)}
.card.flat{box-shadow:none;background:transparent;border:1px dashed var(--primary-20)}
.card h3{margin-top:0}
.card-pad-sm{padding:1.1em 1.2em}

.grid{display:grid;gap:1em}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
@media (max-width:760px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ===== Module cards (dashboard) ===== */
.module-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1em}
.module{position:relative;display:flex;flex-direction:column;background:var(--bg-card);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid rgba(42,37,32,.05);text-decoration:none;color:inherit;transition:box-shadow var(--t),transform var(--t)}
.module:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);text-decoration:none}
.module .m-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--primary-10)}
.module .m-media img{width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .6s var(--ease)}
.module:hover .m-media img{transform:scale(1.06)}
.module .m-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(30,58,47,.45));opacity:.0;transition:opacity var(--t)}
.module:hover .m-media::after{opacity:1}
.module .m-tag{position:absolute;top:.7em;left:.7em;background:rgba(255,252,244,.92);color:var(--primary);font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:.32em .7em;border-radius:20px;backdrop-filter:blur(4px)}
.module .m-body{padding:1.15em 1.25em 1.3em;display:flex;flex-direction:column;flex:1}
.module .m-body h3{margin:0 0 .35em;color:var(--primary)}
.module .m-body p{font-size:.92rem;color:var(--ink-soft);margin:0 0 1em;flex:1}
.module .m-go{display:inline-flex;align-items:center;gap:.5em;font-weight:800;color:var(--action-dark);font-size:.92rem}
.module .m-go svg{transition:transform var(--t)}
.module:hover .m-go svg{transform:translateX(4px)}
.module.is-warn .m-tag{background:var(--warn);color:#fff}

/* ===== Dashboard widgets ===== */
.dash{display:grid;grid-template-columns:1.15fr .85fr;gap:1.2em;margin-bottom:1.8em}
@media (max-width:820px){.dash{grid-template-columns:1fr}}
.dash-panel{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-soft) 100%);color:var(--bg);border-radius:var(--radius-lg);padding:1.6em;box-shadow:var(--shadow);position:relative;overflow:hidden}
.dash-panel::after{content:"🐾";position:absolute;right:-.2em;bottom:-.35em;font-size:7rem;opacity:.07;transform:rotate(-12deg)}
.dash-panel .dp-label{color:var(--action);text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;font-weight:800;margin-bottom:.3em}
.dash-panel h2{color:var(--bg);margin:.1em 0 .2em;font-size:1.45rem}
.dash-panel p{color:rgba(247,242,231,.82);font-size:.95rem;margin:.2em 0 1.2em}
.dash-resume{display:inline-flex;align-items:center;gap:.5em;background:var(--action);color:var(--primary);font-weight:800;padding:.7em 1.3em;border-radius:10px;text-decoration:none;transition:transform var(--t-fast),background var(--t-fast)}
.dash-resume:hover{background:#e7b658;color:var(--primary);transform:translateY(-2px);text-decoration:none}

.dash-stats{display:grid;grid-template-rows:auto;gap:1em}
.stat{background:var(--bg-card);border-radius:var(--radius);padding:1.1em 1.25em;box-shadow:var(--shadow-sm);border:1px solid rgba(42,37,32,.05);display:flex;align-items:center;gap:1em}
.stat .st-ring{flex-shrink:0}
.stat .st-ico{flex-shrink:0;width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:var(--action-10)}
.stat .st-meta{display:flex;flex-direction:column;line-height:1.2}
.stat .st-num{font-size:1.5rem;font-weight:900;color:var(--primary);letter-spacing:-.02em}
.stat .st-cap{font-size:.84rem;color:var(--ink-soft);font-weight:600}

/* ===== Progress ring (SVG) ===== */
.ring{--sz:120px;--stroke:11px;--val:0;width:var(--sz);height:var(--sz);position:relative;display:inline-grid;place-items:center}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .ring-bg{fill:none;stroke:rgba(255,255,255,.16);stroke-width:var(--stroke)}
.ring .ring-fg{fill:none;stroke:var(--action);stroke-width:var(--stroke);stroke-linecap:round;stroke-dasharray:var(--circ);stroke-dashoffset:var(--circ);transition:stroke-dashoffset 1.1s var(--ease)}
.ring.ring-ink .ring-bg{stroke:var(--primary-10)}
.ring.ring-ink .ring-fg{stroke:var(--action-dark)}
.ring .ring-label{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1}
.ring .ring-pct{font-size:1.5rem;font-weight:900;letter-spacing:-.03em}
.ring .ring-sub{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.7;margin-top:.25em}

/* ===== Stepper ===== */
.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:.6em;counter-reset:step;margin:1.2em 0 1.4em;position:relative}
@media (max-width:680px){.stepper{grid-template-columns:1fr 1fr}}
.step{background:var(--bg-card);border:1px solid rgba(42,37,32,.06);border-radius:var(--radius);padding:1.1em 1em;box-shadow:var(--shadow-sm);position:relative;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--action-20)}
.step .s-n{counter-increment:step;width:30px;height:30px;border-radius:50%;background:var(--primary);color:var(--action);font-weight:900;display:flex;align-items:center;justify-content:center;font-size:.92rem;margin-bottom:.6em}
.step .s-n::before{content:counter(step)}
.step h4{margin:.1em 0 .25em;color:var(--primary);font-size:.98rem}
.step p{font-size:.86rem;color:var(--ink-soft);margin:0}
.step .s-link{display:inline-block;margin-top:.6em;font-size:.82rem;font-weight:800;color:var(--action-dark)}

/* ===== Chips / segmented selector ===== */
.chips{display:flex;flex-wrap:wrap;gap:.5em;margin:0 0 1.3em}
.chip{appearance:none;border:1.5px solid var(--primary-20);background:var(--bg-card);color:var(--ink-soft);font-family:inherit;font-size:.9rem;font-weight:700;padding:.55em 1em;border-radius:30px;cursor:pointer;display:inline-flex;align-items:center;gap:.45em;transition:all var(--t-fast)}
.chip:hover{border-color:var(--action);color:var(--primary);transform:translateY(-1px)}
.chip.active{background:var(--primary);color:var(--action);border-color:var(--primary);box-shadow:0 6px 16px rgba(30,58,47,.22)}
.chip .chip-x{font-size:1em}
.chip.chip-crit.active{background:var(--crit);border-color:var(--crit);color:#fff}
.chip.chip-grave.active{background:var(--action-dark);border-color:var(--action-dark);color:#fff}
.chip.chip-mod.active{background:var(--mod);border-color:var(--mod);color:#3d3210}

/* ===== Toggle (perro/gato) ===== */
.toggle{display:inline-flex;background:var(--primary-10);padding:.28em;border-radius:30px;margin-bottom:1.4em;gap:.15em;flex-wrap:wrap}
.toggle button{background:transparent;border:0;padding:.5em 1.2em;border-radius:30px;font-family:inherit;font-size:.92rem;font-weight:700;color:var(--ink-soft);cursor:pointer;transition:all var(--t-fast)}
.toggle button:hover{color:var(--primary)}
.toggle button.active{background:var(--primary);color:var(--action);box-shadow:0 4px 12px rgba(30,58,47,.2)}

/* ===== Callouts ===== */
.callout{margin:1em 0;padding:1em 1.2em;border-radius:12px;background:var(--primary-10);border-left:4px solid var(--primary)}
.callout-warn{background:var(--warn-bg);border-left-color:var(--warn)}
.callout-tip{background:var(--action-10);border-left-color:var(--action-dark)}
.callout-success{background:var(--success-bg);border-left-color:var(--success)}
.callout strong:first-child{display:block;color:var(--primary);margin-bottom:.4em;font-weight:700}
.callout-warn strong:first-child{color:var(--warn)}
.callout-tip strong:first-child{color:var(--action-dark)}

/* ===== Botões ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;background:var(--action);color:var(--primary);font-weight:800;font-size:.96rem;padding:.72em 1.5em;border-radius:10px;border:0;cursor:pointer;text-decoration:none;font-family:inherit;line-height:1.2;transition:transform var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);box-shadow:0 4px 12px rgba(217,164,65,.22)}
.btn:hover{background:#e7b658;color:var(--primary);transform:translateY(-2px);text-decoration:none;box-shadow:var(--shadow-cta)}
.btn:active{transform:translateY(0)}
.btn-secondary{background:var(--primary);color:var(--action);box-shadow:0 4px 12px rgba(30,58,47,.2)}
.btn-secondary:hover{background:var(--primary-soft);color:var(--action)}
.btn-ghost{background:transparent;color:var(--primary);border:2px solid var(--primary-20);box-shadow:none}
.btn-ghost:hover{background:var(--primary);color:var(--bg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.5em 1em}
.btn-block{display:flex;width:100%}

/* ===== Forms ===== */
.form-group{margin-bottom:1.1em}
.form-group label{display:block;font-weight:700;color:var(--primary);margin-bottom:.3em;font-size:.9rem}
.form-control{width:100%;padding:.72em .95em;background:var(--bg);border:1.5px solid var(--primary-20);border-radius:10px;font-family:inherit;font-size:.95rem;color:var(--ink);transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast)}
.form-control:focus{outline:none;border-color:var(--action);background:var(--bg-card);box-shadow:0 0 0 4px rgba(217,164,65,.16)}
select.form-control{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231E3A2F' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1em center;padding-right:2.5em;appearance:none}

/* ===== Tabela ===== */
table{border-collapse:collapse;width:100%;margin:1em 0;background:var(--bg-card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
th{background:var(--primary);color:var(--bg);padding:.8em 1em;text-align:left;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
td{padding:.78em 1em;border-bottom:1px solid var(--primary-10);vertical-align:top;font-size:.93rem}
tr:last-child td{border-bottom:0}
tr:nth-child(even) td{background:var(--bg)}
tbody tr{transition:background var(--t-fast)}
tbody tr:hover td{background:var(--action-10)}

/* Tabela → cards no mobile */
@media (max-width:680px){
  table.responsive thead{display:none}
  table.responsive,table.responsive tbody,table.responsive tr,table.responsive td{display:block;width:100%}
  table.responsive{box-shadow:none;background:transparent}
  table.responsive tr{background:var(--bg-card)!important;border:1px solid rgba(42,37,32,.06);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:.8em;padding:.5em .9em}
  table.responsive td{border:0!important;background:transparent!important;padding:.4em 0;display:flex;justify-content:space-between;gap:1em;font-size:.92rem}
  table.responsive td::before{content:attr(data-label);font-weight:800;color:var(--primary);text-transform:uppercase;font-size:.7rem;letter-spacing:.05em;flex-shrink:0;padding-top:.15em}
  table.responsive td:first-child{font-weight:800;font-size:1rem;border-bottom:1px solid var(--primary-10)!important;padding-bottom:.5em;margin-bottom:.2em}
  table.responsive td:first-child::before{content:""}
}

/* ===== Badges ===== */
.badge{display:inline-block;padding:.22em .65em;border-radius:6px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.badge-crit{background:var(--crit);color:#fff}
.badge-grave{background:var(--action-dark);color:#fff}
.badge-mod{background:var(--mod);color:#3d3210}
.badge-success{background:var(--success);color:#fff}
.badge-tag{background:var(--primary-10);color:var(--primary);font-weight:700;font-size:.75rem;text-transform:none;letter-spacing:0}

/* ===== Receta card ===== */
.receta{background:var(--bg-card);border-radius:var(--radius);padding:1.4em 1.5em;margin-bottom:1em;box-shadow:var(--shadow-sm);border:1px solid rgba(42,37,32,.05);border-left:4px solid var(--action);transition:transform var(--t),box-shadow var(--t)}
.receta:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.receta-header{display:flex;justify-content:space-between;align-items:flex-start;gap:.8em;margin-bottom:.7em;flex-wrap:wrap}
.receta-title{margin:0;font-size:1.12rem;flex:1;min-width:200px;color:var(--primary)}
.receta-tags{display:flex;gap:.4em;flex-wrap:wrap;align-items:center}
.receta-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.6em;background:var(--primary-10);padding:.8em 1em;border-radius:10px;margin-bottom:.9em;font-size:.85rem}
.receta-meta-item strong{display:block;color:var(--primary);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.2em;font-weight:800}
.receta-fav{background:transparent;border:0;font-size:1.45em;cursor:pointer;color:var(--ink-mute);padding:0 .15em;line-height:1;transition:transform var(--t-fast),color var(--t-fast)}
.receta-fav:hover{transform:scale(1.18)}
.receta-fav.active{color:var(--action)}
.receta-fav.pop{animation:pop .4s var(--ease)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.4)}100%{transform:scale(1)}}
details{border-top:1px solid var(--primary-10)}
details:first-of-type{border-top:0}
.receta details summary,details.acc summary{cursor:pointer;font-weight:700;color:var(--primary);padding:.6em 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.receta details summary::-webkit-details-marker,details.acc summary::-webkit-details-marker{display:none}
.receta details summary::after,details.acc summary::after{content:"▾";color:var(--action-dark);transition:transform var(--t)}
.receta details[open] summary::after,details.acc[open] summary::after{transform:rotate(180deg)}
.receta details ul,.receta details ol{margin-top:.4em;animation:fadeIn .3s var(--ease)}
details.acc{background:var(--bg-card);border:1px solid rgba(42,37,32,.06);border-radius:12px;padding:.2em 1.2em;margin-bottom:.7em;box-shadow:var(--shadow-sm)}
details.acc>summary{font-size:1rem}
details.acc[open]{box-shadow:var(--shadow)}
details.acc .acc-body{padding-bottom:1em;animation:fadeIn .3s var(--ease)}
.receta-imprimir{margin-top:.8em;text-align:right}

/* ===== Filtros ===== */
.filters{background:var(--bg-card);border-radius:var(--radius);padding:1.1em 1.2em;margin-bottom:1.4em;box-shadow:var(--shadow-sm);border:1px solid rgba(42,37,32,.05)}
.filters.sticky{position:sticky;top:.6rem;z-index:30;backdrop-filter:blur(6px);background:rgba(255,252,244,.92)}
.filters-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8em}
.filters-summary{margin-top:.8em;color:var(--ink-soft);font-size:.88rem;display:flex;align-items:center;gap:1em;flex-wrap:wrap}
.filters-summary strong{color:var(--primary)}

/* Filtros como dropdown no mobile (barra fina + tap pra expandir).
   No desktop o JS força open=true e o summary é escondido — visual idêntico ao antigo. */
.filters.filters-mobile-drop{padding:.5em .95em}
.filters.filters-mobile-drop>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:.5em .15em;font-weight:800;color:var(--primary);font-size:.96rem;line-height:1.3;min-height:38px;user-select:none;-webkit-tap-highlight-color:transparent}
.filters.filters-mobile-drop>summary::-webkit-details-marker{display:none}
.filters.filters-mobile-drop>summary .f-left,
.filters.filters-mobile-drop>summary .f-right{display:flex;align-items:center;gap:.5em;min-width:0}
.filters.filters-mobile-drop>summary .f-right{color:var(--ink-mute);font-weight:600;font-size:.85rem}
.filters.filters-mobile-drop>summary .f-count{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55vw}
.filters.filters-mobile-drop>summary .f-caret{color:var(--action-dark);font-size:1.25em;font-weight:700;line-height:1;transition:transform var(--t);flex-shrink:0}
.filters.filters-mobile-drop[open]>summary .f-caret{transform:rotate(180deg)}
.filters.filters-mobile-drop>summary .f-active{background:var(--action);color:var(--primary);font-size:.66rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;padding:.2em .55em;border-radius:20px;line-height:1;flex-shrink:0}
.filters.filters-mobile-drop>.filters-body{padding:.7em 0 .1em;animation:fadeIn .25s var(--ease)}
.filters.filters-mobile-drop>.filters-body .filters-summary{margin-top:.6em}
@media (min-width:760px){
  .filters.filters-mobile-drop{padding:1.1em 1.2em}
  .filters.filters-mobile-drop>summary{display:none}
  .filters.filters-mobile-drop>.filters-body{padding:0;animation:none}
}

.empty-state{text-align:center;padding:2.5em 1em;color:var(--ink-mute)}
.empty-state .es-ico{font-size:2.4rem;opacity:.5;margin-bottom:.3em}

/* ===== Checklist (transición / kit) ===== */
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:.55em}
.checklist-item{background:var(--bg-card);border-radius:var(--radius);padding:.95em 1.1em;display:flex;align-items:flex-start;gap:.9em;box-shadow:var(--shadow-sm);border:1px solid rgba(42,37,32,.05);transition:background var(--t),opacity var(--t),transform var(--t-fast),border-color var(--t)}
.checklist-item:hover{transform:translateX(2px);border-color:var(--action-20)}
.checklist-item.today{border-color:var(--action);box-shadow:0 0 0 3px rgba(217,164,65,.18),var(--shadow-sm)}
.checklist-item.done{opacity:.62;background:var(--success-bg)}
.checklist-item.done .checklist-day,.checklist-item.done .checklist-content strong{text-decoration:line-through}
.checklist-checkbox{flex-shrink:0;width:26px;height:26px;border:2px solid var(--primary);border-radius:8px;background:var(--bg);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;font-weight:900;line-height:1;margin-top:.1em;transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.checklist-checkbox:hover{transform:scale(1.08)}
.checklist-checkbox.checked{background:var(--success);border-color:var(--success);animation:pop .35s var(--ease)}
.checklist-content{flex:1}
.checklist-content>p{margin:.2em 0 0;font-size:.92rem;color:var(--ink-soft)}
.checklist-day{font-weight:800;color:var(--primary);display:flex;align-items:center;flex-wrap:wrap;gap:.5em}
.checklist-today-tag{background:var(--action);color:var(--primary);font-size:.66rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;padding:.18em .55em;border-radius:20px}
.checklist-percentages{display:inline-block;background:var(--action-10);color:var(--action-dark);padding:.16em .6em;border-radius:6px;font-size:.78rem;font-weight:800}
.checklist-item summary{cursor:pointer;list-style:none;color:var(--action-dark);font-weight:700;font-size:.85rem;margin-top:.4em}
.checklist-item summary::-webkit-details-marker{display:none}
.checklist-item details[open] summary{margin-bottom:.2em}

.progress-bar{background:var(--primary-10);height:12px;border-radius:8px;overflow:hidden;margin:1em 0 .3em}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--action) 0%,var(--success) 100%);width:0%;transition:width .8s var(--ease)}
.progress-label{text-align:center;color:var(--ink-soft);font-size:.88rem;margin-bottom:1.5em;font-weight:600}

.progress-hero{display:flex;align-items:center;gap:1.6em;background:linear-gradient(135deg,var(--primary),var(--primary-soft));color:var(--bg);border-radius:var(--radius-lg);padding:1.6em 1.8em;box-shadow:var(--shadow);margin-bottom:1.6em;flex-wrap:wrap}
.progress-hero .ring{--sz:128px;color:var(--bg)}
.progress-hero .ph-text{flex:1;min-width:220px}
.progress-hero .ph-text h2{color:var(--bg);margin:.1em 0 .2em;font-size:1.4rem}
.progress-hero .ph-text p{color:rgba(247,242,231,.82);margin:0;font-size:.95rem}
.progress-hero .ph-actions{margin-top:.9em;display:flex;gap:.6em;flex-wrap:wrap}

/* ===== Calculadora resultado ===== */
.calc-result{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-soft) 100%);color:var(--bg);padding:2em 1.6em;border-radius:var(--radius-lg);text-align:center;margin-top:1.4em;display:none;box-shadow:var(--shadow);position:relative;overflow:hidden}
.calc-result::after{content:"🍽️";position:absolute;right:-.15em;bottom:-.35em;font-size:6rem;opacity:.08;transform:rotate(-12deg)}
.calc-result.show{display:block;animation:popIn .45s var(--ease)}
.calc-result-label{color:var(--action);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;font-weight:800;margin-bottom:.4em}
.calc-result-value{font-size:2.6rem;font-weight:900;color:var(--bg);line-height:1;margin-bottom:.2em;letter-spacing:-.03em}
.calc-result-detail{color:rgba(247,242,231,.85);font-size:.92rem;margin-bottom:1.4em}
.calc-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:1em;margin-top:1em;padding-top:1em;border-top:1px solid rgba(247,242,231,.15)}
.calc-result-cell strong{display:block;color:var(--action);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.2em;font-weight:800}
.calc-result-cell span{font-size:1.4rem;font-weight:800;color:var(--bg)}
.calc-result-actions{margin-top:1.3em;display:flex;gap:.6em;justify-content:center;flex-wrap:wrap}

/* mascotas guardadas */
.pets{display:flex;gap:.6em;flex-wrap:wrap;margin:.4em 0 1.4em}
.pet-card{display:flex;align-items:center;gap:.6em;background:var(--bg-card);border:1.5px solid var(--primary-20);border-radius:14px;padding:.6em .9em;cursor:pointer;transition:all var(--t-fast);box-shadow:var(--shadow-sm)}
.pet-card:hover{border-color:var(--action);transform:translateY(-2px)}
.pet-card .pc-emo{font-size:1.5rem}
.pet-card .pc-meta{line-height:1.2}
.pet-card .pc-name{font-weight:800;color:var(--primary);font-size:.95rem}
.pet-card .pc-sub{font-size:.78rem;color:var(--ink-mute)}
.pet-card .pc-del{border:0;background:transparent;color:var(--ink-mute);cursor:pointer;font-size:1rem;padding:.1em .2em;border-radius:6px}
.pet-card .pc-del:hover{color:var(--crit);background:var(--crit-bg)}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes popIn{0%{opacity:0;transform:scale(.94) translateY(10px)}100%{opacity:1;transform:none}}

/* ===== Search ===== */
.search-box{position:relative;margin-bottom:1.3em}
.search-box input{width:100%;padding:.9em 1em .9em 2.9em;background:var(--bg-card);border:1.5px solid var(--primary-20);border-radius:12px;font-family:inherit;font-size:.98rem;color:var(--ink);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.search-box input:focus{outline:none;border-color:var(--action);box-shadow:0 0 0 4px rgba(217,164,65,.16)}
.search-box::before{content:"🔍";position:absolute;left:1em;top:50%;transform:translateY(-50%);font-size:1rem;opacity:.55}

/* ===== Severity grid (señales) ===== */
.sev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9em}
.sev{background:var(--bg-card);border-radius:var(--radius);padding:1.1em 1.2em;box-shadow:var(--shadow-sm);border:1px solid rgba(42,37,32,.05);border-top:4px solid var(--warn);transition:transform var(--t),box-shadow var(--t)}
.sev:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.sev.crit{border-top-color:var(--crit)}
.sev .sv-ico{font-size:1.5rem;margin-bottom:.3em}
.sev h4{margin:0 0 .25em;color:var(--ink)}
.sev p{margin:0;font-size:.88rem;color:var(--ink-soft)}

/* ===== Casos de emergência (reveal) ===== */
.case-panel{display:none;animation:popIn .4s var(--ease)}
.case-panel.show{display:block}
.case-panel .card{border-left:4px solid var(--crit)}

/* ===== Sticky emergency bar ===== */
.emergency-bar{position:sticky;top:.6rem;z-index:40;display:flex;align-items:center;gap:1em;background:var(--crit);color:#fff;border-radius:14px;padding:.85em 1.2em;box-shadow:0 10px 26px rgba(196,69,69,.32);margin-bottom:1.5em;flex-wrap:wrap}
.emergency-bar strong{color:#fff}
.emergency-bar .eb-txt{flex:1;min-width:180px;font-size:.92rem}
.emergency-bar .tel-btn{background:#fff;color:var(--crit)}
.emergency-bar .tel-btn:hover{background:#fff;color:#a83838}

/* ===== Tel link ===== */
.tel-btn{display:inline-flex;align-items:center;gap:.5em;background:var(--crit);color:#fff;padding:.7em 1.3em;border-radius:10px;font-weight:800;text-decoration:none;font-size:.94rem;transition:transform var(--t-fast)}
.tel-btn:hover{background:#a83838;color:#fff;text-decoration:none;transform:translateY(-2px)}

/* ===== Toast + celebração ===== */
.toast-wrap{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:.5em;align-items:center;pointer-events:none}
.toast{background:var(--primary);color:var(--bg);padding:.8em 1.3em;border-radius:30px;font-weight:700;font-size:.92rem;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:.5em;opacity:0;transform:translateY(16px);transition:opacity var(--t),transform var(--t)}
.toast.in{opacity:1;transform:none}
.toast.toast-success{background:var(--success)}
.toast.toast-action{background:var(--action);color:var(--primary)}

.confetti{position:fixed;inset:0;pointer-events:none;z-index:190;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;opacity:.95;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.9}}

.celebrate-banner{background:linear-gradient(135deg,var(--success),var(--primary));color:var(--bg);border-radius:var(--radius-lg);padding:1.5em 1.7em;text-align:center;box-shadow:var(--shadow);margin:1.2em 0;animation:popIn .5s var(--ease)}
.celebrate-banner h3{color:var(--bg);margin:.1em 0 .25em;font-size:1.3rem}
.celebrate-banner p{color:rgba(247,242,231,.88);margin:0}

/* ===== Footer disclaimer ===== */
.page-footer{margin-top:3.5em;padding-top:2em;border-top:1px solid var(--primary-10);color:var(--ink-mute);font-size:.84rem;line-height:1.6}
.page-footer p{margin-bottom:.6em}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ===== Print ===== */
@media print{
  .sidebar,.menu-toggle,.menu-overlay,.receta-imprimir,.receta-fav,.btn,.filters,.chips,.toggle,.emergency-bar,.toast-wrap,.confetti,.dash-resume{display:none !important}
  .app{display:block}
  .main{padding:1cm;max-width:none}
  body{background:#fff}
  .receta,.card,.sev{break-inside:avoid;box-shadow:none;border:1px solid var(--primary-10)}
  .reveal{opacity:1!important;transform:none!important}
  details:not([open])>*:not(summary){display:revert!important}
  details>*{display:revert!important}
}