/* ============================================================
   WOOTEN — Sistema de diseño (claro, simple, premium)
   Inspiración: Uber / Mercado Pago / Airbnb / Notion.
   Todas las clases van con prefijo .w- para convivir con el
   CSS viejo de cada vista durante la migración gradual.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

:root{
  --w-bg:        #080808;   /* fondo principal (negro original) */
  --w-soft:      #161616;   /* superficie suave (secciones, inputs) */
  --w-soft-2:    #1f1f1f;
  --w-line:      #262626;   /* bordes */
  --w-ink:       #f3f3f3;   /* texto principal (claro) */
  --w-muted:     #a6a6a6;   /* texto secundario */
  --w-muted-2:   #6f6f6f;
  --w-brand:     #ff7a00;   /* naranja Wooten */
  --w-brand-ink: #ff9433;   /* naranja hover/activo (más claro sobre oscuro) */
  --w-brand-soft:#2a1a0a;   /* fondo naranja muy oscuro */
  --w-ok:        #2bd699;
  --w-danger:    #ff5a5f;
  --w-radius:    20px;      /* radio de tarjetas */
  --w-radius-sm: 14px;
  --w-radius-btn:18px;      /* radio de botones (16–24) */
  --w-shadow:    0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.38);
  --w-shadow-sm: 0 1px 3px rgba(0,0,0,.35);
  --w-maxw:      560px;     /* ancho mobile-first */
}

/* ---------- Reset / base ---------- */
*.w-scope, .w-scope *{ box-sizing:border-box; }
body.w-body{
  margin:0; background:var(--w-bg); color:var(--w-ink);
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  padding-bottom:84px; /* espacio para el bottom nav */
}
.w-body *{ box-sizing:border-box; }
.w-body a{ color:inherit; text-decoration:none; }
.w-body h1,.w-body h2,.w-body h3{ margin:0; font-weight:800; letter-spacing:-.02em; color:var(--w-ink); }
.w-body p{ margin:0; }

/* ---------- Layout ---------- */
.w-container{ max-width:var(--w-maxw); margin:0 auto; padding:18px 18px 28px; }
.w-section{ margin-bottom:26px; }
.w-section-ttl{ font-size:1.05rem; font-weight:800; margin:0 0 12px; letter-spacing:-.01em; }
.w-section-sub{ color:var(--w-muted); font-size:.9rem; margin:-6px 0 14px; }
.w-row{ display:flex; align-items:center; gap:12px; }
.w-spread{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.w-stack{ display:flex; flex-direction:column; gap:12px; }
.w-muted{ color:var(--w-muted); }

/* ---------- Encabezado de página ---------- */
.w-page-head{ padding:6px 0 18px; }
.w-page-title{ font-size:1.6rem; font-weight:800; letter-spacing:-.03em; }
.w-page-desc{ color:var(--w-muted); font-size:.95rem; margin-top:4px; }

/* ---------- Botones ---------- */
.w-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-weight:700; font-size:1rem; cursor:pointer;
  border:none; border-radius:var(--w-radius-btn); padding:15px 22px;
  transition:transform .06s ease, background .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent; line-height:1;
}
.w-btn:active{ transform:scale(.98); }
.w-btn-primary{ background:var(--w-brand); color:#fff; }
.w-btn-primary:hover{ background:var(--w-brand-ink); }
.w-btn-dark{ background:var(--w-ink); color:var(--w-bg); }
.w-btn-soft{ background:var(--w-soft); color:var(--w-ink); }
.w-btn-soft:hover{ background:var(--w-soft-2); }
.w-btn-outline{ background:transparent; color:var(--w-ink); border:1.5px solid var(--w-line); }
.w-btn-outline:hover{ border-color:var(--w-muted-2); }
.w-btn-ghost{ background:transparent; color:var(--w-brand-ink); padding-left:6px; padding-right:6px; }
.w-btn-block{ width:100%; }
.w-btn-lg{ padding:17px 24px; font-size:1.05rem; }
.w-btn-sm{ padding:10px 16px; font-size:.9rem; border-radius:14px; }
.w-btn:disabled{ opacity:.55; cursor:default; }

/* ---------- Tarjetas ---------- */
.w-card{
  background:var(--w-bg); border:1px solid var(--w-line);
  border-radius:var(--w-radius); padding:18px; box-shadow:var(--w-shadow-sm);
}
.w-card-flat{ background:var(--w-soft); border:none; box-shadow:none; }
.w-card-pad-lg{ padding:24px; }
.w-card + .w-card{ margin-top:14px; }
.w-card-title{ font-size:1.02rem; font-weight:800; margin-bottom:4px; }
.w-card-sub{ color:var(--w-muted); font-size:.9rem; }

/* tarjeta clickeable de lista (estilo Uber/MP) */
.w-list-item{
  display:flex; align-items:center; gap:14px; width:100%;
  background:var(--w-bg); border:1px solid var(--w-line);
  border-radius:var(--w-radius-sm); padding:15px 16px; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.w-list-item:hover{ background:var(--w-soft); }
.w-list-ico{
  width:44px; height:44px; border-radius:13px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.25rem;
  background:var(--w-brand-soft);
}
.w-list-main{ flex:1; min-width:0; }
.w-list-main b{ font-weight:700; display:block; }
.w-list-main span{ color:var(--w-muted); font-size:.86rem; }
.w-list-arrow{ color:var(--w-muted-2); flex-shrink:0; }

/* ---------- Inputs ---------- */
.w-label{ display:block; font-size:.84rem; font-weight:600; color:var(--w-muted); margin:0 0 7px; }
.w-field{
  width:100%; font-family:inherit; font-size:1rem; color:var(--w-ink);
  background:var(--w-soft); border:1.5px solid transparent; border-radius:var(--w-radius-sm);
  padding:14px 15px; transition:border-color .15s ease, background .15s ease;
}
.w-field::placeholder{ color:var(--w-muted-2); }
.w-field:focus{ outline:none; background:var(--w-soft-2); border-color:var(--w-brand); }
textarea.w-field{ min-height:96px; resize:vertical; }

/* ---------- Chips / badges ---------- */
.w-chip{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px;
  border-radius:999px; background:var(--w-soft); color:var(--w-ink);
  font-size:.86rem; font-weight:600; cursor:pointer; border:1.5px solid transparent;
}
.w-chip.is-on{ background:var(--w-brand-soft); border-color:var(--w-brand); color:var(--w-brand-ink); }
.w-badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  font-size:.74rem; font-weight:700; background:var(--w-soft); color:var(--w-muted); }
.w-badge-ok{ background:rgba(43,214,153,.14); color:var(--w-ok); }
.w-badge-brand{ background:var(--w-brand-soft); color:var(--w-brand-ink); }

/* ---------- Navegación (usada por _nav.ejs) ---------- */
.w-topbar{
  position:sticky; top:0; z-index:50; background:rgba(8,8,8,.92);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--w-line);
}
.w-topbar-in{ max-width:var(--w-maxw); margin:0 auto; height:58px; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between; }
.w-logo{ font-weight:800; font-size:1.25rem; letter-spacing:-.03em; color:var(--w-ink); }
.w-logo b{ color:var(--w-brand); }
.w-top-cta{ font-size:.85rem; font-weight:700; color:var(--w-brand-ink);
  background:var(--w-brand-soft); padding:9px 15px; border-radius:999px; }

.w-bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--w-bg);
  border-top:1px solid var(--w-line); padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  display:flex; justify-content:space-around;
}
.w-bn-item{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--w-muted-2); font-size:.66rem; font-weight:600; padding:4px 2px; }
.w-bn-item .w-bn-ico{ font-size:1.25rem; line-height:1; }
.w-bn-item.is-active{ color:var(--w-brand-ink); }

/* ---------- Estados vacíos ---------- */
.w-empty{ text-align:center; padding:48px 24px; color:var(--w-muted); }
.w-empty-ico{ font-size:2.6rem; margin-bottom:12px; }
.w-empty-ttl{ font-weight:800; color:var(--w-ink); font-size:1.05rem; margin-bottom:6px; }

/* ---------- Utilidades ---------- */
.w-mt-8{ margin-top:8px; } .w-mt-16{ margin-top:16px; } .w-mt-24{ margin-top:24px; }
.w-tc{ text-align:center; } .w-bold{ font-weight:800; }
.w-hide{ display:none !important; }