/* ═══════════════════════════════════════════════════════════════
   MPH+ · CONSOLA  (capa visual v2 de las herramientas y apps de miembro)

   Se carga DESPUÉS de member.css y de los estilos propios de cada página.
   Solo presentación: no cambia ids, clases, scripts ni lógica clínica.

   Ideas del sistema
   · Lienzo con profundidad: rejilla técnica tenue + luces rojo/ámbar.
   · Encabezado de "consola": ficha, título degradado, línea de pulso viva.
   · Superficies con degradé, borde de luz y sombra (no bloques planos).
   · Campos y botones del mismo alto, alineados, con foco claro.
   · Movimiento que funciona también en móvil (sin hover, sin mouse).
═══════════════════════════════════════════════════════════════ */

body.mx-app {
  /* superficies nuevas: las páginas las usan vía `background: var(--mx-s1|s2)` */
  --mx-s1: linear-gradient(165deg, #20364c 0%, #162a3e 100%);
  --mx-s2: linear-gradient(165deg, #2b4660 0%, #1f364d 100%);
  --mx-card-line: rgba(255, 255, 255, .09);
  --mx-card-sh: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 22px 44px -26px rgba(0, 0, 0, .75);
  --mx-rad: 14px;
  --mx-rad-s: 10px;
  --mx-ctl: 50px;

  background-color: #08121d;
  background-image:
    radial-gradient(1100px 520px at 8% -6%, rgba(204, 41, 54, .16), transparent 70%),
    radial-gradient(900px 600px at 105% 38%, rgba(232, 150, 12, .07), transparent 72%),
    linear-gradient(180deg, #0b1827 0%, #08121d 55%, #070f18 100%);
  background-attachment: scroll;
  position: relative;
  overflow-x: hidden;
}
/* rejilla técnica */
body.mx-app::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 900px; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000 20%, transparent 78%);
}
body.mx-app > main, body.mx-app > .page, body.mx-app .mx-bar, body.mx-app #mph-footer { position: relative; z-index: 1; }
body.mx-app .mx-bar { background: rgba(8, 18, 29, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ── Página ───────────────────────────────────────────────── */
body.mx-app .page { max-width: 880px; padding: 38px clamp(16px, 4vw, 32px) 96px; }
body.mx-app .mx-bar__in { max-width: 880px; padding: 0 clamp(16px, 4vw, 32px); }

/* ── Ficha (plate) ────────────────────────────────────────── */
body.mx-app .mx-plate {
  border: 0; padding: 0; margin: 0 0 18px; gap: 10px 12px; font-size: 12.5px;
}
body.mx-app .mx-plate > .mx-seal { display: none; }
body.mx-app .mx-plate::before {
  content: ''; width: 18px; height: 18px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11.5' fill='%23E8960C'/%3E%3Cpath d='M12 6.2v11.6M6.2 12h11.6' stroke='%230D1B2A' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  order: 0;
}
body.mx-app .mx-plate {
  display: flex; align-items: center;
}
body.mx-app .mx-plate__cat {
  order: 3; flex: 1 0 100%; color: var(--mx-t2); font-weight: 600; letter-spacing: .1em;
}
body.mx-app .mx-plate b {
  margin-left: auto; font-weight: 700; letter-spacing: .12em; color: #fff;
  padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
}

/* ── Título y encabezado ──────────────────────────────────── */
body.mx-app .tool-header { border-bottom: 0; padding-bottom: 0; margin-bottom: 8px; }
body.mx-app .tool-header__title, body.mx-app .tool-title {
  background: linear-gradient(180deg, #fff 55%, #cdd8e3 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  font-size: clamp(36px, 7vw, 68px); letter-spacing: .004em; margin-bottom: 14px;
}
body.mx-app .tool-header__sub, body.mx-app .tool-desc { font-size: clamp(16px, 2.2vw, 18px); color: #c3cfdb; max-width: 60ch; }

/* Línea de pulso viva (insertada por member-ui.js) */
.mx-pulse { position: relative; display: block; height: 44px; margin: 6px 0 30px; overflow: hidden; }
.mx-pulse svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.mx-pulse .mx-pulse__base { fill: none; stroke: rgba(232, 150, 12, .22); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.mx-pulse .mx-pulse__live {
  fill: none; stroke: #E8960C; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 160 1400; stroke-dashoffset: 160;
  filter: drop-shadow(0 0 5px rgba(232, 150, 12, .75));
  animation: mx-beat 3.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes mx-beat { 0% { stroke-dashoffset: 160; } 100% { stroke-dashoffset: -1400; } }
.mx-pulse::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none;
  background: linear-gradient(90deg, #0b1827 0%, transparent 10%, transparent 82%, #0b1827 100%); opacity: .0; }

/* ── Superficies (tarjetas, resultados, tablas) ───────────── */
body.mx-app [class*="card"], body.mx-app .card, body.mx-app [class*="result-"], body.mx-app [class*="-placeholder"], body.mx-app .placeholder,
body.mx-app .dose-table, body.mx-app .breakdown, body.mx-app .checkbox-group, body.mx-app .device-table-wrap, body.mx-app .tbsa-counter,
body.mx-app .subtool-tabs, body.mx-app .collapsible, body.mx-app .moans-item, body.mx-app .log-row, body.mx-app .history-row, body.mx-app .history-item,
body.mx-app .drug-entry, body.mx-app .device-row, body.mx-app .step-item {
  border-radius: var(--mx-rad);
}
body.mx-app .timer-card, body.mx-app .section-card, body.mx-app .factor-card, body.mx-app .card, body.mx-app .result-box,
body.mx-app .result-panel, body.mx-app .result-card, body.mx-app .drug-entry, body.mx-app .drug-card, body.mx-app .ht-card, body.mx-app .step-card,
body.mx-app .burp-card, body.mx-app .comp-card, body.mx-app .device-card, body.mx-app .fraction-card, body.mx-app .resus-card,
body.mx-app .start-card, body.mx-app .status-card, body.mx-app .dose-table, body.mx-app .dose-placeholder, body.mx-app .placeholder,
body.mx-app .collapsible, body.mx-app .checkbox-group, body.mx-app .breakdown, body.mx-app .device-table-wrap {
  border: 1px solid var(--mx-card-line); box-shadow: var(--mx-card-sh);
}
body.mx-app .dose-placeholder, body.mx-app .placeholder {
  background: rgba(255, 255, 255, .03); border: 1.5px dashed rgba(255, 255, 255, .16); box-shadow: none; color: #9FB0C2;
}
body.mx-app .collapsible__trigger { border-radius: var(--mx-rad); }
body.mx-app .collapsible.is-open .collapsible__trigger { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
body.mx-app .collapsible__body { border-bottom-left-radius: var(--mx-rad); border-bottom-right-radius: var(--mx-rad); }
body.mx-app .note-box, body.mx-app .disclaimer, body.mx-app .error-box {
  border-radius: var(--mx-rad); background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .09);
  border-left: 3px solid var(--mx-gold); box-shadow: none;
}
body.mx-app .error-box { border-left-color: var(--mx-red); background: rgba(204, 41, 54, .08); }

/* tarjetas que aparecen (resultados): entrada suave */
body.mx-app .result-section, body.mx-app #drug-content, body.mx-app .result-box, body.mx-app .result-panel, body.mx-app .result-card {
  animation: mx-pop-in .6s var(--mx-ease) both;
}
@keyframes mx-pop-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* Bloques de formulario → paneles de vidrio */
body.mx-app .form-section {
  background: linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid var(--mx-card-line); border-radius: var(--mx-rad);
  padding: clamp(18px, 3vw, 26px); margin-bottom: 16px; box-shadow: var(--mx-card-sh);
}
body.mx-app .form-section .section-label { margin-bottom: 14px; }

/* ── Controles: alto único, alineados ─────────────────────── */
body.mx-app input[type="number"], body.mx-app input[type="text"], body.mx-app input[type="search"], body.mx-app select,
body.mx-app .field input, body.mx-app .field__input, body.mx-app .field__select, body.mx-app .condition-select, body.mx-app .spo2-input, body.mx-app .victim-id-input {
  min-height: var(--mx-ctl); border-radius: var(--mx-rad-s); font-size: 1.1rem; color: #fff;
  background: linear-gradient(180deg, #14263a, #1a3047);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35) inset;
  transition: border-color .2s, box-shadow .2s;
}
body.mx-app input:focus, body.mx-app select:focus, body.mx-app .field input:focus, body.mx-app .field__input:focus {
  border-color: var(--mx-amber); box-shadow: 0 0 0 3px rgba(232, 150, 12, .22), 0 2px 6px rgba(0, 0, 0, .35) inset; outline: none;
}
/* Campo con unidad: la unidad queda DENTRO de la caja, a la derecha */
body.mx-app .field:has(> .field-unit) { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: stretch; }
body.mx-app .field:has(> .field-unit) > label { grid-row: 1; }
body.mx-app .field:has(> .field-unit) > input { grid-row: 2; grid-column: 1; padding-right: 52px; width: 130px; }
body.mx-app .field:has(> .field-unit) > .field-unit {
  grid-row: 2; grid-column: 1; justify-self: end; align-self: center; margin-right: 14px; pointer-events: none;
  font-family: var(--mx-d); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; color: #9FB0C2;
}
/* filas campo + botón: SIEMPRE alineadas al pie del campo */
body.mx-app .weight-row, body.mx-app .input-row, body.mx-app .calc-row, body.mx-app .field-row { align-items: flex-end; gap: 12px; }
body.mx-app .weight-row > button, body.mx-app .input-row > button, body.mx-app .calc-row > button, body.mx-app .field-row > button,
body.mx-app .weight-row > .btn-calc { min-height: var(--mx-ctl); align-self: flex-end; }

/* Chips de edad (dosis pediátricas): bloque propio a ancho completo */
body.mx-app .weight-row > div:has(> .age-chips) { flex: 1 1 100%; order: 3; }
body.mx-app .age-chip { display: inline-flex; align-items: center; padding: 6px 15px; font-size: .86rem; min-height: 40px; }
body.mx-app .age-chips { gap: 8px; }

/* Botones */
body.mx-app [class*="btn-"], body.mx-app .btn { border-radius: var(--mx-rad-s); min-height: 46px; letter-spacing: .08em; }
body.mx-app .btn-start, body.mx-app .btn-calc, body.mx-app .btn-calculate, body.mx-app .btn-action--primary, body.mx-app .btn-primary {
  background: linear-gradient(180deg, #e0394a 0%, #b91f2c 100%); color: #fff; border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 12px 26px -12px rgba(204, 41, 54, .85);
  transition: transform .22s var(--mx-ease), box-shadow .22s, filter .2s, opacity .2s;
}
body.mx-app .btn-start:hover, body.mx-app .btn-calc:hover, body.mx-app .btn-calculate:hover, body.mx-app .btn-action--primary:hover, body.mx-app .btn-primary:hover {
  transform: translateY(-2px); opacity: 1; filter: brightness(1.08); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 16px 30px -12px rgba(204, 41, 54, .95);
}
body.mx-app .btn-calculate:disabled, body.mx-app .btn-calc:disabled { filter: saturate(.4) brightness(.8); box-shadow: none; transform: none; cursor: not-allowed; }
body.mx-app .btn-stop, body.mx-app .btn-reset, body.mx-app .btn-secondary, body.mx-app .btn-action--secondary, body.mx-app .btn-system {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); color: #E7EDF3;
  transition: transform .22s var(--mx-ease), background .2s, border-color .2s;
}
body.mx-app .btn-stop:hover, body.mx-app .btn-reset:hover, body.mx-app .btn-secondary:hover, body.mx-app .btn-action--secondary:hover, body.mx-app .btn-system:hover {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .34); opacity: 1; transform: translateY(-1px);
}
/* Opciones (chips) — mismo alto táctil */
body.mx-app .btn-opt, body.mx-app .toggle-btn, body.mx-app .age-chip, body.mx-app .area-btn, body.mx-app .tab-btn {
  min-height: 44px; border-radius: var(--mx-rad-s); transition: transform .18s var(--mx-ease), border-color .2s, background .2s, color .2s, box-shadow .2s;
}
body.mx-app .btn-opt:hover, body.mx-app .toggle-btn:hover, body.mx-app .age-chip:hover, body.mx-app .area-btn:hover { transform: translateY(-1px); }
body.mx-app .btn-opt:active, body.mx-app .toggle-btn:active, body.mx-app .btn-start:active, body.mx-app .btn-calc:active, body.mx-app .btn-calculate:active { transform: scale(.97); }
body.mx-app .btn-opt.is-selected, body.mx-app .toggle-btn[class*="is-selected"], body.mx-app .toggle-btn.is-active { box-shadow: 0 0 0 1px currentColor inset, 0 10px 22px -12px currentColor; }

/* Cronómetro grande: más presencia */
body.mx-app .timer-card { padding: clamp(24px, 4vw, 40px) 24px; background-image: radial-gradient(420px 160px at 50% 0%, rgba(204, 41, 54, .16), transparent 70%), var(--mx-s1); }
body.mx-app .timer-display { text-shadow: 0 0 40px rgba(240, 242, 244, .15); font-variant-numeric: tabular-nums; }

/* Textos de ayuda: legibles */
body.mx-app .field-unit, body.mx-app .field__hint, body.mx-app .hint { color: #9FB0C2; }

/* Entrada escalonada al cargar */
body.mx-app .page > * { animation: mx-rise 700ms var(--mx-ease) both; animation-delay: calc(var(--mx-i, 0) * 60ms); }
body.mx-app .page > .mx-plate, body.mx-app .page > .tool-header { animation-delay: 0ms; }
body.mx-app .page > [hidden], body.mx-app .page > .is-hidden { animation: none; }

/* ── Móvil ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body.mx-app { --mx-ctl: 52px; --mx-rad: 12px; }
  body.mx-app .page { padding-top: 24px; padding-bottom: 72px; }
  body.mx-app .timer-display { font-size: clamp(4.2rem, 24vw, 6rem); }
  body.mx-app .weight-row:not(:has(.age-chips)) { flex-wrap: nowrap; }
  body.mx-app .weight-row:has(.age-chips) > .field { flex: 1 1 100%; }
  body.mx-app .weight-row:has(.age-chips) > .field input { width: 100% !important; }
  body.mx-app .weight-row > .field { flex: 0 1 46%; min-width: 0; }
  body.mx-app .weight-row > .field input { width: 100% !important; }
  body.mx-app .weight-row > button { flex: 1 1 auto; padding-left: 14px; padding-right: 14px; }
  body.mx-app .mx-plate b { margin-left: 0; }
}

/* (bloque reduced-motion retirado) */

/* Movimiento: el sitio ya no se apaga con el ajuste «reducir movimiento» del teléfono (muchos Android lo activan con el ahorro de batería y dejaba todo estático). Las animaciones son suaves (fundidos y desplazamientos cortos). */