/* ============================================================
   header.css — Franja superior y datos del paciente
   ============================================================ */

/* ── Top strip ──────────────────────────────────────────── */
.top-strip {
  background: var(--c-title-strip);
  border-bottom: 2px solid var(--c-border-dark);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.top-strip__title {
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text);
}

.top-strip__date {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--c-sublabel);
}

.date-box {
  display: flex;
  align-items: center;
  gap: 2px;
}

.date-mini {
  width: 34px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid var(--c-border);
  border-radius: 2px;
  padding: 2px 4px;
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: var(--c-text);
  outline: none;
  transition: border-color 0.15s;
}
.date-mini:focus          { border-color: var(--c-accent); }
.date-mini::placeholder   { color: var(--c-placeholder); font-size: 10px; }
.date-mini.year           { width: 44px; }

/* ── Patient header grid ────────────────────────────────── */
.patient-header {
  background: var(--c-header-bg);
  border-bottom: 2px solid var(--c-border-dark);
  padding: 14px 18px 12px;
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 14px;
  align-items: start;
}

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

/* Filas de campos */
.prow                      { display: grid; gap: 0 18px; }
.prow-1                    { grid-template-columns: 2fr 1.4fr 1.6fr; }
.prow-2                    { grid-template-columns: 0.7fr 1.3fr 2fr; }
.prow-3                    { grid-template-columns: 1.5fr 2fr; }

/* Field group: label + input con línea inferior */
.fg {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fg__label {
  font-family: var(--ff-display);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-sublabel);
  line-height: 1;
}

.fg__input {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--c-border-dark);
  padding: 3px 0;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--c-text);
  outline: none;
  width: 100%;
  transition: border-color 0.15s;
  line-height: 1.3;
}
.fg__input:focus          { border-bottom-color: var(--c-accent); }
.fg__input::placeholder   { color: var(--c-placeholder); font-size: 11px; }

/* Trio de fecha DÍA / MES / AÑO */
.date-trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: 3px;
}
.date-trio .fg__input {
  text-align: center;
  font-size: 11px;
}

/* ── Logo box ───────────────────────────────────────────── */
.logo-box {
  width: 200px;
  height: 160px;
}
.logo-box:hover            { border-color: var(--c-accent); background: rgba(26, 95, 138, 0.07); }

.logo-box__icon            { opacity: 0.45; margin-bottom: 5px; }

.logo-box__text {
  font-family: var(--ff-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-sublabel);
}

.logo-box input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.logo-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
}

.fg__input:-webkit-autofill,
.fg__input:-webkit-autofill:hover,
.fg__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--c-header-bg) inset !important;
  -webkit-text-fill-color: var(--c-text) !important;
  transition: background-color 5000s ease-in-out 0s;
}