/* Constante · cabecera de las pantallas de la web (Mi caja, la calculadora, «Tu cuenta», el acceso, el panel, las páginas
   legales y la 404). La portada tiene la suya, en css/portada.css. Va después de fuentes.css y tema.css (de donde salen las
   letras, los colores y el botón «Modo oscuro») y, en las páginas que la cargan, después de constante.css. La calculadora no
   carga constante.css: por eso aquí está todo lo que la cabecera necesita, también sus estados.
   Una sola fila en el ordenador, como la barra de la portada: las pestañas junto a la marca y, a la derecha, el botón
   «Modo oscuro» y el menú de usuario. Si falta sitio, se acorta el nombre (puntos suspensivos): la fila nunca se parte. */
:where(.top *){margin:0}
.top{position:relative;display:flex;align-items:center;gap:12px 16px;padding:26px 0;line-height:1.6}
.brand{display:inline-flex;align-items:center;gap:9px;flex:none;font-family:var(--f-titulo);font-weight:800;font-size:23px;letter-spacing:-.02em;color:var(--tinta);text-decoration:none}
.brand svg{width:26px;height:20px;flex:none}   /* el logo de la portada (css/portada.css), con sus mismos tamaños */
.brand .dot{color:var(--verde)}
.tabs{display:flex;gap:2px}
.tab{background:none;border:none;font-family:var(--f-texto);font-size:14.5px;font-weight:600;color:var(--tinta-2);padding:8px 10px;border-radius:var(--r-sm,8px);cursor:pointer;text-decoration:none;transition:background-color .2s,color .2s,transform .15s;-webkit-tap-highlight-color:transparent}
.tab.activa{color:var(--tinta);background:var(--papel-2)}
/* El nombre de una pestaña nunca se parte en dos líneas (antes de eso se acorta el nombre del usuario). Las pestañas que son
   enlaces (la calculadora, «Tu cuenta») miden y se alinean como las de Mi caja, que son botones. */
.tab{white-space:nowrap}
.tabs > a.tab{line-height:normal;text-align:center}
:where(.top) a:focus-visible{border-radius:4px}
/* Lado derecho: el botón «Modo oscuro» y el menú de usuario (lo pintan ui.js, calculadora.js, cuenta.js y panel.js) o la navegación */
.cab-acciones{margin-left:auto;display:flex;align-items:center;gap:4px;min-width:0}
.cab-acciones > .tema{flex:none;white-space:nowrap}   /* «Modo oscuro» nunca se parte en dos líneas: si falta sitio, se acorta el nombre */
.menu-usuario{display:flex;align-items:center;gap:4px;min-width:0}
.menu-usuario .usuario{font-size:14px;font-weight:600;color:var(--tinta-2);min-width:0;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-usuario > *{flex:none}
.menu-usuario > .usuario{flex:0 1 auto}
.menu-usuario .btn.mini{text-decoration:none;white-space:nowrap}
/* Mi caja y la calculadora tienen tres pestañas (.cab-mi-caja): entre 761 y 879 px el botón del modo se queda en icono, y
   hasta 760 px las pestañas bajan a una segunda fila, como en el móvil */
@media (max-width:879px){ .cab-mi-caja .tema .tema-txt{display:none} .cab-mi-caja .tema{padding:8px} }
@media (max-width:760px){ .cab-mi-caja{flex-wrap:wrap} .cab-mi-caja > .tabs{order:2;flex:1 1 100%} }
/* Móvil: dos filas como mucho. Arriba, la marca y, a la derecha, el modo, tu cuenta (con un icono en lugar del nombre) y
   «Cerrar sesión»; debajo, las pestañas. Cabe desde 320 px, como la barra de la portada. */
@media (max-width:620px){
  .top{flex-wrap:wrap;gap:6px 8px;padding:14px 0 16px}
  .top > .tabs{order:2;flex:1 1 100%}
  .brand{font-size:20px;gap:7px}
  .brand svg{width:22px;height:17px}
  .cab-acciones,.menu-usuario{gap:2px}
  .menu-usuario .usuario{flex:none;width:35px;height:35px;padding:0;border-radius:999px;font-size:0;display:inline-flex;align-items:center;justify-content:center}
  .menu-usuario .usuario::before{content:"";width:17px;height:17px;background:currentColor;-webkit-mask:var(--icono-cuenta) center / contain no-repeat;mask:var(--icono-cuenta) center / contain no-repeat}
  .menu-usuario .btn.mini{padding:9px 14px}
}
@media (max-width:374px){
  .top{margin-inline:-6px}            /* la cabecera gana 6 px por lado: el margen de la página queda en 12 px, como en la portada */
  .brand{font-size:18px}
  .brand svg{width:20px;height:15px}
  .top .tab{padding:8px 7px}
  .menu-usuario .btn.mini{padding:9px 12px}
}
/* Por debajo de 340 px el logo no cabe junto a tu cuenta y «Cerrar sesión»: se oculta y queda el nombre, para no sumar otra fila */
@media (max-width:339px){ .brand svg{display:none} }
/* Icono de «Tu cuenta» en el móvil: el mismo trazo que el del botón «Modo oscuro» */
:root{--icono-cuenta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Ccircle cx='10' cy='8.3' r='2.6'/%3E%3Cpath d='M5.6 15.2c1-1.7 2.6-2.6 4.4-2.6s3.4.9 4.4 2.6' stroke-linecap='round'/%3E%3C/svg%3E")}
/* Estados de las pestañas, como en css/constante.css: al pasar el ratón (solo con ratón), al pulsar y sin movimiento */
@media (hover:hover){ .tab:hover{background:var(--papel-2);color:var(--tinta)} }
.tab:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){ .tab{transform:none!important} }
/* En el PDF (imprimir) no sale */
@media print{ .top{display:none!important} }