/* App del taller — botones grandes (guantes, apuro, cliente mirando), una acción por pantalla. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* "hidden" siempre esconde, aunque la clase diga display:flex */
html, body { margin: 0; }
body { background: var(--bg); color: var(--txt); font-family: var(--font); font-size: 17px; line-height: 1.4;
       -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }
h1 { font-size: 1.5rem; margin: .4rem 0 1rem; }
h2 { font-size: 1.2rem; margin: 1.2rem 0 .6rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.4rem 0; }

.barra { display: flex; align-items: center; gap: .75rem; padding: .6rem 16px; background: var(--card);
         box-shadow: var(--sombra); position: sticky; top: 0; z-index: 5; }
.logo { height: 30px; width: auto; }
.titulo-app { font-weight: 700; color: var(--muted); }
.barra .derecha { margin-left: auto; font-size: .9rem; color: var(--muted); text-align: right; }

/* ——— Pestañas de la app: arriba en la PC, abajo en el celular ——— */
.arriba { position: sticky; top: 0; z-index: 6; }
.arriba .barra { position: static; }
.pestanas-app { display: flex; gap: .2rem; padding: 0 16px; background: var(--card); border-bottom: 1px solid var(--line); overflow-x: auto; }
.pestana { display: flex; align-items: center; gap: .1rem; padding: .75rem .9rem; color: var(--muted); text-decoration: none; font-weight: 600;
           border-bottom: 3px solid transparent; white-space: nowrap; }
.pestana:hover { color: var(--txt); }
.pestana[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); }
.pestana .corto { display: none; }
/* Laptop angosta (800–1199 px; p. ej. 1280 al 150 % ≈ 853): las 8 con su nombre corto, sin barra lateral (M6) */
@media (min-width: 800px) and (max-width: 1199px) {
  .pestanas-app { padding: 0 8px; gap: 0; }
  .pestana { padding: .7rem .5rem; font-size: .92rem; }
  .pestana .largo { display: none; }
  .pestana .corto { display: inline; }
}
/* La lista de "☰ Más" (celular): sale justo arriba de la barra de abajo */
.mas-lista { position: fixed; right: 8px; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 10; min-width: 220px;
             background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sombra); }
.mas-lista ul { list-style: none; margin: 0; padding: .3rem; }
.mas-lista a { display: flex; align-items: center; min-height: var(--tap); padding: .5rem .9rem; color: var(--txt); text-decoration: none; font-weight: 600; border-radius: 8px; }
.mas-lista a[aria-current="page"] { color: var(--primary); }
.vista[data-vista="visita"] { max-width: 640px; margin: 0 auto; }
.tarjeta-enlace { display: block; color: inherit; text-decoration: none; }
.tarjeta-enlace:hover { outline: 2px solid var(--primary); }
@media (max-width: 799px) {
  .pestanas-app { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
                  padding: 0 0 env(safe-area-inset-bottom); border-bottom: 0; border-top: 1px solid var(--line);
                  box-shadow: 0 -4px 14px rgba(10, 22, 40, .10); z-index: 9; }
  .pestana { flex-direction: column; justify-content: center; gap: 0; padding: .45rem .15rem .4rem; font-size: .72rem;
             border-bottom: 0; border-top: 3px solid transparent; }
  .pestana[aria-current="page"] { border-top-color: var(--primary); }
  .pestana .icono { font-size: 1.3rem; line-height: 1.2; }
  .pestana .largo { display: none; }
  .pestana .corto { display: inline; }
  .pestana-mas-boton { background: none; border-left: 0; border-right: 0; border-bottom: 0; font-family: inherit; cursor: pointer; }
  .pestana-mas-boton[aria-current="page"] { color: var(--primary); border-top-color: var(--primary); }
  body.con-pestanas .contenido { padding-bottom: 170px; }
  body.con-pestanas .pendientes-subir { bottom: calc(58px + env(safe-area-inset-bottom)); }
}

.contenido { max-width: 640px; margin: 0 auto; padding: 16px 16px 120px; }
.cargando { color: var(--muted); }

.lista { display: grid; gap: .6rem; }
.boton { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--tap); width: 100%;
         padding: .6rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
         color: var(--txt); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; text-align: center; }
.boton:disabled { opacity: .55; cursor: default; }
.boton-grande { min-height: 68px; font-size: 1.15rem; }
.boton-primario { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.boton-verde { background: var(--green); border-color: var(--green); color: #fff; }
.boton-amarillo { background: var(--gold-bg); border-color: var(--gold); color: var(--gold); }
.boton-rojo { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.boton-elegido { outline: 3px solid var(--primary); outline-offset: 2px; }
.enlace { background: none; border: 0; color: var(--blue); font: inherit; padding: .6rem 0; cursor: pointer; text-decoration: underline; }
.fila { display: flex; gap: .6rem; }
.fila > * { flex: 1; }
.fila-encabezado { align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.fila-centrada { align-items: center; }
.fila > .sin-crecer, .fila > .boton-ajustado { flex: 0 0 auto; width: auto; }
.fila > .miniatura { flex: 0 0 64px; }
.miniatura { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--card-2); }

.campo { width: 100%; min-height: var(--tap); padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-s);
         background: var(--card); color: var(--txt); font: inherit; }
.campo-pin { font-size: 1.8rem; letter-spacing: .5rem; text-align: center; }
textarea.campo { min-height: 110px; resize: vertical; }
label { display: grid; gap: .3rem; margin-bottom: .8rem; }
.etiqueta { font-weight: 600; color: var(--muted); font-size: .95rem; }
.pin { display: grid; gap: .8rem; }

.tarjeta { background: var(--card); border-radius: var(--radius); box-shadow: var(--sombra); padding: 14px; margin: .6rem 0; }
.tarjeta h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.tarjeta .detalle { color: var(--muted); font-size: .92rem; }
.tarjeta-boton { display: block; width: 100%; text-align: left; border: 0; font: inherit; color: inherit; cursor: pointer; }

.etiqueta-estado { display: inline-block; font-size: .78rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; }
.e-ok { background: var(--green-bg); color: var(--green); }
.e-pendiente { background: var(--gold-bg); color: var(--gold); }
.e-mal { background: var(--red-bg); color: var(--red); }
.e-info { background: var(--blue-bg); color: var(--blue); }

.aviso { padding: .7rem .9rem; border-radius: var(--radius-s); margin: .8rem 0; }
.aviso-error { background: var(--red-bg); color: var(--red); border: 1px solid var(--red); }
.aviso-info { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--line); }
.aviso-ok { background: var(--green-bg); color: var(--green); border: 1px solid var(--green); }

.foto-vista { width: 100%; max-height: 260px; object-fit: contain; border-radius: var(--radius-s); background: var(--card-2); }
.miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .4rem; margin: .5rem 0; }
.miniaturas img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-s); background: var(--card-2); }

.microfono { width: 120px; height: 120px; border-radius: 50%; border: 0; background: var(--red); color: #fff; font-size: 2.6rem;
             display: block; margin: 1rem auto .4rem; cursor: pointer; box-shadow: var(--sombra); }
.microfono.grabando { animation: latido 1s infinite; }
@keyframes latido { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .microfono.grabando { animation: none; outline: 6px solid var(--gold); } }
.centrado { text-align: center; }
.oculto { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
details.tarjeta summary { cursor: pointer; font-weight: 600; min-height: 32px; }
details.tarjeta[open] summary { margin-bottom: .6rem; }
.chico { font-size: .88rem; color: var(--muted); }

.pendientes-subir { position: fixed; left: 0; right: 0; bottom: 0; padding: .7rem 16px calc(.7rem + env(safe-area-inset-bottom));
                    background: var(--gold-bg); color: var(--gold); border-top: 2px solid var(--gold); font-weight: 700;
                    display: flex; justify-content: space-between; align-items: center; gap: .6rem; z-index: 10; }
.pendientes-subir button { min-height: 44px; width: auto; }
.no-guardado { background: var(--red-bg); color: var(--red); border: 1px solid var(--red); border-radius: var(--radius-s);
               padding: .7rem .9rem; margin: 0 0 1rem; }
.no-guardado ul { margin: .4rem 0 .7rem; padding-left: 1.2rem; }
.no-guardado li { margin: .3rem 0; }
.no-guardado .enlace { color: var(--red); }

table.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th, .tabla td { padding: .5rem .4rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tabla th { color: var(--muted); font-weight: 600; }
.tabla tr.clic { cursor: pointer; }
.tabla tr.clic:hover { background: var(--card-2); }
.envoltura-tabla { overflow-x: auto; }
.contadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; margin-bottom: .6rem; }
.contadores .tarjeta { margin: 0; }
.numero { font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1.1; }
.miniaturas a { display: block; }
.nota-voz p { margin-bottom: .3rem; }
.audio-nota { width: 100%; max-width: 420px; }

@media (min-width: 900px) {
  .contenido.ancho { max-width: 1100px; }
}

/* ——— ☀️ Mi día ——— */
.dia-arriba { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: .2rem 0 .9rem; }
.dia-sobre { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.dia-hola h1 { margin: .1rem 0 .15rem; font-size: 1.9rem; line-height: 1.15; }
.dia-fecha { margin: 0; color: var(--muted); }
.dia-arriba > .enlace { white-space: nowrap; }

/* El banner: una franja del color del aviso, texto grande; cada aviso entra suave y la barrita marca los 6 s. */
.banner { --b-fondo: var(--banner-info); --b-tinta: 255, 255, 255;
          position: relative; overflow: hidden; margin: 0 0 1.1rem; border-radius: var(--radius); color: rgb(var(--b-tinta));
          background-color: var(--b-fondo);
          background-image: linear-gradient(115deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%),
                            radial-gradient(circle at 92% -40%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 45%);
          box-shadow: 0 10px 26px rgba(10, 22, 40, .18); transition: background-color .5s ease; }
.banner-rojo { --b-fondo: var(--banner-rojo); }
.banner-naranja { --b-fondo: var(--banner-naranja); }
.banner-amarillo { --b-fondo: var(--banner-amarillo); --b-tinta: 42, 29, 0; }
.banner-verde { --b-fondo: var(--banner-verde); }
.banner-info { --b-fondo: var(--banner-info); }
.banner-aviso { display: flex; align-items: center; gap: 1rem; min-height: 96px; padding: 1.1rem 1.4rem 1.7rem;
                color: inherit; text-decoration: none; font-size: 1.4rem; font-weight: 700; line-height: 1.25;
                animation: banner-entra .45s cubic-bezier(.2, .8, .2, 1); }
a.banner-aviso:focus-visible { outline: 3px solid rgb(var(--b-tinta)); outline-offset: -7px; border-radius: var(--radius); }
.banner-icono { flex: none; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%;
                font-size: 1.35rem; background: rgba(var(--b-tinta), .2); }
.banner-rojo .banner-icono { animation: banner-latido 2s ease-in-out infinite; }
.banner-texto { flex: 1; min-width: 0; }
.banner-ir { flex: none; font-size: .95rem; padding: .4rem .9rem; border-radius: 999px; background: rgba(var(--b-tinta), .2);
             white-space: nowrap; transition: background .2s; }
a.banner-aviso:hover .banner-ir { background: rgba(var(--b-tinta), .34); }
.banner-puntos { position: absolute; left: 1.4rem; bottom: .45rem; display: flex; gap: .1rem; }
.banner-puntos button { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 2px; border: 0;
                        background: none; cursor: pointer; }
.banner-puntos button::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 999px;
                                background: rgba(var(--b-tinta), .45); transition: width .3s ease, background .3s; }
.banner-puntos button[aria-current="true"]::before { width: 24px; background: rgb(var(--b-tinta)); }
.banner-puntos button:focus-visible { outline: 2px solid rgb(var(--b-tinta)); border-radius: 6px; }
.banner-progreso { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(var(--b-tinta), .15); }
.banner-progreso span { display: block; height: 100%; background: rgba(var(--b-tinta), .7); transform-origin: left;
                        animation: banner-avance 6s linear forwards; }
.banner.en-pausa .banner-progreso span { animation-play-state: paused; }
@keyframes banner-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes banner-avance { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes banner-latido { 50% { transform: scale(1.12); } }

/* Los números grandes: tocar uno baja a su sección. */
.dia-cuentas { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; margin-bottom: 1.2rem; }
.dia-cuenta { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: .85rem 1rem; border: 0;
              border-radius: var(--radius); background: var(--tono-bg); color: var(--tono); font: inherit; text-align: left;
              cursor: pointer; box-shadow: inset 0 0 0 1px var(--tono-borde, transparent); transition: transform .15s ease, box-shadow .15s ease; }
.dia-cuenta:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--tono-borde, transparent), 0 8px 18px rgba(10, 22, 40, .12); }
.dia-cuenta-numero { font-size: 2.4rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.dia-cuenta-texto { font-size: .85rem; font-weight: 600; line-height: 1.25; }
.dia-cuenta.cero { --tono: var(--muted); --tono-bg: var(--card); --tono-borde: var(--line); }
.dia-cuenta.cero .dia-cuenta-numero { opacity: .55; }
.tono-rojo { --tono: var(--red); --tono-bg: var(--red-bg); }
.tono-naranja { --tono: var(--orange); --tono-bg: var(--orange-bg); }
.tono-amarillo { --tono: var(--gold); --tono-bg: var(--gold-bg); }
.tono-azul { --tono: var(--blue); --tono-bg: var(--blue-bg); }
.tono-gris { --tono: var(--muted); --tono-bg: var(--card-2); }

/* Las secciones: dos columnas en la PC, una en el celular. */
.dia-columnas { display: grid; gap: 0 1.1rem; align-items: start; }
.dia-seccion { background: var(--card); border-radius: var(--radius); box-shadow: var(--sombra); padding: 14px 16px 10px;
               margin-bottom: 1.1rem; scroll-margin-top: 130px; }
.dia-seccion h2 { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin: 0 0 .5rem; font-size: 1.12rem; }
.dia-seccion h2 small { font-size: .78rem; font-weight: 400; color: var(--muted); text-align: right; }
.dia-vacio { margin: .2rem 0 .5rem; color: var(--muted); }
.dia-fila { display: flex; align-items: center; gap: .9rem; margin: 0 -.5rem .3rem; padding: .6rem .7rem .6rem .8rem;
            border-left: 4px solid var(--tono, var(--line)); border-radius: 4px var(--radius-s) var(--radius-s) 4px;
            color: inherit; text-decoration: none; transition: background .15s; }
.dia-fila:hover { background: var(--card-2); }
.dia-fila-cuerpo { flex: 1; min-width: 0; }
.dia-fila-cuerpo .chico { display: block; margin-top: .1rem; }
.dia-dias { flex: none; min-width: 3.2rem; text-align: center; line-height: 1; }
.dia-dias b { display: block; font-size: 1.65rem; font-weight: 800; color: var(--tono, var(--primary)); font-variant-numeric: tabular-nums; }
.dia-dias span { font-size: .72rem; color: var(--muted); }
.dia-equipos { list-style: none; margin: .25rem 0 0; padding: 0; font-size: .9rem; }
.dia-equipos li { margin: .1rem 0; }
.dia-atrasado { color: var(--orange); font-weight: 700; }
.dia-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem; margin-bottom: .5rem; }
.dia-mini { display: flex; flex-direction: column; gap: .3rem; padding: .7rem .85rem .8rem; border-radius: var(--radius-s);
            background: var(--card-2); border-top: 4px solid var(--tono, var(--line)); color: inherit; text-decoration: none;
            transition: transform .15s ease, box-shadow .15s ease; }
.dia-mini:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(10, 22, 40, .12); }
.dia-mini-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem; }
.dia-mini .dia-dias b { font-size: 1.45rem; }
.dia-columna { font-size: .74rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: var(--tono-bg, var(--blue-bg)); color: var(--tono, var(--blue)); }
.dia-paso { font-size: .86rem; line-height: 1.3; }

@media (min-width: 900px) {
  .dia-columnas { grid-template-columns: 1.2fr 1fr; }
}
/* En una sola columna, el orden de la spec: caídos → esta semana → banco → esperando → pendientes. */
@media (max-width: 899px) {
  .dia-columnas > div { display: contents; }
  #dia-caidos { order: 1; } #dia-semana { order: 2; } #dia-banco { order: 3; } #dia-esperando { order: 4; } #dia-pendientes { order: 5; }
}
@media (max-width: 799px) {
  .dia-hola h1 { font-size: 1.5rem; }
  .banner-aviso { min-height: 84px; padding: .9rem 1rem 1.6rem; font-size: 1.12rem; gap: .75rem; }
  .banner-icono { width: 2.3rem; height: 2.3rem; font-size: 1.1rem; }
  .banner-ir { display: none; }
  .banner-puntos { left: 1rem; }
  .dia-cuentas { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .dia-cuenta:last-child:nth-child(odd) { grid-column: span 2; }
  .dia-cuenta-numero { font-size: 2rem; }
}
/* Sin movimiento si el aparato lo pide: el banner igual rota, pero sin animaciones. */
@media (prefers-reduced-motion: reduce) {
  .banner, .banner-puntos button::before, .dia-cuenta, .dia-mini, .dia-fila { transition: none; }
  .banner-aviso, .banner-rojo .banner-icono { animation: none; }
  .banner-progreso { display: none; }
  .dia-cuenta:hover, .dia-mini:hover { transform: none; }
}

/* ——— 🛠️ Tareas: el tablero (columnas lado a lado en la PC, una debajo de otra en el celular) ——— */
.tareas-arriba { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: .2rem 0 1rem; }
.tareas-arriba h1 { margin: 0 auto 0 0; }
.tareas-arriba .boton { width: auto; }
.segmento { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--card); }
.segmento button { min-height: 44px; padding: .45rem 1.1rem; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
.segmento button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.segmento button:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }

.tablero { display: grid; grid-template-columns: repeat(6, minmax(168px, 1fr)); gap: .6rem; align-items: start;
           overflow-x: auto; padding-bottom: .3rem; }
.tablero-columna { --col: var(--line); min-height: 150px; padding: .65rem .55rem .2rem; border-radius: var(--radius-s);
                   background: var(--card-2); border-top: 4px solid var(--col); }
.tablero-columna[data-estado="recibido"] { --col: var(--blue); }
.tablero-columna[data-estado="diagnostico"] { --col: var(--primary); }
.tablero-columna[data-estado="esperando"] { --col: var(--gold); }
.tablero-columna[data-estado="prueba_final"] { --col: var(--orange); }
.tablero-columna[data-estado="listo"] { --col: var(--green); }
.tablero-columna[data-estado="entregado"] { --col: var(--muted); }
.tablero-columna h2 { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; margin: 0 0 .55rem; font-size: .9rem; line-height: 1.25; }
.tablero-columna h2 small { flex: none; min-width: 1.6rem; padding: .05rem .45rem; border-radius: 999px; background: var(--card);
                            color: var(--muted); font-size: .78rem; font-weight: 800; text-align: center; }
.tablero-vacio, .tablero-nota { margin: .1rem 0 .55rem; color: var(--muted); font-size: .82rem; }
.tablero-tarjeta { display: flex; flex-direction: column; gap: .18rem; margin-bottom: .5rem; padding: .6rem .65rem;
                   border-radius: var(--radius-s); background: var(--card); color: inherit; text-decoration: none;
                   box-shadow: 0 0 0 1px var(--line); border-left: 4px solid transparent; transition: transform .15s ease, box-shadow .15s ease; }
.tablero-tarjeta:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line), 0 8px 18px rgba(10, 22, 40, .12); }
.tablero-tarjeta:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.tablero-tarjeta.estancada { border-left-color: var(--red); }
.tablero-tarjeta.estancada .tablero-dias { color: var(--red); font-weight: 800; }
.tablero-titulo { font-size: .95rem; line-height: 1.25; overflow-wrap: anywhere; }
.tablero-tarjeta .chico { font-size: .8rem; overflow-wrap: anywhere; }
.tablero-espera { font-size: .8rem; font-weight: 700; color: var(--gold); }
.tablero-pie { display: flex; justify-content: space-between; gap: .4rem; margin-top: .15rem; font-size: .78rem; color: var(--muted); }
.tablero-quien { font-weight: 700; text-align: right; }
.tablero-paso { margin-top: .25rem; padding: .3rem .45rem; border-radius: 6px; background: var(--blue-bg); color: var(--blue);
                font-size: .8rem; line-height: 1.3; }
.tareas-abajo { display: grid; gap: 0 1.1rem; align-items: start; margin-top: 1.2rem; }
.tablero-pendiente .dia-fila-cuerpo strong { overflow-wrap: anywhere; }
.tablero-accion { min-height: 44px; font-size: .92rem; white-space: nowrap; }
@media (min-width: 900px) {
  .tareas-abajo { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 799px) {
  .tablero { grid-template-columns: 1fr; overflow: visible; }
  .tablero-columna { min-height: 0; }
  .tablero-pendiente { flex-wrap: wrap; }
  .tablero-pendiente .tablero-accion { width: 100%; }
}

/* ——— ＋ Nueva tarea ——— */
.tarea-nueva { max-width: 720px; }
.tarea-tipos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0 0 1rem; padding: 0; border: 0; }
.tarea-tipos legend { margin-bottom: .45rem; padding: 0; }
label.tarea-tipo { display: flex; align-items: center; gap: .55rem; min-height: var(--tap); margin: 0; padding: .6rem .8rem;
                   border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--card); font-weight: 600; cursor: pointer; }
label.tarea-tipo:has(input:checked) { border-color: var(--primary); background: var(--blue-bg); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
label.tarea-tipo input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--primary); }
.tarea-entrada-campos { margin: 1rem 0; padding: 14px 16px 2px; border-radius: var(--radius); background: var(--card-2); }
.tarea-entrada-campos h2 { margin: 0 0 .7rem; font-size: 1.08rem; }
.tarea-equipo-elegido { margin-top: 0; }
@media (max-width: 599px) {
  .tarea-tipos { grid-template-columns: 1fr; }
}

/* ——— El detalle de una tarea ——— */
.tarea-detalle { max-width: 860px; }
.tarea-cabeza { margin: .3rem 0 1rem; }
.tarea-sobre { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.tarea-cabeza h1 { margin: .15rem 0 .35rem; font-size: 1.7rem; line-height: 1.2; overflow-wrap: anywhere; }
.tarea-datos { display: flex; flex-wrap: wrap; gap: .25rem 1.2rem; color: var(--muted); }
.tarea-estado-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-top: .7rem; }
.tarea-estado { padding: .3rem .85rem; border-radius: 999px; background: var(--tono-bg, var(--blue-bg)); color: var(--tono, var(--blue));
                font-size: .92rem; font-weight: 800; }
.tono-verde { --tono: var(--green); --tono-bg: var(--green-bg); }
.tarea-dias { color: var(--muted); font-weight: 600; }
.tarea-dias.estancada { color: var(--red); font-weight: 800; }
.tarea-paso { display: flex; align-items: center; gap: .9rem; margin: 0 0 1rem; padding: .9rem 1.1rem; border-radius: var(--radius);
              background: var(--blue-bg); color: var(--blue); box-shadow: inset 4px 0 0 var(--blue); }
.tarea-paso-icono { flex: none; font-size: 1.6rem; }
.tarea-paso small { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.tarea-paso strong { font-size: 1.1rem; line-height: 1.3; }
.tarea-bloque { margin-bottom: 1rem; padding: 14px 16px; border-radius: var(--radius); background: var(--card); box-shadow: var(--sombra); }
.tarea-bloque h2 { margin: 0 0 .65rem; font-size: 1.08rem; }
.tarea-botones { display: flex; flex-wrap: wrap; gap: .6rem; }
.tarea-botones .boton { width: auto; }
.tarea-espera { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; margin-top: .8rem; }
.tarea-espera label { flex: 1 1 260px; margin: 0; }
.tarea-hecha { margin-top: .8rem; padding: .8rem; border-radius: var(--radius); background: var(--blue-bg); }
.tarea-hecha p { margin: 0 0 .6rem; font-weight: 600; }
.tarea-hecha .tarea-botones { align-items: center; }
.tarea-otras-columnas { margin-top: .6rem; }
.tarea-otras-columnas summary { min-height: 40px; padding: .5rem 0; color: var(--blue); font-weight: 600; cursor: pointer; }
.tarea-columnas { display: flex; flex-wrap: wrap; gap: .45rem; margin: .3rem 0 .4rem; }
.tarea-columnas .boton { width: auto; min-height: 44px; font-size: .92rem; }
.tarea-entrada { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 0; }
.tarea-entrada dt { color: var(--muted); font-weight: 700; }
.tarea-entrada dd { margin: 0; overflow-wrap: anywhere; }
.tarea-quien { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; }
.tarea-quien select { flex: 0 1 280px; }
.tarea-quien .aviso { margin: 0; }
@media (max-width: 599px) {
  .tarea-cabeza h1 { font-size: 1.4rem; }
  .tarea-entrada { grid-template-columns: 1fr; gap: .1rem; }
  .tarea-entrada dd { margin-bottom: .45rem; }
  .tarea-botones .boton { width: 100%; }
}

/* ——— La tarea por dentro: diario, fotos, pasos, lo que ya se sabe, reporte ——— */
.tarea-caja { display: grid; grid-template-columns: 1fr auto; gap: .4rem 1.2rem; align-items: start; padding: .8rem .9rem;
              margin-bottom: .6rem; border-radius: var(--radius-s); background: var(--card-2); }
.tarea-caja-texto label { margin: 0 0 .5rem; }
.tarea-caja-texto textarea { min-height: 92px; resize: vertical; }
.tarea-caja-texto .boton { width: auto; }
.tarea-caja-voz { display: flex; flex-direction: column; align-items: center; min-width: 150px; }
.tarea-caja-voz .microfono { width: 84px; height: 84px; margin: .35rem auto .3rem; font-size: 2rem; }
.tarea-caja-voz .chico { margin: 0; max-width: 150px; text-align: center; }
.tarea-diario { list-style: none; margin: .4rem 0 0; padding: 0 0 0 .9rem; border-left: 3px solid var(--line); }
.diario-item { position: relative; padding: .45rem 0 .55rem .2rem; }
.diario-item::before { content: ''; position: absolute; left: calc(-.9rem - 7px); top: .85rem; width: 11px; height: 11px;
                       border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 3px var(--primary); }
.diario-movimiento::before { box-shadow: inset 0 0 0 3px var(--line); }
.diario-voz::before { box-shadow: inset 0 0 0 3px var(--red); }
.diario-item p { margin: .15rem 0 0; overflow-wrap: anywhere; white-space: pre-line; }
.diario-movimiento p { color: var(--muted); font-size: .92rem; }
.diario-cuando { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; font-size: .8rem; font-weight: 700; color: var(--muted); }
.diario-cuando span + span::before { content: '·'; margin-right: .6rem; }
.diario-cuando .etiqueta-estado::before { content: none; }
.diario-audio .enlace { padding: .3rem 0; font-size: .9rem; }
.tarea-fotos-botones { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.tarea-fotos-botones .boton { width: 100%; }
.tarea-fotos-grupo h3 { margin: .9rem 0 .2rem; font-size: .95rem; color: var(--muted); }
.tarea-foto { margin: 0; }
.tarea-foto figcaption { margin-top: .2rem; font-size: .75rem; }
.tarea-pasos h2 { display: flex; justify-content: space-between; gap: .6rem; }
.tarea-pasos h2 small { color: var(--muted); font-weight: 700; }
.tarea-pasos-lista { margin: 0; padding-left: 1.3rem; }
.tarea-pasos-lista li { margin: .2rem 0 .5rem; }
.tarea-paso-item { display: flex; align-items: flex-start; gap: .6rem; min-height: var(--tap); margin: 0; cursor: pointer; }
.tarea-paso-item input { flex: none; width: 1.3rem; height: 1.3rem; margin: .1rem 0 0; accent-color: var(--green); }
.tarea-paso-item:has(input:checked) span { color: var(--muted); text-decoration: line-through; }
.paso-pagina { color: var(--blue); font-weight: 700; text-decoration: none; display: inline-block; }
.tarea-sabe h3 { margin: .9rem 0 .35rem; font-size: .98rem; }
.tarea-sabe h3:first-of-type { margin-top: 0; }
.sabe-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.sabe-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; padding: .55rem .75rem; border-radius: var(--radius-s);
             background: var(--card-2); color: inherit; text-decoration: none; box-shadow: inset 3px 0 0 var(--primary); }
.sabe-fila:hover { background: var(--blue-bg); }
.sabe-fila strong { flex: 1 1 100%; }
.sabe-texto { flex: 1 1 100%; font-style: italic; overflow-wrap: anywhere; }
.sabe-cuando { font-weight: 700; }
.tarea-reporte { box-shadow: inset 4px 0 0 var(--green), var(--sombra); }
.expediente-taller .tarjeta h3 a { color: var(--blue); }
.expediente-taller .fila-estado { margin: .3rem 0; }
.expediente-diario { margin: .4rem 0 0; padding-left: 1.1rem; }
.expediente-diario li { margin: .15rem 0; overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .tarea-caja { grid-template-columns: 1fr; }
  .tarea-caja-texto .boton { width: 100%; }
  .tarea-fotos-botones .boton { padding-left: .3rem; padding-right: .3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tablero-tarjeta { transition: none; }
  .tablero-tarjeta:hover { transform: none; }
}

/* ——— 🗓️ Mantenimientos: números, grupos por fecha juntados por laboratorio, programar y pasos ——— */
.mtto-arriba { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: .2rem 0 .9rem; }
.mtto-arriba h1 { margin: 0 0 .15rem; }
.mtto-arriba p { margin: 0; }
.mtto-arriba > .enlace { white-space: nowrap; }
.mtto-herramientas { display: grid; grid-template-columns: 1fr 240px; gap: .6rem 1rem; align-items: end; margin-bottom: 1rem; }
label.mtto-filtro { margin: 0; }
.mtto-cuentas { grid-template-columns: repeat(4, 1fr); }
.mtto-seccion { background: var(--card); border-radius: var(--radius); box-shadow: var(--sombra); padding: 14px 16px 12px;
                margin-bottom: 1.1rem; scroll-margin-top: 130px; border-top: 5px solid var(--tono, var(--line)); }
.mtto-seccion > h2, .mtto-plegable > summary { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
                                                margin: 0 0 .6rem; font-size: 1.12rem; font-weight: 700; }
.mtto-seccion > h2 small, .mtto-plegable > summary small { font-size: .78rem; font-weight: 400; color: var(--muted); text-align: right; }
.mtto-plegable > summary { cursor: pointer; list-style: none; margin: 0; min-height: 32px; }
.mtto-plegable > summary .mtto-titulo { white-space: nowrap; }
.mtto-plegable > summary::-webkit-details-marker, .mtto-lab-plegable > summary::-webkit-details-marker { display: none; }
.mtto-plegable > summary .mtto-titulo::before, .mtto-lab-plegable > summary::before { content: '▸'; display: inline-block; width: 1.1em;
                                                                                    color: var(--muted); transition: transform .15s ease; }
.mtto-plegable[open] > summary { margin-bottom: .6rem; }
.mtto-plegable[open] > summary .mtto-titulo::before, .mtto-lab-plegable[open] > summary::before { transform: rotate(90deg); }
.mtto-explica { margin: -.2rem 0 .7rem; }
.mtto-labs { display: grid; gap: .8rem; align-items: start; }
.mtto-lab { padding: .6rem .7rem .3rem; border-radius: var(--radius-s); background: var(--card-2); }
.mtto-lab-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .45rem; }
.mtto-lab-cabeza h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.mtto-pp { display: grid; gap: .45rem; }
.mtto-lab-plegable { padding: 0; }
.mtto-lab-plegable > summary { display: flex; align-items: center; gap: .3rem; min-height: 48px; padding: .3rem .8rem; cursor: pointer;
                               list-style: none; font-weight: 700; }
.mtto-lab-plegable[open] { padding-bottom: .3rem; }
.mtto-lab-plegable[open] > summary { margin-bottom: .2rem; }
.mtto-lab-plegable > .mtto-equipo { margin-left: .7rem; margin-right: .7rem; }
.mtto-lab-nombre { flex: 1; overflow-wrap: anywhere; }
.mtto-lab-numero { flex: none; min-width: 1.8rem; padding: .05rem .5rem; border-radius: 999px; background: var(--card); color: var(--muted);
                   font-size: .82rem; font-weight: 800; text-align: center; }

/* Un equipo: cuántos días (grande) · modelo, serie, fechas · botones; debajo lo que se abre */
.mtto-equipo { margin-bottom: .5rem; padding: .65rem .75rem; border-radius: var(--radius-s); background: var(--card);
               box-shadow: 0 0 0 1px var(--line); border-left: 5px solid var(--tono, var(--line)); scroll-margin: 140px; }
.mtto-equipo-linea { display: flex; align-items: flex-start; gap: .85rem; }
.mtto-cuando { padding-top: .15rem; }
.mtto-cuando span { display: block; }
.mtto-equipo-cuerpo { flex: 1; min-width: 0; }
.mtto-nombre { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.mtto-nombre:hover strong, .mtto-nombre:focus-visible strong { text-decoration: underline; }
.mtto-datos { display: flex; flex-wrap: wrap; gap: .3rem; margin: .35rem 0 .1rem; }
.mtto-chip { padding: .12rem .55rem; border-radius: 999px; background: var(--card-2); color: var(--muted); font-size: .8rem; font-weight: 600; }
.mtto-chip-fuerte { background: var(--tono-bg, var(--blue-bg)); color: var(--tono, var(--blue)); font-weight: 800; }
.mtto-chip-vieja { font-style: italic; }
.mtto-chip-tarea { background: var(--blue-bg); color: var(--blue); }
.mtto-acciones { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.boton.mtto-accion { width: auto; min-height: 44px; padding: .35rem .85rem; font-size: .9rem; border-radius: var(--radius-s); }
.mtto-accion[aria-expanded="true"] { border-color: var(--primary); background: var(--blue-bg); color: var(--primary); }
.mtto-mensaje .aviso { margin: .5rem 0 0; }
.mtto-panel { margin: .6rem 0 .1rem; padding: .7rem .85rem; border-radius: var(--radius-s); background: var(--card-2); }
.mtto-panel h4 { margin: 0 0 .5rem; font-size: .98rem; }
.mtto-pasos-lista { margin: 0; padding-left: 1.4rem; }
.mtto-pasos-lista li { margin: .25rem 0 .45rem; line-height: 1.35; }
.mtto-sin-pasos { margin: 0 0 .2rem; font-weight: 700; }
.mtto-programar-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
.mtto-frecuencias { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; padding: 0; border: 0; }
.mtto-frecuencias legend { margin-bottom: .4rem; padding: 0; }
label.mtto-frecuencia { display: flex; align-items: center; gap: .4rem; min-height: 44px; margin: 0; padding: .3rem .8rem;
                        border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-weight: 600; cursor: pointer; }
label.mtto-frecuencia:has(input:checked) { border-color: var(--primary); background: var(--blue-bg); color: var(--primary);
                                           box-shadow: inset 0 0 0 1px var(--primary); }
label.mtto-frecuencia input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--primary); }
.mtto-programar .fila { margin-top: .3rem; }

/* El recién programado brilla un momento en su grupo nuevo. */
.mtto-recien { animation: mtto-brillo 2.2s ease-out 1; }
@keyframes mtto-brillo { 0%, 30% { box-shadow: 0 0 0 3px var(--green), 0 8px 22px rgba(15, 122, 63, .25); } 100% { box-shadow: 0 0 0 1px var(--line); } }

@media (min-width: 1000px) {
  .mtto-labs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mtto-pp { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 799px) {
  .mtto-herramientas { grid-template-columns: 1fr; }
  .mtto-cuentas { grid-template-columns: repeat(2, 1fr); }
  .mtto-seccion { padding: 12px 12px 10px; }
  .mtto-equipo-linea { gap: .6rem; }
  .mtto-programar-campos { grid-template-columns: 1fr; }
  .mtto-acciones .mtto-accion { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mtto-recien { animation: none; box-shadow: 0 0 0 3px var(--green); }
  .mtto-plegable > summary .mtto-titulo::before, .mtto-lab-plegable > summary::before { transition: none; }
}

/* ——— 🔧 Equipos: "Lista | Por lugar" y una tarjeta por laboratorio/hospital ——— */
.eq-herramientas { display: grid; grid-template-columns: auto 1fr 240px; gap: .6rem 1rem; align-items: center; margin-bottom: 1rem; }
.eq-lugares { display: grid; gap: .6rem; align-items: start; }
.eq-lugar { background: var(--card); border-radius: var(--radius); box-shadow: var(--sombra); border-left: 5px solid var(--primary); }
.eq-lugar > summary { display: flex; align-items: center; gap: .6rem; min-height: 60px; padding: .55rem .9rem; cursor: pointer; list-style: none; }
.eq-lugar > summary::-webkit-details-marker { display: none; }
.eq-lugar > summary::after { content: '▸'; flex: none; color: var(--muted); transition: transform .15s ease; }
.eq-lugar[open] > summary::after { transform: rotate(90deg); }
.eq-lugar > summary:hover { background: var(--card-2); border-radius: 0 var(--radius) var(--radius) 0; }
.eq-lugar > summary:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; border-radius: 0 var(--radius) var(--radius) 0; }
.eq-lugar-icono { flex: none; font-size: 1.2rem; }
.eq-lugar-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.eq-lugar-nombre { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.eq-lugar-sede { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.eq-lugar-numero { flex: none; padding: .15rem .65rem; border-radius: 999px; background: var(--blue-bg); color: var(--blue);
                   font-size: .82rem; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.eq-filas { display: grid; gap: .45rem; padding: .1rem .7rem .75rem; }
.eq-fila { display: block; padding: .6rem .75rem; border-radius: var(--radius-s); background: var(--card-2); color: inherit;
           text-decoration: none; transition: background .15s; }
.eq-fila:hover { background: var(--blue-bg); }
.eq-fila:hover strong { text-decoration: underline; }
.eq-fila:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.eq-fila-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .7rem; }
.eq-fila-nombre { overflow-wrap: anywhere; }
.eq-fila-nombre .etiqueta-estado { margin-left: .4rem; }
.eq-sin-trabajos { font-size: .8rem; }
.eq-datos { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.eq-chip { padding: .12rem .55rem; border-radius: 999px; background: var(--card); color: var(--muted); font-size: .8rem; font-weight: 600; }
.eq-chip-fuerte { background: var(--blue-bg); color: var(--blue); font-weight: 800; }
.eq-chip-vieja { font-style: italic; }
@media (min-width: 1000px) {
  .eq-lugares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 799px) {
  .eq-herramientas { grid-template-columns: 1fr; }
  .eq-herramientas .segmento { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .eq-lugar > summary::after, .eq-fila { transition: none; }
}

/* 📄 Revisar el reporte (Tarea 12): antes de que salga el PDF al cliente */
.revisar-reporte { max-width: 860px; }
.revisar-datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem .9rem; margin: 0; }
.revisar-datos dt { font-weight: 700; color: var(--muted); }
.revisar-datos dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.revisar-texto { margin: .6rem 0; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--card); }
.revisar-texto textarea { min-height: 76px; resize: vertical; }
.revisar-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
label.revisar-casilla { display: flex; align-items: center; gap: .55rem; min-height: var(--tap); margin: 0; font-weight: 600; cursor: pointer; }
.revisar-casilla input { flex: none; width: 1.3rem; height: 1.3rem; margin: 0; accent-color: var(--green); }
.revisar-texto.fuera, .revisar-foto.fuera { opacity: .55; }
.revisar-texto.fuera textarea { text-decoration: line-through; }
.revisar-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .7rem; }
.revisar-foto { margin: 0; }
.revisar-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-s); background: var(--card-2); }
.revisar-foto figcaption { margin-top: .2rem; }
.revisar-botones { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.revisar-botones .boton { width: auto; flex: 1 1 200px; }