/* Noria · retoques de la daily del 05/11/2026.
   El diseño base va en atributos style="" (export de Claude Design); por eso
   aquí se usa !important cuando hay que ganar a un estilo en línea. */

/* ── Saltar al contenido ── */
.saltar{position:absolute;left:16px;top:-60px;z-index:50;padding:10px 16px;border-radius:10px;background:#1E2A3E;color:#FFFFFF !important;font-weight:700;transition:top .15s}
.saltar:focus{top:12px}

/* ── Menú hamburguesa (móvil) ── */
.menu-boton{display:none;flex:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid #D9DEE5;border-radius:12px;background:#FFFFFF;color:#1E2A3E;cursor:pointer}
.menu-boton path{transition:transform .2s ease,opacity .2s ease;transform-origin:12px 12px}
.menu-boton[aria-expanded="true"] .l1{transform:translateY(5px) rotate(45deg)}
.menu-boton[aria-expanded="true"] .l2{opacity:0}
.menu-boton[aria-expanded="true"] .l3{transform:translateY(-5px) rotate(-45deg)}

/* La clase menu-compacto la pone main.js por debajo de 821 px y también cuando los enlaces no caben en la
   cabecera (p. ej. con el texto ampliado desde la herramienta de accesibilidad). */
html.menu-compacto header > div{gap:10px !important}
html.menu-compacto .menu-boton{display:inline-flex;order:3}
html.menu-compacto .cta-cabecera{margin-left:auto !important;height:40px !important;padding:0 16px !important;font-size:14px !important}
html.menu-compacto #menu-principal{
  position:absolute;left:0;right:0;top:100%;height:auto !important;overflow:visible !important;
  flex-direction:column;flex-wrap:nowrap !important;gap:0 !important;padding:8px 24px 16px;
  background:#FFFFFF;border-bottom:1px solid #E6E9EE;box-shadow:0 24px 40px -24px rgba(30,42,62,.35);
  font-size:17px !important;display:none !important
}
html.menu-compacto #menu-principal.abierto{display:flex !important}
html.menu-compacto #menu-principal a{display:block;padding:14px 4px;border-bottom:1px solid #EEF1F4}
html.menu-compacto #menu-principal a:last-child{border-bottom:0}
@media (max-width:360px){
  html.menu-compacto .cta-cabecera{padding:0 12px !important;font-size:13px !important}
}

/* ── Panel interactivo: pestañas en lista, sin hueco a la derecha ── */
.pestanas{flex-direction:column;flex-wrap:nowrap !important}
.pestanas [role="tab"]{flex:none !important;width:100%;position:relative;overflow:hidden}
.pestanas [role="tab"]:hover{color:#FFFFFF !important}
.pestanas [role="tab"][aria-selected="false"]:hover{background:rgba(255,255,255,.08) !important}
/* Mismo alto para todas las vistas: las cinco se apilan en la misma celda y la caja mide lo que la más alta.
   Las ocultas siguen ocupando sitio pero invisibles (fuera del lector de pantalla y del tabulador). */
.producto-panel{display:grid}
.producto-panel>[data-panel]{grid-area:1/1;min-width:0}
.producto-panel>[data-panel][hidden]{display:flex !important;visibility:hidden}
/* En las vistas más cortas, el recuadro gris de la maqueta se estira hasta abajo en vez de dejar un hueco blanco. */
.producto-panel>[data-panel]>div:last-child{flex:1 1 auto}
/* Jornada era la vista más alta (≈ 885 px frente a 490–685 de las demás) y fijaba el alto de todas:
   tabla y gráfico van lado a lado en cuanto caben, y las cuatro cifras en una sola fila.
   Si la caja es estrecha y no caben lado a lado, se oculta el mini-gráfico «Horas por día» (decorativo). */
.producto-panel{container-type:inline-size}
#panel-jornada>div:last-child>div:last-child{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)) !important}
@container (min-width:420px){#panel-jornada>div:last-child>div:nth-child(2){grid-template-columns:repeat(4,minmax(0,1fr)) !important}}
@container (max-width:479px){#panel-jornada>div:last-child>div:last-child>div:last-child{display:none !important}}
/* Barra de progreso del cambio automático */
.pestanas [role="tab"]::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:rgba(255,255,255,.55)}
.pestanas.rotando [role="tab"][aria-selected="true"]::after{animation:nProgreso var(--rotacion,5s) linear forwards}
@keyframes nProgreso{to{width:100%}}

.pestanas-aviso{margin:-8px 0 0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#5B6677;transition:opacity .4s}
.pestanas-aviso svg{flex:none;color:#B85409;animation:nToque 1.6s ease-in-out infinite}
.pestanas-aviso.oculto{opacity:0}
@keyframes nToque{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-3px) rotate(-8deg)}60%{transform:translateY(1px) rotate(0)}}

/* ── Capturas de la app: carrusel en móvil ── */
@media (max-width:700px){
  .carrusel{
    display:flex !important;gap:20px !important;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 -24px;padding:8px 24px 4px;scroll-padding:0 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch
  }
  .carrusel::-webkit-scrollbar{display:none}
  .carrusel > figure{flex:0 0 auto;scroll-snap-align:center;gap:20px !important}
  .carrusel-puntos{display:flex;justify-content:center;gap:10px;margin-top:-32px}
  .carrusel-puntos[hidden]{display:none !important}
  .carrusel-puntos button{width:10px;height:10px;padding:0;border:0;border-radius:999px;background:#C5CCD6;cursor:pointer;transition:width .2s,background .2s}
  .carrusel-puntos button[aria-current="true"]{width:28px;background:#EE7317}
  /* el área de toque mínima sin agrandar el punto */
  .carrusel-puntos button{position:relative}
  .carrusel-puntos button::before{content:"";position:absolute;inset:-12px -6px}
}
@media (min-width:701px){
  .carrusel-puntos{display:none !important}
}

/* ── Pie con más contraste ── */
.pie a{color:#E6E9EE}
.pie a:hover{color:#F7A35C}
.pie address a,.pie nav a{text-decoration:underline;text-decoration-color:rgba(230,233,238,.35);text-underline-offset:3px}

@media (prefers-reduced-motion: reduce){
  .pestanas-aviso svg{animation:none}
}