/* DANGOFE OS · Taller Power Wave · el buscador de piezas con «Crear pieza nueva» (T147, prefijo tpz-) · taller-piezas.css v1.0.1 · 2026-10-31
   Liquid glass, SIN sombras. «Noche azul» por [data-theme='dark']; el rojo de Power Wave sale solo con html[data-pw] (taller-rojo.css).
   Errores en naranja con su triángulo (nunca el rojo de la marca). Nada se anima solo. Responde a su ancho (container queries en .tpz-cuerpo). */
.tpz { --tpz-az: 11, 61, 214; --tpz-azul: #0b3dd6; --tpz-solido: #0b3dd6; --tpz-tinta: #0b1540; --tpz-tenue: #4a5680;
  --tpz-vidrio: rgba(255, 255, 255, .62); --tpz-capa: rgba(255, 255, 255, .5); --tpz-borde: rgba(15, 23, 42, .10); --tpz-borde2: rgba(15, 23, 42, .16);
  --tpz-ok: #15803d; --tpz-ok-s: rgba(22, 163, 74, .12); --tpz-amb: #9a5b00; --tpz-amb-s: rgba(217, 119, 6, .13);
  --tpz-err: 194, 65, 12; --tpz-err-txt: #c2410c; --tpz-info-s: rgba(11, 61, 214, .07); --tpz-velo: rgba(8, 14, 34, .45); --tpz-hoja: #f4f6fb;
  display: grid; gap: 10px; min-width: 0; color: var(--tpz-tinta); font-family: inherit; }
[data-theme='dark'] .tpz { --tpz-az: 141, 176, 255; --tpz-azul: #8db0ff; --tpz-solido: #3b6cf6; --tpz-tinta: #eef1ff; --tpz-tenue: #aab5e0;
  --tpz-vidrio: rgba(255, 255, 255, .07); --tpz-capa: rgba(255, 255, 255, .06); --tpz-borde: rgba(255, 255, 255, .12); --tpz-borde2: rgba(255, 255, 255, .18);
  --tpz-ok: #4ade80; --tpz-ok-s: rgba(74, 222, 128, .14); --tpz-amb: #fcd34d; --tpz-amb-s: rgba(251, 191, 36, .14);
  --tpz-err: 251, 146, 60; --tpz-err-txt: #fdba74; --tpz-info-s: rgba(141, 176, 255, .10); --tpz-velo: rgba(2, 6, 20, .62); --tpz-hoja: #0d1631; }
html[data-pw] .tpz { --tpz-az: var(--pw-hondo, 200, 25, 31); --tpz-azul: var(--pw-txt, #c8191f); --tpz-solido: var(--pw-solido, #ec3237); --tpz-info-s: var(--pw-suave, rgba(236, 50, 55, .09));
  --tpz-err: var(--pw-err, 194, 65, 12); --tpz-err-txt: var(--pw-err-txt, #c2410c); }
.tpz [hidden] { display: none !important; }
.tpz button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tpz svg { flex: none; }
.tpz :focus-visible { outline: 3px solid rgba(var(--tpz-az), .45); outline-offset: 2px; }

/* ---------- el campo de buscar ---------- */
.tpz-buscar { position: relative; display: flex; align-items: center; min-height: 48px; border-radius: 16px; border: 1px solid var(--tpz-borde2); background: var(--tpz-vidrio);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); }
.tpz-buscar:focus-within { border-color: rgba(var(--tpz-az), .6); }
.tpz-buscar__ico { display: grid; place-items: center; width: 44px; color: var(--tpz-tenue); }
.tpz-campo { flex: 1 1 auto; min-width: 0; height: 46px; border: 0; background: transparent; color: var(--tpz-tinta); font: inherit; font-size: 16px; outline: 0; padding: 0 4px 0 0; }
.tpz-campo::placeholder { color: var(--tpz-tenue); opacity: .8; }
.tpz-campo::-webkit-search-cancel-button { -webkit-appearance: none; }
.tpz-limpiar { width: 44px; height: 44px; border: 0; background: transparent; color: var(--tpz-tenue); display: grid; place-items: center; cursor: pointer; }

/* ---------- notas, error, sin señal ---------- */
.tpz-nota, .tpz-vacio, .tpz-cuenta, .tpz-sub { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--tpz-tenue); }
.tpz-nota { display: flex; align-items: center; gap: 8px; }
.tpz-vacio b { color: var(--tpz-tinta); }
.tpz-cuenta { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tpz-err { margin: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; padding: 10px 12px; border-radius: 14px;
  background: rgba(var(--tpz-err), .10); border: 1px solid rgba(var(--tpz-err), .35); color: var(--tpz-err-txt); font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.tpz-red { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 10px 12px; border-radius: 14px; background: var(--tpz-amb-s); color: var(--tpz-tinta); font-size: 13.5px; line-height: 1.4; }
.tpz-red__ico { color: var(--tpz-amb); padding-top: 1px; }
.tpz-red .tpz-enlace { grid-column: 2; justify-self: start; }
.tpz-enlace { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 4px; border: 0; background: none; color: var(--tpz-azul); font-weight: 700; font-size: 13.5px; cursor: pointer; }

/* ---------- la lista de piezas ---------- */
.tpz-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-radius: 16px; border: 1px solid var(--tpz-borde); background: var(--tpz-capa); overflow: hidden; }
.tpz-p { position: relative; min-width: 0; }
.tpz-lista > .tpz-p + .tpz-p::before { content: ''; position: absolute; top: 0; left: 60px; right: 0; height: 1px; background: var(--tpz-borde); }
.tpz-p__fila { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; padding: 12px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.tpz-p__fila:hover { background: rgba(var(--tpz-az), .05); }
.tpz-p.is-abierta { background: rgba(var(--tpz-az), .06); }
.tpz-p__foto { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; overflow: hidden; background: rgba(var(--tpz-az), .10); color: var(--tpz-azul); }
.tpz-p__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpz-p__t { min-width: 0; display: grid; gap: 3px; }
.tpz-p__nom { font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.tpz-p__sub { font-size: 12.5px; color: var(--tpz-tenue); line-height: 1.3; overflow-wrap: anywhere; }
.tpz-p__sub:empty { display: none; }
.tpz-p__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tpz-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.tpz-pill--ok { background: var(--tpz-ok-s); color: var(--tpz-ok); }
.tpz-pill--cero { background: var(--tpz-amb-s); color: var(--tpz-amb); }
.tpz-pill--rev { background: var(--tpz-info-s); color: var(--tpz-azul); }
.tpz-pill--precio { background: var(--tpz-capa); color: var(--tpz-tinta); border: 1px solid var(--tpz-borde); }
.tpz-p__abajo { display: grid; gap: 10px; padding: 0 12px 12px 64px; }
.tpz-cero { margin: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13px; line-height: 1.35; color: var(--tpz-amb); }

/* ---------- cantidad y botones ---------- */
.tpz-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tpz-cant { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--tpz-borde2); background: var(--tpz-vidrio); }
.tpz-cant__b { width: 44px; height: 44px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--tpz-azul); }
.tpz-cant__n { min-width: 28px; text-align: center; font-size: 17px; font-weight: 800; }
.tpz-btn { min-height: 46px; padding: 0 18px; border-radius: 14px; border: 1px solid transparent; font-size: 15px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; line-height: 1.2; }
.tpz-btn--pri { background: var(--tpz-solido); color: #fff !important; flex: 1 1 180px; }
.tpz-btn--sec { background: var(--tpz-vidrio); border-color: var(--tpz-borde2); color: var(--tpz-tinta); }
.tpz-btn--chico { min-height: 38px; padding: 0 12px; font-size: 13.5px; }
.tpz-btn[disabled] { opacity: .45; cursor: default; }
.tpz-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- crear pieza nueva ---------- */
.tpz-nueva { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 12px; border-radius: 16px; border: 1.5px dashed rgba(var(--tpz-az), .45);
  background: rgba(var(--tpz-az), .05); color: var(--tpz-tinta); text-align: left; cursor: pointer; }
.tpz-nueva--grande { border-style: solid; background: rgba(var(--tpz-az), .08); }
.tpz-nueva__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--tpz-solido); color: #fff; }
.tpz-nueva b { display: block; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.tpz-nueva small { display: block; font-size: 12.5px; color: var(--tpz-tenue); margin-top: 2px; }
.tpz-t { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.25; }
.tpz-f { display: grid; gap: 5px; min-width: 0; }
.tpz-f > span { font-size: 12.5px; font-weight: 800; color: var(--tpz-tenue); letter-spacing: .02em; }
.tpz-f > small { font-size: 12px; color: var(--tpz-tenue); }
.tpz-f input, .tpz-f textarea { width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--tpz-borde2); background: var(--tpz-vidrio);
  color: var(--tpz-tinta); font: inherit; font-size: 16px; }
.tpz-f textarea { resize: vertical; min-height: 64px; }
.tpz-f input:focus, .tpz-f textarea:focus { outline: 0; border-color: rgba(var(--tpz-az), .6); }
.tpz-f--fila { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.tpz-f2 { display: grid; gap: 10px; }
.tpz-info { margin: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; padding: 10px 12px; border-radius: 12px; background: var(--tpz-capa); border: 1px solid var(--tpz-borde);
  font-size: 13px; line-height: 1.4; color: var(--tpz-tenue); }
.tpz-info--rev { background: var(--tpz-info-s); color: var(--tpz-tinta); border-color: transparent; }
.tpz-info--rev svg { color: var(--tpz-azul); }
.tpz-pedido__nom { margin: 0; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.tpz-cuerpo { display: grid; gap: 10px; min-width: 0; container-type: inline-size; } /* el contenedor de las medidas va aquí y no en .tpz: así la hoja (fixed) cubre la pantalla */
.tpz-lista--parecidas .tpz-p--parecida { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 12px; padding: 12px; align-items: start; }
.tpz-lista--parecidas .tpz-p--parecida .tpz-btn { grid-column: 2; justify-self: start; }
.tpz-p--hoja { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 16px; border: 1px solid var(--tpz-borde); background: var(--tpz-capa); }

/* ---------- avisos (después de anotar) ---------- */
.tpz-avisos { display: grid; gap: 8px; }
.tpz-avisos:empty { display: none; }
.tpz-aviso { display: grid; grid-template-columns: 20px minmax(0, 1fr) 32px; gap: 8px; align-items: start; padding: 10px 6px 10px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; font-weight: 600; border: 1px solid transparent; }
.tpz-aviso > svg { margin-top: 1px; }
.tpz-aviso__x { width: 32px; height: 32px; margin-top: -6px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; opacity: .7; }
.tpz-aviso--ok { background: var(--tpz-ok-s); color: var(--tpz-ok); }
.tpz-aviso--conteo { background: var(--tpz-amb-s); color: var(--tpz-amb); }
.tpz-aviso--adicional { background: rgba(var(--tpz-err), .10); border-color: rgba(var(--tpz-err), .35); color: var(--tpz-err-txt); }
.tpz-aviso--por_revisar { background: var(--tpz-info-s); color: var(--tpz-azul); }
.tpz-aviso--ya_existia { background: var(--tpz-capa); border-color: var(--tpz-borde2); color: var(--tpz-tinta); }
.tpz-aviso--pedido { background: var(--tpz-info-s); color: var(--tpz-tinta); }
.tpz-aviso--pedido > svg { color: var(--tpz-azul); }

/* ---------- B · la hoja que sube ---------- */
.tpz-hoja { position: fixed; inset: 0; z-index: 9000; display: grid; align-items: end; justify-items: center; }
.tpz-hoja__velo { position: absolute; inset: 0; background: var(--tpz-velo); }
.tpz-hoja__caja { position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; box-sizing: border-box; border-radius: 24px 24px 0 0; background: var(--tpz-hoja);
  border: 1px solid var(--tpz-borde); border-bottom: 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px)); color: var(--tpz-tinta); }
.tpz-hoja__asa { display: block; width: 44px; height: 5px; border-radius: 999px; background: var(--tpz-borde2); margin: 0 auto 12px; }
.tpz-hoja__cuerpo { display: grid; gap: 12px; }
@media (min-width: 700px) { .tpz-hoja { align-items: center; } .tpz-hoja__caja { border-radius: 24px; border-bottom: 1px solid var(--tpz-borde); } }

/* ---------- C · tarjetas para el dedo ---------- */
.tpz[data-tpz-v='C'] .tpz-lista { gap: 8px; border: 0; background: transparent; border-radius: 0; overflow: visible; }
.tpz[data-tpz-v='C'] .tpz-lista > .tpz-p + .tpz-p::before { display: none; }
.tpz-p--tarjeta { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px 12px; padding: 12px; border-radius: 18px; border: 1px solid var(--tpz-borde); background: var(--tpz-capa); }
.tpz-p--tarjeta .tpz-p__foto { width: 48px; height: 48px; border-radius: 13px; }
.tpz-p--tarjeta .tpz-cero, .tpz-p--tarjeta .tpz-acc { grid-column: 1 / -1; }
.tpz-p--tarjeta.tpz-p--cero { border-color: rgba(217, 119, 6, .35); }
.tpz[data-tpz-v='C'] .tpz-acc .tpz-btn--pri { min-height: 50px; }

/* ---------- ancho de iPad (la pieza mide lo suyo, no la pantalla) ---------- */
@container (min-width: 560px) {
  .tpz-f2 { grid-template-columns: 1fr 1fr; }
  .tpz[data-tpz-v='C'] .tpz-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tpz[data-tpz-v='C'] .tpz-lista--parecidas { grid-template-columns: minmax(0, 1fr); }
  .tpz-p__fila { grid-template-columns: 44px minmax(0, 1fr); }
  .tpz-p__foto { width: 44px; height: 44px; }
  .tpz-acc .tpz-btn--pri { flex: 0 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .tpz * { transition: none !important; } }

/* v1.0.1 (31-oct, lo vio Dangofe en la ficha del Taller con los CSS reales): dentro del Taller los campos reciben el borde y el fondo
   de taller-panel.css (.tal-wrap.tp input[type=…], 0,3,1) y, dentro de una tarjeta, el cristal de taller-cristal.css con !important
   (su :not(#tal-modalzone *) le da un id: 1,6,2). Aquí los campos de la pieza vuelven a ser los suyos: el de buscar sin recuadro
   (la píldora .tpz-buscar es el borde) y los de «Crear pieza nueva» con su borde y su vidrio. Los dos :not(#…) solo suben la
   especificidad (2,…) para ganarle a esas dos reglas; no hay elementos con esos id. */
.tpz .tpz-buscar .tpz-campo:not(#tpz-a):not(#tpz-b) { height: 46px; min-height: 0; margin: 0; padding: 0 4px 0 0; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; background-color: transparent !important; box-shadow: none !important; color: var(--tpz-tinta); font: inherit; font-size: 16px; }
.tpz .tpz-f input:not(#tpz-a):not(#tpz-b), .tpz .tpz-f textarea:not(#tpz-a):not(#tpz-b) { border: 1px solid var(--tpz-borde2) !important; border-radius: 12px !important;
  background: var(--tpz-vidrio) !important; background-color: var(--tpz-vidrio) !important; box-shadow: none !important; color: var(--tpz-tinta); font: inherit; font-size: 16px; }
.tpz .tpz-f input:not(#tpz-a):not(#tpz-b):focus, .tpz .tpz-f textarea:not(#tpz-a):not(#tpz-b):focus { border-color: rgba(var(--tpz-az), .6) !important; }