:root{
  /* Marca San Pío IPS: navy #003060 + celeste #30a0d0 sobre Dark Executive */
  --bg:#070b12; --bg-2:#0d1422; --card:#101a2b; --card-2:#142036;
  --line:#23324a; --line-soft:#1a2640;
  --txt:#e7ecf3; --txt-soft:#9aabc2; --txt-mut:#6b7a93;
  --accent:#2ea3d6; --accent-2:#5cc4ec; --accent-ink:#04131d;
  --navy:#003060;
  --danger:#f87171; --warn:#fbbf24;
  --r:14px; --r-sm:10px;
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px; --sp6:32px;
  --shadow:0 8px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
[hidden]{display:none!important} /* FIX: que .loader/.card display:flex|grid no anulen el atributo hidden */
html,body{margin:0}
body{
  background:radial-gradient(1200px 600px at 50% -10%, #0a1e36 0%, var(--bg) 55%);
  color:var(--txt); font-family:Inter,system-ui,sans-serif; line-height:1.55;
  min-height:100dvh; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif; margin:0}

/* ---- topbar ---- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--sp4) + env(safe-area-inset-top)) var(--sp4) var(--sp4);
  border-bottom:1px solid var(--line-soft); position:sticky; top:0;
  background:rgba(9,12,18,.82); backdrop-filter:blur(10px); z-index:5;
}
.brand{display:flex; align-items:center; gap:var(--sp3)}
.brand-mark{
  width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
  overflow:hidden; background:#fff; box-shadow:0 0 0 1px var(--line);
}
.brand-mark img{width:100%; height:100%; object-fit:contain}
.brand h1{font-size:1.05rem; letter-spacing:.2px}
.brand-sub{margin:0; font-size:.72rem; color:var(--txt-mut); font-family:"JetBrains Mono",monospace; letter-spacing:.5px}
.pill{
  font-family:"JetBrains Mono",monospace; font-size:.7rem; color:var(--txt-mut);
  border:1px solid var(--line); border-radius:999px; padding:2px 10px;
}
.pill.ok{color:var(--accent-2); border-color:rgba(46,163,214,.4)}
.pill.off{color:var(--warn); border-color:rgba(251,191,36,.35)}

/* ---- layout ---- */
.wrap{max-width:680px; margin:0 auto; padding:var(--sp5) var(--sp4) calc(var(--sp6) + env(safe-area-inset-bottom)); display:grid; gap:var(--sp4)}
.card{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r); padding:var(--sp5); box-shadow:var(--shadow); display:grid; gap:var(--sp4)}

/* ---- fields ---- */
.field{display:grid; gap:var(--sp2)}
.label{font-size:.8rem; font-weight:600; color:var(--txt-soft); letter-spacing:.2px}
.opt{color:var(--txt-mut); font-weight:400}
select,input,textarea{
  width:100%; background:var(--bg-2); color:var(--txt);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px;
  font:inherit; font-size:1rem; transition:border-color .15s, box-shadow .15s;
}
textarea{resize:vertical; min-height:120px; line-height:1.6}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa6ba' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:18px; padding-right:40px}
select:focus,input:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(46,163,214,.18)}

.entrada-tools{display:flex; gap:var(--sp2); flex-wrap:wrap}
.chips{display:flex; gap:var(--sp2); flex-wrap:wrap}
.chip{
  font-size:.8rem; color:var(--txt-soft); background:var(--card-2);
  border:1px solid var(--line); border-radius:999px; padding:6px 12px; cursor:pointer;
  transition:.15s;
}
.chip:hover{border-color:var(--accent); color:var(--txt)}
.chip:active{transform:scale(.97)}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-weight:600; font-size:.95rem; cursor:pointer;
  border-radius:var(--r-sm); padding:13px 18px; border:1px solid transparent;
  min-height:46px; transition:.15s; -webkit-tap-highlight-color:transparent;
}
.btn .ic{width:18px; height:18px}
.btn-primary{background:linear-gradient(145deg,var(--accent),var(--accent-2)); color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:var(--card-2); color:var(--txt-soft); border-color:var(--line)}
.btn-ghost:hover{color:var(--txt); border-color:var(--accent)}
#btn-generar{width:100%}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn.rec{background:rgba(248,113,113,.14); color:#fecaca; border-color:rgba(248,113,113,.5); animation:pulse 1.3s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,.4)}50%{box-shadow:0 0 0 6px rgba(248,113,113,0)}}

/* ---- salida ---- */
.salida-head{display:flex; align-items:center; justify-content:space-between}
.tag{font-family:"JetBrains Mono",monospace; font-size:.68rem; color:var(--txt-mut); border:1px solid var(--line); border-radius:6px; padding:2px 8px}
.tag.ia{color:var(--accent-2); border-color:rgba(46,163,214,.4)}
.tag.borrador{color:var(--warn); border-color:rgba(251,191,36,.35)}
.salida{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:16px; font-size:1rem; line-height:1.7; white-space:pre-wrap; min-height:120px;
}
.salida:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(46,163,214,.15)}
.salida-tools{display:flex; gap:var(--sp2)}
#btn-copiar{flex:1}
.aviso{margin:0; font-size:.78rem; color:var(--txt-mut); display:flex; gap:6px}

/* ---- loader + toast ---- */
.loader{position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(9,12,18,.7); backdrop-filter:blur(3px); z-index:20; color:var(--txt-soft); font-size:.9rem}
.spinner{width:34px; height:34px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  background:var(--card-2); color:var(--txt); border:1px solid var(--accent); border-radius:10px;
  padding:11px 18px; font-size:.88rem; box-shadow:var(--shadow); z-index:30; max-width:90vw; text-align:center;
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}