/* ==========================================================
   SoftBOX · cabecera única de la web
   La misma barra, con el mismo contenido y en el mismo lugar, en la página principal,
   el registro, la confirmación y el ingreso a la consulta. Como es idéntica en todas,
   al cambiar de página se queda quieta: solo se funde el contenido de abajo.
   Solo lleva el logo, el sol/luna, Ingresar y Prueba gratis.
   Todo va dentro de .cabecera para no chocar con las hojas de cada página.
   ========================================================== */

.cabecera {
  --cab-alto: 60px;
  --cab-margen: clamp(20px, 4vw, 40px);
  view-transition-name: cabecera;
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--cab-alto);
  background: var(--chassis); color: var(--on-chassis);
  font-family: var(--font);
}
.cabecera__fila { display: flex; align-items: center; gap: 28px; height: 100%; width: min(100% - var(--cab-margen) * 2, 1200px); margin-inline: auto; }

.cabecera__logo { view-transition-name: cab-logo; display: inline-flex; align-items: center; line-height: 0; text-decoration: none; user-select: none; }
.cabecera__logo img { display: block; height: 24px; width: auto; }

.cabecera .tema-boton { view-transition-name: cab-tema; }
.cabecera__acciones { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.cabecera__ingresar { color: #a3a3a3; text-decoration: none; font: 600 13px var(--font); transition: color .3s; }
.cabecera__ingresar:hover { color: #ededed; }
.cabecera__prueba {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 128px; height: 34px; padding: 0 16px; border-radius: var(--r-btn, 9px);
  background-color: var(--amber); color: var(--on-amber);
  font: 700 13px/1 var(--font); text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 1px rgba(0,0,0,.08), 1px 2px 6px rgba(0,0,0,.08);
  transition: transform .32s var(--ease-out), box-shadow .32s var(--ease-out), background-color .24s var(--ease-out);
}
.cabecera__prueba:hover { transform: translateY(-1px); background-color: var(--amber-hover); box-shadow: 0 1px 1px rgba(0,0,0,.06), 2px 6px 16px rgba(0,0,0,.12); }
.cabecera__prueba:active { transform: scale(.97); background-color: var(--amber-press); transition-duration: .12s; }

/* Selector de idioma: compacto, gris sobre el chasis como "Ingresar". */
.cabecera__idioma { position: relative; display: inline-flex; align-items: center; height: 34px; padding: 0 8px; border-radius: var(--r-md); color: #a3a3a3; cursor: pointer; transition: background-color .3s, color .3s; }
.cabecera__idioma:hover { background: #1c1c1c; color: #ededed; }
.cabecera__idioma svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.cabecera__idioma select {
  appearance: none; -webkit-appearance: none; border: 0; outline: none; cursor: pointer;
  field-sizing: content;   /* mide lo que el idioma elegido, no lo que la opción más larga */
  height: 100%; padding: 0 16px 0 7px; background: transparent; color: inherit; font: 600 13px var(--font);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; background-size: 11px;
}
.cabecera__idioma select option { background: #1c1c1c; color: #ededed; }
@media (max-width: 640px) {
  .cabecera__idioma { padding: 0 4px; }
  .cabecera__idioma svg { display: none; }
  .cabecera__idioma select { width: 74px; padding-left: 2px; font-size: 12.5px; }
}

@media (max-width: 640px) {
  .cabecera__fila { gap: 14px; }
  .cabecera__acciones { gap: 10px; }
  .cabecera__prueba { min-width: 0; padding: 0 12px; }
}
/* El logo nunca se achata: si falta lugar se achican los espacios y los botones, no la marca. */
.cabecera__logo { flex: none; }
@media (max-width: 400px) {
  .cabecera { --cab-margen: 16px; }
  .cabecera__fila { gap: 10px; }
  .cabecera__logo img { height: 20px; }
  .cabecera__acciones { gap: 8px; }
  .cabecera__ingresar { font-size: 12.5px; }
  .cabecera__prueba { height: 32px; padding: 0 10px; font-size: 12.5px; }
  .cabecera__util { gap: 0; }
  .cabecera .tema-boton { width: 32px; height: 32px; }
  .idioma__boton { padding: 0 6px; }
}

/* Al cambiar de página la cabecera tiene su propia capa en la transición: si es la misma en las
   dos páginas se ve quieta; si cambia (al entrar al sistema de consulta, que tiene su barra),
   se transforma en su lugar en vez de saltar. */

/* ---------- Selector de idioma con el estilo de la página (15/10) ----------
   Pegado a la derecha del todo; botón propio + lista como el selector de báscula de la consulta.
   El <select> queda oculto (es el dato que usa idiomas.js). */
.cabecera__idioma { order: 10; }
.cabecera__idioma.idioma--armado { padding: 0; cursor: default; }
.cabecera__idioma.idioma--armado:hover { background: none; }
.cabecera__idioma.idioma--armado > svg { position: absolute; left: 10px; top: 50%; margin-top: -7.5px; transition: color .3s; }
.cabecera__idioma.idioma--armado select { display: none; }
.idioma__boton {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 31px; border: 0; border-radius: var(--r-md);
  background: transparent; color: #a3a3a3; font: 600 13px var(--font); cursor: pointer; transition: background-color .3s, color .3s;
}
.idioma__boton:hover, .idioma__boton[aria-expanded="true"] { background: #1c1c1c; color: #ededed; }
.cabecera__idioma.idioma--armado:hover > svg { color: #ededed; }
.idioma__flecha { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.idioma__boton[aria-expanded="true"] .idioma__flecha { transform: rotate(180deg); }
.idioma__lista {
  position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; min-width: 180px;
  display: grid; gap: 2px; padding: 6px; border-radius: 14px; background: var(--surface, #fff); color: var(--ink, #141414);
  box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 16px 44px rgba(0,0,0,.26);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px) scale(.96); transform-origin: top right;
  transition: opacity .2s cubic-bezier(.4,0,1,1), transform .2s cubic-bezier(.4,0,1,1), visibility 0s linear .2s;
}
.idioma__lista.abierta { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .24s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1), visibility 0s; }
.idioma__lista button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px;
  background: transparent; color: inherit; font: 600 14px var(--font); text-align: left; cursor: pointer; outline: none;
}
.idioma__lista button::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: transparent; transition: background-color .2s; }
.idioma__lista button:hover, .idioma__lista button:focus-visible { background: var(--surface-2, #f6f6f6); }
.idioma__lista button[aria-selected="true"] { font-weight: 800; }
.idioma__lista button[aria-selected="true"]::before { background: var(--amber, #ffb000); }
@media (max-width: 640px) {
  .cabecera__idioma.idioma--armado > svg { display: none; }
  .idioma__boton { padding: 0 8px; font-size: 12.5px; }
  .idioma__boton .idioma__actual { font-size: 0; }
  .idioma__boton .idioma__actual::after { content: attr(data-corto); font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .idioma__lista, .idioma__lista.abierta, .idioma__flecha { transition: none; } }

/* ---------- Idioma y tema pegados al borde derecho de la ventana (20/10) ----------
   Ingresar y Prueba gratis quedan alineados con el contenido de la página; el idioma y el
   sol/luna van aparte, casi contra el borde. La fila deja lugar a la derecha para que no se pisen. */
.cabecera__util { display: flex; align-items: center; gap: 4px; }
@media (min-width: 761px) {
  .cabecera { --util-reserva: 230px; }
  .cabecera__fila { width: auto; margin-left: max(var(--cab-margen), (100% - 1200px) / 2); margin-right: max(var(--util-reserva), (100% - 1200px) / 2); }
  .cabecera__util { position: absolute; top: 0; right: 14px; height: 100%; }
}

/* Nombres para el cambio de página: cada pieza se anima por separado (softbox-tema.css). */
.cabecera__acciones { view-transition-name: cab-acciones; }
.cabecera__idioma { view-transition-name: cab-idioma; }