:root{
  --azul:#1E3A5F; --azul-2:#2C5282; --gris:#8A94A3;
  --bg:#EEF1F5; --card:#FFFFFF; --tx:#14202E; --tx-2:#5A6676; --linea:#D8DEE6;
  --ok:#1F8A4C; --wa:#25D366; --wa-tx:#0B3D1E; --chip:#E6ECF3; --error:#B42318;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E141B; --card:#18212C; --tx:#E8EDF3; --tx-2:#9AA7B6; --linea:#2C3846; --chip:#22303F; --azul-2:#7FA6D6; --error:#F97066;
  }
}
:root[data-theme="dark"]{
  --bg:#0E141B; --card:#18212C; --tx:#E8EDF3; --tx-2:#9AA7B6; --linea:#2C3846; --chip:#22303F; --azul-2:#7FA6D6; --error:#F97066;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--tx); font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
     min-height:100dvh; display:flex; justify-content:center; padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
.card{width:100%; max-width:460px; background:var(--card); border-radius:20px; box-shadow:0 8px 30px rgba(20,32,46,.12);
      display:flex; flex-direction:column; overflow:hidden}
header{padding:18px 20px 12px; border-bottom:1px solid var(--linea)}
.marca{font-size:13px; color:var(--tx-2); line-height:1.25}
.marca b{display:block; color:var(--tx); font-size:16px}
main{flex:1; padding:22px 20px 8px; overflow:auto}
footer{display:flex; gap:10px; padding:14px 20px 18px; border-top:1px solid var(--linea)}
.chip{display:inline-block; font-size:12px; font-weight:600; letter-spacing:.02em; padding:4px 9px; border-radius:99px; background:var(--chip); color:var(--azul-2)}
h1{font-size:22px; line-height:1.25; margin:12px 0 8px; text-wrap:balance}
.ctx{font-size:14px; color:var(--tx-2); margin:0 0 18px; padding-left:10px; border-left:3px solid var(--linea)}
textarea,input[type=text],input[type=tel],select{width:100%; font:inherit; color:var(--tx); background:var(--card); border:1.5px solid var(--linea); border-radius:12px; padding:12px 14px}
textarea{min-height:92px; resize:vertical}
textarea:focus,input:focus,select:focus{outline:none; border-color:var(--azul-2)}
button{font:inherit; font-weight:600; border:0; border-radius:12px; padding:14px 16px; cursor:pointer}
.sec{background:transparent; color:var(--tx-2); border:1.5px solid var(--linea)}
.pri{flex:1; background:var(--azul); color:#fff}
.pri:disabled{opacity:.4; cursor:default}
.wa{flex:1; background:var(--wa); color:var(--wa-tx); display:flex; align-items:center; justify-content:center; gap:8px}
.oculto{display:none!important}
.firma{text-align:center; font-size:12px; color:var(--tx-2); letter-spacing:.08em; text-transform:lowercase; padding:0 0 14px}
.logo{display:flex; align-items:center; gap:12px}
.logo img{flex:none; border-radius:10px}
.firma-app{display:block; text-align:center; font-size:12px; color:var(--tx-2); text-decoration:none; padding:0 0 12px}
.firma-app b{color:var(--tx); font-weight:600}