@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,400..600&family=Work+Sans:wght@400;500;600;700;800&display=swap');

:root{
    --paper:#FCEEE9;
    --ink:#2E1A24;
    --plum:#4A2A3B;
    --plum-2:#3a1f2d;
    --gold:#C89B3C;
    --accent:#C3808F;
    --accent-2:#E7B4BC;
    --sage:#6B8F71;
    --sold:#B0A6A9;
    --danger:#B0473E;
    --card:#FFFFFF;
    --line:#E8D3CC;
    --r-lg:26px;
    --r-md:16px;
    --r-sm:11px;
    --ease:cubic-bezier(.22,1,.36,1);
    --shadow-soft:0 14px 34px -14px rgba(74,42,59,0.28);
    --shadow-lift:0 20px 46px -16px rgba(74,42,59,0.38);
    --grad-brand:linear-gradient(120deg, var(--plum), var(--accent) 100%);
    --grad-warm:linear-gradient(120deg, var(--accent), var(--accent-2) 100%);
  }
  *{box-sizing:border-box;}
  ::selection{ background:var(--accent); color:#fff; }
  body{
    margin:0;
    background:
      radial-gradient(600px 400px at 8% 0%, rgba(195,128,143,0.10), transparent 60%),
      radial-gradient(700px 500px at 100% 10%, rgba(200,155,60,0.14), transparent 55%),
      var(--paper);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
    position:relative;
  }
  body::before{
    content:"";
    position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.5;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/></svg>");
    mix-blend-mode:overlay;
  }

  /* ---------- HEADER ---------- */
  header{
    padding:22px 20px 16px;
    display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
    text-align:left;
    position:relative;
    overflow:hidden;
  }
  header::before, header::after{
    content:"";
    position:absolute;
    width:220px; height:220px;
    border-radius:50%;
    filter:blur(10px);
    z-index:0;
    animation:float 9s ease-in-out infinite;
  }
  header::before{
    top:-120px; left:4%;
    background:radial-gradient(circle, rgba(195,128,143,0.30), transparent 70%);
  }
  header::after{
    top:-130px; right:2%;
    background:radial-gradient(circle, rgba(200,155,60,0.28), transparent 70%);
    animation-delay:-4.5s;
  }
  @keyframes float{
    0%,100%{ transform:translateY(0) translateX(0) scale(1); }
    50%{ transform:translateY(22px) translateX(-10px) scale(1.08); }
  }
  .brand-row{ display:flex; align-items:center; flex-wrap:nowrap; gap:12px; min-width:0; }
  .brand-logo{
    width:64px; height:auto; display:block; position:relative; z-index:1; flex-shrink:0;
    cursor:default; filter:drop-shadow(0 4px 10px rgba(74,42,59,0.15));
  }
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .header-text{ position:relative; z-index:1; text-align:left; min-width:0; }
  h1{
    font-family:'Fraunces', serif; font-weight:700; font-size:1.5rem;
    letter-spacing:-0.02em; margin:0; line-height:1.05;
    background:var(--grad-brand);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .tagline{
    font-size:0.8rem; color:var(--plum); opacity:0.8; font-style:italic;
    font-family:'Fraunces', serif; margin:1px 0 0;
  }
  .join-btn{
    display:inline-flex; align-items:center; gap:8px; background:var(--grad-brand);
    color:#fff; text-decoration:none; padding:10px 18px; border-radius:999px;
    font-weight:700; font-size:0.82rem; position:relative; z-index:1; white-space:nowrap;
    box-shadow:var(--shadow-soft); margin-left:auto;
    transition:transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  }
  .join-btn:hover{ transform:translateY(-2px) scale(1.02); box-shadow:var(--shadow-lift); }
  @media (max-width:560px){
    header{ justify-content:flex-start; }
    .brand-row{ flex:1 1 auto; min-width:0; }
    .brand-logo{ width:52px; }
    h1{ font-size:1.15rem; }
    .tagline{ font-size:0.72rem; line-height:1.25; }
    .join-btn{ margin-left:0; order:3; width:100%; justify-content:center; }
  }

  /* ---------- STICKY CONTROLS BAR ---------- */
  .controls-bar{
    position:sticky; top:0; z-index:20;
    background:rgba(252,238,233,0.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(232,211,204,0.7);
    padding-top:12px;
  }
  .controls{ max-width:960px; margin:0 auto; padding:0 20px 12px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; position:relative; z-index:1; }
  .search-wrap{ width:100%; max-width:440px; margin:0 auto; }
  #search{
    width:100%; padding:11px 16px; border-radius:999px; border:1px solid var(--line);
    background:rgba(255,255,255,0.8); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    font-family:'Work Sans', sans-serif; font-size:0.92rem; outline:none;
    box-shadow:0 6px 20px -10px rgba(74,42,59,0.18);
    transition:box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
  }
  #search:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(195,128,143,0.14), 0 6px 20px -8px rgba(74,42,59,0.22); }
  .chips-row{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; -ms-overflow-style:none; }
  .chips-row::-webkit-scrollbar{ display:none; }
  .chip{
    border:1px solid var(--line); background:var(--card); color:var(--plum); padding:8px 16px;
    border-radius:999px; font-size:0.83rem; font-weight:600; cursor:pointer; flex-shrink:0;
    transition:transform 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease), color 0.18s var(--ease);
  }
  .chip:hover{ transform:translateY(-1px); border-color:var(--accent); color:var(--accent); }
  .chip.active{ background:var(--grad-brand); color:#fff; border-color:transparent; box-shadow:var(--shadow-soft); }
  .chip.active:hover{ color:#fff; transform:translateY(-1px) scale(1.02); }

  /* ---------- GRID ---------- */
  .grid{ max-width:1100px; margin:0 auto; padding:14px 20px 100px; display:grid; grid-template-columns:repeat(auto-fill, minmax(236px, 1fr)); gap:24px; position:relative; z-index:1; }
  .card{
    background:var(--card); border-radius:var(--r-lg); overflow:hidden; box-shadow:0 2px 10px rgba(46,26,36,0.07);
    border:1px solid var(--line); display:flex; flex-direction:column; position:relative;
    transition:transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  }
  .card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:rgba(195,128,143,0.35); }
  .card.sold{ opacity:0.6; }
  .img-wrap{
    aspect-ratio:3/4; background:linear-gradient(135deg, #F1D9CE, #E9C4D1); display:flex;
    align-items:center; justify-content:center; color:var(--plum); font-size:0.75rem;
    text-align:center; padding:10px; position:relative; overflow:hidden;
  }
  .img-wrap img{ width:100%; height:100%; object-fit:cover; transition:transform 0.6s var(--ease); }
  .card:hover .img-wrap img{ transform:scale(1.07); }
  .img-wrap::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:46%; pointer-events:none;
    background:linear-gradient(to top, rgba(46,26,36,0.32), transparent);
    opacity:0; transition:opacity 0.35s var(--ease);
  }
  .card:hover .img-wrap::after{ opacity:1; }
  .tag{
    position:absolute; top:14px; left:14px; background:rgba(107,143,113,0.9); color:#fff; font-size:0.68rem;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    font-weight:700; padding:6px 13px 6px 11px; border-radius:999px; letter-spacing:0.02em;
    box-shadow:0 4px 12px rgba(46,26,36,0.2); z-index:2; display:flex; align-items:center; gap:6px;
  }
  .tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,0.35); }
  .tag.sold-tag{ background:rgba(176,166,169,0.92); }
  .tag.sold-tag::before{ display:none; }
  .info{ padding:16px 17px 18px; flex:1; display:flex; flex-direction:column; gap:6px; }
  .cat{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.09em; color:var(--accent); font-weight:700; }
  .name{ font-family:'Fraunces', serif; font-size:1.2rem; font-weight:600; margin:0; line-height:1.2; }
  .meta{ font-size:0.82rem; color:var(--plum); opacity:0.8; }
  .desc{ font-size:0.8rem; color:var(--ink); opacity:0.75; line-height:1.35; }
  .price{
    font-family:'Fraunces', serif; font-size:1.35rem; font-weight:700; margin-top:4px;
    background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .ask-btn{
    margin-top:10px; text-align:center; background:rgba(74,42,59,0.06); border:1.5px solid transparent;
    color:var(--plum); text-decoration:none; padding:10px; border-radius:var(--r-sm); font-weight:700;
    font-size:0.85rem; transition:background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  }
  .ask-btn:hover{ background:var(--grad-brand); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-soft); }
  .card.sold .ask-btn{ pointer-events:none; opacity:0.5; }
  .empty{ text-align:center; padding:60px 20px; color:var(--plum); opacity:0.7; font-family:'Fraunces', serif; font-style:italic; grid-column:1/-1; }
  footer{ text-align:center; padding:26px 20px 40px; font-size:0.8rem; color:var(--plum); opacity:0.6; position:relative; z-index:1; }

  /* ---------- EDIT FAB ---------- */
  .fab{
    display:none; position:fixed; bottom:22px; right:22px; width:54px; height:54px; border-radius:50%;
    background:var(--grad-brand); color:#fff; border:none; cursor:pointer; font-size:1.25rem;
    box-shadow:0 10px 26px -6px rgba(195,128,143,0.55); z-index:40; transition:transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  }
  .fab.show{ display:block; }
  .fab:hover{ transform:scale(1.08) rotate(-4deg); box-shadow:0 14px 32px -6px rgba(195,128,143,0.65); }
  .hanger{ cursor:default; }

  /* ---------- PANEL / MODAL ---------- */
  .overlay{
    display:none; position:fixed; inset:0; background:rgba(46,26,36,0.5); z-index:50;
    -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    align-items:flex-end; justify-content:center;
  }
  .overlay.open{ display:flex; }
  .panel{
    background:var(--paper); width:100%; max-width:560px; max-height:88vh; border-radius:26px 26px 0 0;
    overflow-y:auto; padding:26px 20px 30px; box-shadow:0 -12px 40px rgba(0,0,0,0.28); position:relative;
  }
  .panel::before{
    content:""; position:sticky; top:0; display:block; width:42px; height:5px; border-radius:999px;
    background:var(--line); margin:-10px auto 16px;
  }
  @media (min-width:640px){
    .overlay{ align-items:center; }
    .panel{ border-radius:26px; max-height:85vh; }
    .panel::before{ display:none; }
  }
  .panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .panel-head h2{ font-family:'Fraunces', serif; font-size:1.4rem; margin:0; }
  .close-btn{ background:rgba(74,42,59,0.06); border:none; font-size:1.2rem; color:var(--plum); cursor:pointer; line-height:1; padding:7px 11px; border-radius:999px; transition:background 0.2s var(--ease); }
  .close-btn:hover{ background:rgba(74,42,59,0.14); }

  .section-label{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent); font-weight:700; margin:18px 0 8px; }
  details.settings{ border:1px solid var(--line); border-radius:var(--r-md); padding:10px 14px; background:var(--card); margin-bottom:6px; }
  details.settings summary{ cursor:pointer; font-weight:600; font-size:0.9rem; color:var(--plum); }

  .field{ margin-bottom:12px; }
  .field label{ display:block; font-size:0.8rem; font-weight:600; color:var(--plum); margin-bottom:5px; }
  .field input[type=text], .field input[type=number], .field input[type=tel], .field input[type=url]{
    width:100%; padding:11px 13px; border-radius:var(--r-sm); border:1px solid var(--line); font-family:'Work Sans', sans-serif; font-size:0.92rem;
    transition:box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
  }
  .field input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(195,128,143,0.12); }
  .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .estado-toggle{ display:flex; gap:8px; }
  .estado-btn{
    flex:1; padding:10px; border-radius:var(--r-sm); border:1.5px solid var(--line); background:var(--card);
    color:var(--plum); font-weight:600; font-size:0.88rem; cursor:pointer; transition:all 0.2s var(--ease);
  }
  .estado-btn.active{ background:var(--grad-brand); color:#fff; border-color:transparent; box-shadow:var(--shadow-soft); }
  .tag.estado-tag{ top:auto; left:auto; right:14px; bottom:14px; background:rgba(200,155,60,0.92); color:#2b210c; }
  .tag.estado-tag::before{ display:none; }
  .tag.estado-tag.usada{ background:rgba(234,219,203,0.92); color:var(--plum); }
  .toggle-row{ display:flex; align-items:center; gap:10px; margin:12px 0; }
  .switch{ position:relative; width:42px; height:24px; }
  .switch input{ opacity:0; width:0; height:0; }
  .slider{ position:absolute; inset:0; background:var(--sold); border-radius:999px; cursor:pointer; transition:0.2s var(--ease); }
  .slider::before{ content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:0.2s var(--ease); }
  .switch input:checked + .slider{ background:var(--sage); }
  .switch input:checked + .slider::before{ transform:translateX(18px); }

  .img-drop{
    border:1.5px dashed var(--line); border-radius:var(--r-md); padding:14px; text-align:center; cursor:pointer;
    background:var(--card); font-size:0.85rem; color:var(--plum); opacity:0.85; transition:border-color 0.2s var(--ease), background 0.2s var(--ease);
  }
  .img-drop:hover{ border-color:var(--accent); background:rgba(195,128,143,0.05); }
  .img-preview{ width:90px; height:110px; object-fit:cover; border-radius:8px; margin:0 auto 8px; display:block; }

  .fotos-strip{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
  .foto-thumb{ position:relative; width:64px; height:78px; }
  .foto-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:8px; }
  .foto-thumb button{
    position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%;
    background:var(--danger); color:#fff; border:none; font-size:0.7rem; cursor:pointer; line-height:1;
  }

  .carousel-arrow{
    position:absolute; top:50%; transform:translateY(-50%); background:rgba(46,26,36,0.5); color:#fff;
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    border:none; width:28px; height:28px; border-radius:50%; font-size:0.85rem; cursor:pointer; z-index:2;
    display:flex; align-items:center; justify-content:center; padding:0; transition:background 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .carousel-arrow:hover{ background:var(--accent); transform:translateY(-50%) scale(1.08); }
  .carousel-arrow.prev{ left:8px; }
  .carousel-arrow.next{ right:8px; }
  .carousel-dots{ position:absolute; bottom:8px; left:0; right:0; display:flex; gap:5px; justify-content:center; z-index:2; }
  .carousel-dots span{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.55); transition:background 0.2s var(--ease), transform 0.2s var(--ease); }
  .carousel-dots span.active{ background:#fff; transform:scale(1.25); }

  .btn-primary{
    width:100%; background:var(--grad-brand); color:#fff; border:none; padding:14px; border-radius:var(--r-sm);
    font-weight:700; font-size:0.92rem; cursor:pointer; margin-top:6px; box-shadow:var(--shadow-soft);
    transition:transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  }
  .btn-primary:hover{ transform:translateY(-1px); box-shadow:var(--shadow-lift); }
  .btn-secondary{
    width:100%; background:transparent; color:var(--plum); border:1.5px solid var(--plum); padding:12px;
    border-radius:var(--r-sm); font-weight:600; font-size:0.9rem; cursor:pointer; margin-top:8px; transition:background 0.2s var(--ease), color 0.2s var(--ease);
  }
  .btn-secondary:hover{ background:var(--plum); color:#fff; }
  .btn-download{
    width:100%; background:var(--grad-warm); color:#fff; border:none; padding:14px; border-radius:var(--r-sm);
    font-weight:700; font-size:0.95rem; cursor:pointer; margin-top:18px; box-shadow:var(--shadow-soft);
  }

  .prenda-row{
    display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line);
    border-radius:var(--r-md); padding:9px 10px; margin-bottom:8px; transition:box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
  }
  .prenda-row:hover{ box-shadow:0 6px 18px -10px rgba(74,42,59,0.3); border-color:rgba(195,128,143,0.3); }
  .prenda-row img, .prenda-row .ph{
    width:44px; height:54px; border-radius:8px; object-fit:cover; background:linear-gradient(135deg,#F1D9CE,#E9C4D1); flex-shrink:0;
  }
  .prenda-row .pinfo{ flex:1; min-width:0; }
  .prenda-row .pnombre{ font-weight:600; font-size:0.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .prenda-row .pmeta{ font-size:0.76rem; color:var(--plum); opacity:0.75; }
  .row-btns{ display:flex; gap:6px; }
  .icon-btn{
    border:none; background:var(--paper); width:32px; height:32px; border-radius:9px; cursor:pointer; font-size:0.85rem;
    transition:background 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .icon-btn:hover{ background:var(--line); transform:translateY(-1px); }
  .icon-btn.del{ color:var(--danger); }
  .add-btn{
    width:100%; border:1.5px dashed var(--plum); background:transparent; color:var(--plum); padding:12px;
    border-radius:var(--r-sm); font-weight:600; font-size:0.9rem; cursor:pointer; margin-top:6px;
    transition:border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
  }
  .add-btn:hover{ border-color:var(--accent); color:var(--accent); background:rgba(195,128,143,0.05); }
  .hint{ font-size:0.76rem; color:var(--plum); opacity:0.65; margin-top:10px; line-height:1.4; }