/* ============================================================
   header.css — Formulario 3 — Rediseño completo
   ============================================================ */

/* ── Franja superior: título + fecha compacta ── */
.top-strip {
  background: var(--c-navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  gap: 16px;
}

.top-strip__title {
  font-family: var(--ff-title);
  font-size: 20px;
  letter-spacing: 0.1em;
  color: #ffffff;
  white-space: nowrap;
}

.top-strip__fecha {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.top-strip__fecha .fecha-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-blue-light);
}
.top-strip__fecha input[type="date"] {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  outline: none;
  color-scheme: dark;
}

/* ── Patient header: logo a la izquierda + campos ── */
.patient-header {
  background: var(--c-blue-pale);
  border-bottom: 3px solid var(--c-navy);
  display: grid;
  grid-template-columns: 250px 1fr; /* 👈 más espacio al logo */
  align-items: stretch;
}

.logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-right: 2px solid var(--c-blue-soft);
  background: #fff;
}
.logo-box img {
  width: 100%;
  max-width: 250px; /* 👈 antes 120px, ahora más protagonista */
  height: auto;
  object-fit: contain;
}

.patient-fields {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prow { display: grid; gap: 0 16px; align-items: end; }
.prow-1 { grid-template-columns: 2.5fr 1fr 0.7fr 1fr 1.3fr; }
.prow-2 { grid-template-columns: 2fr 1fr 1fr 1.5fr; }

.fg { display: flex; flex-direction: column; gap: 2px; }

.fg__label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-navy-mid);
}

.fg__input {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--c-border-mid);
  padding: 2px 0 3px;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-navy);
  outline: none;
  width: 100%;
  transition: border-color 0.15s;
}
.fg__input:focus        { border-bottom-color: var(--c-navy-mid); }
.fg__input::placeholder { color: var(--c-placeholder); font-weight: 400; }
.fg__input[readonly]    { color: var(--c-subtle); }

.fg__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px var(--c-blue-pale) inset !important;
  -webkit-text-fill-color: var(--c-navy) !important;
}