:root{--bg:#f7f7fb;--card:#fff;--border:#dcdde4;--accent:#3b82f6;--okbg:#ecfdf5;--okbd:#a7f3d0;--oktx:#065f46}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);margin:0;padding:2rem;color:#222}
.card{max-width:740px;margin:0 auto;background:var(--card);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:1.25rem 1.5rem}
h1{margin:0 0 1rem;font-size:1.35rem}
.form-grid{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.35rem}
input,select,button{width:100%;padding:.7rem .8rem;border:1px solid var(--border);border-radius:10px;font-size:1rem;background:#fff}
button{background:var(--accent);color:#fff;border:none;font-weight:600;cursor:pointer}
button:hover{filter:brightness(1.05)}
.col-2{grid-column:span 2}
.err{color:#b91c1c;font-size:.85rem;margin-top:.25rem}
.msg{padding:1rem;border-radius:10px;background:var(--okbg);border:1px solid var(--okbd);color:var(--oktx);margin-top:1rem}
.actions{margin-top:.25rem}
@media (max-width: 680px){
  .form-grid{grid-template-columns:1fr}
  .col-2{grid-column:span 1}
}
.result-card{
  margin-top:1rem;padding:1.1rem 1.2rem;border-radius:14px;
  background:linear-gradient(180deg,#f8fbff, #f3f7ff);
  border:1px solid #dbe7ff; box-shadow:0 10px 24px rgba(30,64,175,.08), inset 0 1px 0 #fff;
  animation:pop .25s ease-out;
}
@keyframes pop{from{transform:scale(.98);opacity:.7} to{transform:scale(1);opacity:1}}

.dose-value{
  font-size:2.6rem; font-weight:800; letter-spacing:-.02em; color:#0f172a; line-height:1;
}
.dose-value span{font-size:1rem;font-weight:700;color:#475569;margin-left:.35rem}

.dose-meta{margin-top:.6rem;display:flex;gap:.5rem;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.35rem .6rem;border-radius:999px;border:1px solid #c7d2fe;
  background:#eef2ff;color:#3730a3;font-weight:600;font-size:.9rem;
}
.chip.interval::before{content:"⏱️"}
.chip.doses::before{content:"🗓️"}
.chip.drug::before{content:"💊"}

.dose-sub{margin-top:.6rem;color:#475569;font-size:.95rem}
.result-actions{margin-top:.6rem}
.btn-ghost{
  background:#fff;border:1px solid #cbd5e1;border-radius:10px;
  padding:.55rem .8rem;font-weight:600;cursor:pointer
}
.btn-ghost:hover{background:#f8fafc}



/* Centrar contenido del resultado */
.result-card{
  text-align:center;            /* centra el texto por defecto */
}

.dose-value{
  margin: .2rem auto 0;         /* centra el bloque */
  display:inline-flex;          /* para alinear el número y "ml" */
  align-items:baseline;
  gap:.35rem;
}

.dose-meta{
  margin-top:.6rem;
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:center;       /* centra las chips */
}

.dose-sub{
  text-align:center;            /* centra el texto auxiliar */
}

/* Si dejaste acciones/botones debajo, céntralos también */
.result-actions{
  display:flex;
  justify-content:center;
}

.card h1{
  text-align: center;
  margin: 0 auto 1.75rem;
}



.site-footer{margin:24px auto 8px;text-align:center;color:#64748b;font-size:.9rem}
.site-footer a{color:#2563eb;text-decoration:none}
.site-footer a:hover{text-decoration:underline}

.modal{position:fixed;inset:0;display:none;background:rgba(0,0,0,.45);padding:20px;z-index:1000}
.modal.show{display:block}
.modal-content{position:relative;max-width:880px;margin:0 auto;background:#fff;border-radius:16px;
  padding:24px 28px;box-shadow:0 10px 30px rgba(0,0,0,.2);max-height:85vh;overflow:auto}
.modal-close{border:0;background:transparent;font-size:28px;position:absolute;right:18px;top:12px;cursor:pointer}
.modal h2{margin-bottom:.25rem}
.modal h3{margin:1rem 0 .25rem}
.modal p,.modal li{line-height:1.6}
.modal .muted{color:#94a3b8;font-size:.9rem}