/* ================================
   CLUB YUTEÑA: Botones en columna en mobile (solo región marcada)
   ================================ */
@media (max-width: 768px){

  /* contenedor de botones dentro de la región marcada */
  .cy-btn-stack .t-Region-buttons,
  .cy-btn-stack .t-ButtonRegion,
  .cy-btn-stack .t-ButtonRegion-col,
  .cy-btn-stack .t-Form-buttons{
    display:flex;
    flex-direction:column;
    gap:16px;                 /* antes 12px */
    padding-top:10px;         /* separa del campo de arriba */
  }

  /* botones */
  .cy-btn-stack .t-Button{
    width:100%;
    margin:0 !important;
    min-height:48px;          /* más “tap-friendly” */
  }

  /* PLAN B: si APEX los deja en contenedores distintos,
     al menos separa botones consecutivos */
  .cy-btn-stack .t-Button + .t-Button{
    margin-top:14px !important;
  }

  /* no tocar el close de alertas */
  .t-Alert .t-Button--close{
    width:auto !important;
    min-height:auto !important;
    padding:6px 8px !important;
  }
}


/* ================================
   HEADER App Pro (sin Font Awesome)
   ================================ */

/* 1) Asegurar que el header azul ocupe todo el ancho */
.t-Header,
.t-Header-branding,
.t-Header-branding .t-Header-navBar{
  width: 100%;
}

/* 2) MOBILE: compactar branding y dar espacio a acciones */
@media (max-width: 768px){

  /* Altura tipo app */
  .t-Header{
    height: 56px;
  }

  /* Grid más compacto y sin “cortes” */
  .t-Header-branding{
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr auto; /* controls | logo | navbar */
    column-gap: 10px;
    padding: 0 10px;
  }

  /* Logo y texto: que no se coma todo */
  .t-Header-logo{
    min-width: 0; /* clave para que el ellipsis funcione */
  }

  .t-Header-logo .apex-logo-text{
    display: block;
    max-width: 140px;          /* ajustá a gusto */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .6px;
  }

  /* 3) Botones de la navbar: estilo pill + tap friendly */
  .t-Header-navBar .t-Button{
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 14px;
  }

  /* 4) Íconos del header más grandes (iconos del tema APEX) */
  .t-Header-navBar .t-Button .t-Icon,
  .t-Header-navBar .t-Button span[aria-hidden="true"]{
    font-size: 22px;
    line-height: 1;
  }

  /* 5) Badge/contador más “app” */
  .t-Header-navBar .t-Button .t-Button-badge,
  .t-Header-navBar .t-Badge{
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 999px;
    transform: translate(6px,-6px);
  }

  /* 6) FIX: no tocar el botón cerrar de alertas */
  .t-Alert .t-Button--close{
    width: auto !important;
    min-height: auto !important;
    padding: 6px 8px !important;
  }
}

/* ================================
   HEADER mobile: solo logo (estilo app)
   ================================ */
@media (max-width: 768px){

  /* Ocultar texto del logo */
  .t-Header-logo .apex-logo-text{
    display: none;
  }

  /* Aumentar tamaño del logo */
  .t-Header-logo img{
    height: 36px;       /* default suele ser ~28px */
    width: auto;
  }

  /* Centrar mejor el logo en el header */
  .t-Header-logo{
    display: flex;
    align-items: center;
  }

  /* Dar un poco más de aire al header */
  .t-Header{
    height: 56px;
  }
}