:root{
  --bg:#ffffff; --fg:#0f1a0f;
  --brand:#2e7d32; --brand-2:#256628; --accent:#795548;
  --line:#e6e6e6; --soft:#f6fff6;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.hidden{ display:none !important; }

/* ===== Splash (global) ===== */
.splash{
  position:fixed; inset:0; background:#fff;
  display:grid; place-items:center; z-index:9999; overflow:hidden;
}
.splash.hide{ opacity:0; pointer-events:none; transition:opacity .25s ease; }

/* Detalles del splash */
.splash-card{ text-align:center; position:relative; z-index:1; }
.logo-lg{
  width:64px; height:64px; border-radius:16px; font-size:1.3rem;
  display:grid; place-items:center; margin:0 auto .5rem auto;
}
.splash-title{ font-size:1.8rem; margin:.25rem 0 0 0; }
.splash-sub{ margin:.25rem 0 .6rem 0; color:#355a36; }
.spinner{
  width:36px; height:36px; border-radius:50%;
  border:3px solid #e8f3ea; border-top-color:var(--brand);
  margin:0 auto; animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg);} }
.brand-pattern{ position:fixed; inset:0; opacity:.5; pointer-events:none; }

/* ===== Layout base ===== */
.app-root{ min-height:100vh; }
.hs-section{ padding:1.5rem; }
.hs-header{ margin-bottom:1rem; }
.hs-header h1{ margin:0; font-size:1.6rem; font-weight:800; }
.hs-sub{ margin:.25rem 0 0; color:#666; }

.row{ display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; }
.space-between{ justify-content:space-between; }
.grid{ display:grid; gap:1rem; }
.grow{ flex:1 1 auto; }

.logo{
  width:40px; height:40px; border-radius:12px;
  background:var(--brand); color:#fff;
  display:grid; place-items:center; font-weight:800;
}
.muted{ color:#666; }
.accent{ color:var(--brand); font-weight:700; } /* texto verde acento */

/* ===== Componentes compartidos ===== */
.card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:1rem;
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}

/* ===== Botones (base + variantes) ===== */
button{
  height:40px;
  padding:0 .95rem;
  border-radius:10px;
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  cursor:pointer;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Variante secundaria (contorno) */
button.secondary{
  background:#fff;
  color:var(--brand);
  border-color:var(--brand);
}

/* Variante de alerta secundaria */
button.secondary.danger{
  color:#b00020;
  border-color:#b00020;
  background:#fff;
}
button.secondary.danger:hover{ background:#ffe5e9; }

/* Variante marrón usada en Home */
button.accent{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
}

button[disabled]{ opacity:.6; cursor:not-allowed; }

/* Enlaces marrones (si usas <a class="link-brown">) */
.link-brown{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
}
.link-brown:hover{ text-decoration:underline; }

/* ===== Bulma toggle tabs (estilo personalizado) ===== */
.hs-toggle-tabs{ margin:1rem 0 1.25rem; width:100%; }
.hs-toggle-tabs ul{
  display:flex;
  gap:0;
  border:1px solid var(--line);
  border-radius:14px;
  list-style:none;
  margin:0;
  overflow:hidden;
  padding:0;
  background:#f6faf6;
  width:100%;
}
.hs-toggle-tabs ul li{
  flex:1;
  margin:0;
}
.hs-toggle-tabs ul li + li a{ border-left:1px solid var(--line); }
.hs-toggle-tabs a{
  width:100%;
  height:52px;
  border:none;
  border-radius:0;
  background:transparent;
  color:#6b746b;
  font-weight:600;
  font-size:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  transition:background .2s ease, color .2s ease;
}
.hs-toggle-tabs li.is-active a{
  background:var(--brand);
  color:#fff;
  box-shadow:inset 0 0 0 1px var(--brand);
}
.hs-toggle-tabs li:not(.is-active) a:hover{
  background:#eef6ef;
  color:#2d3c2d;
}

/* ===== Formularios base ===== */
label{ display:flex; flex-direction:column; gap:.35rem; font-size:.95rem; color:#333; }
input, select, textarea{
  width:100%; padding:.65rem .75rem; border:1px solid #d9e2d9; border-radius:10px;
  background:#fafffa; outline:none; color:inherit; font:inherit;
}
textarea{ min-height:100px; }
input:focus, select:focus, textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 1px var(--brand);
}
.actions{ display:flex; gap:.65rem; }

/* Select estilizado (reutilizado) */
.select-wrap{
  min-width:260px; height:40px; border:1px solid var(--line); border-radius:10px; background:#fff;
  display:flex; align-items:center; padding:0 .65rem; position:relative;
}
.select-wrap select{
  width:100%; height:100%; border:0; outline:none; background:transparent; font:inherit; color:inherit;
  appearance:none; padding-right:28px;
}
.select-wrap::after{
  content:""; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #222; pointer-events:none;
}

/* ===== Tabla base ===== */
.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table th, .table td{ padding:.65rem .75rem; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
.table thead th{ background:#f7faf7; font-weight:700; }
.table tr:last-child td{ border-bottom:none; }
.table-wrap{ overflow:auto; border:1px solid var(--line); border-radius:12px; background:#fff; }
.table-empty{ padding:.65rem .75rem; color:#666; text-align:center; }

/* ===== Modales genéricos removidos (migrados a ajustes.css) ===== */

/* ===== Dialog nativo opcional ===== */
dialog.hs-modal{
  border:none; border-radius:16px; padding:0; width:min(720px,95vw);
}
dialog.hs-modal::backdrop{ background:rgba(0,0,0,.3); }

#marketplaceInviteModal h3{
  font-size:1.25rem;
}
#marketplaceInviteModal .modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:.5rem;
}