/* DL Tech · Ajustes de pantalla para las subpáginas de las disciplinas (diseño anterior).
   Celular: 640 px o menos. Computador: solo la barra de fases de Riesgo, al final. */
@media (max-width:640px){
  /* Ciberseguridad: la cabecera no cabía y ensanchaba la página. El logo ya enlaza al sitio principal. */
  .header .nav>div>.btn:not(.primary){display:none}
  .header .nav .btn.primary{padding:10px 14px;font-size:13px;white-space:nowrap}
  .header .brand small{display:none}
  .header .brand img{width:36px;height:36px}

  /* Riesgo y Continuidad: cabecera compacta (marca, sin subtítulo, botón de volver en una línea) */
  .grc-header .container{gap:10px;padding-inline:16px!important}
  .grc-header .container>a:first-child .flex-col>span+span{display:none}
  .grc-header .container>a:first-child{min-width:0;gap:8px!important}
  .grc-header .container>a:first-child>div:first-child{flex:none}
  .grc-header .container>a:first-child .flex-col>span:first-child{font-size:14px!important;white-space:nowrap}
  .grc-header a.inline-flex{white-space:nowrap;padding:8px 10px!important;font-size:11px!important;flex:none}

  /* Riesgo, fase 3: filtros de la matriz con área táctil suficiente */
  [id^="tab-"]{min-height:36px;padding-inline:12px}

  /* Pies de página: los enlaces de texto pequeño necesitan área táctil */
  footer a{display:inline-block;padding-block:10px}

  /* Privacidad, demo ARCO+: la barra de sectores pasa al pie de la pantalla y se ajusta al ancho */
  .sector-bar{top:auto!important;bottom:16px;left:12px!important;right:12px!important;transform:none!important;animation:none!important;justify-content:center;padding:8px 10px!important;gap:0!important}
  .sector-bar>div{gap:0!important}
  .sector-bar>div>span{display:none}
  .sector-bar>div>div{gap:8px!important}
  .sector-bar .sector-btn{width:44px;height:44px}
  .rebrand-badge{display:none!important}
  body:has(.sector-bar){padding-bottom:96px}

  /* Privacidad, demo ARCO+: la cabecera baja los botones a una segunda fila */
  .arco-header{padding:12px 0!important}
  .arco-header>div{flex-wrap:wrap;gap:10px}
  .arco-header nav{width:100%;gap:8px!important}
  .arco-header nav button{flex:1;padding:10px 8px!important;letter-spacing:.06em!important}
}

/* Pantallas muy angostas (iPhone SE y similares): el botón de volver queda solo con su flecha */
@media (max-width:380px){
  .grc-header a.inline-flex{font-size:0!important;gap:0!important;padding:9px!important}
  .grc-header a.inline-flex svg,.grc-header a.inline-flex i{width:16px;height:16px}
  .grc-header .container>a:first-child .flex-col{min-width:0;overflow:hidden}
}

/* Computador, Riesgo: las 8 fases no caben en una línea y ensanchaban la página.
   La barra ocupa el espacio libre y pasa a dos líneas centradas cuando hace falta. */
@media (min-width:1024px){
  .grc-header .container{gap:24px}
  .grc-header .container>a:first-child,.grc-header .container>div:last-child{flex:none}
  .grc-header nav.lg\:flex{flex:1 1 auto;min-width:0;flex-wrap:wrap;justify-content:center;gap:2px 16px!important;font-size:11px;line-height:1.5}
  .grc-header nav.lg\:flex a{white-space:nowrap}
}

/* Computador, demo ARCO+: la barra de sectores flotaba sobre los botones de la cabecera; pasa al pie de la pantalla */
@media (min-width:641px){
  .sector-bar{top:auto!important;bottom:24px;left:auto!important;right:24px!important;transform:none!important}
  .rebrand-badge{left:24px!important;bottom:24px!important;transform:none!important;--tw-translate-x:0!important}
  body:has(.sector-bar){padding-bottom:112px}
}
@media (min-width:641px) and (max-width:1020px){
  .rebrand-badge{display:none!important}
}