@font-face{
  font-family: "AbhayaLibre";
  src: url("./fonts/AbhayaLibre-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg:#f6f2e8;
  --accent:#a60e0d;

  --text:#161616;
  --muted:rgba(0,0,0,.55);

  --panel:rgba(255,255,255,.62);
  --panelTop:rgba(255,255,255,.78);
  --panelMid:rgba(255,255,255,.70);

  --border:rgba(0,0,0,.10);
  --shadow:0 24px 70px rgba(0,0,0,.16);
  --shadowSoft:0 12px 28px rgba(0,0,0,.12);

  --okBg:rgba(34,197,94,.18);
  --okBd:rgba(34,197,94,.28);
  --xBg:rgba(239,68,68,.14);
  --xBd:rgba(239,68,68,.26);
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family: "AbhayaLibre", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  color:var(--text);
  background:
    radial-gradient(1100px 650px at 10% 5%, rgba(166,14,13,.12), transparent 55%),
    radial-gradient(900px 600px at 95% 12%, rgba(166,14,13,.08), transparent 60%),
    radial-gradient(1100px 700px at 60% 110%, rgba(166,14,13,.07), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)),
    var(--bg);
  padding: env(safe-area-inset-top) 14px env(safe-area-inset-bottom) 14px;
}

.wrap{
  min-height:100%;
  display:grid;
  place-items:center;
}

/* PANEL */
.panel{
  width:min(460px, 100%);
  height:min(960px, 100vh);
  border-radius:26px;

  border:1px solid rgba(0,0,0,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.52));
  box-shadow: var(--shadow);

  overflow:hidden;
  position:relative;

  display:grid;
  grid-template-rows:auto 1fr auto auto;
}

/* HEADER */
.panelHeader{
  padding:14px 14px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.72));
  border-bottom:1px solid rgba(0,0,0,.06);
  display:grid;
  gap:10px;
}

.topRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:13px;
  color:var(--muted);
  letter-spacing:.2px;
}
.topRow.small{ font-size:12px; }

#pos, #picked, #pct{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.60);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.need{
  color: var(--accent);
  font-weight: 850;
  transition: opacity .2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 62%;
}

.progressOuter{
  width:100%;
  height:12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.05);
  overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.progressInner{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--accent), rgba(166,14,13,.55));
  box-shadow: 0 8px 18px rgba(166,14,13,.18);
}

/* CARD AREA */
.panelCard{
  display:grid;
  place-items:center;
  padding:14px;
  background:
    radial-gradient(900px 600px at 50% 20%, rgba(0,0,0,.035), transparent 55%),
    rgba(0,0,0,.02);
  min-height:0;
}

.cardStack{
  width:100%;
  max-width:395px;
  height:100%;
  max-height:520px;
  position:relative;
  min-height:0;
}

/* CARDS */
.card{
  position:absolute;
  inset:0;
  border-radius:28px;
  border:1px solid rgba(0,0,0,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
  box-shadow: 0 18px 52px rgba(0,0,0,.14);

  overflow:hidden;
  display:flex;
  flex-direction:column;

  touch-action:none;
  user-select:none;
  transform: translate3d(0,0,0) rotate(0deg);
  min-height:0;
}

.card.back{
  inset:10px 8px 0 8px;
  opacity:.55;
  filter:saturate(.9);
}

/* CONTENT */
.cardInner{
  padding:14px 14px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
  min-height:0;
}

.cardInner svg,
.cardInner .photo{
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 340px;

  height: auto !important;
  max-height: 100% !important;
  object-fit: contain;

  display:block;
  margin: 0 auto;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.10));
}

.name{
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 10px 2px;
  width: 100%;
  text-align: center;
  font-weight: 900;
  font-size: 15px;
  line-height: 1.15;

  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 999px;
}

/* Swipe badges */
.overlayBadge{
  position:absolute;
  top:16px;
  padding:10px 12px;
  border-radius:999px;
  font-weight:950;
  letter-spacing:.35px;
  font-size:13px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.80);
  opacity:0;
  transform: translateY(-6px);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events:none;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}
.overlayBadge.like{ left:14px; color:#0f5132; }
.overlayBadge.nope{ right:14px; color:#7a1a12; }

/* COLORS AREA */
.panelColors{
  padding:12px 14px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.62));
  border-top:1px solid rgba(0,0,0,.06);
  display:grid;
  gap:10px;
}

.paletteHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.chip{
  display:flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.78);
  color:var(--muted);
  font-size:12px;
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
}
.chipLabel{ font-weight:650; }
.chipValue{ font-weight:950; color: var(--accent); }

.selectedRow{
  overflow: visible;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 0;
  display:flex;
}

.selDot{
  width: 30px;
  height: 30px;
  border-radius:999px;
  border:2px solid rgba(0,0,0,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  flex:0 0 auto;
  cursor:pointer;
  transition: transform .08s ease, filter .18s ease;
}
.selDot:active{ transform: scale(.96); }

@media (max-width: 360px){
  .selDot{ width: 28px; height: 28px; }
}

.paletteHint{
  font-size:12px;
  color:var(--muted);
  padding:0 2px;
}

.paletteGrid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:10px;
  max-height:190px;
  overflow:auto;
  padding-right:2px;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 360px){
  .paletteGrid{ grid-template-columns: repeat(6, 1fr); }
}

.swatch{
  width:100%;
  aspect-ratio: 1 / 1;
  border-radius:999px;
  border:2px solid rgba(0,0,0,.10);
  background: transparent;
  position:relative;
  cursor:pointer;
  outline:none;

  min-height:46px;
  box-shadow: 0 14px 26px rgba(0,0,0,.10);
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.swatch:active{ transform: scale(.97); }

.swatchInner{
  position:absolute;
  inset:0;
  border-radius:999px;
}

.swatch.selected{
  border-color: rgba(166,14,13,.75);
  box-shadow: 0 0 0 4px rgba(166,14,13,.16), 0 14px 26px rgba(0,0,0,.12);
}

/* ACTIONS */
.panelActions{
  position: relative;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;

  border-top:1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.fab{
  width:62px;
  height:62px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);

  display:grid;
  place-items:center;

  font-size:28px;
  font-weight:1000;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;

  box-shadow: 0 16px 34px rgba(0,0,0,.14);
  transition: transform .06s ease, opacity .2s ease, filter .2s ease;
}
.fab:active{ transform: translateY(1px) scale(.98); }

.fab-check{
  background: var(--okBg);
  border-color: var(--okBd);
  color:#0f5132;
}
.fab-x{
  background: var(--xBg);
  border-color: var(--xBd);
  color:#7a1a12;
}
.fab-undo{
  background: rgba(166,14,13,.10);
  border-color: rgba(166,14,13,.22);
  color: var(--accent);
}
.fab[disabled]{
  opacity:.45;
  pointer-events:none;
}

/* Microtexto */
.actionLabels{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  display:flex;
  justify-content:space-between;
  pointer-events:none;
  font-size: 11px;
  color: rgba(0,0,0,.55);
}

.lbl{
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-weight: 750;
}
.lbl.ok{ color: #0f5132; }
.lbl.x{ color: #7a1a12; }
.lbl.undo{ color: var(--accent); }

/* Generic buttons */
.btn{
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.90);
  padding:10px 12px;
  cursor:pointer;
  box-shadow: var(--shadowSoft);
  transition: transform .06s ease, filter .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn.secondary{ background: rgba(255,255,255,.70); }
.btn.small{ padding:8px 10px; font-size:12px; }

/* ✅ Marca en botones OK (Siguiente, Empezar, Continuar, PDF...) */
.btn.ok{
  background: var(--accent);
  border-color: rgba(166,14,13,.65);
  color: #fff;
  font-weight: 950;
}
.btn.ok:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* DONE OVERLAY */
.done{
  display:none;
  position:absolute;
  inset:0;
  background:
    radial-gradient(1100px 650px at 10% 5%, rgba(166,14,13,.10), transparent 55%),
    linear-gradient(180deg, rgba(246,242,232,.96), rgba(246,242,232,.92)),
    var(--bg);
  padding:16px;
  overflow:auto;
}

.done h2{
  margin:0 0 8px;
  font-size:18px;
  letter-spacing:.2px;
}

.done p{
  margin:0 0 12px;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}

.doneForm{
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  background: rgba(255,255,255,.78);
  padding:12px;
  margin: 0 0 12px;
  box-shadow: 0 16px 34px rgba(0,0,0,.10);
  display:grid;
  gap:8px;
}
.doneFormTitle{
  font-weight:950;
  color: rgba(0,0,0,.78);
  font-size:13px;
  margin-bottom: 2px;
}
.doneLabel{
  font-size:12px;
  font-weight:850;
  color: rgba(0,0,0,.70);
  margin-top: 6px;
}
.doneInput{
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  padding: 0 10px;
  font-size: 14px;
  background: rgba(255,255,255,.90);
}
.doneHint{
  font-size:12px;
  color: rgba(0,0,0,.60);
  line-height: 1.35;
  margin-top: 4px;
}
.doneFile{
  width:100%;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  padding: 10px;
  background: rgba(255,255,255,.90);
}
.donePhotoList{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
@media (min-width: 420px){
  .donePhotoList{ grid-template-columns: repeat(4, 1fr); }
}
.photoThumb{
  position:relative;
  border-radius: 12px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.80);
  box-shadow: var(--shadowSoft);
}
.photoThumb img{
  width:100%;
  height: 90px;
  object-fit: cover;
  display:block;
}
.photoRemove{
  position:absolute;
  top:6px;
  right:6px;
  width:26px;
  height:26px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  cursor:pointer;
  font-weight: 1000;
}

/* Lista de prendas elegidas */
.doneList{
  max-height:55vh;
  overflow:auto;
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  background: rgba(255,255,255,.78);
  padding:10px;
  display:grid;
  gap:10px;
  margin-bottom:12px;
  box-shadow: 0 16px 34px rgba(0,0,0,.10);
}

.doneItem{
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid rgba(0,0,0,.06);
  padding-bottom:10px;
}
.doneItem:last-child{ border-bottom:none; padding-bottom:0; }

.mini{
  width:14px;
  height:14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
}

.doneName{
  flex:1;
  font-size:13px;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.doneHex{
  font-size:12px;
  color:var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ✅ botón quitar en resumen */
.doneRemove{
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.05);
  cursor: pointer;
  font-weight: 1000;
  color: rgba(0,0,0,.70);
}
.doneRemove:active{ transform: translateY(1px); }

.doneActions{
  display:flex;
  flex-wrap: wrap;
  gap:12px;
  justify-content:center;
  align-items:center;
  padding-bottom: env(safe-area-inset-bottom);
}

/* TOAST */
.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform: translateX(-50%);
  background: rgba(17,17,17,.92);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  padding:10px 12px;
  border-radius:999px;
  box-shadow: var(--shadowSoft);
  font-size:13px;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
  z-index:999;
}
.toast.show{
  opacity:1;
  transform: translateX(-50%) translateY(-2px);
}

/* TUTORIAL MODAL */
.tutorial{
  position: fixed;
  inset: 0;
  display:none;
  place-items:center;
  background: rgba(0,0,0,.35);
  z-index: 9999;
  padding: 18px;
}
.tutorial.show{ display:grid; }

.tutorialCard{
  width: min(420px, 100%);
  background: rgba(246,242,232,.96);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.20);
  text-align: center; /* ✅ centrado */
}
.tutorialCard h3{
  margin: 0 0 8px;
  font-size: 18px;
}
.tutorialCard p{
  margin: 0 0 10px;
  color: rgba(0,0,0,.70);
  line-height: 1.35;
  font-size: 13px;
  text-align: left; /* texto legible */
}
.tutorialCard p.small{
  font-size: 12px;
  color: rgba(0,0,0,.60);
}

/* Header buttons */
.topRight{
  display:flex;
  align-items:center;
  gap:10px;
}

.ghostBtnTop{
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadowSoft);
  cursor:pointer;
  font-weight: 850;
  color: rgba(0,0,0,.70);
  white-space: nowrap;
}
.ghostBtnTop:active{ transform: translateY(1px); }

.ghostBtnTopAccent{
  background: rgba(166,14,13,.10);
  border-color: rgba(166,14,13,.25);
  color: var(--accent);
  font-weight: 950;
}

.ghostBtnTopIcon{
  width: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 16px;
}

/* ===== QUIZ ===== */
.quiz{
  position: fixed;
  inset: 0;
  display:none;
  place-items:center;
  background: rgba(0,0,0,.35);
  z-index: 10000;
  padding: 18px;
}
.quiz.show{ display:grid; }

.quizCard{
  width: min(460px, 100%);
  background: rgba(246,242,232,.96);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.20);
  display:grid;
  gap: 12px;

  max-height: 90vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.quizTop{ display:grid; gap: 10px; }

.quizTitle{
  text-align: center; /* ✅ centrado */
}
.quizTitle h3{
  margin: 0;
  font-size: 18px; /* ✅ más grande */
  font-weight: 950;
}
.quizMeta{
  margin: 6px 0 0;
  font-size: 13px; /* ✅ más grande */
  color: rgba(0,0,0,.62);
  font-weight: 850;
}

.quizProgressOuter{
  width:100%;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.05);
  overflow: hidden;
}
.quizProgressInner{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--accent), rgba(166,14,13,.55));
}

.quizBody{
  display:grid;
  gap: 10px;
  overflow: visible;
  padding-right: 4px;
}

.quizQ{
  margin: 2px 0 0;
  font-size: 15px;
  line-height: 1.25;
}

.quizOptions{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.quizOpt{
  width:100%;
  text-align:left;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.82);
  padding: 12px 12px;
  cursor:pointer;
  box-shadow: var(--shadowSoft);
  font-weight: 800;
  color: rgba(0,0,0,.78);
  -webkit-tap-highlight-color: transparent;
}
.quizOpt:active{ transform: translateY(1px); }

.quizOpt.selected{
  border-color: rgba(166,14,13,.55);
  box-shadow: 0 0 0 4px rgba(166,14,13,.14), var(--shadowSoft);
}

.quizBottom{
  display:flex;
  justify-content: space-between;
  gap: 10px;

  position: sticky;
  bottom: 0;
  background: rgba(246,242,232,.96);
  padding-top: 10px;
  padding-bottom: 6px;
}

.quizImgGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 420px){
  .quizImgGrid{ grid-template-columns: repeat(3, 1fr); }
}
.quizImgOpt{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.82);
  padding: 8px;
  box-shadow: var(--shadowSoft);
  cursor:pointer;
  display:grid;
  gap: 8px;
  -webkit-tap-highlight-color: transparent;
}
.quizImgOpt:active{ transform: translateY(1px); }
.quizImgOpt.selected{
  border-color: rgba(166,14,13,.55);
  box-shadow: 0 0 0 4px rgba(166,14,13,.14), var(--shadowSoft);
}
.quizImgOpt img{
  width: 100%;
  height: 120px;
  border-radius: 12px;
  object-fit: contain;
  background: rgba(255,255,255,.55);
  display: block;
}
.quizImgLabel{
  font-size: 12px;
  font-weight: 850;
  color: rgba(0,0,0,.75);
  line-height: 1.2;
}

.quizInput{
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  padding: 0 10px;
  font-size: 14px;
  background: rgba(255,255,255,.82);
}

.quizTextarea{
  min-height: 110px;
  resize: vertical;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  padding: 10px;
  font-size: 14px;
  background: rgba(255,255,255,.82);
}

/* Extra safety for small heights */
@media (max-height: 740px){
  .cardStack{ max-height: 480px; }
}

/* ===== MODAL: Progreso guardado ===== */
.resumeModal{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0,0,0,.35);
  z-index: 11000;
  padding: 18px;
}
.resumeModal.show{ display: grid; }

.resumeCard{
  width: min(420px, 100%);
  background: rgba(246,242,232,.96);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.20);
  display: grid;
  gap: 10px;
  text-align: center;
}

.resumeCard h3{
  margin: 0;
  font-size: 16px;
}

.resumeCard p{
  margin: 0;
  color: rgba(0,0,0,.70);
  line-height: 1.35;
  font-size: 13px;
}

.resumeActions{
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.resumeActions .btn{
  flex: 1;
}

.resumeSmall{
  font-size: 12px;
  color: rgba(0,0,0,.55);
}

#btnGoFinal{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.14);
  font-weight: 900;
}

.doneError{
  margin-top: 8px;
  font-size: 12px;
  color: var(--accent);
  font-weight: 850;
  text-align: center;
}

/* Visual: campos inválidos */
.doneInput.invalid{
  border-color: rgba(166,14,13,.55) !important;
  box-shadow: 0 0 0 4px rgba(166,14,13,.14) !important;
}
/* ================================
   SKIN "ROJO + CHIPS" (tipo captura)
   PÉGALO AL FINAL del styles.css
================================== */

:root{
  --brand:#9c0f0f;           /* rojo barra */
  --brand2:#a60e0d;          /* tu accent actual */
  --paper:#ffffff;
}

/* Quitar “marco” y centrar tipo app */
body{
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0;
}

/* Panel a pantalla completa en móvil; en desktop mantiene tamaño */
.panel{
  width:min(520px, 100%);
  height:100dvh;
  border-radius:0;
  box-shadow:none;
  background: var(--bg);
  border:0;
}

/* Para desktop, puedes mantener look “tarjeta” si quieres */
@media (min-width: 680px){
  body{ padding: env(safe-area-inset-top) 14px env(safe-area-inset-bottom) 14px; }
  .panel{
    height:min(960px, 100vh);
    border-radius:26px;
    box-shadow: var(--shadow);
    border:1px solid rgba(0,0,0,.09);
    background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.52));
  }
}

/* HEADER rojo */
.panelHeader{
  background: var(--brand);
  border-bottom:0;
  padding:10px 10px 10px;
  gap:10px;
}

/* Chips blancos en header */
#pos, #picked, #pct{
  background: rgba(255,255,255,.95);
  border:0;
  box-shadow:none;
  color: var(--brand);
  font-weight: 900;
}

/* Fila derecha */
.topRow{
  color: rgba(255,255,255,.92);
}
.need{
  color: rgba(255,255,255,.92);
  font-weight: 900;
  max-width: 70%;
}

/* Barra progreso: más “plana” tipo captura */
.progressOuter{
  height:10px;
  border:0;
  background: rgba(255,255,255,.20);
  box-shadow:none;
}
.progressInner{
  background: rgba(255,255,255,.92);
  box-shadow:none;
}

/* Botones header: blancos */
.ghostBtnTop{
  background: rgba(255,255,255,.95);
  border:0;
  box-shadow:none;
  color: var(--brand);
  font-weight: 950;
  height:34px;
}
.ghostBtnTopAccent{
  background: rgba(255,255,255,.95);
  border:0;
  color: var(--brand);
}
.ghostBtnTopIcon{
  width: 38px;
}

/* Zona central más limpia (como captura) */
.panelCard{
  background: var(--bg);
  padding:12px 12px 8px;
}

.cardStack{
  max-width: 520px;
  max-height: 430px; /* más parecido a captura */
}

/* Tarjeta: más “plana”, menos cristal */
.card{
  border-radius: 18px;
  background: var(--bg);
  border:0;
  box-shadow:none;
}
.card.back{
  opacity:.25;
}

/* Hacer prenda (SVG/foto) grande */
.cardInner{
  padding: 10px 8px 0;
}
.cardInner svg,
.cardInner .photo{
  max-width: 380px;
  filter:none;
}

/* Nombre en rojo tipo captura */
.name{
  background: transparent;
  border:0;
  border-radius:0;
  padding: 8px 10px 0;
  font-size: 18px;
  color: var(--brand);
  font-weight: 950;
}

/* ===== Sección colores ===== */
.panelColors{
  background: transparent;
  border-top:0;
  padding: 0 10px 10px;
  gap:0;
}

/* Barra roja encima de paleta (como captura) */
.paletteHeader{
  background: var(--brand);
  border-radius: 999px;
  padding: 10px 10px;
  margin-top: 8px;
}

/* Chip seleccionado: blanco dentro de la barra roja */
.paletteHeader .chip{
  background: rgba(255,255,255,.95);
  border:0;
  box-shadow:none;
  color: var(--brand);
  font-weight: 900;
}
.chipValue{ color: var(--brand); }

/* Botón Limpiar blanco */
#btnClearColors{
  background: rgba(255,255,255,.95);
  border:0;
  color: var(--brand);
  font-weight: 950;
  box-shadow:none;
}

/* Ocultar fila de puntos (si quieres igual que captura) */
#selectedRow{ display:none; }
.paletteHint{ display:none; }

/* Contenedor paleta: blanco */
.paletteGrid{
  margin-top: 10px;
  background: var(--paper);
  border-radius: 18px;
  padding: 12px;
  max-height: 220px;
  border: 1px solid rgba(0,0,0,.06);
}

/* Círculos grandes */
.swatch{
  min-height: 50px;
  border: 2px solid rgba(0,0,0,.08);
  box-shadow:none;
}
.swatch.selected{
  border-color: rgba(156,15,15,.55);
  box-shadow: 0 0 0 4px rgba(156,15,15,.14);
}

/* ===== Footer rojo con 3 botones ===== */
.panelActions{
  background: var(--brand);
  border-top:0;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
}

/* Quitar microtextos (en captura no hay) */
.actionLabels{ display:none; }

/* Botones redondos grandes */
.fab{
  width: 62px;
  height: 62px;
  border: 2px solid rgba(255,255,255,.25);
  box-shadow:none;
  background: rgba(255,255,255,.95);
}

/* X blanco (fondo blanco + icono rojo) */
.fab-x{
  background: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.35);
  color: var(--brand);
}

/* Undo blanco (icono rojo) */
.fab-undo{
  background: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.35);
  color: var(--brand);
}

/* ✓ verde como captura */
.fab-check{
  background: #2bb24c;
  border-color: rgba(0,0,0,.08);
  color: #fff;
}
/* Paleta más compacta */
.paletteGrid{
  grid-template-columns: repeat(9, 1fr);
  gap:8px;
  max-height: 190px;
}

.swatch{ min-height: 40px; }
@media (max-width: 360px){
  .paletteGrid{ grid-template-columns: repeat(8, 1fr); }
  .swatch{ min-height: 38px; }
}