/* DANGOFE OS · Portal del técnico del Taller: «Terminados» y «Abrir» en sus comisiones (T154, prefijo tpt-) · portal-terminados.css v1.0.0 · 2026-11-02
   Va sobre la Caja roja (portal-taller-caja-roja.css): usa sus valores --pid-* (vidrio blanco, capa de adentro, rojo). Sin ella, los suyos. Solo con html[data-pw]: Gerald no lo
   ve. Sin sombras; «Noche azul» por [data-theme='dark']; nada se mueve solo. Responde a su propio ancho (container queries en .tpt-res y en la hoja). */

html[data-pw] .tpt, html[data-pw] .tpt-hoja {
  --tpt-txt: var(--pid-txt, #0b1020); --tpt-txt2: var(--pid-txt2, #3d4458); --tpt-txt3: #5f6678; --tpt-rojo: var(--pid-rojo, #ec3237); --tpt-rojo-txt: var(--pid-rojo-txt, #c8191f);
  --tpt-bg: var(--pid-bg, rgba(255, 255, 255, .58)); --tpt-brillo: var(--pid-brillo, linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 50%));
  --tpt-bd: var(--pid-bd, rgba(255, 255, 255, .85)); --tpt-filtro: var(--pid-filtro, blur(20px) saturate(1.6));
  --tpt-dentro: var(--pid-dentro, rgba(255, 255, 255, .55)); --tpt-dentro-bd: var(--pid-dentro-bd, rgba(11, 16, 32, .08)); --tpt-raya: rgba(11, 16, 32, .09);
  --tpt-ok: #15803d; --tpt-dec: #a35f00; --tpt-can: #566072; color: var(--tpt-txt); }
html[data-pw][data-theme='dark'] .tpt, html[data-pw][data-theme='dark'] .tpt-hoja {
  --tpt-txt: var(--pid-txt, #eef1ff); --tpt-txt2: var(--pid-txt2, #b6bfdf); --tpt-txt3: #97a1c6; --tpt-rojo-txt: var(--pid-rojo-txt, #ff7b7f);
  --tpt-bg: var(--pid-bg, rgba(10, 18, 46, .66)); --tpt-brillo: var(--pid-brillo, none); --tpt-bd: var(--pid-bd, rgba(255, 255, 255, .14));
  --tpt-dentro: var(--pid-dentro, rgba(255, 255, 255, .06)); --tpt-dentro-bd: var(--pid-dentro-bd, rgba(255, 255, 255, .12)); --tpt-raya: rgba(255, 255, 255, .1);
  --tpt-ok: #4ade80; --tpt-dec: #fbbf24; --tpt-can: #a9b4cf; }

html[data-pw] .tpt { display: grid; gap: 8px; min-width: 0; margin-top: 16px; }
html[data-pw] .tpt *, html[data-pw] .tpt-hoja * { box-sizing: border-box; }
html[data-pw] .tpt small, html[data-pw] .tpt-hoja small { font-size: 12.5px; }
.tpt-ico { flex: none; }
html[data-pw] .tpt-tit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
html[data-pw] .tpt-nada { margin: 0; padding: 14px 16px; font-size: 13.5px; line-height: 1.4; color: var(--tpt-txt2); }
html[data-pw] .tpt--cero .tpt-nada { border-radius: 18px; background: var(--tpt-bg); border: 1px solid var(--tpt-bd); -webkit-backdrop-filter: var(--tpt-filtro); backdrop-filter: var(--tpt-filtro); }

/* un equipo */
html[data-pw] .tpt-res, html[data-pw] .tpt-caja, html[data-pw] .tpt-hoja__cuerpo { container: tptl / inline-size; min-width: 0; }
.tpt-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.tpt-it { position: relative; display: grid; gap: 3px; padding: 12px 14px; min-width: 0; }
.tpt-it + .tpt-it::before { content: ''; position: absolute; top: 0; left: 14px; right: 0; height: 1px; background: var(--tpt-raya); }
.tpt-it__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.tpt-num { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 700; color: var(--tpt-rojo-txt); }
.tpt-vip { font-size: 11.5px; font-weight: 800; color: var(--tpt-dec); }
.tpt-est { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px 9px 3px 7px; border-radius: 999px; border: 1px solid currentColor; font-size: 11.5px; font-weight: 800; line-height: 1.3; }
.tpt-est--ent { color: var(--tpt-ok); } .tpt-est--dec { color: var(--tpt-dec); } .tpt-est--can { color: var(--tpt-can); }
.tpt-it__eq { font-size: 14.5px; font-weight: 800; line-height: 1.3; color: var(--tpt-txt); overflow-wrap: anywhere; }
.tpt-cap { font-size: 12px; font-weight: 700; color: var(--tpt-txt3); white-space: nowrap; }
.tpt-it__cli { font-size: 13px; line-height: 1.35; color: var(--tpt-txt2); overflow-wrap: anywhere; }
.tpt-it__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; min-width: 0; }
.tpt-it__meta { display: grid; gap: 1px; font-size: 12.5px; line-height: 1.35; color: var(--tpt-txt3); min-width: 0; }
.tpt-it__meta b { font-weight: 800; color: var(--tpt-txt2); }
html[data-pw] .pt-wrap .tpt-abrir { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 800; text-decoration: none; }
html[data-pw] .tpt-hoja .tpt-abrir { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--tpt-dentro-bd); background: var(--tpt-dentro); color: var(--tpt-rojo-txt); font-size: 13px; font-weight: 800; text-decoration: none; }

/* buscador, filtros, ver más */
.tpt-buscar { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--tpt-dentro-bd); background: var(--tpt-dentro); color: var(--tpt-txt3); min-width: 0; }
html[data-pw] .tpt-buscar .tpt-campo:not(#tpt-a):not(#tpt-b) { flex: 1 1 auto; min-width: 0; width: 100%; height: 42px; margin: 0; padding: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0; color: var(--tpt-txt); font: inherit; font-size: 16px; }
.tpt-campo::-webkit-search-cancel-button { -webkit-appearance: none; }
.tpt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tpt-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--tpt-dentro-bd); background: var(--tpt-dentro); color: var(--tpt-txt2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.tpt-chip b { font-weight: 800; }
.tpt-chip.is-on { background: var(--tpt-rojo); border-color: var(--tpt-rojo); color: #fff; }
.tpt-mas { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 46px; border: 0; border-top: 1px solid var(--tpt-raya); background: transparent; color: var(--tpt-rojo-txt); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.tpt-mas small { font-weight: 600; color: var(--tpt-txt3); }

/* A · Plegada */
.tpt-barra { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 28px; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 12px 14px; border-radius: 20px; border: 1px solid var(--tpt-bd); background-color: var(--tpt-bg); background-image: var(--tpt-brillo); -webkit-backdrop-filter: var(--tpt-filtro); backdrop-filter: var(--tpt-filtro); color: var(--tpt-txt); font: inherit; text-align: left; cursor: pointer; }
.tpt-barra__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--pid-caja, var(--tpt-rojo)); border: 1px solid var(--pid-caja-bd, transparent); color: #fff; }
.tpt-barra__t { display: grid; gap: 1px; min-width: 0; }
.tpt-barra__t b { font-size: 15.5px; font-weight: 800; }
.tpt-barra__t small { color: var(--tpt-txt3); }
.tpt-barra__n { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--tpt-dentro-bd); background: var(--tpt-dentro); font-size: 13px; font-weight: 800; color: var(--tpt-txt); font-variant-numeric: tabular-nums; }
.tpt-barra__chev { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tpt-dentro); color: var(--tpt-rojo-txt); }
.tpt.is-ab .tpt-barra__chev svg { transform: rotate(180deg); }
.tpt-cuerpo { display: grid; gap: 10px; padding: 12px; border-radius: 20px; border: 1px solid var(--tpt-bd); background-color: var(--tpt-bg); background-image: var(--tpt-brillo); -webkit-backdrop-filter: var(--tpt-filtro); backdrop-filter: var(--tpt-filtro); min-width: 0; }
.tpt-cuerpo .tpt-res { border-radius: 14px; border: 1px solid var(--tpt-dentro-bd); background: var(--tpt-dentro); overflow: hidden; }

/* B · Por mes y C · Los últimos */
.tpt-caja { display: grid; gap: 10px; padding: 12px; border-radius: 20px; border: 1px solid var(--tpt-bd); background-color: var(--tpt-bg); background-image: var(--tpt-brillo); -webkit-backdrop-filter: var(--tpt-filtro); backdrop-filter: var(--tpt-filtro); }
.tpt--B .tpt-res { display: grid; gap: 8px; }
.tpt-mes { border-radius: 14px; border: 1px solid var(--tpt-dentro-bd); background: var(--tpt-dentro); overflow: hidden; }
.tpt-mes__cab { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 14px; border: 0; background: transparent; color: var(--tpt-txt); font: inherit; text-align: left; cursor: pointer; }
.tpt-mes__cab b { font-size: 14.5px; font-weight: 800; }
.tpt-mes__cab span { font-size: 12.5px; color: var(--tpt-txt3); }
.tpt-mes__cab svg { color: var(--tpt-rojo-txt); }
.tpt-mes.is-ab .tpt-mes__cab svg { transform: rotate(180deg); }
.tpt-mes .tpt-lista { border-top: 1px solid var(--tpt-raya); }
.tpt--B .tpt-res > .tpt-lista { border-radius: 14px; border: 1px solid var(--tpt-dentro-bd); background: var(--tpt-dentro); }
.tpt--C .tpt-caja > .tpt-lista { border-radius: 14px; border: 1px solid var(--tpt-dentro-bd); background: var(--tpt-dentro); }
.tpt-mas--todos { border: 1px solid var(--pid-caja-bd, var(--tpt-rojo)); border-radius: 999px; background: var(--pid-caja, var(--tpt-rojo)); color: #fff; }
.tpt-mas--todos small { color: rgba(255, 255, 255, .9); }

/* C · la hoja (en <body>: trae sus valores) */
html[data-pw] .tpt-hoja { --tpt-txt: #0b1020; --tpt-txt2: #3d4458; --tpt-rojo: #ec3237; --tpt-rojo-txt: #c8191f; --tpt-dentro: rgba(255, 255, 255, .6); --tpt-dentro-bd: rgba(11, 16, 32, .1);
  position: fixed; inset: 0; z-index: 2147483000; display: grid; align-items: end; background: rgba(8, 14, 34, .5); font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; }
html[data-pw][data-theme='dark'] .tpt-hoja { --tpt-txt: #eef1ff; --tpt-txt2: #b6bfdf; --tpt-rojo-txt: #ff7b7f; --tpt-dentro: rgba(255, 255, 255, .06); --tpt-dentro-bd: rgba(255, 255, 255, .12); background: rgba(2, 6, 20, .66); }
.tpt-hoja__panel { display: grid; grid-template-rows: auto minmax(0, 1fr); justify-self: center; width: min(760px, 100%); height: calc(100% - 28px); border: 1px solid rgba(255, 255, 255, .7); border-bottom: 0; border-radius: 24px 24px 0 0; background: rgba(244, 247, 252, .92); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); color: var(--tpt-txt); padding-bottom: env(safe-area-inset-bottom, 0px); }
[data-theme='dark'] .tpt-hoja__panel { background: rgba(10, 18, 48, .92); border-color: rgba(255, 255, 255, .14); }
.tpt-hoja__cab { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--tpt-raya); }
.tpt-hoja__cab b { font-size: 16px; font-weight: 800; }
.tpt-hoja__cab span { flex: 1 1 auto; font-size: 13px; color: var(--tpt-txt3); }
.tpt-hoja__x { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--tpt-dentro-bd); background: transparent; color: var(--tpt-txt); cursor: pointer; }
.tpt-hoja__cuerpo { display: grid; align-content: start; gap: 10px; padding: 12px; overflow: auto; overscroll-behavior: contain; min-height: 0; }
.tpt-hoja .tpt-res { border-radius: 14px; border: 1px solid var(--tpt-dentro-bd); background: var(--tpt-dentro); overflow: hidden; }

/* «Abrir» en «Mis comisiones»: al final de la fila, fuera de .pt-cart__top (no despliega la tarjeta) */
html[data-pw] .pt-cart:has(> .tpt-abrir--cart) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
html[data-pw] .pt-cart:has(> .tpt-abrir--cart) > .pt-cart__top { flex-wrap: wrap; min-width: 0; gap: 4px 10px; }
html[data-pw] .pt-cart:has(> .tpt-abrir--cart) > .pt-cart__det { grid-column: 1 / -1; }

/* angosto: la fecha arriba y «Abrir» a todo lo ancho no hace falta: se queda a la derecha; la barra sin su línea de apoyo */
@container tptl (max-width: 330px) {
  .tpt-it { padding: 12px; }
  .tpt-it__pie { align-items: flex-end; }
}