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

:root{
  --bg:#f7f7f5;
  --panel:#ffffff;
  --ink:#1d1d1f;
  --ink-soft:#6e6e73;
  --ink-faint:#a4a3a6;
  --line:#e7e6e2;

  --rosa:#d6336c;
  --marigold:#f2a413;
  --turquesa:#0e9594;
  --terracota:#a13d2e;

  --accent:var(--rosa);
  --radius-lg:26px;
  --radius-md:16px;
  --radius-sm:10px;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--bg);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--ink);
  padding:0 0 90px;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1180px; margin:0 auto; padding:0 22px;}
.wrap-narrow{max-width:420px; margin:0 auto; padding:0 22px;}

.banderines{
  display:flex; justify-content:center; gap:0; padding-top:14px; overflow:hidden;
}
.banderines .pennant{
  width:22px; height:26px;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  margin:0 3px; opacity:.9;
}
.banderines .pennant:nth-child(4n+1){background:var(--rosa);}
.banderines .pennant:nth-child(4n+2){background:var(--marigold);}
.banderines .pennant:nth-child(4n+3){background:var(--turquesa);}
.banderines .pennant:nth-child(4n+4){background:var(--terracota);}

header{ text-align:center; padding:26px 20px 46px; }
header .eyebrow{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600; margin-bottom:14px;
}
header h1{
  font-size:clamp(30px,5.2vw,48px); font-weight:800; letter-spacing:-0.02em;
  margin:0 0 12px; line-height:1.05;
}
header h1 span{color:var(--accent);}
header p{
  max-width:480px; margin:0 auto; color:var(--ink-soft);
  font-size:15px; line-height:1.6; font-weight:500;
}

.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:30px 30px 32px; margin-bottom:22px;
  box-shadow:0 1px 2px rgba(0,0,0,.02), 0 18px 40px -28px rgba(0,0,0,.18);
}

.panel-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.panel-head .step{
  width:26px; height:26px; border-radius:50%; background:var(--ink); color:#fff;
  font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.panel h2{ font-size:19px; font-weight:700; margin:0; letter-spacing:-0.01em; }
.panel .sub{ font-size:13.5px; color:var(--ink-soft); margin:2px 0 20px 36px; font-weight:500; max-width:520px; }

.dropzone{
  border:1.5px dashed #d3d2ce; border-radius:var(--radius-md); padding:34px 18px;
  text-align:center; cursor:pointer; background:#fcfcfb; transition:.18s border-color, .18s background;
}
.dropzone.drag{ border-color:var(--accent); background:#fdeef3; }
.dropzone strong{display:block; font-size:15px; font-weight:700; margin-bottom:4px;}
.dropzone span{display:block; font-size:12.5px; color:var(--ink-soft); font-weight:500;}
input[type=file]{display:none;}

.stock-row{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:18px;
}
.stock-count{ font-size:13px; color:var(--ink-soft); font-weight:600; }
.stock-count .n{
  font-size:22px; font-weight:800; color:var(--ink); margin-right:5px; font-variant-numeric:tabular-nums;
}

.thumbs{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(62px,1fr)); gap:8px;
  margin-top:16px; max-height:220px; overflow-y:auto; padding-right:2px;
}
.thumb{
  position:relative; aspect-ratio:2/3; border-radius:8px; overflow:hidden;
  border:1px solid var(--line); background:#fff;
}
.thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.thumb button{
  position:absolute; top:3px; right:3px; width:17px; height:17px; border:none; border-radius:50%;
  background:rgba(29,29,31,.65); backdrop-filter:blur(2px); color:#fff; font-size:10px; line-height:1; cursor:pointer;
}
.thumb .name{
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(0deg, rgba(0,0,0,.6), transparent);
  color:#fff; font-size:7.5px; font-weight:600; padding:9px 3px 2px;
  text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.controls{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-left:36px; }
.field label{
  display:block; font-size:11.5px; font-weight:700; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:7px;
}
.field input[type=number], .field input[type=text], .field input[type=email], .field input[type=password]{
  width:100%; padding:11px 13px; border-radius:var(--radius-sm); border:1px solid var(--line);
  font-family:'Inter',sans-serif; font-size:14px; font-weight:600; background:#fcfcfb;
}
.field input[type=number]{ width:86px; }
.field input:focus{ outline:2px solid var(--accent); outline-offset:1px; }

.btn{
  appearance:none; border:none; cursor:pointer; font-family:'Inter', sans-serif; font-weight:700;
  font-size:14px; padding:12px 22px; border-radius:999px; transition:.15s transform, .15s box-shadow, .15s background;
}
.btn:active{transform:scale(.97);}
.btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{background:#000;}
.btn-primary:disabled{ background:#d9d9d6; color:#a4a3a6; cursor:not-allowed; }
.btn-ghost{ background:#fff; border:1px solid var(--line); color:var(--ink); }
.btn-ghost:hover{background:#f2f2f0;}
.btn-accent{ background:var(--accent); color:#fff; }
.btn-accent:hover{filter:brightness(1.06);}
.btn-block{ width:100%; text-align:center; }
.btn-danger{ background:#fff; border:1px solid #f2c9c9; color:var(--terracota); }
.btn-danger:hover{ background:#fdf0ef; }

.status{ font-size:12.5px; color:var(--ink-soft); margin-top:12px; margin-left:36px; font-weight:600; min-height:16px; }
.status.warn{color:var(--terracota);}

.boards-header{
  display:flex; align-items:center; justify-content:space-between; margin:44px 0 18px;
  flex-wrap:wrap; gap:10px; padding:0 4px;
}
.boards-header h2{ font-size:24px; font-weight:800; letter-spacing:-0.01em; margin:0; }

.boards-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:24px; }

.board{
  background:var(--panel); border-radius:var(--radius-lg); border:1px solid var(--line);
  padding:20px 20px 22px; box-shadow:0 1px 2px rgba(0,0,0,.02), 0 16px 34px -26px rgba(0,0,0,.22);
  page-break-inside:avoid; position:relative;
}
.board-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.board-top .tag{ font-size:16px; font-weight:800; letter-spacing:-0.01em; }
.board-top .tag small{
  display:block; font-weight:600; font-size:10px; letter-spacing:.10em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:2px;
}
.board-top .board-actions{ display:flex; gap:6px; }
.board-top button{ padding:7px 13px; font-size:11px; }

.grid4{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:5px; border-radius:14px; padding:8px;
  background:linear-gradient(180deg, #fafaf8, #f1f0ec); position:relative;
}
.grid4::before, .grid4::after{
  content:""; position:absolute; left:8px; right:8px; height:8px;
  background-image:radial-gradient(circle at 6px 6px, transparent 5px, #ffffff 5.5px);
  background-size:12px 12px; background-repeat:repeat-x;
}
.grid4::before{ top:-4px; }
.grid4::after{ bottom:-4px; transform:scaleY(-1); }

.cell{ aspect-ratio:2/3; border-radius:5px; overflow:hidden; background:#fff; border:1px solid #e9e8e4; }
.cell img{ width:100%; height:100%; object-fit:cover; display:block; }

.empty-state{ text-align:center; padding:50px 20px; color:var(--ink-faint); font-size:13.5px; font-weight:600; }
.empty-state strong{display:block; color:var(--ink-soft); font-size:15px; margin-bottom:5px; font-weight:700;}

.loading{ text-align:center; padding:20px; color:var(--ink-faint); font-size:13px; font-weight:600; }

/* ---------- Auth (login / registro) ---------- */
.auth-panel{ margin-top:60px; }
.auth-panel .field{ margin-bottom:16px; }
.auth-panel .switch{
  text-align:center; font-size:13px; color:var(--ink-soft); font-weight:500; margin-top:18px;
}
.auth-panel .switch a{ color:var(--accent); font-weight:700; text-decoration:none; }
.error-box{
  background:#fdf0ef; border:1px solid #f2c9c9; color:var(--terracota);
  padding:11px 14px; border-radius:var(--radius-sm); font-size:13px; font-weight:600; margin-bottom:16px;
}

/* ---------- Dashboard (proyectos) ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; padding:20px 22px 0; max-width:1180px; margin:0 auto;
}
.topbar .who{ font-size:13px; color:var(--ink-soft); font-weight:600; }
.topbar a{ color:var(--ink-soft); font-size:13px; font-weight:700; text-decoration:none; }
.topbar a:hover{ color:var(--ink); }

.projects-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:18px; margin-top:24px;
}
.project-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px; text-decoration:none; color:var(--ink); display:block;
  box-shadow:0 1px 2px rgba(0,0,0,.02), 0 14px 30px -24px rgba(0,0,0,.2);
  transition:.15s transform;
}
.project-card:hover{ transform:translateY(-2px); }
.project-card h3{ font-size:17px; font-weight:800; margin:0 0 8px; letter-spacing:-0.01em; }
.project-card .meta{ font-size:12px; color:var(--ink-faint); font-weight:600; }

@media print{
  body{background:#fff; padding:0;}
  .banderines, header, .panel, .boards-header, .topbar{display:none;}
  .boards-grid{display:block;}
  .board{ box-shadow:none; border:1px solid #ddd; page-break-after:always; margin:0 auto 0; max-width:520px; }
  .board-top button{display:none;}
}