/* Mika — armazón del rediseño (2026-11-03, brief 2026-11-03-rediseno-interfaz, R1): cabecera, botones y selector de tema con
   el sistema visual de la maqueta del diseñador. Tramo 5a: va tras la marca (5-marca.css) y le gana por orden, y antes
   de «A mi manera» (6-accesibilidad.css), que sigue mandando sobre todo. Los colores salen de los tokens (1-base.css). */

/* Cabecera: blanca y plana, con el logo, el lema y las acciones; en el editor es la misma */
.barra { flex: none; background: var(--blanco); color: var(--tinta); backdrop-filter: none; -webkit-backdrop-filter: none;
         border-bottom: 1px solid var(--linea); box-shadow: none; min-height: 68px; padding: .6rem clamp(1rem, 4vw, 3rem); }
.barra__lema { font-size: .8rem; color: var(--tinta-suave); border-left: 1px solid var(--linea); padding-left: 1rem; white-space: nowrap; }
.barra__nav { display: flex; gap: .25rem; margin-left: 1rem; }
.barra__nav button { background: none; border: 0; border-radius: 10px; padding: .5rem .8rem; min-height: 44px; font-size: .9rem;
                     font-weight: 600; color: var(--tinta); }
.barra__nav button:hover { background: var(--suave); color: var(--coral-oscuro); }
.barra .barra__entrar { background: none; border: 0; box-shadow: none; color: var(--tinta); font-weight: 600; min-height: 44px;
                        padding: .5rem .9rem; text-decoration: none; display: inline-flex; align-items: center; border-radius: 10px; }
.barra .barra__entrar:hover { background: var(--suave); color: var(--coral-oscuro); }
.barra__acciones .boton, .barra__acciones .barra__entrar { min-height: 44px; }

/* Botones: llenos y planos, esquina de 10 px (como los de la maqueta); el degradado de 5-marca.css se apaga */
.boton { background: var(--coral); border-radius: 10px; box-shadow: 0 5px 15px rgba(99, 70, 255, .12);
         display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-align: center; }
.boton::after { display: none; }
.boton:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--coral-oscuro); transform: translateY(-1px); }
.boton--secundario, .barra .boton--secundario { background: var(--blanco); border: 1px solid var(--linea); color: var(--tinta); box-shadow: none; }
.boton--secundario:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--suave); border-color: var(--coral); color: var(--tinta); }
.boton { min-height: 44px; }
.boton--grande { min-height: 48px; }
.barra .marca { min-height: 44px; }

/* Selector de tema: sol en claro, luna en oscuro (lo conecta accesibilidad.js al ajuste «Modo oscuro») */
.boton-accesibilidad { margin-left: 0; }
#boton-tema { margin-left: .5rem; }
#boton-tema .tema__luna, html.acc-oscuro #boton-tema .tema__sol { display: none; }
html.acc-oscuro #boton-tema .tema__luna { display: block; }

@media (max-width: 860px) {
  .barra__nav { display: none; }
  .barra { min-height: 0; }
}
@media (max-width: 600px) { .barra__lema { display: none; } }
@media (max-width: 480px) {
  .barra { padding-inline: .75rem; gap: .5rem; }
  .barra .marca img { height: 26px; }
  .barra__acciones { gap: .25rem; }
  .barra__acciones .boton, .barra .barra__entrar { padding-inline: .7rem; font-size: .85rem; }
  .boton-accesibilidad, #boton-tema { margin-left: 0; width: 44px; height: 44px; }
}

/* Cabecera de la portada y del acceso (la «public-nav» de la maqueta): centrada con ancho máximo, translúcida y pegada arriba;
   a la derecha el menú, accesibilidad, tema, «Iniciar sesión» y «Crear mi página →». Solo con estas vistas visibles (lateral.js). */
body.ver-portada .barra, body.ver-acceso .barra { position: sticky; top: 0; z-index: 50; min-height: 79px;
  padding-inline: max(1rem, calc((100% - 1200px) / 2)); gap: 0; background: color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: box-shadow .25s; }
body.ver-portada .barra.barra--desplazada { box-shadow: 0 8px 35px rgba(35, 22, 63, .06); }
body.ver-portada .barra .marca, body.ver-acceso .barra .marca { order: 1; }
.barra__lema { order: 2; margin-left: 1rem; }
body.ver-portada .barra__centro, body.ver-acceso .barra__centro { order: 3; justify-content: flex-end; }
body.ver-portada .barra__nav { gap: 1.75rem; margin: 0 1.75rem 0 0; }
body.ver-portada .barra__nav button { font-size: .83rem; padding: .5rem 0; border-radius: 0; font-weight: 500; }
body.ver-portada .barra__nav button:hover { background: none; color: var(--primary); }
body.ver-portada #boton-accesibilidad, body.ver-acceso #boton-accesibilidad { order: 4; }
body.ver-portada #boton-tema, body.ver-acceso #boton-tema { order: 5; margin-left: .75rem; }
body.ver-portada .barra__acciones, body.ver-acceso .barra__acciones { order: 6; margin-left: 1.5rem; gap: 1rem; }
body.ver-portada .barra__acciones .boton, body.ver-acceso .barra__acciones .boton { padding: .75rem 1.25rem; font-size: .86rem; font-weight: 650; }
body.ver-portada .barra .barra__entrar, body.ver-acceso .barra .barra__entrar { font-size: .83rem; font-weight: 650; }
body.ver-portada .barra .boton-accesibilidad, body.ver-acceso .barra .boton-accesibilidad { width: 44px; height: 44px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line); color: var(--ink); display: inline-grid; place-items: center; }
@media (max-width: 860px) { body.ver-portada .barra__nav { display: none; } }
@media (max-width: 600px) { body.ver-portada .barra__lema, body.ver-acceso .barra__lema { display: none; } }
@media (max-width: 480px) {
  body.ver-portada .barra .barra__entrar { display: none; }
  body.ver-portada .barra__acciones .boton { padding-inline: .8rem; font-size: .8rem; }
  body.ver-portada .barra__acciones, body.ver-acceso .barra__acciones { margin-left: .25rem; gap: .25rem; }
  body.ver-portada #boton-tema, body.ver-acceso #boton-tema { margin-left: .25rem; }
}
/* En el acceso la cabecera es la de la maqueta: 91 px y sin pegarse arriba */
body.ver-acceso .barra { position: relative; min-height: 91px; }
/* Acceso: cabecera limpia (logo a la izquierda; accesibilidad, tema y acción a la derecha). Sin créditos, planes, lupa ni avatar: una cuenta
   pendiente o que cambia su clave no los usa (salían antes del logo, 2026-11-04). */
body.ver-acceso .barra__cuenta, body.ver-acceso .boton-avatar, body.ver-acceso .boton-buscar, body.ver-acceso .migas { display: none; }
.barra .barra__salir { background: var(--blanco); border: 1px solid var(--linea); color: var(--tinta); box-shadow: none; }
.barra .barra__salir:hover:not(:disabled) { background: var(--suave); border-color: var(--coral); color: var(--tinta); }

/* Celular (2026-11-08): la cabecera de portada y acceso va en UNA fila (logo a la izquierda, acciones a la derecha). El logo
   es el mismo de la app (el de fondo oscuro, sin pastilla blanca); el de 6-accesibilidad.css ya cambia solo con el modo. */
@media (max-width: 860px) {
  body.ver-portada .barra, body.ver-acceso .barra { flex-wrap: nowrap; row-gap: 0; min-height: 72px; }
  body.ver-portada .barra .marca, body.ver-acceso .barra .marca { flex: none; }
  body.ver-portada .barra__centro, body.ver-acceso .barra__centro { flex: 1 1 0; flex-basis: 0; min-width: 0; }
  body.ver-portada .barra__acciones, body.ver-acceso .barra__acciones { flex: 0 1 auto; min-width: 0; margin-left: .5rem; }
}
@media (max-width: 480px) {
  body.ver-portada .barra__acciones .boton, body.ver-acceso .barra__acciones .boton { min-width: 0; padding-inline: .7rem; overflow: hidden; }
  body.ver-portada .barra .boton-accesibilidad, body.ver-acceso .barra .boton-accesibilidad { flex: none; }
}
@media (max-width: 360px) {
  body.ver-portada .barra, body.ver-acceso .barra { padding-inline: .5rem; }
  .barra .marca img { height: 22px; }
  body.ver-portada .barra__acciones .boton, body.ver-acceso .barra__acciones .boton { font-size: .75rem; padding-inline: .5rem; gap: .25rem; }
  body.ver-portada #boton-tema, body.ver-acceso #boton-tema { margin-left: .125rem; }
}

/* Casillas: al menos 24×24 px (WCAG 2.5.8) */
input[type="checkbox"], input[type="radio"] { min-width: 24px; min-height: 24px; }