/* ============================================================
   GRAN CHIMÚ · Sistema de cartas
   Sistema visual: cálido / terracota peruano
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root{
  /* Paper & surfaces (warm) */
  --paper:#F3EADB;
  --paper-2:#ECE0CE;
  --surface:#FCF8F0;
  --surface-hi:#FFFDF8;
  /* Ink */
  --ink:#2A211A;
  --ink-soft:#6E5F50;
  --ink-faint:#A1907C;
  /* Lines */
  --line:#E2D4BF;
  --line-soft:#EBE0CE;
  /* Earth accents */
  --clay:#B0512C;
  --clay-deep:#8C3D1E;
  --ocre:#BC8638;
  --ocre-deep:#9A6A22;
  --wine:#7A3243;
  --wine-deep:#5F2433;
  --coffee:#955427;
  --coffee-deep:#74401C;
  --green:#5E6B3B;
  /* Per-carta accent (overridden inline) */
  --accent:var(--clay);
  --accent-deep:var(--clay-deep);
  --accent-tint:rgba(176,81,44,.10);
  /* Misc */
  --ok:#5E6B3B;
  --danger:#A33A2A;
  --radius:12px;
  --radius-sm:8px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(60,40,20,.06), 0 2px 6px rgba(60,40,20,.05);
  --shadow:0 4px 14px rgba(60,40,20,.09), 0 1px 3px rgba(60,40,20,.06);
  --shadow-lg:0 18px 50px rgba(50,30,15,.20), 0 6px 18px rgba(50,30,15,.12);
  --font-display:'Marcellus',Georgia,serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
/* subtle paper grain */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(120,90,50,.05) 1px,transparent 1px);
  background-size:4px 4px;
}
#root{position:relative;z-index:1;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--accent);color:#fff;}

.serif{font-family:var(--font-display);}
.tracked{letter-spacing:.18em;text-transform:uppercase;}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:20px;border:3px solid transparent;background-clip:content-box;}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-faint);background-clip:content-box;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:11px 18px;border-radius:var(--radius-sm);font-weight:600;font-size:14.5px;
  background:var(--accent);color:#fff;transition:.16s;white-space:nowrap;
  box-shadow:var(--shadow-sm);
}
.btn:hover{background:var(--accent-deep);transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:none;border:1px solid var(--line);}
.btn.ghost:hover{background:var(--surface);border-color:var(--ink-faint);transform:none;}
.btn.soft{background:var(--accent-tint);color:var(--accent-deep);box-shadow:none;}
.btn.soft:hover{background:var(--accent);color:#fff;}
.btn.danger{background:transparent;color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 35%,transparent);box-shadow:none;}
.btn.danger:hover{background:var(--danger);color:#fff;border-color:var(--danger);}
.btn.sm{padding:7px 12px;font-size:13px;}
.btn.block{width:100%;}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}

.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:8px;color:var(--ink-soft);transition:.15s;
}
.iconbtn:hover{background:var(--paper-2);color:var(--ink);}
.iconbtn.danger:hover{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger);}

/* ---------- form fields ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-soft);letter-spacing:.02em;}
.field .hint{font-size:11.5px;color:var(--ink-faint);font-weight:400;}
.input,.textarea,.select{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface-hi);color:var(--ink);font-size:14.5px;transition:.15s;
}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);}
.textarea{resize:vertical;min-height:74px;line-height:1.5;}
.row{display:flex;gap:12px;}
.row>*{flex:1;}

/* ---------- modal ---------- */
.modal-scrim{position:fixed;inset:0;background:rgba(40,25,12,.5);backdrop-filter:blur(3px);
  z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .18s ease;}
.modal{background:var(--surface-hi);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;animation:pop .2s cubic-bezier(.2,.9,.3,1.2);}
.modal.wide{max-width:720px;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line-soft);}
.modal-head h3{margin:0;font-family:var(--font-display);font-size:21px;font-weight:400;}
.modal-body{padding:20px 22px;overflow-y:auto;}
.modal-foot{padding:14px 22px;border-top:1px solid var(--line-soft);display:flex;gap:10px;justify-content:flex-end;background:var(--surface);}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- toast ---------- */
.toast-wrap{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;align-items:center;}
.toast{background:var(--ink);color:var(--surface-hi);padding:11px 18px;border-radius:30px;font-size:13.5px;font-weight:500;
  box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:9px;animation:toastin .25s ease;}
.toast.ok{background:#3c4a26;}
@keyframes toastin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- chips / badges ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:30px;font-size:12.5px;font-weight:600;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);white-space:nowrap;}
.badge-star{display:inline-flex;align-items:center;gap:4px;color:var(--ocre-deep);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}

.empty{padding:40px 20px;text-align:center;color:var(--ink-faint);font-size:14px;}

@keyframes fade{from{opacity:0}to{opacity:1}}