/* Super Market CR — estilos base (portados del diseño de Claude Design, verde → azul) */
*{box-sizing:border-box}
:root{
  --blue:oklch(0.52 0.13 250);
  --blue-dark:oklch(0.44 0.13 250);
  --blue-link:oklch(0.48 0.12 250);
  --blue-link-h:oklch(0.38 0.12 250);
  --blue-soft:oklch(0.96 0.03 250);
  --ink:#17150f;
  --bg:#f7f5f0;
  --red:oklch(0.55 0.17 28);
}
body{margin:0;background:var(--bg);font-family:'Instrument Sans',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--blue-link);text-decoration:none}
a:hover{color:var(--blue-link-h)}
input,button,select,textarea{font:inherit;color:inherit}
::placeholder{color:rgba(23,21,15,.38)}
.nsb::-webkit-scrollbar{height:6px}
.nsb::-webkit-scrollbar-thumb{background:rgba(23,21,15,.18);border-radius:99px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slidein{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* Estados hover/focus (el diseño original los definía como atributos de runtime) */
.hov-primary:hover{background:var(--blue-dark)!important}
.hov-to-blue:hover{background:var(--blue)!important}
.hov-border:hover{border-color:rgba(23,21,15,.35)!important}
.hov-border-ink:hover{border-color:var(--ink)!important}
.hov-ink:hover{color:var(--ink)!important}
.hov-card:hover{border-color:var(--blue)!important;transform:translateY(-2px)}
.hov-plus:hover{background:var(--blue)!important;color:#fff!important;border-color:transparent!important}
.focus-blue:focus-within{border-color:var(--blue)!important}
.fld:focus{border-color:var(--blue)!important;background:#fff!important;outline:0}
input[type=range]{accent-color:var(--blue)}
.spinner{width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}