/* ======================================================
   VARIABLES COMPARTIDAS, TIPOGRAFÍA Y RESET BASE
   Usado por index.html (cliente) y admin.html (vendedor)
   ====================================================== */
/* ======================================================
   SISTEMA DE DISEÑO "EXECUTIVE / WEALTH MANAGEMENT"
   Esquinas refinadas (8–14px), bordes de 1px de precisión,
   sombras sutiles multicapa y tipografía de jerarquía firme.
   Todo deriva de estas variables — los temas ([data-theme])
   solo sobrescriben --accent/--accent-deep/--accent-tint.
   ====================================================== */
:root{
  --surface:#FFFFFF; --ink:#2A2725; --ink-soft:#8A8280; --border:#E7E1D8;
  --accent:#E0568C; --accent-deep:#B23568; --accent-tint:#FCE4EE; --accent-rgb:224,86,140; /* Rosa Vivo */
  --ok:#3F8F68; --warn:#B7883A; --danger:#B5543C;
  --radius-lg:14px; --radius-md:10px; --radius-sm:8px;
  --shadow-rest: 0 1px 2px rgba(30,26,20,0.04), 0 1px 1px rgba(30,26,20,0.03);
  --shadow-hover: 0 8px 24px rgba(30,26,20,0.09), 0 2px 6px rgba(30,26,20,0.05);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  color:var(--ink); font-family:'Inter', sans-serif; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3,h4,.logo-text{font-family:'Plus Jakarta Sans', sans-serif; margin:0; letter-spacing:-0.015em; font-weight:700;}

button{
  font-family:'Inter'; font-weight:600; font-size:14.5px; letter-spacing:-0.005em; border-radius:var(--radius-sm); border:none; padding:14px 20px; cursor:pointer;
  transition: transform .2s var(--ease), opacity .2s var(--ease), box-shadow .2s var(--ease);
}
button:hover{ transform:translateY(-1px); }
button:active{transform:scale(0.98);}

input, select, textarea{
  font-family:'Inter'; font-size:14.5px; color:var(--ink); outline:none;
  border-radius:var(--radius-sm); border:1px solid var(--border); background:#fff;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input:focus, select:focus, textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }

@keyframes panelIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

/* ----------------- Toasts ----------------- */
.toast-container{
  position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:3000;
  display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none;
}
.toast{
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600;
  box-shadow:var(--shadow-hover); opacity:0; transform:translateY(-10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  max-width:90vw; text-align:center;
}
.toast.show{ opacity:1; transform:translateY(0); }
.toast-error{ background:var(--danger); }
.toast-success{ background:var(--ok); }

/* ----------------- Checkbox de aceptación de Términos (registro) ----------------- */
.field-checkbox{ display:flex; align-items:flex-start; gap:9px; margin:-6px 0 16px; text-align:left; }
.field-checkbox input[type="checkbox"]{ width:16px; height:16px; margin-top:2px; flex:none; accent-color:var(--accent); cursor:pointer; }
.field-checkbox label{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; font-weight:400; cursor:pointer; }
.field-checkbox label a{ color:var(--accent-deep); font-weight:600; text-decoration:underline; }

/* ----------------- Footer legal (index.html / admin.html) ----------------- */
.legal-footer{ text-align:center; padding:28px 20px 6px; font-size:12px; color:var(--ink-soft); }
.legal-footer a{ color:var(--ink-soft); text-decoration:underline; }
.legal-footer a:hover{ color:var(--accent-deep); }

/* ----------------- Botones "Descargar para Android / iOS" ----------------- */
.app-download-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
.btn-download{
  display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--border);
  color:var(--ink); border-radius:999px; padding:11px 20px; font-family:'Inter'; font-size:13px; font-weight:700;
  box-shadow:var(--shadow-rest); transition:all .25s var(--ease); cursor:pointer;
}
.btn-download:hover{ border-color:var(--accent); color:var(--accent-deep); box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.btn-download .download-icon{ color:var(--accent-deep); flex:none; }

/* ----------------- Modal genérico (onboarding negocio / instalación iOS) ----------------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(59,53,56,0.5); backdrop-filter:blur(2px);
  display:none; align-items:center; justify-content:center; z-index:999; padding:20px;
}
.modal-overlay.show{display:flex;}
.modal-card{
  background:#fff; border-radius:var(--radius-lg); padding:30px; max-width:420px; width:100%;
  box-shadow:var(--shadow-hover); max-height:90vh; overflow-y:auto; position:relative;
  animation:panelIn .35s var(--ease);
}
.modal-card h2{font-size:20px; margin-bottom:6px;}
.modal-card .sub{color:var(--ink-soft); font-size:13.5px; margin-bottom:22px; line-height:1.5;}
.modal-close{position:absolute; top:18px; right:18px; background:none; border:none; font-size:16px; cursor:pointer; color:var(--ink-soft);}
.ios-steps{ list-style:none; margin:0 0 22px; padding:0; text-align:left; }
.ios-steps li{ display:flex; gap:10px; font-size:14px; color:var(--ink); line-height:1.6; padding:10px 0; border-bottom:1px solid var(--border); }
.ios-steps li:last-child{ border-bottom:none; }
.ios-steps li strong:first-child{ color:var(--accent-deep); flex:none; }
.modal-btn-ok{ background:var(--accent); color:#fff; width:100%; }

/* ----------------- Modal de textos legales (Términos / Privacidad) ----------------- */
.modal-card-legal{ max-width:640px; text-align:left; padding:34px 34px 30px; }
.modal-card-legal h2{ padding-right:26px; }
.legal-modal-body{
  max-height:min(60vh, 480px); overflow-y:auto; margin-top:18px; padding-right:6px;
  border-top:1px solid var(--border); padding-top:18px;
}
.legal-modal-updated{ color:var(--ink-soft); font-size:12.5px; margin:0 0 18px; }
.legal-modal-body h3{ font-size:15px; color:var(--accent-deep); margin:22px 0 8px; letter-spacing:-0.005em; }
.legal-modal-body h3:first-of-type{ margin-top:0; }
.legal-modal-body p{ line-height:1.7; color:var(--ink); font-size:14px; margin:0 0 4px; }
@media (max-width:520px){
  .modal-card-legal{ padding:26px 22px 22px; }
}

/* ----------------- Páginas legales estáticas (terminos.html / privacidad.html) ----------------- */
.legal-doc{ max-width:680px; margin:0 auto; padding:56px 24px 80px; }
.legal-doc .legal-back{ display:inline-block; margin-bottom:28px; color:var(--accent-deep); font-weight:600; font-size:13.5px; text-decoration:none; }
.legal-doc .legal-back:hover{ text-decoration:underline; }
.legal-doc h1{ font-size:25px; margin-bottom:8px; letter-spacing:-0.01em; }
.legal-doc .legal-updated{ color:var(--ink-soft); font-size:13px; margin-bottom:32px; }
.legal-doc h2{ font-size:16.5px; margin:30px 0 10px; color:var(--accent-deep); }
.legal-doc p{ line-height:1.7; color:var(--ink); font-size:14.5px; margin:0 0 14px; }

/* ----------------- Marca genérica (logo de respaldo) ----------------- */
.brand-mark{ width:52%; height:52%; }