/* ============================================================
   DANGOFE OS · TALLER · MIS PENDIENTES DENTRO DE «NOTIFICACIONES DEL TALLER» (prefijo tpd-) · T74 · v2 · 2026-10-20 · chat de Diseño
   Va con taller-pendientes.js, dentro de .tal-card.tal-notif (los tokens --tp-* son los de taller-panel.css). Sin sombras;
   la hoja (versión C) sin desenfoque de fondo; claro y «Noche azul» por [data-theme='dark'].
   A · Pestaña «Avisos | Pendientes» · B · Bloque arriba de los avisos · C · «Administrar pendientes» que abre una hoja.
   v2: tareas de aviso (ámbar), «Lo nuevo · versión», «Lo vio el sistema», línea de archivadas.
   ============================================================ */
.tpd { --tpd-az: var(--tp-az, 3, 38, 155); --tpd-cel: var(--tp-cel, 53, 146, 207); --tpd-ver: var(--tp-ver, 29, 154, 91); --tpd-amb: var(--tp-amb, 194, 117, 0); --tpd-roj: var(--tp-roj, 192, 57, 43); --tpd-mor: 124, 58, 237;
  --tpd-txt3: var(--tp-txt3, var(--text-secondary, #5b6880)); --tpd-borde: var(--tp-borde, var(--glass-border, rgba(10, 22, 51, .09))); --tpd-card2: var(--tp-card2, var(--glass-bg-input, rgba(10, 22, 51, .04))); --tpd-card3: var(--tp-card3, rgba(10, 22, 51, .07)); --tpd-azul: var(--tp-azul, #03269b);
  padding: 0 14px; }
.tpd *, .tpd *::before, .tpd *::after { box-sizing: border-box; }
/* la cuenta en la cabecera de la tarjeta (la pone montar) */
.tal-notif__cab .tpd-cuenta { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: rgba(var(--tp-amb, 194, 117, 0), .14); color: #9a5b00; font-size: 11.5px; font-weight: 800; white-space: nowrap; margin-left: 6px; }
[data-theme='dark'] .tal-notif__cab .tpd-cuenta { color: #fcd34d; }
/* lista */
.tpd-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tpd-grupo { display: flex; align-items: center; gap: 5px; padding: 8px 2px 0; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tpd-txt3); }
.tpd-grupo svg { width: 13px; height: 13px; }
.tpd-grupo--alerta { color: #9a5b00; }
.tpd-grupo--nuevo { color: var(--tpd-azul); }
[data-theme='dark'] .tpd-grupo--alerta { color: #fcd34d; }
[data-theme='dark'] .tpd-grupo--nuevo { color: #8fb4ff; }
.tpd-it { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--tpd-borde); border-left: 3px solid rgb(var(--tpd-az)); background: var(--tpd-card2); }
.tpd-it--hacer { border-left-color: rgb(var(--tpd-amb)); }
.tpd-it--elegir { border-left-color: rgb(var(--tpd-mor)); }
.tpd-it--probar { border-left-color: rgb(var(--tpd-cel)); }
.tpd-it--alerta { border-left-color: rgb(var(--tpd-amb)); border-color: rgba(var(--tpd-amb), .35); background: rgba(var(--tpd-amb), .08); }
.tpd-it__tipo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; background: rgba(var(--tpd-az), .1); color: rgb(var(--tpd-az)); }
.tpd-it__tipo svg { width: 12px; height: 12px; }
.tpd-it--hacer .tpd-it__tipo, .tpd-it--alerta .tpd-it__tipo { background: rgba(var(--tpd-amb), .14); color: #9a5b00; }
.tpd-it--alerta .tpd-it__tipo { background: rgb(var(--tpd-amb)); color: #fff; }
.tpd-it--elegir .tpd-it__tipo { background: rgba(var(--tpd-mor), .12); color: #6d28d9; }
.tpd-it--probar .tpd-it__tipo { background: rgba(var(--tpd-cel), .14); color: #1d6fa5; }
[data-theme='dark'] .tpd-it__tipo { color: #8fb4ff; }
[data-theme='dark'] .tpd-it--hacer .tpd-it__tipo { color: #fcd34d; }
[data-theme='dark'] .tpd-it--alerta .tpd-it__tipo { background: #f6b64a; color: #1a1200; }
[data-theme='dark'] .tpd-it--elegir .tpd-it__tipo { color: #c4b5fd; }
[data-theme='dark'] .tpd-it--probar .tpd-it__tipo { color: #7dd3fc; }
/* la versión en la que llegó (solo las nuevas) */
.tpd-it__ver { display: inline-flex; align-items: center; gap: 4px; justify-self: start; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; white-space: nowrap; background: rgba(var(--tpd-az), .08); color: var(--tpd-azul); }
.tpd-it__ver svg { width: 11px; height: 11px; }
[data-theme='dark'] .tpd-it__ver { color: #8fb4ff; }
.tpd-it__txt { grid-column: 1 / -1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tpd-it__txt b { font-size: 13.5px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.tpd-it__txt small { font-size: 12px; color: var(--tpd-txt3); line-height: 1.35; overflow-wrap: anywhere; }
.tpd-it__acc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tpd-b { appearance: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--tpd-borde); background: var(--tpd-card3); color: inherit; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tpd-b svg { width: 14px; height: 14px; }
.tpd-b[disabled] { opacity: .6; cursor: default; }
.tpd-b:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--tpd-cel), .35); }
.tpd-b--ir { background: rgb(var(--tpd-az)); border-color: transparent; color: #fff; }
[data-theme='dark'] .tpd-b--ir { background: #2e5bd9; }
.tpd-b--aviso { background: #b45309; }
[data-theme='dark'] .tpd-b--aviso { background: #f6b64a; color: #1a1200; }
.tpd-b--ok { color: #15724a; background: rgba(var(--tpd-ver), .12); border-color: rgba(var(--tpd-ver), .35); }
[data-theme='dark'] .tpd-b--ok { color: #7ee0b0; }
.tpd-it__ok { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: #15724a; }
[data-theme='dark'] .tpd-it__ok { color: #7ee0b0; }
.tpd-it__ok--auto { color: #1d6fa5; }
[data-theme='dark'] .tpd-it__ok--auto { color: #7dd3fc; }
.tpd-it__ok svg { width: 13px; height: 13px; }
.tpd-it.is-hecha { opacity: .7; }
.tpd-it.is-hecha .tpd-it__txt b { text-decoration: line-through; text-decoration-thickness: 1px; }
.tpd-it__err { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 5px; margin: 0; font-size: 12px; font-weight: 700; color: #b42318; }
.tpd-it__err svg { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.tpd-vacio { display: flex; align-items: center; gap: 7px; margin: 0; padding: 10px 2px; font-size: 13px; font-weight: 600; color: #15724a; }
.tpd-vacio svg { width: 15px; height: 15px; }
[data-theme='dark'] .tpd-vacio { color: #7ee0b0; }
.tpd-mas { appearance: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--tpd-azul); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.tpd-mas svg { width: 14px; height: 14px; }
.tpd-hechas { margin-top: 10px; }
.tpd-hechas summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--tpd-txt3); padding: 4px 2px; }
.tpd-hechas summary::-webkit-details-marker { display: none; }
.tpd-hechas summary svg { width: 13px; height: 13px; }
.tpd-hechas summary span { padding: 1px 7px; border-radius: 999px; background: var(--tpd-card3); font-size: 11px; }
.tpd-hechas .tpd-lista { margin-top: 6px; }
/* las pruebas viejas que se guardaron solas: una línea discreta, sin lista */
.tpd-arch { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; padding: 0 2px; font-size: 11.5px; line-height: 1.4; color: var(--tpd-txt3); opacity: .85; }
.tpd-arch svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
/* ---------- A · Pestaña ---------- */
.tpd-tabs { display: flex; gap: 4px; padding: 10px 0 0; border-bottom: 1px solid var(--tpd-borde); }
.tpd-tab { appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 10px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--tpd-txt3); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.tpd-tab svg { width: 14px; height: 14px; }
.tpd-tab i { font-style: normal; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: rgba(var(--tpd-amb), .16); color: #9a5b00; font-size: 11px; font-weight: 800; text-align: center; }
[data-theme='dark'] .tpd-tab i { color: #fcd34d; }
.tpd-tab.is-on { color: inherit; border-bottom-color: rgb(var(--tpd-az)); }
.tpd-panel { padding: 10px 0 12px; }
.tpd-panel[hidden] { display: none; }
.tal-notif.is-tpd-pend > .tal-sub, .tal-notif.is-tpd-pend > .tal-notif__filtros, .tal-notif.is-tpd-pend > .tal-notif__lista, .tal-notif.is-tpd-pend > .tal-muted, .tal-notif.is-tpd-pend > .tal-cotform__err { display: none; }
/* ---------- B · Bloque arriba ---------- */
.tpd-bloque { margin: 10px 0 2px; padding: 10px 12px 12px; border-radius: 16px; border: 1px solid var(--tpd-borde); background: var(--tpd-card2); }
.tpd-bloque__cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13.5px; }
.tpd-bloque__cab svg { width: 16px; height: 16px; color: var(--tpd-azul); }
.tpd-bloque__cab b { font-weight: 800; }
.tpd-bloque__cab span { margin-left: auto; font-size: 12px; font-weight: 700; color: #9a5b00; }
[data-theme='dark'] .tpd-bloque__cab span { color: #fcd34d; }
.tpd-bloque .tpd-it { background: var(--tpd-card3); }
.tpd-bloque .tpd-it--alerta { background: rgba(var(--tpd-amb), .1); }
/* ---------- C · Botón + hoja ---------- */
.tpd-fila { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 4px; }
.tpd-admin { appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--tpd-borde); background: var(--tpd-card2); color: inherit; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; text-align: left; }
.tpd-admin > svg { width: 18px; height: 18px; color: var(--tpd-azul); flex: none; }
.tpd-admin > svg:last-child { margin-left: auto; }
.tpd-admin span i { font-style: normal; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(var(--tpd-amb), .16); color: #9a5b00; font-size: 11.5px; }
[data-theme='dark'] .tpd-admin span i { color: #fcd34d; }
.tpd-fila__sig { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 4px; font-size: 12.5px; color: var(--tpd-txt3); }
.tpd-fila__sig b { color: inherit; font-weight: 700; }
.tpd-fila__sig svg { width: 14px; height: 14px; }
.tpd-hoja { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 8800; display: flex; align-items: flex-end; justify-content: center; background: rgba(10, 22, 51, .42); animation: tpd-aparece .2s ease both;
  --tph-tinta: #0a1633; --tph-tenue: #5b6880; --tph-vidrio: rgba(255, 255, 255, .96); --tph-borde: rgba(255, 255, 255, .9); --tph-linea: rgba(10, 22, 51, .09); --tph-campo: rgba(10, 22, 51, .05);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--tph-tinta); }
[data-theme='dark'] .tpd-hoja, .tpd-hoja.is-noche { --tph-tinta: #f2f5fb; --tph-tenue: #a9b4c9; --tph-vidrio: rgba(12, 22, 60, .96); --tph-borde: rgba(140, 170, 255, .28); --tph-linea: rgba(255, 255, 255, .11); --tph-campo: rgba(255, 255, 255, .06); background: rgba(2, 6, 24, .62); }
.tpd-hoja.is-fuera { opacity: 0; transition: opacity .2s ease; pointer-events: none; }
@keyframes tpd-aparece { from { opacity: 0; } to { opacity: 1; } }
.tpd-hoja *, .tpd-hoja *::before, .tpd-hoja *::after { box-sizing: border-box; }
.tpd-hoja__caja { position: relative; width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 12px; padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 30px 30px 0 0; border: 1px solid var(--tph-borde); border-bottom: 0; background: var(--tph-vidrio); transform: translateY(24px); animation: tpd-sube .3s cubic-bezier(.2, .9, .25, 1) both; }
.tpd-hoja__caja::-webkit-scrollbar { display: none; }
@keyframes tpd-sube { to { transform: translateY(0); } }
.tpd-hoja__asa { width: 42px; height: 5px; margin: -8px auto 0; border-radius: 999px; background: var(--tph-linea); }
.tpd-hoja__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tpd-hoja__cab > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tpd-hoja__ojal { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tph-tenue); }
.tpd-hoja__ojal svg { width: 12px; height: 12px; }
.tpd-hoja__cab b { font-size: 21px; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; }
.tpd-hoja__cab small { font-size: 13px; color: var(--tph-tenue); }
.tpd-hoja__x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--tph-linea); background: var(--tph-campo); color: var(--tph-tenue); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tpd-hoja__x svg { width: 15px; height: 15px; }
.tpd-hoja .tpd-it { --tpd-borde: var(--tph-linea); --tpd-card2: var(--tph-campo); --tpd-card3: var(--tph-campo); --tpd-txt3: var(--tph-tenue); }
.tpd-hoja .tpd-lista, .tpd-hoja .tpd-grupo, .tpd-hoja .tpd-hechas, .tpd-hoja .tpd-vacio, .tpd-hoja .tpd-b, .tpd-hoja .tpd-mas, .tpd-hoja .tpd-arch, .tpd-hoja .tpd-it__ver { --tpd-txt3: var(--tph-tenue); --tpd-borde: var(--tph-linea); --tpd-card3: var(--tph-campo); --tpd-az: 3, 38, 155; --tpd-cel: 53, 146, 207; --tpd-ver: 29, 154, 91; --tpd-amb: 194, 117, 0; --tpd-mor: 124, 58, 237; --tpd-azul: #03269b; }
.tpd-hoja.is-noche .tpd-grupo--nuevo, .tpd-hoja.is-noche .tpd-it__ver { --tpd-azul: #8fb4ff; }
@media (min-width: 700px) { .tpd-hoja { align-items: center; padding: 20px; } .tpd-hoja__caja { border-radius: 28px; border-bottom: 1px solid var(--tph-borde); max-height: 88vh; } .tpd-hoja__asa { display: none; } }
@media (prefers-reduced-motion: reduce) { .tpd-hoja, .tpd-hoja__caja { animation: none; transform: none; opacity: 1; } }
/* la cabecera de la tarjeta tiene 4 columnas (ícono · título · nuevas · flecha); con la cuenta de pendientes pasa a 5 sin romperse */
.tal-wrap.tp .tal-notif__cab:has(.tpd-cuenta) { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }