/* Peptivé — Calculadora de Rendimiento de Vial
   Estilos exclusivos de rendimiento.html. Reutiliza .calc-hero,
   .calc-card, .calc-pills/.calc-pill, .calc-custom-field/-input,
   .calc-result-card, .calc-clinical-grid, .calc-error-notice y
   .calc-content de css/calculadora.css (misma familia visual, misma
   identidad editorial) -- solo se agregan aquí los pocos componentes
   que esa hoja no tiene: selector de péptido, stepper +/- y el número
   hero del resultado. */

body {
  background-color: var(--travertine-light);
}

/* Un solo campo por tarjeta, apilado -- la interacción es secuencial
   (péptido -> presentación -> dosis -> pacientes -> frecuencia), no
   una grilla de comparación como la Calculadora de Reconstitución. */
.rend-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 560px;
  margin-inline: auto;
}

/* ---- Campo 1: selector de péptido (nativo, no chips) ----
   24 péptidos como chips crearían un muro que empuja el resultado
   fuera de la pantalla en mobile; un <select> nativo resuelve en un
   toque con el picker del sistema operativo. */
.rend-select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--ink-30);
  border-radius: var(--r-sm);
  background-color: var(--paper);
  font-family: var(--font-body);
  font-size: max(var(--text-body-m-size), 16px);
  color: var(--ink-100);
  cursor: pointer;
}

.rend-select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-color: var(--ink-100);
}

.rend-select[disabled] {
  color: var(--ink-30);
  cursor: not-allowed;
}

/* .calc-custom-field-label fija display:block (calculadora.css) --
   misma prioridad que [hidden] por defecto, así que sin esto el hint
   "Seleccione un péptido primero" queda visible aunque hidden=true
   (mismo bug documentado ya en portafolio.css / sections.css). */
#rend-presentaciones-hint[hidden] {
  display: none;
}

/* .calc-clinical-grid fija display:grid -- mismo problema que arriba,
   sin esto la grilla de resultados secundarios (aplicaciones/
   pacientes/consumo/remanente) queda visible con datos obsoletos aun
   con hidden=true (ej. justo después de un estado "vial insuficiente"). */
#rend-results-body[hidden],
#rend-post-results[hidden] {
  display: none;
}

/* ---- Campo 4: stepper de pacientes ---- */
.rend-stepper {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.rend-stepper-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--ink-30);
  background-color: var(--paper);
  font-family: var(--font-body);
  font-weight: var(--weight-body-bold);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ink-70);
  cursor: pointer;
  transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}

.rend-stepper-btn:hover {
  border-color: var(--ink-90);
  color: var(--ink-100);
}

.rend-stepper-btn:active {
  background-color: var(--ink-90);
  border-color: var(--ink-90);
  color: var(--paper);
}

.rend-stepper-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.rend-stepper-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.rend-stepper-value {
  min-width: 2.5ch;
  text-align: center;
  font-family: var(--font-editorial);
  font-weight: 400;
  font-variation-settings: 'opsz' 24;
  font-size: var(--text-heading-m-size);
  color: var(--ink-100);
}

/* ---- Resultado: una cifra grande domina la tarjeta ---- */
/* Jerarquía intermedia deliberada: más presencia que un eyebrow
   utilitario (era 10px/uppercase/ink-50), pero claramente subordinado
   al número hero de abajo (que es display-l-size, ~4-5x más grande) --
   nunca compite con el resultado principal, solo deja de sentirse
   como una etiqueta técnica. */
.rend-result-eyebrow {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-variation-settings: 'opsz' 32;
  font-size: var(--text-body-l-size);
  line-height: 1.3;
  color: var(--ink-70);
  text-align: center;
  margin-bottom: var(--s-2);
}

.rend-result-hero {
  font-family: var(--font-editorial);
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
  font-size: var(--text-display-l-size);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink-100);
  text-align: center;
  margin-bottom: var(--s-2);
}

@media (max-width: 640px) {
  .rend-result-hero {
    font-size: var(--text-heading-l-size);
  }
}

.rend-result-sub {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' 24;
  font-size: var(--text-body-l-size);
  color: var(--ink-50);
  text-align: center;
  margin-bottom: var(--s-5);
}

.rend-result-sub[hidden] {
  display: none;
}

.rend-result-placeholder {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' 24;
  font-size: var(--text-body-l-size);
  color: var(--ink-50);
  text-align: center;
}

/* ============================================
   Rendimiento después de aplicaciones reales
   ============================================ */

.rend-post-section {
  padding-bottom: var(--s-6);
}

.rend-post-toggle-wrap {
  max-width: 560px;
  margin: 0 auto var(--s-4);
  text-align: center;
}

.rend-post-panel[hidden] {
  display: none;
}

.rend-post-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 560px;
  margin-inline: auto;
}

#rend-post-active[hidden],
#rend-post-setup[hidden] {
  display: none;
}

.rend-post-start-btn {
  margin-top: var(--s-3);
}

.rend-post-start-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.rend-post-active-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2);
}

.rend-post-active-summary {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-variation-settings: 'opsz' 32;
  font-size: var(--text-body-l-size);
  color: var(--ink-100);
  margin-top: var(--s-1);
}

.rend-post-reset-btn {
  flex-shrink: 0;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm);
  border: 1px solid var(--ink-30);
  background-color: var(--paper);
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: var(--text-label-size);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-50);
  cursor: pointer;
  transition: border-color 200ms ease-out, color 200ms ease-out;
}

.rend-post-reset-btn:hover {
  border-color: var(--color-error);
  color: var(--color-error);
}

.rend-post-reset-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.rend-post-rows {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.rend-post-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--s-2);
  align-items: end;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--travertine-light);
}

@media (max-width: 480px) {
  .rend-post-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "day patient"
      "mg  remove";
  }
  .rend-post-row .rend-post-field--day { grid-area: day; }
  .rend-post-row .rend-post-field--patient { grid-area: patient; }
  .rend-post-row .rend-post-field--mg { grid-area: mg; }
  .rend-post-row .rend-post-row-remove { grid-area: remove; justify-self: end; }
}

.rend-post-field-label {
  display: block;
  margin-bottom: var(--s-1);
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: var(--text-label-size);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-50);
}

.rend-post-input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--s-2);
  border: 1px solid var(--ink-30);
  border-radius: var(--r-sm);
  background-color: var(--paper);
  font-family: var(--font-body);
  font-size: max(var(--text-body-m-size), 16px);
  color: var(--ink-100);
}

.rend-post-input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-color: var(--ink-100);
}

/* Marca visual del campo -- acompaña aria-invalid, nunca lo reemplaza. */
.rend-post-input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.rend-post-input[aria-invalid="true"]:focus-visible {
  outline-color: var(--color-error);
}

.rend-post-row-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--ink-30);
  background-color: var(--paper);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ink-50);
  cursor: pointer;
  transition: border-color 200ms ease-out, color 200ms ease-out;
}

.rend-post-row-remove:hover {
  border-color: var(--color-error);
  color: var(--color-error);
}

.rend-post-row-remove:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.rend-post-add-btn {
  width: 100%;
  padding: var(--s-2);
  border-radius: var(--r-sm);
  border: 1px dashed var(--ink-30);
  background-color: transparent;
  font-family: var(--font-body);
  font-weight: var(--weight-body-medium);
  font-size: var(--text-body-m-size);
  color: var(--ink-70);
  cursor: pointer;
  transition: border-color 200ms ease-out, color 200ms ease-out, background-color 200ms ease-out;
}

.rend-post-add-btn:hover {
  border-color: var(--ink-90);
  color: var(--ink-100);
  background-color: var(--travertine-light);
}

.rend-post-add-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.rend-post-empty-note {
  font-family: var(--font-body);
  font-size: var(--text-body-m-size);
  color: var(--ink-30);
  text-align: center;
  padding: var(--s-3) 0;
}

/* ---- Nota de guardrail: discreta, no un bloque dominante ---- */
.rend-guardrail-section {
  padding-bottom: var(--s-6);
}

.rend-guardrail {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-30);
}