/* Cabecera de página (<page-header>, TagHelpers/PageHeaderTagHelper.cs):
   barra fija arriba con botón de menú/atrás, título/subtítulo y acciones
   (selector de registros por página, exportar, alta...), y su versión para
   los listados abiertos como pestaña, <barra-resultados>. Los botones
   (<boton-exportar>/<boton-alta>, TagHelpers/BotonCabeceraTagHelpers.cs) van
   juntos en .grupo-botones. */

.dashboard-greeting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
    /* Nunca debe generar su propia barra de scroll -ni forzar la de la
       página-, igual que las tablas van siempre en .table-responsive:
       basta con que sus hijos puedan encoger (min-width:0) y con
       flex-wrap para que quepa todo sin desbordar. */
    overflow-x: hidden;
}

.dashboard-greeting .f-row {
    justify-content: flex-start;
}

/* flex-shrink:0 para que junto al título sea este quien ceda, pero con tope
   del ancho de la cabecera y partiéndose en líneas: sin eso, cuando las
   acciones ya bajan a su propia línea (pantallas estrechas) la fila
   selector + exportar + alta no podía ni encoger ni partirse y se salía.
   Siempre a la derecha: margin-left:auto cuando baja solo a su línea (si no,
   space-between de la cabecera lo deja a la izquierda) y flex-end para las
   líneas en que se parte. */
.dashboard-greeting-actions,
.cabecera-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    max-width: 100%;
    margin-left: auto;
}

/* Botones de la cabecera (exportar, alta...) agrupados aparte del selector de
   registros por página: al partirse la fila bajan juntos, en vez de que el
   último ("Alta X") se quede solo en otra línea. */
.grupo-botones {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
}

.dashboard-greeting-actions form,
.cabecera-acciones form {
    margin: 0;
}

/* <barra-resultados>: "Se han encontrado N ..." a la izquierda y
   .cabecera-acciones a la derecha (mismas reglas que la cabecera). Sustituye
   al antiguo "panel panel-body d-flex justify-content-between
   align-items-center mb-3 py-2", que tampoco se partía en pantallas
   estrechas. */
.barra-resultados {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.dashboard-greeting-info {
    min-width: 0;
}

.dashboard-greeting-eyebrow {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-secondary-color);
}

.dashboard-greeting-title {
    margin: .15rem 0 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.dashboard-greeting-sub {
    margin: .2rem 0 0;
    font-size: .9rem;
}

.dashboard-greeting-sub .badge {
    margin-left: 2rem;
    vertical-align: middle;
}

/* Botón izquierdo del header: hamburguesa (abre/fija el sidebar) o
   flecha atrás, según tenga la vista BackUrl o no. Sin borde ni fondo
   propios -se funde con la barra-; en hover solo cambia el color del
   icono, sin relleno de color. La sombra hacia abajo va en la barra
   entera (.dashboard-greeting), no en el botón. */
.page-header-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    font-size: 2rem;
    color: var(--bs-body-color);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    /* Las tres juntas: antes esto vivía en layout.css, que carga antes que
       buttons.css, y el `transition` de .btn (transform, box-shadow) pisaba
       este y el cambio de color nunca se animaba. */
    transition: color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.page-header-nav-btn:hover,
.page-header-nav-btn:focus-visible {
    color: var(--brand-700);
}