/* ============================================================
   DANGOFE OS · TALLER: LA CABECERA EN MOSAICO Y LAS BARRAS LADO A LADO (prefijo tcb-) · v1.0.0 · 2026-10-29 · chat de Diseño · CSS
   Karla (fotos 36 y 37): «cámbiame la forma en la que se ve esta línea, y en la segunda foto ese tipo de barra, pónmela más organizada».
   De 3 versiones (A Dos pisos · B Mosaico · C Una cápsula) ELIGIÓ «la cabecera es un mosaico» → B.
   Lo que arregla:
     · La cabecera del Taller: el nombre ya no se corta («Taller de in…») ni la línea corta («…»); los botones son cuadritos iguales
       (ícono arriba, nombre abajo); «Novedades» lleva su número en la esquina. En el iPad de pie bajan a su propia fila, repartidos;
       en el teléfono, tres por fila.
     · Las barras de arriba: «El día de los técnicos» copia la cara de «Notificaciones del taller» (cuadrito con su ícono, nombre,
       una línea de qué hay dentro y la flecha en círculo); Notificaciones gana su línea («lo que el taller avisó por correo»).
       Van una al lado de la otra; la que se abre ocupa todo el ancho (y la otra baja, también a lo ancho). Hasta 900 px, una sobre otra.
     · «93 nuevas» late 3 veces y se queda quieto (antes latía para siempre).
   Solo el Taller: la cabecera con data-mcab-modulo="taller" y lo que está dentro de .tal-wrap.tp. Ningún otro módulo cambia
   (tampoco el panel del técnico: no usa .tal-wrap). Colores del sistema (--mcab-*, --tp-*): con los rojos de Power Wave salen rojos.
   Sin sombras; «Noche azul» sola por [data-theme='dark']; nada se mueve en reposo.
   Se enciende sola al cargarse. <html data-tcab="no"> la apaga (vuelve como antes).
   Va DESPUÉS de modulo-cabecera.css, taller-panel.css, taller-pendientes.css, novedades-modulo.css y taller-rojo.css.
   ============================================================ */

/* ---------- lo común ---------- */
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab__nom { white-space: normal; overflow: visible; text-overflow: clip; }
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab-btn,
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab-ayuda,
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .nvm-btn { min-height: 40px; }
html:not([data-tcab='no']) .tal-wrap.tp .tal-notif__n { animation-iteration-count: 3; }
html:not([data-tcab='no']) .tal-wrap.tp .tal-cierre { margin-top: 0; }

/* las dos barras con la misma cara (la de Notificaciones es la buena: se copia en «El día de los técnicos») */
html:not([data-tcab='no']) .tal-wrap.tp .tal-cierre { padding: 0; overflow: hidden; }
html:not([data-tcab='no']) .tal-wrap.tp .tal-cierre > summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) 28px; grid-template-areas: 'ico nom chev' 'ico sub chev'; gap: 1px 10px; align-items: center; padding: 12px 14px; min-height: 64px; box-sizing: border-box; }
html:not([data-tcab='no']) .tal-wrap.tp .tal-cierre > summary > svg { grid-area: ico; width: 40px; height: 40px; padding: 10px; box-sizing: border-box; border-radius: 13px; background: rgba(var(--tp-cel), .14); color: var(--tp-azul); }
html:not([data-tcab='no']) .tal-wrap.tp .tal-cierre > summary > b { grid-area: nom; align-self: end; font-size: 15.5px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not([data-tcab='no']) .tal-wrap.tp .tal-cierre > summary > small { grid-area: sub; align-self: start; font-size: 12.5px; line-height: 1.3; opacity: 1; color: var(--tp-txt3); min-width: 0; }
/* la flecha: ::after es el círculo y ::before la flecha encima (en la misma celda) */
html:not([data-tcab='no']) .tal-wrap.tp .tal-cierre > summary::after { content: ''; grid-area: chev; width: 28px; height: 28px; border-radius: 50%; background: var(--tp-tile); }
html:not([data-tcab='no']) .tal-wrap.tp .tal-cierre > summary::before { content: ''; grid-area: chev; justify-self: center; width: 16px; height: 16px; background: currentColor; color: var(--tp-azul); z-index: 1; transition: transform .3s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
html:not([data-tcab='no']) .tal-wrap.tp .tal-cierre[open] > summary::before { transform: rotate(180deg); }
html:not([data-tcab='no']) .tal-wrap.tp .tal-cierre[open] > summary { border-bottom: 1px solid var(--tp-borde); }
html:not([data-tcab='no']) .tal-wrap.tp .tal-cierre > #tal-cierre-pieza { padding: 12px 14px 14px; }
/* Notificaciones gana su línea de qué hay, igual que «El día de los técnicos» */
html:not([data-tcab='no']) .tal-wrap.tp .tal-notif__cab { grid-template-columns: 40px minmax(0, 1fr) auto 28px; min-height: 64px; box-sizing: border-box; }
html:not([data-tcab='no']) .tal-wrap.tp .tal-notif__cab:has(.tpd-cuenta) { grid-template-columns: 40px minmax(0, 1fr) auto auto 28px; }
html:not([data-tcab='no']) .tal-wrap.tp .tal-notif__cab > b { display: flex; flex-direction: column; gap: 1px; white-space: normal; }
html:not([data-tcab='no']) .tal-wrap.tp .tal-notif__cab > b::after { content: 'lo que el taller avisó por correo'; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--tp-txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- la cabecera en mosaico y las barras lado a lado ---------- */
html:not([data-tcab='no']) body.has-mcab-A .topbar:has(.mcab[data-mcab-modulo='taller']) { align-items: center; }
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] { gap: 14px; }
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab__tile { width: 44px; height: 44px; border-radius: 13px; }
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab__linea { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; white-space: normal; font-size: .8rem; }
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab__miga { display: none; }
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab__t { flex: 1 1 200px; }
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab__acc { flex: 0 1 auto; flex-wrap: nowrap; gap: 6px; }
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab__acc > [data-nvm-slot] { display: flex; }
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab-btn,
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab-ayuda,
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .nvm-btn { position: relative; flex-direction: column; justify-content: center; gap: 4px; width: auto; min-width: 84px; min-height: 60px; padding: 8px 10px; border-radius: 16px; font-size: 11.5px; line-height: 1.15; white-space: normal; text-align: center; }
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab-btn svg,
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab-ayuda svg,
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .nvm-btn svg { width: 20px; height: 20px; }
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .nvm-btn > span { font-size: 0; }
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .nvm-btn > span::before { content: 'Novedades'; font-size: 11.5px; }
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .nvm-btn > span > b { position: absolute; top: -6px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: rgb(var(--mcab-az)); color: #fff; font-size: 11.5px; line-height: 22px; text-align: center; }
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .nvm-btn .nvm-btn__punto { display: none; }
html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab-ico { width: 40px; height: 60px; border-radius: 16px; }
html:not([data-tcab='no']) .tal-wrap.tp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html:not([data-tcab='no']) .tal-wrap.tp > * { grid-column: 1 / -1; min-width: 0; }
html:not([data-tcab='no']) .tal-wrap.tp:has(> #tal-cierre > details) > #tal-notifzone:has(> .tal-notif),
html:not([data-tcab='no']) .tal-wrap.tp:has(> #tal-notifzone > .tal-notif) > #tal-cierre:has(> details) { grid-column: auto; }
html:not([data-tcab='no']) .tal-wrap.tp:has(> #tal-notifzone > .tal-notif.is-abierto) > #tal-notifzone,
html:not([data-tcab='no']) .tal-wrap.tp:has(> #tal-notifzone > .tal-notif.is-abierto) > #tal-cierre,
html:not([data-tcab='no']) .tal-wrap.tp:has(> #tal-cierre > details[open]) > #tal-notifzone,
html:not([data-tcab='no']) .tal-wrap.tp:has(> #tal-cierre > details[open]) > #tal-cierre { grid-column: 1 / -1; }
html:not([data-tcab='no']) .tal-wrap.tp > #tal-notifzone > .tal-notif, html:not([data-tcab='no']) .tal-wrap.tp > #tal-cierre > details { height: 100%; box-sizing: border-box; }
html:not([data-tcab='no']) .tal-wrap.tp .tal-notif__cab > b::after { white-space: normal; }

/* ---------- iPad vertical y teléfono ---------- */
@media (max-width: 1000px) {
  html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] { flex-wrap: wrap; }
  html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab__acc { width: 100%; }
  html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab__acc > * { flex: 1 1 0; }
  html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab__acc .mcab-btn, html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab__acc .mcab-ayuda, html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .nvm-btn { width: 100%; }
}
/* las dos barras, una sobre otra cuando no caben bien lado a lado */
@media (max-width: 900px) {
  html:not([data-tcab='no']) .tal-wrap.tp { grid-template-columns: minmax(0, 1fr); }
  html:not([data-tcab='no']) .tal-wrap.tp > * { grid-column: 1 / -1 !important; }
}
@media (max-width: 760px) {
  html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab__acc { width: 100%; box-sizing: border-box; }
  html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab__linea { -webkit-line-clamp: unset; display: block; }
  /* en el teléfono: tres cuadritos por fila */
  html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab__acc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html:not([data-tcab='no']) .mcab[data-mcab-modulo='taller'] .mcab__acc .mcab-ico { width: 100%; }
  html:not([data-tcab='no']) .tal-wrap.tp .tal-notif__cab > b::after { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-tcab='no']) .tal-wrap.tp .tal-cierre > summary::before { transition: none; }
}