/* ============================================================ DANGOFE OS · Taller de inversores · piel «Tablero» (v2, 2026-10-13) v7 (2026-10-20): tarjetas de la Caja apiladas y centradas (sin la columna del ícono que solo tiene Ingresos); números del inventario en tarjetitas centradas y filtros centrados; variantes B/C por .tal-wrap.tp[data-tpc]. Calcada de la foto de referencia de Karla: resumen arriba, ficha con pestañas, pasos a la izquierda, diagnóstico y mensajería lado a lado, caja e ingresos a la derecha, servicios recientes abajo. Claro SIN SOMBRAS · «Noche azul» con bordes de luz · efectos 3D animados (data-tp-fx = relieve | flotante | vivo). Solo viste el módulo real: no renombra ids ni clases, no toca acciones ni permisos. Se carga después de taller.css. El guion taller-panel.js acomoda los bloques. ============================================================ */ /* ---------- tokens ---------- */ .tal-wrap.tp { --tp-az: 3,38,155; --tp-cel: 59,130,246; --tp-mor: 139,92,246; --tp-ver: 34,197,94; --tp-amb: 245,158,11; --tp-roj: 239,68,68; --tp-card: rgba(255,255,255,.76); --tp-card2: rgba(255,255,255,.62); --tp-card3: rgba(255,255,255,.9); --tp-borde: rgba(3,38,155,.10); --tp-borde2: rgba(3,38,155,.18); --tp-txt: #0b1540; --tp-txt2: #4a5680; --tp-txt3: #7a85a8; --tp-azul: #0b3dd6; --tp-tile: rgba(59,130,246,.13); --tp-r: 18px; --tp-r2: 14px; --tp-r3: 11px; --tp-blur: 14px; color: var(--tp-txt); font-family: var(--font-family-ui, 'Plus Jakarta Sans', system-ui, sans-serif); font-size: 13.5px; line-height: 1.4; padding-bottom: 24px; } [data-theme='dark'] .tal-wrap.tp { --tp-card: rgba(8,16,46,.70); --tp-card2: rgba(14,24,66,.58); --tp-card3: rgba(18,30,78,.72); --tp-borde: rgba(120,150,255,.14); --tp-borde2: rgba(120,150,255,.26); --tp-txt: #eef1ff; --tp-txt2: #aab5e0; --tp-txt3: #7d89b8; --tp-azul: #8db0ff; --tp-tile: rgba(59,130,246,.24); } .tal-wrap.tp .tal-card, .tal-wrap.tp .glass-card, .tal-wrap.tp .glass-soft { background: var(--tp-card); border: 1px solid var(--tp-borde); border-radius: var(--tp-r); box-shadow: none; -webkit-backdrop-filter: blur(var(--tp-blur)); backdrop-filter: blur(var(--tp-blur)); } .tal-wrap.tp .tal-card { padding: 14px 16px; } .tal-wrap.tp h2, .tal-wrap.tp h3, .tal-wrap.tp h4 { color: var(--tp-txt); } .tal-wrap.tp .tal-muted, .tal-wrap.tp .tal-sub { color: var(--tp-txt2); } .tal-wrap.tp .tal-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-txt3); display: inline-flex; gap: 5px; align-items: center; } .tal-wrap.tp .tal-lbl svg { width: 12px; height: 12px; } /* botones: cápsulas */ .tal-wrap.tp .tal-btn { border-radius: 999px; border: 1px solid var(--tp-borde2); background: var(--tp-card3); color: var(--tp-txt); font-weight: 700; font-size: 12.5px; padding: 7px 13px; box-shadow: none; display: inline-flex; align-items: center; gap: 6px; } .tal-wrap.tp .tal-btn--primary, .tal-wrap.tp .tal-btn.tal-btn--primary { background: linear-gradient(135deg, rgb(var(--tp-az)), #1d4ed8); border-color: transparent; color: #fff; } [data-theme='dark'] .tal-wrap.tp .tal-btn--primary { background: linear-gradient(135deg, #2563eb, #3b82f6); } .tal-wrap.tp .tal-btn--xs { padding: 5px 10px; font-size: 12px; } .tal-wrap.tp .tal-linkbtn { color: var(--tp-azul); font-weight: 700; } .tal-wrap.tp .tal-badge { border-radius: 999px; background: rgba(var(--tp-cel),.14); color: var(--tp-azul); font-size: 11px; font-weight: 800; padding: 2px 8px; } .tal-wrap.tp .tal-pill { border-radius: 999px; font-size: 11px; font-weight: 700; padding: 3px 9px; } .tal-wrap.tp input[type='text'], .tal-wrap.tp input[type='search'], .tal-wrap.tp input[type='email'], .tal-wrap.tp input[type='number'], .tal-wrap.tp input[type='date'], .tal-wrap.tp select, .tal-wrap.tp textarea { border-radius: 12px; border: 1px solid var(--tp-borde2); background: var(--tp-card3); color: var(--tp-txt); box-shadow: none; font-family: inherit; } /* ---------- 1 · cabecera ---------- */ .tal-wrap.tp > header.tal-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin: 0 0 12px; background: var(--tp-card); border: 1px solid var(--tp-borde); border-radius: var(--tp-r); -webkit-backdrop-filter: blur(var(--tp-blur)); backdrop-filter: blur(var(--tp-blur)); } .tal-wrap.tp .tp-tile { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--tp-tile); color: var(--tp-azul); flex: none; transform: translateZ(14px); } .tal-wrap.tp .tp-tile svg { width: 20px; height: 20px; } .tal-wrap.tp .tp-cab { flex: 1 1 auto; min-width: 0; } .tal-wrap.tp .tp-cab h2 { margin: 0; font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 8px; letter-spacing: -.01em; } .tal-wrap.tp .tp-cab .tal-refrescar { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--tp-borde2); background: var(--tp-card3); color: var(--tp-txt2); display: inline-grid; place-items: center; padding: 0; } .tal-wrap.tp .tp-cab .tal-refrescar svg { width: 13px; height: 13px; } .tal-wrap.tp .tp-cab p.tal-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--tp-txt2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tal-wrap.tp .tp-miga { font-size: 11.5px; color: var(--tp-txt3); margin-top: 3px; } .tal-wrap.tp .tp-cab-acc { flex: none; display: flex; gap: 8px; align-items: center; } .tal-wrap.tp .tp-cab-acc .tal-actions { margin: 0; } /* ---------- 2 · todo lo pendiente (resumen) ---------- */ .tal-wrap.tp #tal-mini { margin: 0 0 12px; } .tal-wrap.tp .tal-resumen { padding: 12px 16px 12px; } .tal-wrap.tp .tal-resumen__head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; } .tal-wrap.tp .tal-resumen__head h3 { font-size: 14.5px; font-weight: 800; margin: 0; display: flex; gap: 8px; align-items: center; } .tal-wrap.tp .tal-resumen__head h3 svg { width: 16px; height: 16px; color: var(--tp-azul); } .tal-wrap.tp .tal-resumen__stamp { border-radius: 999px; background: rgba(var(--tp-ver),.14); color: #15803d; font-size: 11.5px; font-weight: 700; padding: 3px 10px; display: inline-flex; gap: 6px; align-items: center; } [data-theme='dark'] .tal-wrap.tp .tal-resumen__stamp { color: #86efac; } .tal-wrap.tp .tal-resumen__dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; } .tal-wrap.tp .tal-kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; perspective: 900px; } .tal-wrap.tp .tal-kpi--azul { --kpi-rgb: 59,130,246; } .tal-wrap.tp .tal-kpi--morado { --kpi-rgb: 139,92,246; } .tal-wrap.tp .tal-kpi--verde { --kpi-rgb: 34,197,94; } .tal-wrap.tp .tal-kpi--amarillo { --kpi-rgb: 245,158,11; } .tal-wrap.tp .tal-kpi--rojo { --kpi-rgb: 239,68,68; } .tal-wrap.tp .tal-kpi { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px 12px 11px; min-height: 0; border-radius: 14px; border: 1px solid rgba(var(--kpi-rgb), .34); text-align: left; cursor: pointer; overflow: hidden; background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(var(--kpi-rgb), .12)); color: var(--tp-txt); box-shadow: none; transform-style: preserve-3d; transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .3s; transform: perspective(700px) rotateX(var(--tp-rx, 0deg)) rotateY(var(--tp-ry, 0deg)) translateY(var(--tp-ty, 0px)); } .tal-wrap.tp .tal-kpi:hover { --tp-ty: -3px; border-color: rgba(var(--kpi-rgb), .6); } .tal-wrap.tp .tal-kpi__glow { display: none; } .tal-wrap.tp .tal-kpi__ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; background: rgba(var(--kpi-rgb), .16); color: rgb(var(--kpi-rgb)); transform: translateZ(22px); } .tal-wrap.tp .tal-kpi__ico svg { width: 18px; height: 18px; } .tal-wrap.tp .tal-kpi__body { display: flex; flex-direction: column; min-width: 0; transform: translateZ(10px); } .tal-wrap.tp .tal-kpi__num { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.02em; } .tal-wrap.tp .tal-kpi__ttl { font-size: 12.5px; color: var(--tp-txt2); margin-top: 4px; line-height: 1.25; } .tal-wrap.tp .tal-kpi__act { font-size: 12px; font-weight: 700; color: rgb(var(--kpi-rgb)); margin-top: 7px; display: inline-flex; gap: 3px; align-items: center; } .tal-wrap.tp .tal-kpi__act svg { width: 12px; height: 12px; } [data-theme='dark'] .tal-wrap.tp .tal-kpi { background: radial-gradient(120% 90% at 0% 0%, rgba(var(--kpi-rgb), .30), transparent 58%), rgba(8,16,46,.72); border-color: rgba(var(--kpi-rgb), .55); } [data-theme='dark'] .tal-wrap.tp .tal-kpi::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(135deg, rgba(var(--kpi-rgb), .95), rgba(var(--kpi-rgb), .20) 60%, rgba(var(--kpi-rgb), .6)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } [data-theme='dark'] .tal-wrap.tp .tal-kpi__ico { background: rgba(var(--kpi-rgb), .22); } [data-theme='dark'] .tal-wrap.tp .tal-kpi__act { color: rgb(var(--kpi-rgb)); filter: brightness(1.25); } /* fila de pendientes sueltos bajo los KPI */ .tal-wrap.tp .tp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .tal-wrap.tp .tp-chip, .tal-wrap.tp .tal-kpi-com { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--tp-borde2); background: var(--tp-card3); color: var(--tp-txt); margin: 0; cursor: pointer; } .tal-wrap.tp .tp-chip svg, .tal-wrap.tp .tal-kpi-com svg { width: 14px; height: 14px; } .tal-wrap.tp .tp-chip--amb { background: rgba(var(--tp-amb), .14); border-color: rgba(var(--tp-amb), .45); color: #92400e; } [data-theme='dark'] .tal-wrap.tp .tp-chip--amb { color: #fcd34d; } .tal-wrap.tp .tp-chip--az { background: rgba(var(--tp-cel), .12); border-color: rgba(var(--tp-cel), .4); color: var(--tp-azul); } .tal-wrap.tp .tal-kpi-com { background: rgba(var(--tp-ver), .12); border-color: rgba(var(--tp-ver), .4); cursor: default; } .tal-wrap.tp .tal-kpi-com svg { color: #15803d; } [data-theme='dark'] .tal-wrap.tp .tal-kpi-com svg { color: #86efac; } .tal-wrap.tp .tal-kpi-com strong { font-weight: 800; } .tal-wrap.tp .tal-kpi-com__sub { color: var(--tp-txt3); font-size: 11.5px; } .tal-wrap.tp .tp-chip b { font-weight: 800; } /* el aviso de «sin tarifa» que pinta taller.js, como pastilla ámbar */ .tal-wrap.tp #tal-viszone .tal-sintarifa { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 12px 6px 10px; font-size: 12.5px; background: rgba(var(--tp-amb), .14); border: 1px solid rgba(var(--tp-amb), .45); color: #92400e; margin: 0 0 10px; } [data-theme='dark'] .tal-wrap.tp #tal-viszone .tal-sintarifa { color: #fcd34d; } .tal-wrap.tp #tal-viszone .tal-sintarifa svg { width: 14px; height: 14px; flex: none; } .tal-wrap.tp #tal-viszone:empty { display: none; } .tal-wrap.tp #tal-viszone .tal-vis { margin: 0 0 12px; } /* ---------- 3 · rejilla principal ---------- */ .tal-wrap.tp .tp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; } .tal-wrap.tp .tp-main, .tal-wrap.tp .tp-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .tal-wrap.tp .tp-main > *, .tal-wrap.tp .tp-side > * { margin: 0; } .tal-wrap.tp.tp-caja-abierta .tp-grid { grid-template-columns: minmax(0, 1fr); } .tal-wrap.tp.tp-caja-abierta .tp-side { order: -1; } /* con la ficha abierta, taller.css oculta las demás zonas; aquí siguen a la vista (como en la foto) */ .tal-wrap.tp.tal-wrap--detalle #tal-mini, .tal-wrap.tp.tal-wrap--detalle #tal-tablero, .tal-wrap.tp.tal-wrap--detalle #tal-ingresos, .tal-wrap.tp.tal-wrap--detalle #tal-caja, .tal-wrap.tp.tal-wrap--detalle #tal-viszone, .tal-wrap.tp.tal-wrap--detalle #tal-invzone, .tal-wrap.tp.tal-wrap--detalle #tal-solzone { display: block !important; } .tal-wrap.tp.tal-wrap--detalle #tal-viszone:empty { display: none !important; } .tal-wrap.tp .tp-accesos { display: flex; gap: 8px; flex-wrap: wrap; } .tal-wrap.tp .tp-accesos .tal-actions { margin: 0; } .tal-wrap.tp .tp-accesos > section { flex: 1 1 auto; min-width: 0; } /* ---------- 4 · servicios (lista como tabla) ---------- */ .tal-wrap.tp .tal-lista-card { padding: 12px 16px 10px; } .tal-wrap.tp .tal-lista-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; flex-wrap: wrap; } .tal-wrap.tp .tal-lista-head__tit { display: flex; align-items: center; gap: 9px; } .tal-wrap.tp .tal-lista-head__ico { width: 30px; height: 30px; border-radius: 9px; background: var(--tp-tile); color: var(--tp-azul); display: grid; place-items: center; } .tal-wrap.tp .tal-lista-head__ico svg { width: 15px; height: 15px; } .tal-wrap.tp .tal-lista-head__txt h3 { font-size: 14.5px; font-weight: 800; margin: 0; } .tal-wrap.tp .tal-lista-head__sub { display: none; } .tal-wrap.tp .tal-lista-head__tools { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .tal-wrap.tp .tal-buscador { position: relative; } .tal-wrap.tp .tal-buscador__inp { width: 230px; max-width: 100%; padding: 7px 10px 7px 30px; font-size: 12.5px; border-radius: 999px; } .tal-wrap.tp .tal-buscador__ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--tp-txt3); display: grid; } .tal-wrap.tp .tal-buscador__ico svg { width: 14px; height: 14px; } .tal-wrap.tp .tal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; align-items: center; } .tal-wrap.tp .tal-chip { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--tp-borde2); background: var(--tp-card3); color: var(--tp-txt); display: inline-flex; gap: 5px; align-items: center; } .tal-wrap.tp .tal-chip__n { font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 1px 6px; background: rgba(var(--tp-cel), .14); color: var(--tp-azul); } .tal-wrap.tp .tal-chip--on, .tal-wrap.tp .tal-chip[aria-pressed='true'] { background: rgb(var(--tp-az)); border-color: transparent; color: #fff; } .tal-wrap.tp .tal-chip--on .tal-chip__n { background: rgba(255,255,255,.22); color: #fff; } .tal-wrap.tp .tal-otros__sel { border-radius: 999px; padding: 5px 10px; font-size: 12px; } .tal-wrap.tp .tp-th, .tal-wrap.tp .tal-srv { display: grid; grid-template-columns: 112px minmax(120px, 1.1fr) minmax(130px, 1.3fr) minmax(150px, 1.25fr) 118px 100px 22px; gap: 10px; align-items: center; } .tal-wrap.tp .tp-th { padding: 4px 10px 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-txt3); border-bottom: 1px solid var(--tp-borde); } .tal-wrap.tp .tp-th > span:nth-child(5) { text-align: right; } .tal-wrap.tp .tal-srv-lista { display: flex; flex-direction: column; gap: 0; } .tal-wrap.tp .tal-srv { padding: 9px 10px; border-radius: 10px; border: 0; border-bottom: 1px solid var(--tp-borde); background: transparent; min-height: 46px; transition: background .2s, transform .2s; } .tal-wrap.tp .tal-srv:last-child { border-bottom: 0; } .tal-wrap.tp .tal-srv:hover, .tal-wrap.tp .tal-srv:focus-visible { background: rgba(var(--tp-cel), .08); transform: none; box-shadow: none; } .tal-wrap.tp .tal-srv__num { font-weight: 800; color: var(--tp-azul); font-size: 12.5px; letter-spacing: .02em; } .tal-wrap.tp .tal-srv__cli { display: flex; flex-direction: column; min-width: 0; } .tal-wrap.tp .tal-srv__cliname { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tal-wrap.tp .tal-srv__tel { font-size: 11.5px; color: var(--tp-txt3); display: inline-flex; gap: 4px; align-items: center; } .tal-wrap.tp .tal-srv__tel svg { width: 11px; height: 11px; } .tal-wrap.tp .tal-srv__eq { display: flex; align-items: center; min-width: 0; } .tal-wrap.tp .tal-srv__eqico { display: none; } .tal-wrap.tp .tal-srv__eqname { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tal-wrap.tp .tal-srv__est { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .tal-wrap.tp .tal-srv__est .tal-pill { padding: 2px 8px; font-size: 11px; } .tal-wrap.tp .tal-srv__total { display: flex; flex-direction: column; align-items: flex-end; } .tal-wrap.tp .tal-srv__monto { font-weight: 800; font-size: 13px; } .tal-wrap.tp .tal-srv__tlbl { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-txt3); } .tal-wrap.tp .tal-facpill { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; } .tal-wrap.tp .tal-srv__go { color: var(--tp-txt3); display: grid; place-items: center; } .tal-wrap.tp .tal-srv__go svg { width: 14px; height: 14px; } .tal-wrap.tp .tal-foot { margin-top: 8px; font-size: 12px; color: var(--tp-txt2); } /* con la ficha abierta: «Servicios recientes», 5 filas y «Ver todos» */ .tal-wrap.tp.tal-wrap--detalle .tal-lista-head__txt h3::after { content: ' recientes'; } .tal-wrap.tp.tal-wrap--detalle .tal-chips, .tal-wrap.tp.tal-wrap--detalle .tal-foot { display: none; } .tal-wrap.tp.tal-wrap--detalle:not(.tp-lista-toda) .tal-srv:nth-child(n+6) { display: none; } .tal-wrap.tp .tp-vertodos { display: none; margin-left: 8px; } .tal-wrap.tp.tal-wrap--detalle .tp-vertodos { display: inline-flex; } /* ---------- 5 · lateral: caja, ingresos, retiros ---------- */ .tal-wrap.tp .tal-caja { padding: 0; } .tal-wrap.tp .tal-caja__toggle { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto 18px; gap: 10px; align-items: center; width: 100%; padding: 12px 14px; background: transparent; border: 0; color: var(--tp-txt); text-align: left; cursor: pointer; } .tal-wrap.tp .tal-caja__ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(var(--tp-ver), .16); color: #15803d; transform: translateZ(16px); } [data-theme='dark'] .tal-wrap.tp .tal-caja__ico { color: #86efac; background: rgba(var(--tp-ver), .22); } .tal-wrap.tp .tal-caja__ico svg { width: 18px; height: 18px; } .tal-wrap.tp .tal-caja__tt { display: flex; flex-direction: column; min-width: 0; } .tal-wrap.tp .tal-caja__tt b { font-size: 14px; font-weight: 800; } .tal-wrap.tp .tal-caja__tt small { font-size: 11.5px; color: var(--tp-txt2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tal-wrap.tp .tal-caja__saldo { display: flex; flex-direction: column; align-items: flex-end; } .tal-wrap.tp .tal-caja__saldo small { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-txt3); } .tal-wrap.tp .tal-caja__saldo b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; } .tal-wrap.tp .tal-caja__alerta { border-radius: 999px; background: rgba(var(--tp-amb), .16); color: #b45309; font-size: 11px; font-weight: 800; padding: 2px 7px; display: inline-flex; gap: 3px; align-items: center; } .tal-wrap.tp .tal-caja__alerta svg { width: 11px; height: 11px; } .tal-wrap.tp .tal-caja__chev { color: var(--tp-txt3); display: grid; } .tal-wrap.tp .tal-caja__chev svg { width: 14px; height: 14px; } .tal-wrap.tp .tal-caja > *:not(.tal-caja__toggle):not(.mcab-sec) { padding: 0 14px 14px; } .tal-wrap.tp .tal-caja > .mcab-sec { padding: 12px 14px; margin: 0; } /* v6 (2026-10-20): la Caja lleva el encabezado de sección (plegable, saldo, alerta) */ .tal-wrap.tp .tal-ing { padding: 12px 14px 12px; } .tal-wrap.tp .tal-ing__head { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; } .tal-wrap.tp .tal-ing__head h3 { font-size: 14.5px; font-weight: 800; margin: 0; display: flex; gap: 8px; align-items: center; } .tal-wrap.tp .tal-ing__head h3 svg { width: 16px; height: 16px; color: var(--tp-azul); } .tal-wrap.tp .tal-ing__filtros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .tal-wrap.tp .tal-ing__presets { display: flex; flex-wrap: wrap; gap: 4px; } .tal-wrap.tp .tal-ing__presets .tal-chip { padding: 4px 9px; font-size: 11.5px; } .tal-wrap.tp .tal-ing__fecha { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--tp-txt3); } .tal-wrap.tp .tal-ing__fecha input { padding: 3px 6px; font-size: 11.5px; border-radius: 8px; width: 118px; } .tal-wrap.tp .tal-ing__fichas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; perspective: 700px; } .tal-wrap.tp .tal-ing__ficha { --f-rgb: var(--tp-cel); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; align-items: start; justify-items: center; text-align: center; padding: 12px 10px 11px; border-radius: 12px; border: 1px solid rgba(var(--f-rgb), .32); background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(var(--f-rgb), .10)); transform-style: preserve-3d; transition: transform .35s; } /* v7 (2026-10-20, Karla: «te había exigido que centres esto»): sin ícono (la Caja) la tarjeta va apilada y centrada: rótulo, cifra, detalle a lo ancho; con ícono (Ingresos, lo pone taller-panel.js) sigue como estaba */ .tal-wrap.tp .tal-ing__ficha:has(.tp-fico) { grid-template-columns: 34px minmax(0, 1fr); gap: 2px 9px; align-items: center; justify-items: start; text-align: left; padding: 10px 10px; } .tal-wrap.tp .tal-ing__ficha:nth-child(2) { --f-rgb: var(--tp-ver); } .tal-wrap.tp .tal-ing__ficha.is-pend, .tal-wrap.tp .tal-ing__ficha:nth-child(3) { --f-rgb: var(--tp-amb); } .tal-wrap.tp .tal-ing__ficha:nth-child(4) { --f-rgb: var(--tp-mor); } [data-theme='dark'] .tal-wrap.tp .tal-ing__ficha { background: radial-gradient(120% 90% at 0% 0%, rgba(var(--f-rgb), .28), transparent 60%), rgba(8,16,46,.6); border-color: rgba(var(--f-rgb), .5); } .tal-wrap.tp .tp-fico { grid-row: 1 / 4; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--f-rgb), .16); color: rgb(var(--f-rgb)); transform: translateZ(14px); } .tal-wrap.tp .tp-fico svg { width: 16px; height: 16px; } .tal-wrap.tp .tal-ing__flbl { font-size: 11px; font-weight: 700; color: var(--tp-txt2); line-height: 1.25; } .tal-wrap.tp .tal-ing__fval { font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; } .tal-wrap.tp .tal-ing__fsub { font-size: 10.5px; color: var(--tp-txt3); line-height: 1.3; max-width: 100%; overflow-wrap: anywhere; } .tal-wrap.tp .tal-caja .tal-ing__fval { font-size: 18px; } .tal-wrap.tp .tal-caja .tal-ing__ficha.is-hero .tal-ing__fval { font-size: 21px; } .tal-wrap.tp .tal-caja { container-type: inline-size; } @container (min-width: 760px) { .tal-wrap.tp .tal-caja .tal-ing__fichas { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* B · Saldo a lo ancho y tres debajo */ .tal-wrap.tp[data-tpc="B"] .tal-caja .tal-ing__fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tal-wrap.tp[data-tpc="B"] .tal-caja .tal-ing__ficha.is-hero { grid-column: 1 / -1; padding: 14px 12px; } .tal-wrap.tp[data-tpc="B"] .tal-caja .tal-ing__ficha.is-hero .tal-ing__fval { font-size: 26px; } /* C · Lista: rótulo a la izquierda, cifra a la derecha, detalle debajo */ .tal-wrap.tp[data-tpc="C"] .tal-caja .tal-ing__fichas { grid-template-columns: minmax(0, 1fr); gap: 6px; } .tal-wrap.tp[data-tpc="C"] .tal-caja .tal-ing__ficha { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; justify-items: start; text-align: left; padding: 9px 12px; } .tal-wrap.tp[data-tpc="C"] .tal-caja .tal-ing__fval { grid-column: 2; grid-row: 1; justify-self: end; font-size: 17px; } .tal-wrap.tp[data-tpc="C"] .tal-caja .tal-ing__ficha.is-hero .tal-ing__fval { font-size: 19px; } .tal-wrap.tp[data-tpc="C"] .tal-caja .tal-ing__fsub { grid-column: 1 / -1; } .tal-wrap.tp .tal-ing__gtit { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tp-txt3); margin: 0 0 4px; } .tal-wrap.tp .tal-ing__svg svg { width: 100%; height: auto; } .tal-wrap.tp .tal-ing__barra { transform-box: fill-box; transform-origin: bottom; animation: tp-crece .9s cubic-bezier(.2,.8,.2,1) both; } .tal-wrap.tp .tal-ing__tabla { margin-top: 6px; } .tal-wrap.tp .tal-ing__tabla > summary { font-size: 12.5px; font-weight: 700; color: var(--tp-azul); cursor: pointer; } .tal-wrap.tp .tal-tabla { font-size: 12px; } .tal-wrap.tp .tal-citag { padding: 12px 14px; } .tal-wrap.tp .tal-citag h3 { font-size: 14.5px; font-weight: 800; margin: 0 0 8px; display: flex; gap: 8px; align-items: center; } .tal-wrap.tp .tal-citag h3 svg { width: 16px; height: 16px; color: var(--tp-azul); } .tal-wrap.tp .tal-citag__lista { display: flex; flex-direction: column; gap: 6px; } .tal-wrap.tp .tal-citag__it { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--tp-borde); background: var(--tp-card3); color: var(--tp-txt); text-align: left; cursor: pointer; transition: transform .3s, border-color .3s; } .tal-wrap.tp .tal-citag__it:hover { transform: translateY(-2px); border-color: var(--tp-borde2); } .tal-wrap.tp .tal-citag__it.is-hoy { border-color: rgba(var(--tp-ver), .55); background: linear-gradient(135deg, var(--tp-card3), rgba(var(--tp-ver), .10)); } .tal-wrap.tp .tal-citag__hora { display: flex; flex-direction: column; } .tal-wrap.tp .tal-citag__hora b { font-size: 13px; font-weight: 800; } .tal-wrap.tp .tal-citag__hora small { font-size: 10.5px; color: var(--tp-txt3); } .tal-wrap.tp .tal-citag__txt { display: flex; flex-direction: column; min-width: 0; } .tal-wrap.tp .tal-citag__txt b { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tal-wrap.tp .tal-citag__txt small { font-size: 11px; color: var(--tp-txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tal-wrap.tp .tal-citag__tec { font-size: 11px; color: var(--tp-txt2); display: inline-flex; gap: 4px; align-items: center; } /* ---------- 6 · ficha del equipo ---------- */ .tal-wrap.tp #tal-detzone:empty { display: none; } .tal-wrap.tp .tal-dash { background: var(--tp-card); border: 1px solid var(--tp-borde); border-radius: var(--tp-r); padding: 0 0 14px; overflow: visible; -webkit-backdrop-filter: blur(var(--tp-blur)); backdrop-filter: blur(var(--tp-blur)); } .tal-wrap.tp .tal-dash > .tal-tabs { display: flex; gap: 4px; padding: 10px 12px 0; margin: 0; border-bottom: 1px solid var(--tp-borde); overflow-x: auto; } .tal-wrap.tp .tal-tab { padding: 9px 14px; margin: 0; border-radius: 12px 12px 0 0; font-weight: 700; font-size: 13px; color: var(--tp-txt2); border: 1px solid transparent; border-bottom: 0; background: transparent; display: inline-flex; gap: 7px; align-items: center; white-space: nowrap; transition: background .25s, color .25s; } .tal-wrap.tp .tal-tab svg { width: 15px; height: 15px; } .tal-wrap.tp .tal-tab.is-on { color: var(--tp-azul); background: rgba(var(--tp-cel), .12); border-color: var(--tp-borde2); } .tal-wrap.tp .tal-dash__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px 10px; margin: 0; background: transparent; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } .tal-wrap.tp .tal-dash__id { display: flex; align-items: center; gap: 8px; } .tal-wrap.tp .tal-dash__num { font-size: 20px; font-weight: 800; letter-spacing: .02em; } .tal-wrap.tp .tal-dash__upd { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; } .tal-wrap.tp .tal-dash__upd-v { font-weight: 800; font-size: 13px; } .tal-wrap.tp .tal-roleswitch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(var(--tp-cel), .08); border: 1px solid var(--tp-borde2); } .tal-wrap.tp .tal-role { border: 0; background: transparent; padding: 5px 12px; border-radius: 999px; font-weight: 700; font-size: 12.5px; color: var(--tp-txt2); cursor: pointer; } .tal-wrap.tp .tal-role.is-on { background: rgb(var(--tp-az)); color: #fff; } [data-theme='dark'] .tal-wrap.tp .tal-role.is-on { background: #2563eb; } .tal-wrap.tp .tp-strip { margin: 0 16px; border: 1px solid var(--tp-borde); border-radius: 14px; background: var(--tp-card2); overflow: hidden; } .tal-wrap.tp .tal-sumgrid, .tal-wrap.tp .tal-metastrip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 0; margin: 0; background: transparent; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } .tal-wrap.tp .tal-metastrip { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--tp-borde); } .tal-wrap.tp .tal-rcell, .tal-wrap.tp .tal-mcell { padding: 10px 14px; border-left: 1px solid var(--tp-borde); min-width: 0; } .tal-wrap.tp .tal-rcell:first-child, .tal-wrap.tp .tal-mcell:first-child { border-left: 0; } .tal-wrap.tp .tal-rcell__v { font-weight: 800; font-size: 14px; display: block; margin-top: 3px; } .tal-wrap.tp .tal-rcell__sub { display: block; font-weight: 500; font-size: 12px; color: var(--tp-txt2); } .tal-wrap.tp .tal-mcell { font-weight: 700; font-size: 13.5px; } .tal-wrap.tp .tal-mcell .tal-lbl { display: flex; margin-bottom: 3px; } .tal-wrap.tp .tal-asig { padding: 4px 8px; font-size: 12.5px; border-radius: 9px; max-width: 100%; } .tal-wrap.tp .tal-reloj__val { font-weight: 800; } .tal-wrap.tp .tp-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; padding: 12px 16px 0; align-items: start; } .tal-wrap.tp .tp-lado { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .tal-wrap.tp .tp-estado { border: 1px solid var(--tp-borde); border-radius: 14px; background: var(--tp-card2); padding: 12px; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 12px; align-items: center; } .tal-wrap.tp .tp-aro { grid-row: 1 / 3; position: relative; width: 72px; height: 72px; } .tal-wrap.tp .tp-aro svg { width: 72px; height: 72px; transform: rotate(-90deg); } .tal-wrap.tp .tp-aro .f { fill: none; stroke: rgba(var(--tp-cel), .16); stroke-width: 6; } .tal-wrap.tp .tp-aro .v { fill: none; stroke: rgb(var(--tp-cel)); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 201; transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1); } .tal-wrap.tp .tp-aro.is-ok .v { stroke: rgb(var(--tp-ver)); } .tal-wrap.tp .tp-aro.is-amb .v { stroke: rgb(var(--tp-amb)); } .tal-wrap.tp .tp-aro b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 800; } .tal-wrap.tp .tp-estado__ahora, .tal-wrap.tp .tp-estado__sig { min-width: 0; } .tal-wrap.tp .tp-estado__ahora b, .tal-wrap.tp .tp-estado__sig b { display: block; font-size: 13.5px; font-weight: 800; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tal-wrap.tp .tp-estado__sig b { color: var(--tp-azul); } .tal-wrap.tp .tp-recorrido { border: 1px solid var(--tp-borde); border-radius: 14px; background: var(--tp-card2); padding: 0; } .tal-wrap.tp .tp-recorrido > summary { padding: 10px 12px; font-weight: 700; font-size: 12.5px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--tp-txt); } .tal-wrap.tp .tp-recorrido > summary::-webkit-details-marker { display: none; } .tal-wrap.tp .tp-recorrido > summary::after { content: '▾'; color: var(--tp-txt3); transition: transform .3s; } .tal-wrap.tp .tp-recorrido[open] > summary::after { transform: rotate(180deg); } .tal-wrap.tp .tp-recorrido .tal-tlwrap { padding: 2px 12px 10px; margin: 0; background: transparent; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; } .tal-wrap.tp .tal-tl { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; position: relative; min-width: 0; } .tal-wrap.tp .tal-tl::before { content: ''; position: absolute; left: 13px; top: 16px; bottom: 16px; width: 2px; background: var(--tp-borde2); border-radius: 2px; } .tal-wrap.tp .tal-tl::after { display: none; } .tal-wrap.tp .tal-tl__step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 10px; align-items: center; padding: 5px 0; position: relative; flex: none; text-align: left; min-width: 0; } .tal-wrap.tp .tal-tl__step::before, .tal-wrap.tp .tal-tl__step::after { display: none; } .tal-wrap.tp .tal-tl__dot { grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--tp-card3); color: rgb(var(--tl-rgb, 99,120,200)); border: 2px solid rgb(var(--tl-rgb, 99,120,200)); margin: 0; position: relative; z-index: 1; } .tal-wrap.tp .tal-tl__lbl { font-weight: 700; font-size: 12.5px; margin: 0; } .tal-wrap.tp .tal-tl__date { font-size: 11px; color: var(--tp-txt3); margin: 0; } .tal-wrap.tp .tal-tl__step:last-child .tal-tl__dot { background: rgb(var(--tl-rgb, 99,120,200)); color: #fff; } .tal-wrap.tp .tal-recep { display: flex; flex-direction: column; gap: 9px; padding: 12px; margin: 0; border: 1px solid var(--tp-borde); border-radius: 14px; background: var(--tp-card2); -webkit-backdrop-filter: none; backdrop-filter: none; } .tal-wrap.tp .tal-recep__it { min-width: 0; } .tal-wrap.tp .tal-recep__v { font-size: 12.5px; margin-top: 2px; display: block; overflow-wrap: anywhere; } .tal-wrap.tp .tal-recep__form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .tal-wrap.tp .tp-correos > summary { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-txt3); cursor: pointer; list-style: none; display: flex; justify-content: space-between; } .tal-wrap.tp .tp-correos > summary::-webkit-details-marker { display: none; } .tal-wrap.tp .tp-correos .tp-correos__n { border-radius: 999px; background: rgba(var(--tp-roj), .14); color: #b91c1c; padding: 1px 7px; font-size: 10.5px; } [data-theme='dark'] .tal-wrap.tp .tp-correos .tp-correos__n { color: #fca5a5; } .tal-wrap.tp .tal-avisos { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; } .tal-wrap.tp .tal-avisos li { border: 1px solid var(--tp-borde); border-radius: 10px; padding: 7px 9px; font-size: 11.5px; display: flex; flex-direction: column; gap: 3px; } .tal-wrap.tp .tal-avisos__e { color: var(--tp-txt3); } .tal-wrap.tp .tal-avisos__e.is-bad { color: #b91c1c; } [data-theme='dark'] .tal-wrap.tp .tal-avisos__e.is-bad { color: #fca5a5; } .tal-wrap.tp .tal-avisos__fallo { color: var(--tp-txt2); } .tal-wrap.tp .tal-avisos__re { align-self: flex-start; } .tal-wrap.tp .tal-pre-nuevo { padding: 0 4px; } .tal-wrap.tp .tal-pre-nuevo .tal-recep__form { margin-top: 8px; } .tal-wrap.tp .tp-body > .tal-tabpanes { min-width: 0; } .tal-wrap.tp .tal-tabpanes { margin: 0; } .tal-wrap.tp .tal-cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; } .tal-wrap.tp .tal-panel { background: var(--tp-card2); border: 1px solid var(--tp-borde); border-radius: 14px; padding: 12px 14px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; min-width: 0; } .tal-wrap.tp .tal-panel__head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; } .tal-wrap.tp .tal-panel__head > svg { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--tp-tile); color: var(--tp-azul); flex: none; box-sizing: border-box; transform: translateZ(12px); } .tal-wrap.tp .tal-panel__t h3 { font-size: 15px; font-weight: 800; margin: 0; } .tal-wrap.tp .tal-panel__badge { margin-left: auto; border-radius: 999px; border: 1px solid var(--tp-borde2); padding: 3px 9px; font-size: 11.5px; font-weight: 700; color: var(--tp-txt2); } .tal-wrap.tp .tal-diag-grid { display: flex; flex-direction: column; gap: 8px; } .tal-wrap.tp .tal-diag-field { border: 1px solid var(--tp-borde); border-radius: 12px; padding: 9px 11px; background: var(--tp-card3); } .tal-wrap.tp .tal-diag-field__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-txt3); } .tal-wrap.tp .tal-diag-ta { width: 100%; min-height: 76px; font-size: 13px; padding: 8px 10px; } .tal-wrap.tp .tal-diag-val { font-size: 13px; } .tal-wrap.tp .tal-sec { margin-top: 10px; } .tal-wrap.tp .tal-cardhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .tal-wrap.tp .tal-cardhead h4 { margin: 0; font-size: 13px; font-weight: 800; } .tal-wrap.tp .tal-totales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; font-size: 12.5px; } .tal-wrap.tp .tal-total { font-weight: 800; } .tal-wrap.tp .tal-msgs__lista { max-height: 300px; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; } .tal-wrap.tp .tal-msg { border-radius: 12px; padding: 8px 10px; border: 1px solid var(--tp-borde); background: var(--tp-card3); max-width: 92%; } .tal-wrap.tp .tal-msg--mio { align-self: flex-end; background: rgba(var(--tp-cel), .10); border-color: rgba(var(--tp-cel), .3); } .tal-wrap.tp .tal-msg__autor { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tp-txt3); } .tal-wrap.tp .tal-msg__texto { font-size: 13px; margin-top: 2px; } .tal-wrap.tp .tal-msg__meta { font-size: 10.5px; color: var(--tp-txt3); margin-top: 3px; } .tal-wrap.tp .tal-msgs__composer { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; } .tal-wrap.tp .tal-msgs__composer textarea { width: 100%; min-height: 48px; font-size: 13px; padding: 8px 10px; } .tal-wrap.tp .tal-msgs__acciones { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .tal-wrap.tp .tal-msgs__acciones .tal-btn--primary { margin-left: auto; } .tal-wrap.tp .tal-actionbar { position: sticky; bottom: 8px; z-index: 40; margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--tp-borde2); background: var(--tp-card); box-shadow: none; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tal-wrap.tp .tal-actionbar__info { font-size: 12.5px; color: var(--tp-txt2); min-width: 0; flex: 1 1 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tal-wrap.tp .tal-actionbar__info strong { color: var(--tp-txt); } .tal-wrap.tp .tal-actionbar__right { display: flex; gap: 8px; align-items: center; margin-left: auto; } .tal-wrap.tp .tal-actionbar__go { padding: 9px 18px; font-size: 13px; } .tal-wrap.tp .tal-menu__pop { border-radius: 14px; border: 1px solid var(--tp-borde2); background: var(--tp-card3); box-shadow: none; } .tal-wrap.tp .tal-menu__item { border-radius: 10px; font-size: 12.5px; } .tal-wrap.tp .tal-aqui { outline: 2px solid rgba(var(--tp-cel), .7); outline-offset: 3px; border-radius: 14px; } .tal-wrap.tp .tal-dash.tal-preview-tecnico .tal-solo-admin { display: none !important; } /* ---------- 7 · efectos 3D animados ---------- */ @keyframes tp-entra { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes tp-crece { from { transform: scaleY(.04); } to { transform: scaleY(1); } } @keyframes tp-flota { 0%, 100% { transform: translateZ(22px) translateY(0); } 50% { transform: translateZ(22px) translateY(-3px); } } @keyframes tp-flota2 { 0%, 100% { transform: translateZ(14px) translateY(0); } 50% { transform: translateZ(14px) translateY(-2px); } } @keyframes tp-respira { 0%, 100% { opacity: .65; } 50% { opacity: 1; } } @keyframes tp-brillo { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(220%) skewX(-18deg); } } @keyframes tp-gira { to { transform: rotate(360deg); } } .tal-wrap.tp.tp-entrando > header.tal-head, .tal-wrap.tp.tp-entrando #tal-mini, .tal-wrap.tp.tp-entrando .tp-main > *, .tal-wrap.tp.tp-entrando .tp-side > * { animation: tp-entra .55s cubic-bezier(.2,.8,.2,1) both; } .tal-wrap.tp.tp-entrando #tal-mini { animation-delay: .06s; } .tal-wrap.tp.tp-entrando .tp-main > * { animation-delay: .12s; } .tal-wrap.tp.tp-entrando .tp-side > :nth-child(1) { animation-delay: .16s; } .tal-wrap.tp.tp-entrando .tp-side > :nth-child(2) { animation-delay: .22s; } .tal-wrap.tp.tp-entrando .tp-side > :nth-child(3) { animation-delay: .28s; } .tal-wrap.tp .tal-kpi-grid > .tal-kpi { animation: tp-entra .5s cubic-bezier(.2,.8,.2,1) both; } .tal-wrap.tp .tal-kpi-grid > .tal-kpi:nth-child(2) { animation-delay: .06s; } .tal-wrap.tp .tal-kpi-grid > .tal-kpi:nth-child(3) { animation-delay: .12s; } .tal-wrap.tp .tal-kpi-grid > .tal-kpi:nth-child(4) { animation-delay: .18s; } .tal-wrap.tp .tal-kpi-grid > .tal-kpi:nth-child(5) { animation-delay: .24s; } .tal-wrap.tp .tal-dash { animation: tp-entra .45s cubic-bezier(.2,.8,.2,1) both; } /* relieve: las tarjetas se inclinan con el ratón (el guion pone --tp-rx/--tp-ry) */ .tal-wrap.tp[data-tp-fx='relieve'] .tal-kpi, .tal-wrap.tp[data-tp-fx='vivo'] .tal-kpi { will-change: transform; } /* flotante: iconos que flotan y bordes que respiran en la noche */ .tal-wrap.tp[data-tp-fx='flotante'] .tal-kpi__ico, .tal-wrap.tp[data-tp-fx='vivo'] .tal-kpi__ico { animation: tp-flota 4.2s ease-in-out infinite; } .tal-wrap.tp[data-tp-fx='flotante'] .tal-kpi:nth-child(2) .tal-kpi__ico, .tal-wrap.tp[data-tp-fx='vivo'] .tal-kpi:nth-child(2) .tal-kpi__ico { animation-delay: -.8s; } .tal-wrap.tp[data-tp-fx='flotante'] .tal-kpi:nth-child(3) .tal-kpi__ico, .tal-wrap.tp[data-tp-fx='vivo'] .tal-kpi:nth-child(3) .tal-kpi__ico { animation-delay: -1.6s; } .tal-wrap.tp[data-tp-fx='flotante'] .tal-kpi:nth-child(4) .tal-kpi__ico, .tal-wrap.tp[data-tp-fx='vivo'] .tal-kpi:nth-child(4) .tal-kpi__ico { animation-delay: -2.4s; } .tal-wrap.tp[data-tp-fx='flotante'] .tal-kpi:nth-child(5) .tal-kpi__ico, .tal-wrap.tp[data-tp-fx='vivo'] .tal-kpi:nth-child(5) .tal-kpi__ico { animation-delay: -3.2s; } .tal-wrap.tp[data-tp-fx='flotante'] .tp-tile, .tal-wrap.tp[data-tp-fx='flotante'] .tal-caja__ico, .tal-wrap.tp[data-tp-fx='flotante'] .tp-fico, .tal-wrap.tp[data-tp-fx='vivo'] .tp-tile, .tal-wrap.tp[data-tp-fx='vivo'] .tal-caja__ico, .tal-wrap.tp[data-tp-fx='vivo'] .tp-fico { animation: tp-flota2 4.8s ease-in-out infinite; } [data-theme='dark'] .tal-wrap.tp[data-tp-fx='flotante'] .tal-kpi::before, [data-theme='dark'] .tal-wrap.tp[data-tp-fx='vivo'] .tal-kpi::before { animation: tp-respira 3.4s ease-in-out infinite; } /* vivo: además, destello al pasar y números que cuentan (guion) */ .tal-wrap.tp[data-tp-fx='vivo'] .tal-kpi::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: 0; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(-120%) skewX(-18deg); pointer-events: none; } [data-theme='dark'] .tal-wrap.tp[data-tp-fx='vivo'] .tal-kpi::after { background: linear-gradient(100deg, transparent, rgba(var(--kpi-rgb), .35), transparent); } .tal-wrap.tp[data-tp-fx='vivo'] .tal-kpi:hover::after { animation: tp-brillo .9s ease-out; } .tal-wrap.tp .tal-refrescar.is-girando svg { animation: tp-gira .8s linear infinite; } @media (prefers-reduced-motion: reduce) { .tal-wrap.tp *, .tal-wrap.tp *::before, .tal-wrap.tp *::after { animation: none !important; transition: none !important; } .tal-wrap.tp .tal-kpi { transform: none !important; } } /* ---------- 8 · tamaños ---------- */ @media (max-width: 1240px) { .tal-wrap.tp .tal-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tal-wrap.tp .tp-grid { grid-template-columns: minmax(0, 1fr) 300px; } .tal-wrap.tp .tp-th, .tal-wrap.tp .tal-srv { grid-template-columns: 104px minmax(110px, 1fr) minmax(120px, 1.2fr) minmax(130px, 1.2fr) 104px 22px; } .tal-wrap.tp .tp-th > span:nth-child(6), .tal-wrap.tp .tal-srv__fac { display: none; } } @media (max-width: 1000px) { .tal-wrap.tp .tp-grid { grid-template-columns: minmax(0, 1fr); } .tal-wrap.tp .tp-body { grid-template-columns: minmax(0, 1fr); } .tal-wrap.tp .tal-cols2 { grid-template-columns: minmax(0, 1fr); } .tal-wrap.tp .tal-sumgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tal-wrap.tp .tal-metastrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tal-wrap.tp .tal-rcell:nth-child(4), .tal-wrap.tp .tal-mcell:nth-child(3) { border-left: 0; } .tal-wrap.tp .tal-rcell:nth-child(n+4) { border-top: 1px solid var(--tp-borde); } } @media (max-width: 720px) { .tal-wrap.tp { font-size: 13px; } .tal-wrap.tp > header.tal-head { flex-wrap: wrap; padding: 12px 14px; } .tal-wrap.tp .tp-cab-acc { width: 100%; } .tal-wrap.tp .tp-cab-acc .tal-btn { width: 100%; justify-content: center; } .tal-wrap.tp .tal-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tal-wrap.tp .tal-kpi { padding: 10px; gap: 8px; } .tal-wrap.tp .tal-kpi__num { font-size: 22px; } .tal-wrap.tp .tal-lista-card { padding: 12px 12px 8px; } .tal-wrap.tp .tal-lista-head__tools { width: 100%; margin-left: 0; } .tal-wrap.tp .tal-buscador { flex: 1 1 auto; } .tal-wrap.tp .tal-buscador__inp { width: 100%; } .tal-wrap.tp .tp-th { display: none; } .tal-wrap.tp .tal-srv { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num total" "cli total" "eq eq" "est est"; gap: 2px 10px; padding: 10px 8px; } .tal-wrap.tp .tal-srv__num { grid-area: num; } .tal-wrap.tp .tal-srv__cli { grid-area: cli; } .tal-wrap.tp .tal-srv__eq { grid-area: eq; } .tal-wrap.tp .tal-srv__est { grid-area: est; margin-top: 4px; } .tal-wrap.tp .tal-srv__total { grid-area: total; align-self: start; } .tal-wrap.tp .tal-srv__fac { display: none; } .tal-wrap.tp .tal-srv__go { display: none; } .tal-wrap.tp .tal-dash > .tal-tabs { padding: 8px 8px 0; } .tal-wrap.tp .tal-tab { padding: 8px 10px; font-size: 12.5px; } .tal-wrap.tp .tal-dash__head { padding: 10px 12px 8px; gap: 8px; } .tal-wrap.tp .tal-dash__num { font-size: 17px; } .tal-wrap.tp .tal-dash__upd { margin-left: 0; width: 100%; flex-direction: row; gap: 6px; align-items: baseline; } .tal-wrap.tp .tp-strip { margin: 0 12px; } .tal-wrap.tp .tal-sumgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tal-wrap.tp .tal-rcell:nth-child(3) { border-left: 0; } .tal-wrap.tp .tal-rcell:nth-child(n+3) { border-top: 1px solid var(--tp-borde); } .tal-wrap.tp .tal-metastrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tal-wrap.tp .tp-body { padding: 10px 12px 0; gap: 10px; } .tal-wrap.tp .tal-actionbar { bottom: 4px; padding: 8px 10px; } .tal-wrap.tp .tal-actionbar__info { display: none; } .tal-wrap.tp .tal-actionbar__right { width: 100%; justify-content: space-between; } .tal-wrap.tp .tal-actionbar__go { flex: 1 1 auto; justify-content: center; } .tal-wrap.tp .tal-caja__toggle { grid-template-columns: 36px minmax(0, 1fr) auto 16px; } .tal-wrap.tp .tal-caja__alerta { display: none; } .tal-wrap.tp .tal-ing__fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- 9 · ajustes tras la primera captura (2026-10-13) ---------- */ /* caja: título en una fila, saldo grande debajo (como en la foto) */ .tal-wrap.tp .tal-caja__toggle { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "ico tt chev" "saldo saldo alerta"; gap: 6px 10px; } .tal-wrap.tp .tal-caja__ico { grid-area: ico; } .tal-wrap.tp .tal-caja__tt { grid-area: tt; } .tal-wrap.tp .tal-caja__tt small { white-space: normal; } .tal-wrap.tp .tal-caja__saldo { grid-area: saldo; align-items: flex-start; flex-direction: column-reverse; margin-top: 2px; } .tal-wrap.tp .tal-caja__saldo b { font-size: 24px; } .tal-wrap.tp .tal-caja__alerta { grid-area: alerta; align-self: center; justify-self: end; } .tal-wrap.tp .tal-caja__chev { grid-area: chev; align-self: center; } /* tablas dentro de los paneles: que no desborden */ .tal-wrap.tp .tal-tablewrap { overflow-x: auto; max-width: 100%; } .tal-wrap.tp .tal-panel .tal-tabla { font-size: 12px; width: 100%; } .tal-wrap.tp .tal-panel .tal-tabla th, .tal-wrap.tp .tal-panel .tal-tabla td { padding: 6px 8px; } /* correos plegados: resumen alineado */ .tal-wrap.tp .tp-correos > summary { align-items: center; gap: 6px; flex-wrap: wrap; } .tal-wrap.tp .tal-pre-nuevo, .tal-wrap.tp .tal-pre-nuevo .tal-linkbtn { text-align: left; } .tal-wrap.tp .tal-pre-nuevo .tal-linkbtn { display: inline-flex; gap: 6px; align-items: flex-start; } /* teléfono: filas más compactas, estado a la izquierda */ @media (max-width: 720px) { .tal-wrap.tp .tal-srv { grid-template-areas: "num total" "cli total" "eq eq" "est est"; padding: 9px 6px; } .tal-wrap.tp .tal-srv__est { justify-content: flex-start; margin-top: 2px; } .tal-wrap.tp .tal-srv__cliname { white-space: normal; } .tal-wrap.tp .tal-chips { gap: 5px; } .tal-wrap.tp .tal-chip { padding: 4px 9px; font-size: 11.5px; } .tal-wrap.tp .tp-cab p.tal-sub { -webkit-line-clamp: 3; } .tal-wrap.tp .tal-caja__saldo b { font-size: 20px; } .tal-wrap.tp .tal-roleswitch { width: 100%; justify-content: center; } .tal-wrap.tp .tal-sumgrid .tal-rcell:last-child { grid-column: 1 / -1; } } /* ================= FICHA DEL EQUIPO, tranquila (elegida por Karla el 2026-10-13: variante 1 · Foco; las 2 y 3 quedan disponibles con data-tp-ficha) ================= */ /* ============================================================ DANGOFE OS · Taller · la FICHA del equipo más tranquila: 3 variantes (muestra, 2026-10-13) Karla: «el detalle de los servicios se ve todo abrumado». Al abrir un equipo, lo demás se quita de la vista. (pendientes, lista, caja, ingresos, retiros) se quita de la vista y la ficha enseña una cosa a la vez. Variante en .tal-wrap.tp[data-tp-ficha="1|2|3"]: 1 · Foco: una sola columna, estado arriba, diagnóstico; mensajería y datos plegados. 2 · Lado: estado y datos a la izquierda, el trabajo a la derecha; lo demás plegado. 3 · Pasos: todo en tarjetas apiladas que se abren de una en una (como «Mi mesa»). ============================================================ */ /* ---------- común a las tres: con la ficha abierta solo se ve la ficha ---------- */ .tal-wrap.tp[data-tp-ficha].tal-wrap--detalle #tal-mini, .tal-wrap.tp[data-tp-ficha].tal-wrap--detalle #tal-tablero, .tal-wrap.tp[data-tp-ficha].tal-wrap--detalle #tal-viszone, .tal-wrap.tp[data-tp-ficha].tal-wrap--detalle .tp-side, .tal-wrap.tp[data-tp-ficha].tal-wrap--detalle .tp-accesos { display: none !important; } .tal-wrap.tp[data-tp-ficha].tal-wrap--detalle .tp-grid { grid-template-columns: minmax(0, 1fr); } .tal-wrap.tp[data-tp-ficha].tal-wrap--detalle .tp-main { width: 100%; max-width: 880px; margin: 0 auto; } .tal-wrap.tp[data-tp-ficha='2'].tal-wrap--detalle .tp-main { max-width: 1120px; } /* la tira: solo lo esencial (cliente, equipo, tiempo, próxima acción, garantía) */ .tal-wrap.tp[data-tp-ficha] .tp-strip .tal-metastrip { display: none; } /* «Más datos del equipo»: técnico, fechas, correo, prioridad, condiciones, cómo llegó, correos, préstamo */ .tal-wrap.tp[data-tp-ficha] .tp-masdatos { border: 1px solid var(--tp-borde); border-radius: 14px; background: var(--tp-card2); } .tal-wrap.tp[data-tp-ficha] .tp-masdatos > summary { padding: 10px 12px; font-weight: 700; font-size: 12.5px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; } .tal-wrap.tp[data-tp-ficha] .tp-masdatos > summary::-webkit-details-marker { display: none; } .tal-wrap.tp[data-tp-ficha] .tp-masdatos > summary::after { content: '▾'; color: var(--tp-txt3); transition: transform .3s; } .tal-wrap.tp[data-tp-ficha] .tp-masdatos[open] > summary::after { transform: rotate(180deg); } .tal-wrap.tp[data-tp-ficha] .tp-masdatos .tal-metastrip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 0; border-top: 1px solid var(--tp-borde); } .tal-wrap.tp[data-tp-ficha] .tp-masdatos .tal-mcell { padding: 10px 12px; } .tal-wrap.tp[data-tp-ficha] .tp-masdatos .tal-mcell:nth-child(odd) { border-left: 0; } .tal-wrap.tp[data-tp-ficha] .tp-masdatos .tal-recep { border: 0; border-top: 1px solid var(--tp-borde); border-radius: 0; background: transparent; } .tal-wrap.tp[data-tp-ficha] .tp-masdatos .tal-pre-nuevo { padding: 8px 12px 12px; } /* mensajería plegada: solo su cabecera con el conteo, hasta que se toque */ .tal-wrap.tp[data-tp-ficha] .tp-msgs > .tal-panel__head { margin: 0; cursor: pointer; user-select: none; } .tal-wrap.tp[data-tp-ficha] .tp-msgs .tp-n { margin-left: auto; border-radius: 999px; background: rgba(var(--tp-cel), .14); color: var(--tp-azul); font-size: 11.5px; font-weight: 800; padding: 3px 9px; } .tal-wrap.tp[data-tp-ficha] .tp-msgs > .tal-panel__head::after { content: '▾'; color: var(--tp-txt3); margin-left: 8px; transition: transform .3s; } .tal-wrap.tp[data-tp-ficha] .tp-msgs:not(.tp-plegado) > .tal-panel__head { margin-bottom: 10px; } .tal-wrap.tp[data-tp-ficha] .tp-msgs:not(.tp-plegado) > .tal-panel__head::after { transform: rotate(180deg); } .tal-wrap.tp[data-tp-ficha] .tp-msgs.tp-plegado > *:not(.tal-panel__head) { display: none; } /* el estado, un poco más protagonista */ .tal-wrap.tp[data-tp-ficha] .tp-estado { grid-template-columns: 84px minmax(0, 1fr); padding: 14px; } .tal-wrap.tp[data-tp-ficha] .tp-aro, .tal-wrap.tp[data-tp-ficha] .tp-aro svg { width: 84px; height: 84px; } .tal-wrap.tp[data-tp-ficha] .tp-aro svg circle { r: 32; } .tal-wrap.tp[data-tp-ficha] .tp-aro b { font-size: 17px; } .tal-wrap.tp[data-tp-ficha] .tp-estado__ahora b, .tal-wrap.tp[data-tp-ficha] .tp-estado__sig b { font-size: 15px; white-space: normal; } /* ---------- 1 · Foco: una sola columna ---------- */ .tal-wrap.tp[data-tp-ficha='1'] .tp-body { grid-template-columns: minmax(0, 1fr); } .tal-wrap.tp[data-tp-ficha='1'] .tp-lado { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .tal-wrap.tp[data-tp-ficha='1'] .tal-cols2 { grid-template-columns: minmax(0, 1fr); } @media (min-width: 720px) { .tal-wrap.tp[data-tp-ficha='1'] .tp-lado { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } .tal-wrap.tp[data-tp-ficha='1'] .tp-lado .tp-recorrido, .tal-wrap.tp[data-tp-ficha='1'] .tp-lado .tp-masdatos { grid-column: 1 / -1; } } /* ---------- 2 · Lado: estado y datos a la izquierda, el trabajo a la derecha ---------- */ .tal-wrap.tp[data-tp-ficha='2'] .tp-body { grid-template-columns: 300px minmax(0, 1fr); } .tal-wrap.tp[data-tp-ficha='2'] .tal-cols2 { grid-template-columns: minmax(0, 1fr); } .tal-wrap.tp[data-tp-ficha='2'] .tp-estado { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; } .tal-wrap.tp[data-tp-ficha='2'] .tp-aro { grid-row: auto; } @media (max-width: 1000px) { .tal-wrap.tp[data-tp-ficha='2'] .tp-body { grid-template-columns: minmax(0, 1fr); } .tal-wrap.tp[data-tp-ficha='2'] .tp-estado { grid-template-columns: 84px minmax(0, 1fr); text-align: left; justify-items: stretch; } .tal-wrap.tp[data-tp-ficha='2'] .tp-aro { grid-row: 1 / 3; } } /* ---------- 3 · Pasos: tarjetas apiladas que se abren de una en una ---------- */ .tal-wrap.tp[data-tp-ficha='3'] .tal-dash > .tal-tabs { display: none; } .tal-wrap.tp[data-tp-ficha='3'] .tp-body { grid-template-columns: minmax(0, 1fr); } .tal-wrap.tp[data-tp-ficha='3'] .tal-cols2 { grid-template-columns: minmax(0, 1fr); } .tal-wrap.tp[data-tp-ficha='3'] .tal-tabpanes { display: flex; flex-direction: column; gap: 10px; } .tal-wrap.tp[data-tp-ficha='3'] .tal-tabpane { display: block !important; border: 1px solid var(--tp-borde); border-radius: 16px; background: var(--tp-card2); overflow: hidden; } .tal-wrap.tp[data-tp-ficha='3'] .tal-tabpane.tal-solo-admin { display: block !important; } .tal-wrap.tp[data-tp-ficha='3'] .tal-dash.tal-preview-tecnico .tal-tabpane.tal-solo-admin { display: none !important; } .tal-wrap.tp[data-tp-ficha='3'] .tal-tabpane > :not(.tp-acch) { display: none; } .tal-wrap.tp[data-tp-ficha='3'] .tal-tabpane.is-on > :not(.tp-acch) { display: block; padding: 0 12px 12px; } .tal-wrap.tp[data-tp-ficha='3'] .tal-tabpane.is-on > .tal-cols2 { display: grid; } .tal-wrap.tp[data-tp-ficha='3'] .tp-acch { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; border: 0; background: transparent; color: var(--tp-txt); font: inherit; font-weight: 800; font-size: 14.5px; text-align: left; cursor: pointer; } .tal-wrap.tp[data-tp-ficha='3'] .tp-acch svg { width: 18px; height: 18px; color: var(--tp-azul); } .tal-wrap.tp[data-tp-ficha='3'] .tp-acch .tp-acch__chev { margin-left: auto; color: var(--tp-txt3); transition: transform .3s; } .tal-wrap.tp[data-tp-ficha='3'] .tal-tabpane.is-on .tp-acch .tp-acch__chev { transform: rotate(180deg); } .tal-wrap.tp[data-tp-ficha='3'] .tal-tabpane.is-on .tp-acch { border-bottom: 1px solid var(--tp-borde); } .tal-wrap.tp[data-tp-ficha='3'] .tal-tabpane .tal-panel { border: 0; background: transparent; padding: 10px 0 0; } /* ---------- ajustes tras la primera captura ---------- */ /* las cabeceras de tarjeta (.tp-acch) solo existen en la variante 3 */ .tal-wrap.tp[data-tp-ficha='1'] .tp-acch, .tal-wrap.tp[data-tp-ficha='2'] .tp-acch { display: none; } /* variante 1: el estado y el recorrido comparten fila en pantalla ancha; «Más datos» debajo */ @media (min-width: 720px) { .tal-wrap.tp[data-tp-ficha='1'] .tp-lado { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tal-wrap.tp[data-tp-ficha='1'] .tp-lado .tp-recorrido { grid-column: auto; align-self: start; } .tal-wrap.tp[data-tp-ficha='1'] .tp-lado .tp-masdatos { grid-column: 1 / -1; } } /* la barra fija no tapa el estado al abrir: deja aire abajo */ .tal-wrap.tp[data-tp-ficha] .tal-dash { padding-bottom: 18px; } /* ============================================================ v3 · TAMAÑOS (2026-10-13, noche) · Karla, con video: «estás poniéndome las cosas muy pequeñas… ni tanto ni tampoco. El centro de la información del taller es la información del cliente; no quiero que ocupe tanto espacio el desglose de caja ni nada de eso. Lo más importante son las tiras del cliente». Mismo diseño «Tablero»: solo cambian las medidas y la lista de equipos manda. Segunda vuelta (misma noche, con captura): «eso ponlo como una bolita o más pequeño para que el espacio de servicios amplíe más» → la caja/ingresos y los retiros agendados ya no ocupan columna: son dos bolitas de cristal a la derecha (64 px) y cada una abre su panel encima de la lista; la ficha usa la pantalla ancha. Va al FINAL de taller-panel.css (gana por orden). Sin sombras. Claro/oscuro por los mismos tokens. ============================================================ */ /* ---------- la lista de equipos: protagonista y legible (la columna derecha es solo el carril de las bolitas) ---------- */ .tal-wrap.tp .tp-grid { grid-template-columns: minmax(0, 1fr) 64px; gap: 14px; } .tal-wrap.tp .tp-th, .tal-wrap.tp .tal-srv { grid-template-columns: 126px minmax(150px, 1.15fr) minmax(160px, 1.3fr) minmax(170px, 1.25fr) 130px 112px 24px; gap: 12px; } .tal-wrap.tp .tp-th { font-size: 11.5px; padding: 6px 12px 8px; } .tal-wrap.tp .tal-srv { padding: 13px 12px; min-height: 62px; border-radius: 12px; } .tal-wrap.tp .tal-srv__num { font-size: 14px; } .tal-wrap.tp .tal-srv__cliname { font-size: 15.5px; } .tal-wrap.tp .tal-srv__tel { font-size: 12.5px; } .tal-wrap.tp .tal-srv__tel svg { width: 12px; height: 12px; } .tal-wrap.tp .tal-srv__eqname { font-size: 15px; } .tal-wrap.tp .tal-srv__est .tal-pill { font-size: 12px; padding: 3px 10px; } .tal-wrap.tp .tal-srv__monto { font-size: 15px; } .tal-wrap.tp .tal-srv__tlbl { font-size: 10.5px; } .tal-wrap.tp .tal-srv__go svg { width: 16px; height: 16px; } .tal-wrap.tp .tal-tabla { font-size: 13.5px; } /* cabecera: lo justo */ .tal-wrap.tp .tp-cab h2 { font-size: 21px; } .tal-wrap.tp .tp-cab p.tal-sub { font-size: 13px; -webkit-line-clamp: 1; } .tal-wrap.tp .tal-resumen__head h3 { font-size: 15.5px; } .tal-wrap.tp .tal-kpi__ttl { font-size: 13px; } /* ---------- caja, ingresos y retiros: dos bolitas a la derecha; cada una abre su panel encima de la lista ---------- */ .tal-wrap.tp .tp-side { position: sticky; top: 10px; align-self: start; z-index: 30; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .tal-wrap.tp.tp-caja-abierta .tp-grid { grid-template-columns: minmax(0, 1fr) 64px; } .tal-wrap.tp.tp-caja-abierta .tp-side { order: 0; } .tal-wrap.tp .tp-plegable { position: relative; width: 64px; margin: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .tal-wrap.tp .tp-plegable > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; color: var(--tp-txt2); font-size: 10.5px; font-weight: 800; letter-spacing: .02em; text-align: center; -webkit-user-select: none; user-select: none; } .tal-wrap.tp .tp-plegable > summary::-webkit-details-marker { display: none; } .tal-wrap.tp .tp-plegable > summary::after { content: none; } .tal-wrap.tp .tp-bolita { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--tp-borde); background: var(--tp-card); -webkit-backdrop-filter: blur(var(--tp-blur)); backdrop-filter: blur(var(--tp-blur)); color: var(--tp-azul); transition: transform .3s, border-color .3s, background .3s, color .3s; } .tal-wrap.tp .tp-bolita svg { width: 21px; height: 21px; } .tal-wrap.tp .tp-plegable > summary:hover .tp-bolita { transform: translateY(-2px); border-color: var(--tp-borde2); } .tal-wrap.tp .tp-plegable[open] > summary { color: var(--tp-azul); } .tal-wrap.tp .tp-plegable[open] > summary .tp-bolita { background: var(--tp-azul); color: #fff; border-color: transparent; } .tal-wrap.tp .tp-bolita__n { position: absolute; top: -5px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--tp-azul); color: #fff; font-style: normal; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; border: 2px solid var(--tp-card); } .tal-wrap.tp .tp-bolita__n[data-hoy='1'] { background: rgb(var(--tp-ver)); } .tal-wrap.tp .tp-bolita__n[hidden] { display: none; } .tal-wrap.tp .tp-plegable[open] > summary .tp-bolita__n { border-color: transparent; } /* el panel: una tarjeta de cristal que se abre a la izquierda de la bolita, encima de la lista; se cierra tocando fuera, la bolita o Esc */ .tal-wrap.tp .tp-plegable__cuerpo { position: absolute; top: 0; right: calc(100% + 12px); width: min(420px, calc(100vw - 140px)); max-height: calc(100vh - 120px); overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 8px; border: 1px solid var(--tp-borde); border-radius: 18px; background: var(--tp-card); -webkit-backdrop-filter: blur(var(--tp-blur)); backdrop-filter: blur(var(--tp-blur)); animation: tp-bolita-abre .32s cubic-bezier(.2,.8,.2,1) both; } .tal-wrap.tp.tp-caja-abierta .tp-plegable[data-tp-plegable='caja'] > .tp-plegable__cuerpo { width: min(660px, calc(100vw - 140px)); } @keyframes tp-bolita-abre { from { opacity: 0; transform: translateX(10px) scale(.97); } to { opacity: 1; transform: none; } } .tal-wrap.tp .tp-plegable__cuerpo > * { margin: 0; } .tal-wrap.tp .tp-plegable__cuerpo .tal-card { border-radius: 14px; } .tal-wrap.tp .tp-plegable__cuerpo .tal-citag { margin-bottom: 0; } .tal-wrap.tp.tal-wrap--detalle .tp-side { display: none !important; } @media (prefers-reduced-motion: reduce) { .tal-wrap.tp .tp-plegable__cuerpo { animation: none; } } /* ---------- la ficha: ancha y con letra de leer ---------- */ .tal-wrap.tp[data-tp-ficha].tal-wrap--detalle .tp-main { max-width: 1320px; } .tal-wrap.tp[data-tp-ficha='2'].tal-wrap--detalle .tp-main { max-width: 1400px; } .tal-wrap.tp .tal-dash > .tal-tabs { padding: 12px 16px 0; gap: 6px; } .tal-wrap.tp .tal-tab { font-size: 15px; padding: 11px 18px; } .tal-wrap.tp .tal-tab svg { width: 17px; height: 17px; } .tal-wrap.tp .tal-dash__head { padding: 14px 18px 12px; gap: 14px; } .tal-wrap.tp .tal-dash__num { font-size: 25px; } .tal-wrap.tp .tal-dash__upd-v { font-size: 14px; } .tal-wrap.tp .tal-pill { font-size: 12.5px; } .tal-wrap.tp .tp-strip { margin: 0 18px; } .tal-wrap.tp .tal-mcell { font-size: 16.5px; padding: 14px 16px; } .tal-wrap.tp .tal-mcell .tal-lbl, .tal-wrap.tp .tp-estado .tal-lbl { font-size: 12px; } .tal-wrap.tp .tal-mcell small, .tal-wrap.tp .tal-mcell .tal-muted { font-size: 13px; } .tal-wrap.tp .tp-body { grid-template-columns: 300px minmax(0, 1fr); gap: 16px; padding: 16px 18px 0; } .tal-wrap.tp[data-tp-ficha] .tp-estado { grid-template-columns: 100px minmax(0, 1fr); padding: 16px; gap: 6px 14px; } .tal-wrap.tp[data-tp-ficha] .tp-aro, .tal-wrap.tp[data-tp-ficha] .tp-aro svg { width: 100px; height: 100px; } .tal-wrap.tp[data-tp-ficha] .tp-aro b { font-size: 21px; } .tal-wrap.tp[data-tp-ficha] .tp-estado__ahora b, .tal-wrap.tp[data-tp-ficha] .tp-estado__sig b { font-size: 17.5px; } .tal-wrap.tp .tp-recorrido > summary, .tal-wrap.tp[data-tp-ficha] .tp-masdatos > summary { font-size: 14.5px; padding: 12px 14px; } .tal-wrap.tp .tal-dash .tal-tl li, .tal-wrap.tp .tal-dash .tal-tl { font-size: 14px; } .tal-wrap.tp .tal-panel { font-size: 14.5px; } .tal-wrap.tp .tal-panel__head h3, .tal-wrap.tp .tal-panel__head h4 { font-size: 16.5px; } .tal-wrap.tp .tal-panel__head > svg { width: 38px; height: 38px; padding: 9px; } .tal-wrap.tp .tal-dash textarea, .tal-wrap.tp .tal-dash input, .tal-wrap.tp .tal-dash select { font-size: 15px; } .tal-wrap.tp .tal-dash .tal-lbl { font-size: 11.5px; } .tal-wrap.tp .tal-dash .tal-btn { font-size: 14px; } .tal-wrap.tp .tal-actionbar { padding: 12px 16px; } .tal-wrap.tp .tal-actionbar__info { font-size: 14px; } .tal-wrap.tp .tal-actionbar__go { padding: 11px 20px; font-size: 14.5px; } .tal-wrap.tp[data-tp-ficha] .tp-msgs .tp-n { font-size: 12.5px; } /* ---------- arriba, lo justo: cabecera en una línea, aviso corto y pendientes compactos → la lista de equipos sube ---------- */ .tal-wrap.tp > .tal-head { padding: 10px 16px; gap: 12px; } .tal-wrap.tp .tp-tile { width: 38px; height: 38px; border-radius: 11px; } .tal-wrap.tp .tp-cab h2 { font-size: 19px; } .tal-wrap.tp .tp-cab p.tal-sub { font-size: 12.5px; } .tal-wrap.tp .tp-miga { display: none; } .tal-wrap.tp .tal-alert.tal-sintarifa { padding: 6px 12px; font-size: 12px; margin-top: 8px; } .tal-wrap.tp #tal-mini { margin: 0 0 10px; } .tal-wrap.tp .tal-resumen { padding: 10px 14px; } .tal-wrap.tp .tal-resumen__head { margin: 0 0 8px; } .tal-wrap.tp .tal-resumen__head h3 { font-size: 15px; } .tal-wrap.tp .tal-kpi { padding: 9px 10px 8px; gap: 9px; border-radius: 12px; } .tal-wrap.tp .tal-kpi__ico { width: 34px; height: 34px; border-radius: 10px; } .tal-wrap.tp .tal-kpi__ico svg { width: 16px; height: 16px; } .tal-wrap.tp .tal-kpi__num { font-size: 22px; } .tal-wrap.tp .tal-kpi__ttl { font-size: 12.5px; margin-top: 2px; } .tal-wrap.tp .tal-kpi__act { margin-top: 4px; font-size: 11.5px; } .tal-wrap.tp .tp-chips { margin-top: 8px; } @media (max-width: 1000px) { .tal-wrap.tp .tp-body { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { .tal-wrap.tp .tal-mcell { font-size: 15.5px; padding: 12px 14px; } .tal-wrap.tp .tal-tab { font-size: 14px; padding: 10px 14px; } } /* pantallas estrechas: la lista en una sola columna y las bolitas en fila, arriba a la derecha; el panel se abre hacia abajo */ @media (max-width: 1000px) { .tal-wrap.tp .tp-grid, .tal-wrap.tp.tp-caja-abierta .tp-grid { grid-template-columns: minmax(0, 1fr); } .tal-wrap.tp .tp-side, .tal-wrap.tp.tp-caja-abierta .tp-side { position: relative; order: -1; width: auto; align-self: stretch; flex-direction: row; justify-content: flex-end; gap: 12px; } /* el panel se ancla a la FILA de bolitas, no a cada bolita: si no, el de «Caja» (la de la izquierda) se salía por la izquierda a 375 px (lo midió el chat del proyecto en su réplica) */ .tal-wrap.tp .tp-plegable { position: static; } .tal-wrap.tp .tp-plegable__cuerpo, .tal-wrap.tp.tp-caja-abierta .tp-plegable[data-tp-plegable='caja'] > .tp-plegable__cuerpo { top: calc(100% + 8px); right: 0; width: min(460px, calc(100vw - 40px)); max-height: calc(100vh - 160px); } @keyframes tp-bolita-abre { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } } } /* ============================================================ DANGOFE OS · Taller · Configuración del taller «tcx» (2026-10-14) Karla: «la configuración del taller me la simplifiques… un listado con muchas cosas que me abruman, que no veo necesario verlo constantemente si ya está configurado». Las seis áreas quedan en una línea cada una, con su resumen y su estado («Al día» / «Por revisar»); solo se abre la que se toca. Tres versiones por data-cfg: 1 · Tarjetas (rejilla de tarjetas; la que se toca ocupa el panel) · 2 · Lista (plegables, una abierta a la vez) · 3 · Pestañas (índice a la izquierda y solo el área elegida). Sin sombras. Claro/oscuro por los tokens --tp-*. Va al FINAL de taller-panel.css. ============================================================ */ .tal-wrap.tp .tal-card.tal-vis.tcx { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border-color: var(--tp-borde); } .tal-wrap.tp .tcx > h3 { margin: 0; font-size: 19px; display: flex; align-items: center; gap: 10px; } .tal-wrap.tp .tcx > h3 .tal-badge { font-size: 11px; } /* cabecera: estado general, «ver solo lo que falta» y Cerrar */ .tcx-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .tcx-estado-g { display: inline-flex; flex-wrap: wrap; gap: 8px; } .tcx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--tp-borde); background: var(--tp-card3); font-weight: 700; font-size: 12.5px; color: var(--tp-txt2); } .tcx-pill b { font-weight: 800; } .tcx-pill--ok b { color: rgb(var(--tp-ver)); } .tcx-pill--rev b { color: rgb(var(--tp-amb)); } .tcx-pill[hidden] { display: none; } .tcx-falta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--tp-txt2); cursor: pointer; -webkit-user-select: none; user-select: none; } .tcx-falta input { width: 16px; height: 16px; accent-color: var(--tp-azul); margin: 0; } .tcx-head .tal-actions { margin: 0 0 0 auto; } .tcx-nota { font-size: 12.5px; color: var(--tp-txt3); } .tcx-nota > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; } .tcx-nota > summary::-webkit-details-marker { display: none; } .tcx-nota > summary::before { content: 'ⓘ'; font-size: 13px; } .tcx-nota > p { margin: 6px 0 0; } /* el cuerpo: índice (solo v3) + las áreas */ .tcx-cuerpo-g { display: block; } .tcx-rail { display: none; } .tcx-areas { display: flex; flex-direction: column; gap: 10px; } .tcx-area { margin: 0; border: 1px solid var(--tp-borde); border-radius: 16px; background: var(--tp-card); -webkit-backdrop-filter: blur(var(--tp-blur)); backdrop-filter: blur(var(--tp-blur)); overflow: hidden; transition: border-color .3s; } .tcx-area:hover { border-color: var(--tp-borde2); } .tcx-area > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 22px; gap: 12px; align-items: center; padding: 12px 14px; -webkit-user-select: none; user-select: none; } .tcx-area > summary::-webkit-details-marker { display: none; } .tcx-volver { display: none; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; color: var(--tp-azul); white-space: nowrap; } .tcx-volver svg { width: 16px; height: 16px; } .tcx-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(var(--tp-az), .10); color: var(--tp-azul); } .tcx-ico svg { width: 21px; height: 21px; } .tcx-txt { min-width: 0; } .tcx-t { display: block; font-size: 15.5px; font-weight: 800; color: var(--tp-txt); line-height: 1.2; } .tcx-s { display: block; margin-top: 3px; font-size: 13px; color: var(--tp-txt2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tcx-estado { font-style: normal; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .tcx-estado[data-estado='lista'] { color: rgb(var(--tp-ver)); background: rgba(var(--tp-ver), .12); } .tcx-estado[data-estado='revisar'] { color: rgb(var(--tp-amb)); background: rgba(var(--tp-amb), .16); } .tcx-chev { display: grid; place-items: center; color: var(--tp-txt3); } .tcx-chev svg { width: 18px; height: 18px; transition: transform .3s; } .tcx-area[open] > summary .tcx-chev svg { transform: rotate(90deg); } .tcx-area[open] > summary { border-bottom: 1px solid var(--tp-borde); } .tcx-cuerpo { padding: 12px 14px 14px; animation: tcx-abre .3s cubic-bezier(.2,.8,.2,1) both; } @keyframes tcx-abre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .tcx-cuerpo > .tal-estcfg, .tcx-cuerpo > .tal-portalcfg { margin: 0; padding: 0; border: 0; } .tcx-cuerpo > * > h4 { display: none; } /* el título ya va en la fila */ .tcx-cuerpo > * > p.tal-sub { font-size: 13px; color: var(--tp-txt2); } /* «ver solo lo que falta»: las áreas al día se esconden (menos la abierta) */ .tcx.is-solo-falta .tcx-area[data-estado='lista']:not([open]) { display: none; } .tcx.is-solo-falta .tcx-rail__b i[data-estado='lista'] { opacity: .35; } /* ---------- 1 · Tarjetas ---------- */ .tcx[data-cfg='1'] .tcx-areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .tcx[data-cfg='1'] .tcx-area:not([open]) > summary { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; min-height: 160px; } .tcx[data-cfg='1'] .tcx-area:not([open]) > summary .tcx-s { white-space: normal; } .tcx[data-cfg='1'] .tcx-area:not([open]) > summary .tcx-chev { display: none; } .tcx[data-cfg='1'] .tcx-area:not([open]) > summary .tcx-txt { flex: 1 1 auto; } .tcx[data-cfg='1'][data-tcx-abierta] .tcx-areas { grid-template-columns: minmax(0, 1fr); } .tcx[data-cfg='1'][data-tcx-abierta] .tcx-area:not([open]) { display: none; } .tcx[data-cfg='1'] .tcx-area[open] > summary { grid-template-columns: auto 44px minmax(0, 1fr) auto; } .tcx[data-cfg='1'] .tcx-area[open] > summary .tcx-volver { display: inline-flex; } .tcx[data-cfg='1'] .tcx-area[open] > summary .tcx-chev { display: none; } /* ---------- 2 · Lista: los estilos base (plegables, una abierta a la vez) ---------- */ /* ---------- 3 · Pestañas ---------- */ .tcx[data-cfg='3'] .tcx-cuerpo-g { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; align-items: start; } .tcx[data-cfg='3'] .tcx-rail { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 10px; padding: 8px; border: 1px solid var(--tp-borde); border-radius: 16px; background: var(--tp-card); -webkit-backdrop-filter: blur(var(--tp-blur)); backdrop-filter: blur(var(--tp-blur)); } .tcx-rail__b { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--tp-txt2); font: inherit; font-weight: 700; font-size: 14px; text-align: left; cursor: pointer; transition: background .3s, color .3s; } .tcx-rail__b svg { width: 18px; height: 18px; flex: 0 0 auto; } .tcx-rail__b span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tcx-rail__b i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: rgb(var(--tp-ver)); } .tcx-rail__b i[data-estado='revisar'] { background: rgb(var(--tp-amb)); } .tcx-rail__b:hover { background: var(--tp-card3); } .tcx-rail__b.is-on { background: var(--tp-azul); color: #fff; border-color: transparent; } .tcx-rail__b.is-on i { background: #fff; } .tcx[data-cfg='3'][data-tcx-abierta] .tcx-area:not([open]) { display: none; } .tcx[data-cfg='3'] .tcx-area[open] > summary { grid-template-columns: 44px minmax(0, 1fr) auto; cursor: default; pointer-events: none; } .tcx[data-cfg='3'] .tcx-area[open] > summary .tcx-chev { display: none; } /* ---------- pantallas estrechas ---------- */ @media (max-width: 1100px) { .tcx[data-cfg='1'] .tcx-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .tcx[data-cfg='1'] .tcx-areas { grid-template-columns: minmax(0, 1fr); } .tcx[data-cfg='1'] .tcx-area:not([open]) > summary { min-height: 0; } .tcx[data-cfg='3'] .tcx-cuerpo-g { grid-template-columns: minmax(0, 1fr); } .tcx[data-cfg='3'] .tcx-rail { position: static; flex-direction: row; overflow-x: auto; padding: 6px; gap: 4px; -webkit-overflow-scrolling: touch; } .tcx-rail__b { width: auto; flex: 0 0 auto; padding: 8px 12px; font-size: 13px; } .tcx-head .tal-actions { margin-left: 0; } .tcx-s { white-space: normal; } } /* ============================================================ DANGOFE OS · Taller · Inventario de piezas «tix» (2026-10-14) Karla: «vamos a ver cómo podemos reestructurar cómo se ve el inventario» (el de piezas del Taller). Misma pantalla real (los mismos nodos: KPI, pasos de revisión, piezas repetidas, formulario y tabla), con otra estructura: las piezas mandan, los números del inventario en una sola línea, «Lo pendiente» recogido en una tira con contadores, buscador y filtros. Tres versiones por data-inv: 1 · Estantería (tarjetas) · 2 · Lista (filas limpias) · 3 · Categorías (índice a la izquierda). Sin sombras. Claro/oscuro por los tokens --tp-*. Va al FINAL de taller-panel.css. ============================================================ */ .tal-wrap.tp #tal-invzone .tal-card.tix { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; } .tal-wrap.tp .tix > .tal-cardhead:not(.mcab-sec) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; } .tal-wrap.tp .tix > .tal-cardhead:not(.mcab-sec) h3 { margin: 0; font-size: 19px; display: flex; align-items: center; gap: 8px; } .tal-wrap.tp .tix > .tal-cardhead:not(.mcab-sec) .tal-actions { margin: 0 0 0 auto; } .tix-buscar { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 220px; max-width: 360px; padding: 0 12px; height: 38px; border-radius: 999px; border: 1px solid var(--tp-borde); background: var(--tp-card3); color: var(--tp-txt3); } .tix-buscar svg { width: 16px; height: 16px; flex: 0 0 auto; } .tal-wrap.tp .tix .tix-buscar input, .tal-wrap.tp .tix .tix-buscar input[type="search"] { flex: 1 1 auto; min-width: 0; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; color: var(--tp-txt); font: inherit; font-size: 14px; outline: none; } /* sin borde propio: la píldora .tix-buscar ya lo trae (en el teléfono el sistema le ponía uno al input de búsqueda) */ .tix-buscar input::-webkit-search-cancel-button { -webkit-appearance: none; } /* los números del inventario · v7 (2026-10-20): tarjetitas centradas (rótulo arriba, cifra debajo) y los filtros centrados */ .tal-wrap.tp .tix .tal-invfin { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; background: none; } .tal-wrap.tp .tix .tal-invfin__it { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; margin: 0; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--tp-borde); background: var(--tp-card3); } .tal-wrap.tp .tix .tal-invfin__it span { font-size: 11px; color: var(--tp-txt2); opacity: 1; line-height: 1.2; } .tal-wrap.tp .tix .tal-invfin__it b { font-size: 15px; font-weight: 800; color: var(--tp-txt); white-space: nowrap; } .tal-wrap.tp .tix .tal-invfin__it--neg b { color: rgb(var(--tp-roj, 192, 57, 43)); } .tal-wrap.tp .tix .tix-filtros { justify-content: center; } /* B · pastillas centradas */ .tal-wrap.tp[data-tpc="B"] .tix .tal-invfin { display: flex; flex-wrap: wrap; justify-content: center; } .tal-wrap.tp[data-tpc="B"] .tix .tal-invfin__it { flex-direction: row; align-items: baseline; gap: 7px; padding: 6px 12px; border-radius: 999px; } /* C · lista en dos columnas */ .tal-wrap.tp[data-tpc="C"] .tix .tal-invfin { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; padding: 4px 12px; border: 1px solid var(--tp-borde); border-radius: 12px; background: var(--tp-card3); } .tal-wrap.tp[data-tpc="C"] .tix .tal-invfin__it { flex-direction: row; justify-content: space-between; text-align: left; border: 0; border-bottom: 1px solid var(--tp-borde); border-radius: 0; background: none; padding: 7px 0; } .tal-wrap.tp[data-tpc="C"] .tix .tal-invfin__it:nth-last-child(-n+2) { border-bottom: 0; } .tal-wrap.tp .tix .tal-invfin__it small { display: none; } .tal-wrap.tp .tix .tal-invfin__it--ok b { color: rgb(var(--tp-ver)); } /* filtros */ .tix-filtros { display: flex; flex-wrap: wrap; gap: 8px; } .tix-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--tp-borde); background: var(--tp-card3); color: var(--tp-txt2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .3s, color .3s; } .tix-chip b { font-weight: 800; padding: 1px 7px; border-radius: 999px; background: rgba(var(--tp-az), .10); color: var(--tp-azul); font-size: 12px; } .tix-chip[data-tix-f='bajo'] b { background: rgba(var(--tp-amb), .16); color: rgb(var(--tp-amb)); } .tix-chip[data-tix-f='revisar'] b { background: rgba(var(--tp-amb), .16); color: rgb(var(--tp-amb)); } .tix-chip[data-n='0'] { display: none; } .tix-chip:hover { border-color: var(--tp-borde2); } .tix-chip.is-on { background: var(--tp-azul); color: #fff; border-color: transparent; } .tix-chip.is-on b { background: rgba(255,255,255,.22); color: #fff; } /* lo pendiente del inventario: una tira con contadores; se abre al tocarla */ .tix-pend { border: 1px solid var(--tp-borde); border-radius: 16px; background: var(--tp-card); -webkit-backdrop-filter: blur(var(--tp-blur)); backdrop-filter: blur(var(--tp-blur)); overflow: hidden; } .tix-pend > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 11px 14px; -webkit-user-select: none; user-select: none; } .tix-pend > summary::-webkit-details-marker { display: none; } .tix-pend__t { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800; color: var(--tp-txt); } .tix-pend__t svg { width: 18px; height: 18px; color: rgb(var(--tp-amb)); } .tix-pend[data-n='0'] .tix-pend__t svg { color: rgb(var(--tp-ver)); } .tix-pend__chips { display: inline-flex; flex-wrap: wrap; gap: 6px; } .tix-pend__chips i { font-style: normal; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(var(--tp-amb), .16); color: rgb(var(--tp-amb)); } .tix-pend__chips i[data-tono='az'] { background: rgba(var(--tp-az), .10); color: var(--tp-azul); } .tix-pend__chips i[data-tono='ok'] { background: rgba(var(--tp-ver), .12); color: rgb(var(--tp-ver)); } .tix-chev { margin-left: auto; display: grid; place-items: center; color: var(--tp-txt3); } .tix-chev svg { width: 18px; height: 18px; transition: transform .3s; } .tix-pend[open] > summary .tix-chev svg { transform: rotate(90deg); } .tix-pend[open] > summary { border-bottom: 1px solid var(--tp-borde); } .tix-pend__cuerpo { padding: 4px 14px 12px; } .tal-wrap.tp .tix .tal-invrev { margin: 8px 0 0; } /* cuerpo: índice (solo v3) + formulario + tabla */ .tix-cuerpo { display: block; } .tix-rail { display: none; } .tal-wrap.tp .tix .tal-tablewrap { border: 0; background: none; border-radius: 0; overflow: visible; } .tal-wrap.tp .tix .tal-tabla { font-size: 14px; } .tal-wrap.tp .tix .tal-tabla th { font-size: 11.5px; letter-spacing: .06em; color: var(--tp-txt3); opacity: 1; padding: 6px 12px 8px; border-bottom: 1px solid var(--tp-borde); } .tal-wrap.tp .tix .tal-tabla td { padding: 12px; border-bottom: 1px solid var(--tp-borde); vertical-align: middle; } .tal-wrap.tp .tix .tal-tabla tbody tr:not(.tal-invcat) td:first-child { font-size: 15px; font-weight: 700; color: var(--tp-txt); } .tal-wrap.tp .tix .tal-tabla td:nth-child(3) { font-size: 15.5px; font-weight: 800; font-variant-numeric: tabular-nums; } .tal-wrap.tp .tix .tal-tabla td:nth-child(4) { color: var(--tp-txt3); } .tal-wrap.tp .tix .tal-tabla td:nth-child(5), .tal-wrap.tp .tix .tal-tabla td:nth-child(6) { font-variant-numeric: tabular-nums; } .tal-wrap.tp .tix .tal-tabla tr[data-tix-bajo] td:nth-child(3) { color: rgb(var(--tp-amb)); } .tal-wrap.tp .tix .tal-tabla .tal-tag { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; } .tal-wrap.tp .tix .tal-tabla tr.tal-invcat { background: none; } .tal-wrap.tp .tix .tal-tabla tr.tal-invcat td { padding: 16px 12px 6px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--tp-txt2); background: none; border-bottom: 0; } .tal-wrap.tp .tix .tal-tabla tr.tal-invcat td svg { width: 14px; height: 14px; color: var(--tp-azul); } .tal-wrap.tp .tix .tal-tabla td.tal-nowrap .tal-btn--xs { width: 32px; height: 32px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; margin-left: 4px; } .tal-wrap.tp .tix .tal-tabla td.tal-nowrap .tal-btn--xs svg { width: 14px; height: 14px; } .tal-wrap.tp .tix .tal-tabla tbody tr:not(.tal-invcat):hover td { background: var(--tp-card3); } /* ocultar filas (buscador, categoría, filtros): con !important para ganarle a las reglas de tarjeta de la v1 y del teléfono */ .tix tr[data-tix-oc] { display: none !important; } .tix[data-tix-filtro] tr.tal-invcat { display: none !important; } .tix[data-tix-filtro='bajo'] tbody tr:not(.tal-invcat):not([data-tix-bajo]) { display: none !important; } .tix[data-tix-filtro='sinprecio'] tbody tr:not(.tal-invcat):not([data-tix-sinprecio]) { display: none !important; } .tix[data-tix-filtro='revisar'] tbody tr:not(.tal-invcat):not([data-tix-revisar]) { display: none !important; } .tix-vacio { display: none; padding: 18px; text-align: center; color: var(--tp-txt3); font-size: 13.5px; } .tix[data-tix-nada] .tix-vacio { display: block; } /* ---------- 1 · Estantería: cada pieza es una tarjeta ---------- */ .tix[data-inv='1'] .tal-tabla thead { display: none; } .tix[data-inv='1'] .tal-tabla, .tix[data-inv='1'] .tal-tabla tbody { display: block; } .tix[data-inv='1'] .tal-tabla tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; } .tix[data-inv='1'] .tal-tabla tr.tal-invcat { grid-column: 1 / -1; display: block; } .tal-wrap.tp .tix[data-inv='1'] .tal-tabla tr.tal-invcat td { display: block; padding: 10px 4px 0; } .tal-wrap.tp .tix[data-inv='1'] .tal-tabla tbody tr:not(.tal-invcat) { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "nombre nombre" "stock precio" "minimo costo" "ubic ubic" "acc acc"; gap: 8px 10px; padding: 14px; border: 1px solid var(--tp-borde); border-radius: 16px; background: var(--tp-card); -webkit-backdrop-filter: blur(var(--tp-blur)); backdrop-filter: blur(var(--tp-blur)); transition: border-color .3s; } .tal-wrap.tp .tix[data-inv='1'] .tal-tabla tbody tr:not(.tal-invcat):hover { border-color: var(--tp-borde2); } .tal-wrap.tp .tix[data-inv='1'] .tal-tabla tbody tr:not(.tal-invcat):hover td { background: none; } .tal-wrap.tp .tix[data-inv='1'] .tal-tabla tbody tr:not(.tal-invcat) td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; } .tix[data-inv='1'] .tal-tabla tbody tr:not(.tal-invcat) td::before { content: attr(data-th); display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tp-txt3); margin-bottom: 2px; } .tix[data-inv='1'] .tal-tabla tbody tr:not(.tal-invcat) td:first-child::before, .tix[data-inv='1'] .tal-tabla tbody tr:not(.tal-invcat) td.tal-nowrap::before { content: none; } .tix[data-inv='1'] .tal-tabla tbody tr:not(.tal-invcat) td:nth-child(1) { grid-area: nombre; font-size: 15.5px; line-height: 1.25; } .tix[data-inv='1'] .tal-tabla tbody tr:not(.tal-invcat) td:nth-child(2) { grid-area: ubic; font-size: 13px; color: var(--tp-txt2); } .tal-wrap.tp .tix[data-inv='1'] .tal-tabla tbody tr:not(.tal-invcat) td:nth-child(3) { grid-area: stock; font-size: 24px; line-height: 1.1; } .tix[data-inv='1'] .tal-tabla tbody tr:not(.tal-invcat) td:nth-child(4) { grid-area: minimo; } .tix[data-inv='1'] .tal-tabla tbody tr:not(.tal-invcat) td:nth-child(5) { grid-area: costo; } .tix[data-inv='1'] .tal-tabla tbody tr:not(.tal-invcat) td:nth-child(6) { grid-area: precio; font-weight: 700; } .tal-wrap.tp .tix[data-inv='1'] .tal-tabla tbody tr:not(.tal-invcat) td.tal-nowrap { grid-area: acc; display: flex; justify-content: flex-end; gap: 6px; padding-top: 6px; border-top: 1px solid var(--tp-borde); } .tal-wrap.tp .tix[data-inv='1'] .tal-tabla td.tal-nowrap .tal-btn--xs { margin: 0; } /* ---------- 2 · Lista: la tabla, limpia (estilos base) ---------- */ .tal-wrap.tp .tix[data-inv='2'] .tal-tabla tbody tr:not(.tal-invcat) td { padding: 13px 12px; } /* ---------- 3 · Categorías: índice a la izquierda ---------- */ .tix[data-inv='3'] .tix-cuerpo { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; align-items: start; } .tix[data-inv='3'] .tix-filtros { display: none; } .tix[data-inv='3'] .tix-rail { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 10px; padding: 8px; border: 1px solid var(--tp-borde); border-radius: 16px; background: var(--tp-card); -webkit-backdrop-filter: blur(var(--tp-blur)); backdrop-filter: blur(var(--tp-blur)); } .tix-rail__t { padding: 10px 12px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-txt3); } .tix-rail__b { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--tp-txt2); font: inherit; font-weight: 700; font-size: 14px; text-align: left; cursor: pointer; transition: background .3s, color .3s; } .tix-rail__b svg { width: 17px; height: 17px; flex: 0 0 auto; } .tix-rail__b span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tix-rail__b b { font-weight: 800; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: rgba(var(--tp-az), .10); color: var(--tp-azul); } .tix-rail__b[data-tix-f] b { background: rgba(var(--tp-amb), .16); color: rgb(var(--tp-amb)); } .tix-rail__b[data-n='0'] { display: none; } .tix-rail__b:hover { background: var(--tp-card3); } .tix-rail__b.is-on { background: var(--tp-azul); color: #fff; border-color: transparent; } .tix-rail__b.is-on b { background: rgba(255,255,255,.22); color: #fff; } .tix[data-inv='3'] tr.tal-invcat { display: none; } /* ---------- pantallas estrechas ---------- */ @media (max-width: 900px) { .tix[data-inv='3'] .tix-cuerpo { grid-template-columns: minmax(0, 1fr); } .tix[data-inv='3'] .tix-rail { position: static; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: 6px; gap: 4px; -webkit-overflow-scrolling: touch; } .tix-rail__t { display: none; } .tix-rail__b { width: auto; flex: 0 0 auto; padding: 8px 12px; font-size: 13px; } } @media (max-width: 760px) { .tal-wrap.tp .tix > .tal-cardhead:not(.mcab-sec) .tal-actions { margin-left: 0; } .tix-buscar { max-width: none; } /* 2 · Lista en el teléfono: cada fila se apila como una tarjeta */ .tix[data-inv='2'] .tal-tabla thead { display: none; } .tix[data-inv='2'] .tal-tabla, .tix[data-inv='2'] .tal-tabla tbody { display: block; } .tal-wrap.tp .tix[data-inv='2'] .tal-tabla tbody tr:not(.tal-invcat) { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "nombre nombre" "stock precio" "minimo costo" "ubic acc"; gap: 6px 10px; padding: 12px 4px; } .tal-wrap.tp .tix[data-inv='2'] .tal-tabla tbody tr:not(.tal-invcat) td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; } .tix[data-inv='2'] .tal-tabla tbody tr:not(.tal-invcat) td::before { content: attr(data-th); display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tp-txt3); } .tix[data-inv='2'] .tal-tabla tbody tr:not(.tal-invcat) td:first-child::before, .tix[data-inv='2'] .tal-tabla tbody tr:not(.tal-invcat) td.tal-nowrap::before { content: none; } .tix[data-inv='2'] .tal-tabla tbody tr:not(.tal-invcat) td:nth-child(1) { grid-area: nombre; } .tix[data-inv='2'] .tal-tabla tbody tr:not(.tal-invcat) td:nth-child(2) { grid-area: ubic; } .tix[data-inv='2'] .tal-tabla tbody tr:not(.tal-invcat) td:nth-child(3) { grid-area: stock; } .tix[data-inv='2'] .tal-tabla tbody tr:not(.tal-invcat) td:nth-child(4) { grid-area: minimo; } .tix[data-inv='2'] .tal-tabla tbody tr:not(.tal-invcat) td:nth-child(5) { grid-area: costo; } .tix[data-inv='2'] .tal-tabla tbody tr:not(.tal-invcat) td:nth-child(6) { grid-area: precio; } .tal-wrap.tp .tix[data-inv='2'] .tal-tabla tbody tr:not(.tal-invcat) td.tal-nowrap { grid-area: acc; display: flex; justify-content: flex-end; gap: 6px; } .tal-wrap.tp .tix[data-inv='2'] .tal-tabla tbody tr:not(.tal-invcat) { border-bottom: 1px solid var(--tp-borde); } .tal-wrap.tp .tix[data-inv='2'] .tal-tabla tr.tal-invcat td { display: block; } } /* ============================================================ v4 · ACCESOS EN BOLITAS (2026-10-14, noche) · Karla, con captura de la fila de abajo del Taller: «estas opciones aquí abajo quiero verlas como las bolitas, así tener más espacio en el listado de clientes del taller». «Inventario de piezas», «Compras del taller» y «Solicitudes de piezas» dejan la fila de abajo y pasan al carril de la derecha como bolitas (Piezas · Compras · Solicitudes), debajo de Caja y Retiros. Al tocar una se abre su panel de siempre en lo principal (a todo lo ancho) y la bolita queda azul; al cerrarlo, vuelve. Sin sombras. Claro/oscuro por los tokens. Va al FINAL de taller-panel.css. ============================================================ */ .tal-wrap.tp .tp-side__sep { width: 28px; height: 1px; background: var(--tp-borde); margin: 2px 0; flex: 0 0 auto; } .tal-wrap.tp .tp-zona { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 64px; margin: 0; padding: 0; border: 0; background: none; color: var(--tp-txt2); font: inherit; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; text-align: center; cursor: pointer; -webkit-user-select: none; user-select: none; } .tal-wrap.tp .tp-zona[hidden] { display: none; } .tal-wrap.tp .tp-zona:hover .tp-bolita { transform: translateY(-2px); border-color: var(--tp-borde2); } .tal-wrap.tp .tp-zona.is-on { color: var(--tp-azul); } .tal-wrap.tp .tp-zona.is-on .tp-bolita { background: var(--tp-azul); color: #fff; border-color: transparent; } .tal-wrap.tp .tp-zona.is-on .tp-bolita__n { border-color: transparent; } /* la fila de abajo: ya sin botones; solo se ve el panel que esté abierto, a todo lo ancho */ .tal-wrap.tp .tp-accesos > section:not([data-tp-abierta]) { display: none; } .tal-wrap.tp .tp-accesos[data-tp-abiertas='0'] { display: none; } .tal-wrap.tp .tp-accesos > section[data-tp-abierta] { flex: 1 1 100%; } /* la pantalla de compras ocupa todo: ni carril ni fila */ .tal-wrap.tp.tal-wrap--compras .tp-side, .tal-wrap.tp.tal-wrap--compras .tp-accesos { display: none !important; } @media (max-width: 1000px) { .tal-wrap.tp .tp-side { flex-wrap: wrap; } .tal-wrap.tp .tp-side__sep { width: 1px; height: 28px; margin: 0 2px; align-self: center; } } /* ============================================================ DANGOFE OS · Taller · la ficha del equipo «f2» (2026-10-14, noche) Karla, con captura de la ficha actual: «el detalle del cliente vamos a cambiarlo, por más que le he buscado la vuelta no es de mi agrado; dame varias opciones». Misma ficha real (los mismos nodos: Volver, número y estado, última actualización, Administrador/Técnico, las celdas Cliente/Equipo/Tiempo/Próxima acción/Garantía, el anillo, el recorrido, «Más datos», las pestañas y sus paneles, y la barra de acción) con OTRA estructura: el cliente manda. Tres versiones por data-tp-ficha2: A · Tarjeta del cliente (cabecera grande con cliente, equipo y la acción) · B · Cliente al lado (columna fija a la izquierda con el cliente y su recorrido; el trabajo a la derecha) · C · Hoja (sin pestañas: todo seguido como un expediente, con atajos arriba). Sin sombras. Claro/oscuro por tokens. Va al FINAL de taller-panel.css. ============================================================ */ /* lo que se vacía al mover las piezas: fuera */ .tal-wrap.tp[data-tp-ficha2] .tal-dash > .tal-dash__head, .tal-wrap.tp[data-tp-ficha2] .tal-dash > .tp-strip { display: none !important; } /* .tp-lado se queda solo con «Más datos del equipo» (taller-panel.js lo vuelve a crear si no está ahí): va debajo de la cabecera */ .tal-wrap.tp[data-tp-ficha2] .tp-body > .tp-lado { display: block !important; width: auto !important; margin: 0 0 12px !important; padding: 0 !important; } .tal-wrap.tp[data-tp-ficha2] .tp-body > .tp-lado > :not(.tp-masdatos) { display: none !important; } .tal-wrap.tp[data-tp-ficha2] .tp-body > .tp-lado > .tp-masdatos { margin: 0; border: 1px solid var(--tp-borde); border-radius: 14px; background: var(--tp-card); -webkit-backdrop-filter: blur(var(--tp-blur)); backdrop-filter: blur(var(--tp-blur)); padding: 0 12px; } .tal-wrap.tp[data-tp-ficha2] .tp-body > .tp-lado > .tp-masdatos > summary { font-size: 13.5px; padding: 10px 0; color: var(--tp-txt2); } .tal-wrap.tp[data-tp-ficha2] .tp-body { display: block !important; grid-template-columns: none !important; padding: 0 !important; margin: 0 !important; } .tal-wrap.tp[data-tp-ficha2] .tal-dash { display: flex; flex-direction: column; gap: 14px; padding: 0 !important; border: 0 !important; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* la cabecera nueva */ .f2-hero { border: 1px solid var(--tp-borde); border-radius: 22px; background: var(--tp-card); -webkit-backdrop-filter: blur(var(--tp-blur)); backdrop-filter: blur(var(--tp-blur)); padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 14px; } .f2-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; } .f2-top .tal-back { margin: 0; } .f2-top .tal-dash__id { display: inline-flex; align-items: center; gap: 8px; } .f2-top .tal-dash__num { font-size: 18px; font-weight: 800; letter-spacing: .02em; font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--tp-azul); } .f2-top .tal-pill { font-size: 12.5px; } .f2-top .tal-dash__upd { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: var(--tp-txt3); } .f2-top .tal-dash__upd .tal-lbl { font-size: 11px; } .f2-main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 18px 24px; align-items: start; } .f2-cli .tal-lbl, .f2-eq .tal-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--tp-txt3); } .f2-cli .tal-lbl svg, .f2-eq .tal-lbl svg { width: 13px; height: 13px; } .f2-cli .tal-rcell__v { display: block; margin-top: 4px; font-size: 26px; font-weight: 800; line-height: 1.15; color: var(--tp-txt); } .f2-cli .tal-rcell__sub { display: block; margin-top: 5px; font-size: 15.5px; font-weight: 600; color: var(--tp-txt2); font-variant-numeric: tabular-nums; } .f2-contacto { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .f2-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--tp-borde); background: var(--tp-card3); color: var(--tp-azul); font-weight: 800; font-size: 13.5px; text-decoration: none; transition: transform .3s, border-color .3s; } .f2-pill:hover { transform: translateY(-2px); border-color: var(--tp-borde2); } .f2-pill svg { width: 16px; height: 16px; } .f2-pill--wa { color: #15803d; } [data-theme='dark'] .f2-pill--wa { color: #4ade80; } .f2-eq .tal-rcell__v { display: block; margin-top: 4px; font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--tp-txt); } .f2-eq .tal-rcell__sub { display: block; margin-top: 5px; font-size: 13.5px; color: var(--tp-txt2); } .f2-est { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; min-width: 280px; } .f2-est .tp-estado { display: grid !important; grid-template-columns: 64px minmax(0, 1fr) !important; gap: 2px 12px !important; align-items: center; padding: 0 !important; border: 0 !important; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; text-align: left !important; justify-items: start !important; width: auto; } .f2-est .tp-aro { grid-row: 1 / 3; } .f2-est .tp-aro, .f2-est .tp-aro svg { width: 64px !important; height: 64px !important; } .f2-est .tp-aro b { font-size: 15px !important; } .f2-est .tp-estado__ahora .tal-lbl, .f2-est .tp-estado__sig .tal-lbl { font-size: 11px; } .f2-est .tp-estado__ahora b, .f2-est .tp-estado__sig b { font-size: 16px !important; } .f2-est .tal-actionbar { display: flex !important; align-items: center; gap: 8px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; position: static !important; } .f2-est .tal-actionbar__info { display: none !important; } .f2-est .tal-actionbar__right { display: flex; gap: 8px; align-items: center; } .f2-est .tal-actionbar__go { padding: 12px 22px !important; font-size: 15px !important; border-radius: 999px; } .f2-facts { display: flex; flex-wrap: wrap; gap: 8px; } .f2-facts .tal-rcell { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--tp-borde); background: var(--tp-card3); } .f2-facts .tal-lbl { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tp-txt3); } .f2-facts .tal-lbl svg { width: 12px; height: 12px; } .f2-facts .tal-rcell__v { font-size: 14px; font-weight: 700; color: var(--tp-txt); } .f2-facts .tal-rcell__sub { font-weight: 500; color: var(--tp-txt2); margin-left: 6px; font-size: 13px; } /* el recorrido: una línea de pasos, siempre a la vista */ .tal-wrap.tp[data-tp-ficha2] .f2-ruta { display: flex; flex-direction: column; gap: 8px; } .tal-wrap.tp[data-tp-ficha2] .f2-ruta .tp-recorrido > summary { display: none; } .tal-wrap.tp[data-tp-ficha2] .f2-ruta .tp-recorrido, .tal-wrap.tp[data-tp-ficha2] .f2-ruta .tp-recorrido .tal-tlwrap { padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; margin: 0; overflow: visible; } .tal-wrap.tp[data-tp-ficha2] .f2-ruta .tal-tl { display: flex; flex-direction: row; gap: 0; list-style: none; margin: 0; padding: 2px 0 0; overflow-x: auto; } .tal-wrap.tp[data-tp-ficha2] .f2-ruta .tal-tl::before, .tal-wrap.tp[data-tp-ficha2] .f2-ruta .tal-tl::after { display: none; } .tal-wrap.tp[data-tp-ficha2] .f2-ruta .tal-tl__step { display: flex; flex: 1 1 0; min-width: 96px; position: relative; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 6px 4px 2px; } .tal-wrap.tp[data-tp-ficha2] .f2-ruta .tal-tl__step::before { content: ''; display: block; position: absolute; top: 19px; left: 50%; width: 100%; height: 2px; background: var(--tp-borde); } .tal-wrap.tp[data-tp-ficha2] .f2-ruta .tal-tl__step:first-child::before { display: block; } .tal-wrap.tp[data-tp-ficha2] .f2-ruta .tal-tl__step:last-child::before { display: none; } .tal-wrap.tp[data-tp-ficha2] .f2-ruta .tal-tl__dot { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: rgb(var(--tl-rgb, 148, 163, 184)); } .tal-wrap.tp[data-tp-ficha2] .f2-ruta .tal-tl__lbl { font-size: 12px; font-weight: 700; color: var(--tp-txt); line-height: 1.2; } .tal-wrap.tp[data-tp-ficha2] .f2-ruta .tal-tl__date { font-size: 11px; color: var(--tp-txt3); } .tal-wrap.tp[data-tp-ficha2] .f2-ruta .tp-masdatos { margin: 0; } .tal-wrap.tp[data-tp-ficha2] .f2-ruta .tp-masdatos > summary { font-size: 13px; padding: 6px 0; color: var(--tp-txt2); } /* las pestañas, dentro del contenido */ .tal-wrap.tp[data-tp-ficha2] .tal-tabpanes > .tal-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; padding: 4px !important; border-radius: 999px; border: 1px solid var(--tp-borde); background: var(--tp-card3); } .tal-wrap.tp[data-tp-ficha2] .tal-tabpanes .tal-tab { border-radius: 999px !important; padding: 9px 16px !important; font-size: 14px !important; border: 0 !important; background: none; } .tal-wrap.tp[data-tp-ficha2] .tal-tabpanes .tal-tab.is-on { background: var(--tp-azul) !important; color: #fff !important; } .tal-wrap.tp[data-tp-ficha2] .tal-tabpanes .tal-tab svg { width: 16px; height: 16px; } /* ---------- A · Tarjeta del cliente: todo en la cabecera (estilos base) ---------- */ /* ---------- B · Cliente al lado ---------- */ .tal-wrap.tp[data-tp-ficha2='B'] .tal-dash { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 14px; align-items: start; } .tal-wrap.tp[data-tp-ficha2='B'] .f2-hero { position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow: auto; } .tal-wrap.tp[data-tp-ficha2='B'] .f2-top .tal-dash__upd { margin-left: 0; width: 100%; } .tal-wrap.tp[data-tp-ficha2='B'] .f2-main { grid-template-columns: minmax(0, 1fr); gap: 14px; } .tal-wrap.tp[data-tp-ficha2='B'] .f2-cli .tal-rcell__v { font-size: 24px; } .tal-wrap.tp[data-tp-ficha2='B'] .f2-est { align-items: stretch; min-width: 0; padding-top: 12px; border-top: 1px solid var(--tp-borde); } .tal-wrap.tp[data-tp-ficha2='B'] .f2-est .tal-actionbar__right { flex-direction: column; align-items: stretch; width: 100%; } .tal-wrap.tp[data-tp-ficha2='B'] .f2-est .tal-actionbar__go { width: 100%; justify-content: center; } .tal-wrap.tp[data-tp-ficha2='B'] .f2-est .tal-menu, .tal-wrap.tp[data-tp-ficha2='B'] .f2-est .tal-menu > .tal-btn { width: 100%; justify-content: center; } .tal-wrap.tp[data-tp-ficha2='B'] .f2-facts { flex-direction: column; } .tal-wrap.tp[data-tp-ficha2='B'] .f2-facts .tal-rcell { display: flex; justify-content: space-between; align-items: center; border-radius: 12px; } .tal-wrap.tp[data-tp-ficha2='B'] .f2-facts .tal-rcell__v { text-align: right; } .tal-wrap.tp[data-tp-ficha2='B'] .f2-facts .tal-rcell__sub { display: block; margin: 2px 0 0; font-size: 12px; } .tal-wrap.tp[data-tp-ficha2='B'] .f2-ruta .tal-tl { flex-direction: column; overflow: visible; } .tal-wrap.tp[data-tp-ficha2='B'] .f2-ruta .tal-tl__step { display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "dot lbl" "dot date"; gap: 0 10px; text-align: left; align-items: center; min-width: 0; padding: 4px 0 10px; } .tal-wrap.tp[data-tp-ficha2='B'] .f2-ruta .tal-tl__step::before { top: 26px; left: 12px; width: 2px; height: calc(100% - 22px); } .tal-wrap.tp[data-tp-ficha2='B'] .f2-ruta .tal-tl__dot { grid-area: dot; } .tal-wrap.tp[data-tp-ficha2='B'] .f2-ruta .tal-tl__lbl { grid-area: lbl; font-size: 13px; } .tal-wrap.tp[data-tp-ficha2='B'] .f2-ruta .tal-tl__date { grid-area: date; } .tal-wrap.tp[data-tp-ficha2='B'] .tp-body { grid-column: 2; } /* ---------- C · Hoja: sin pestañas, todo seguido ---------- */ .tal-wrap.tp[data-tp-ficha2='C'] .f2-hero { border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 4px 6px 0; gap: 10px; } .tal-wrap.tp[data-tp-ficha2='C'] .f2-main { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cli est" "eq est"; gap: 6px 24px; } .tal-wrap.tp[data-tp-ficha2='C'] .f2-cli { grid-area: cli; } .tal-wrap.tp[data-tp-ficha2='C'] .f2-eq { grid-area: eq; } .tal-wrap.tp[data-tp-ficha2='C'] .f2-est { grid-area: est; } .tal-wrap.tp[data-tp-ficha2='C'] .f2-cli .tal-lbl, .tal-wrap.tp[data-tp-ficha2='C'] .f2-eq .tal-lbl { display: none; } .tal-wrap.tp[data-tp-ficha2='C'] .f2-cli .tal-rcell__v { font-size: 30px; margin: 0; } .tal-wrap.tp[data-tp-ficha2='C'] .f2-cli .tal-rcell__sub { display: inline-block; margin: 6px 12px 0 10px; } .tal-wrap.tp[data-tp-ficha2='C'] .f2-contacto { display: inline-flex; margin: 0; vertical-align: middle; } .tal-wrap.tp[data-tp-ficha2='C'] .f2-eq .tal-rcell__v { font-size: 18px; font-weight: 700; margin: 0; color: var(--tp-txt2); } .tal-wrap.tp[data-tp-ficha2='C'] .f2-eq .tal-rcell__sub { display: inline; margin: 0 0 0 8px; } .tal-wrap.tp[data-tp-ficha2='C'] .f2-facts .tal-rcell { border: 0; background: none; border-radius: 0; padding: 0 14px 0 0; border-right: 1px solid var(--tp-borde); } .tal-wrap.tp[data-tp-ficha2='C'] .f2-facts .tal-rcell:last-child { border-right: 0; } .tal-wrap.tp[data-tp-ficha2='C'] .f2-ruta { padding: 10px 14px; border: 1px solid var(--tp-borde); border-radius: 16px; background: var(--tp-card); -webkit-backdrop-filter: blur(var(--tp-blur)); backdrop-filter: blur(var(--tp-blur)); } .tal-wrap.tp[data-tp-ficha2='C'] .tal-tabpanes > .tal-tabs { position: sticky; top: 8px; z-index: 5; background: var(--tp-card); -webkit-backdrop-filter: blur(var(--tp-blur)); backdrop-filter: blur(var(--tp-blur)); } .tal-wrap.tp[data-tp-ficha2='C'] .tal-tabpanes .tal-tab.is-on { background: none !important; color: inherit !important; } .tal-wrap.tp[data-tp-ficha2='C'] .tal-tabpanes > .tal-tabpane { display: block !important; margin-bottom: 14px; scroll-margin-top: 70px; } /* ---------- la fila de arriba: «Volver» siempre primero y a la vista; número y fecha a su tamaño (gana a la piel base) ---------- */ .tal-wrap.tp[data-tp-ficha2] .f2-top .tal-back, .tal-wrap.tp[data-tp-ficha2] .f2-top .f2-volver { display: inline-flex !important; align-items: center; gap: 4px; order: -1; margin: 0; padding: 8px 14px 8px 10px; border-radius: 999px; font-size: 14px; font-weight: 800; } .tal-wrap.tp[data-tp-ficha2] .f2-top .tal-dash__num { font-size: 18px; } .tal-wrap.tp[data-tp-ficha2] .f2-top .tal-dash__upd { display: inline-flex; flex-direction: row; align-items: baseline; gap: 6px; margin-left: auto; font-size: 12.5px; } .tal-wrap.tp[data-tp-ficha2] .f2-top .tal-dash__upd .tal-lbl { font-size: 11px; } .tal-wrap.tp[data-tp-ficha2] .f2-top .tal-dash__upd .tal-dash__upd-v { font-size: 12.5px; font-weight: 700; } /* ---------- topes de ancho: nada de la ficha puede ensanchar la página (tablas y textos largos se quedan dentro) ---------- */ .tal-wrap.tp[data-tp-ficha2], .tal-wrap.tp[data-tp-ficha2] .tal-dash, .tal-wrap.tp[data-tp-ficha2] .tp-body, .tal-wrap.tp[data-tp-ficha2] .tal-tabpanes, .tal-wrap.tp[data-tp-ficha2] .tal-tabpane, .tal-wrap.tp[data-tp-ficha2] .f2-hero, .tal-wrap.tp[data-tp-ficha2] .f2-main > *, .tal-wrap.tp[data-tp-ficha2] .f2-top > * { min-width: 0; max-width: 100%; } .tal-wrap.tp[data-tp-ficha2] .tal-tabpane .tal-tablewrap { overflow-x: auto; max-width: 100%; } .tal-wrap.tp[data-tp-ficha2] .f2-cli .tal-rcell__v, .tal-wrap.tp[data-tp-ficha2] .f2-eq .tal-rcell__v { overflow-wrap: anywhere; } /* ---------- pantallas estrechas ---------- */ @media (max-width: 1000px) { .tal-wrap.tp[data-tp-ficha2='B'] .tal-dash { grid-template-columns: minmax(0, 1fr); } .tal-wrap.tp[data-tp-ficha2='B'] .f2-hero { position: static; max-height: none; } .tal-wrap.tp[data-tp-ficha2='B'] .tp-body { grid-column: auto; } } @media (max-width: 760px) { /* teléfono: letras e iconos a tamaño de teléfono; «Volver» arriba a la izquierda con el número al lado; la fecha debajo, pequeña */ .tal-wrap.tp[data-tp-ficha2] .tal-tabpane { overflow-x: clip; } /* solo en el teléfono: ningún panel ancho ensancha la página */ .tal-wrap.tp[data-tp-ficha2] .f2-hero { padding: 12px 14px 14px; gap: 12px; border-radius: 18px; } .tal-wrap.tp[data-tp-ficha2] .f2-top { gap: 8px 10px; } .tal-wrap.tp[data-tp-ficha2] .f2-top .tal-back, .tal-wrap.tp[data-tp-ficha2] .f2-top .f2-volver { padding: 7px 12px 7px 8px; font-size: 13.5px; } .tal-wrap.tp[data-tp-ficha2] .f2-top .tal-dash__num { font-size: 16px; } .tal-wrap.tp[data-tp-ficha2] .f2-top .tal-pill { font-size: 11.5px; } .tal-wrap.tp[data-tp-ficha2] .f2-top .tal-dash__upd { margin-left: 0; width: 100%; font-size: 11.5px; color: var(--tp-txt3); } .tal-wrap.tp[data-tp-ficha2] .f2-top .tal-dash__upd .tal-lbl { font-size: 10.5px; } .tal-wrap.tp[data-tp-ficha2] .f2-top .tal-dash__upd .tal-dash__upd-v { font-size: 11.5px; } .tal-wrap.tp[data-tp-ficha2] .f2-top .tal-roleswitch { width: 100%; justify-content: center; } .tal-wrap.tp[data-tp-ficha2] .f2-top .tal-role { font-size: 12.5px; padding: 6px 12px; } .f2-main, .tal-wrap.tp[data-tp-ficha2='C'] .f2-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cli" "eq" "est"; gap: 12px; } .tal-wrap.tp[data-tp-ficha2] .f2-cli .tal-lbl, .tal-wrap.tp[data-tp-ficha2] .f2-eq .tal-lbl { font-size: 10.5px; } .tal-wrap.tp[data-tp-ficha2] .f2-cli .tal-lbl svg, .tal-wrap.tp[data-tp-ficha2] .f2-eq .tal-lbl svg, .tal-wrap.tp[data-tp-ficha2] .f2-facts .tal-lbl svg { width: 12px; height: 12px; } .f2-cli .tal-rcell__v, .tal-wrap.tp[data-tp-ficha2='B'] .f2-cli .tal-rcell__v, .tal-wrap.tp[data-tp-ficha2='C'] .f2-cli .tal-rcell__v { font-size: 21px; } .tal-wrap.tp[data-tp-ficha2] .f2-cli .tal-rcell__sub { font-size: 14px; } .tal-wrap.tp[data-tp-ficha2] .f2-pill { padding: 7px 12px; font-size: 13px; } .tal-wrap.tp[data-tp-ficha2] .f2-pill svg { width: 15px; height: 15px; } .tal-wrap.tp[data-tp-ficha2] .f2-eq .tal-rcell__v { font-size: 17px; } .tal-wrap.tp[data-tp-ficha2] .f2-eq .tal-rcell__sub { font-size: 12.5px; } .f2-est { align-items: stretch; min-width: 0; } .tal-wrap.tp[data-tp-ficha2] .f2-est .tp-estado { grid-template-columns: 56px minmax(0, 1fr) !important; } .tal-wrap.tp[data-tp-ficha2] .f2-est .tp-aro, .tal-wrap.tp[data-tp-ficha2] .f2-est .tp-aro svg { width: 56px !important; height: 56px !important; } .tal-wrap.tp[data-tp-ficha2] .f2-est .tp-aro b { font-size: 13px !important; } .tal-wrap.tp[data-tp-ficha2] .f2-est .tp-estado__ahora b, .tal-wrap.tp[data-tp-ficha2] .f2-est .tp-estado__sig b { font-size: 15px !important; } .f2-est .tal-actionbar__right { flex-wrap: wrap; } .f2-est .tal-actionbar__go { flex: 1 1 auto; justify-content: center; } .tal-wrap.tp[data-tp-ficha2] .f2-est .tal-actionbar__go { padding: 11px 18px !important; font-size: 14.5px !important; } .tal-wrap.tp[data-tp-ficha2] .f2-facts .tal-rcell { padding: 6px 11px; } .tal-wrap.tp[data-tp-ficha2] .f2-facts .tal-lbl { font-size: 10.5px; } .tal-wrap.tp[data-tp-ficha2] .f2-facts .tal-rcell__v { font-size: 13.5px; } .tal-wrap.tp[data-tp-ficha2] .f2-ruta .tal-tl__lbl { font-size: 12px; } .tal-wrap.tp[data-tp-ficha2] .tal-tabpanes .tal-tab { padding: 8px 13px !important; font-size: 13.5px !important; } } /* ============================================================ DANGOFE-taller-285 · Configuración del taller → Avisos → «¿A quién le llega cada correo?» (lo arma correosCosasHtml() en taller.js: .tal-ccos > .tal-ccos__fila[data-ccos] con .tal-ccos__cab, «Hoy llega a:», .tal-ccos__persona, .tal-portalcfg__fila, .tal-actions y .tal-ccos__prueba). Pieza del chat de Diseño. Va al final de taller-panel.css (piel «Panel» del Taller) y usa sus mismos tokens --tp-*; «Noche azul» sale sola por [data-theme='dark']. ============================================================ */ .tal-wrap.tp .tal-ccos { display: flex; flex-direction: column; gap: 10px; } .tal-wrap.tp .tal-ccos > .tal-facext__cab { margin: 14px 0 0 !important; } .tal-wrap.tp .tal-ccos > .tal-sub { margin: 0 0 2px; font-size: 13px; } .tal-wrap.tp .tal-ccos__fila { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 13px; border-radius: var(--tp-r2); border: 1px solid var(--tp-borde); background: var(--tp-card2); } .tal-wrap.tp .tal-ccos__fila[data-ccos='cliente'] { background: transparent; border-style: dashed; } .tal-wrap.tp .tal-ccos__fila.tal-aqui { outline-offset: 2px; } .tal-wrap.tp .tal-ccos__cab { display: flex; flex-direction: column; gap: 2px; } .tal-wrap.tp .tal-ccos__cab b { font-size: 15px; font-weight: 800; line-height: 1.25; } .tal-wrap.tp .tal-ccos__cab span { font-size: 12.5px; color: var(--tp-txt2); line-height: 1.4; } .tal-wrap.tp .tal-ccos__fila > .tal-muted { margin: 0; opacity: 1; color: var(--tp-txt2); font-size: 13px; line-height: 1.5; } .tal-wrap.tp .tal-ccos__fila > .tal-muted b { color: var(--tp-txt); font-weight: 700; overflow-wrap: anywhere; } .tal-wrap.tp .tal-ccos__fila > .tal-muted svg { vertical-align: -2px; } .tal-wrap.tp .tal-ccos__fila > .tal-lbl { margin: 2px 0 -2px !important; opacity: .7; } /* cada persona: nombre y sus cuentas · correo · Guardar · (rebotó) */ .tal-wrap.tp .tal-ccos__persona { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(190px, 1.5fr) auto auto; gap: 6px 10px; align-items: center; padding: 8px 10px; border-radius: var(--tp-r3); border: 1px solid var(--tp-borde); background: var(--tp-card3); } .tal-wrap.tp .tal-ccos__quien { display: flex; flex-direction: column; min-width: 0; } .tal-wrap.tp .tal-ccos__quien b { font-size: 13.5px; font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tal-wrap.tp .tal-ccos__quien small { font-size: 11.5px; color: var(--tp-txt3); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tal-wrap.tp .tal-ccos__quien small .tal-badge { margin: 0; white-space: normal; } .tal-wrap.tp .tal-ccos__persona input[type='email'] { min-width: 0; width: 100%; min-height: 36px; padding: 6px 11px; border-radius: 10px; border: 1px solid var(--tp-borde2); background: var(--tp-card); color: inherit; font: inherit; font-size: 13.5px; outline: none; } .tal-wrap.tp .tal-ccos__persona input[type='email']:focus { box-shadow: 0 0 0 3px rgba(var(--tp-cel), .28); } .tal-wrap.tp .tal-ccos__persona .tal-btn { min-height: 36px; padding: 6px 12px; font-size: 13px; white-space: nowrap; } .tal-wrap.tp .tal-ccos__persona .tal-btn[disabled] { opacity: .5; cursor: default; } .tal-wrap.tp .tal-ccos__persona > .tal-badge { margin: 0; justify-self: start; } /* la etiqueta «rebotó» (tal-badge--warn no existía) */ .tal-wrap.tp .tal-badge--warn { background: rgba(var(--tp-amb), .16); border-color: rgba(var(--tp-amb), .4); color: #9a5b00; } [data-theme='dark'] .tal-wrap.tp .tal-badge--warn { color: #fcd34d; } /* la fila de «escribe a qué correos llegan» + botones */ .tal-wrap.tp .tal-ccos .tal-portalcfg__fila { margin: 2px 0 0; align-items: flex-end; } .tal-wrap.tp .tal-ccos .tal-portalcfg__fila .tal-field { flex: 1 1 320px; } .tal-wrap.tp .tal-ccos .tal-portalcfg__fila .tal-field input { min-height: 38px; font-size: 13.5px; } .tal-wrap.tp .tal-ccos .tal-actions { margin: 0; gap: 8px; } .tal-wrap.tp .tal-ccos .tal-actions .tal-btn { min-height: 36px; font-size: 13px; } /* el resultado de la última prueba, correo por correo */ .tal-wrap.tp .tal-ccos__prueba { padding: 10px 12px; border-radius: var(--tp-r3); background: rgba(var(--tp-cel), .08); border: 1px solid rgba(var(--tp-cel), .18); } .tal-wrap.tp .tal-ccos__prueba .tal-lbl { margin: 0 0 6px; opacity: .75; } .tal-wrap.tp .tal-ccos__prueba ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .tal-wrap.tp .tal-ccos__prueba li { display: flex; align-items: flex-start; gap: 6px; line-height: 1.4; overflow-wrap: anywhere; } .tal-wrap.tp .tal-ccos__prueba li svg { flex: none; margin-top: 3px; } .tal-wrap.tp .tal-ccos__prueba li.is-ok svg { color: rgb(var(--tp-ver)); } .tal-wrap.tp .tal-ccos__prueba li.is-bad { color: #b42318; } .tal-wrap.tp .tal-ccos__prueba li.is-bad svg { color: rgb(var(--tp-roj)); } .tal-wrap.tp .tal-ccos__prueba li .tal-muted { opacity: .8; font-size: 12px; } [data-theme='dark'] .tal-wrap.tp .tal-ccos__prueba li.is-bad { color: #fca5a5; } .tal-wrap.tp .tal-ccos > .tal-cotform__err { margin-top: 2px; } /* teléfono: la persona en dos renglones (nombre arriba; correo + Guardar abajo) */ @media (max-width: 760px) { .tal-wrap.tp .tal-ccos__persona { grid-template-columns: minmax(0, 1fr) auto; } .tal-wrap.tp .tal-ccos__quien { grid-column: 1 / -1; } .tal-wrap.tp .tal-ccos__quien b, .tal-wrap.tp .tal-ccos__quien small { white-space: normal; } .tal-wrap.tp .tal-ccos__persona > .tal-badge { grid-column: 1 / -1; } .tal-wrap.tp .tal-ccos__fila { padding: 11px 12px 12px; } } /* ============================================================ DANGOFE-taller-288 · CENTRO DE NOTIFICACIONES DEL TALLER (#tal-notifzone · .tal-card.tal-notif) Karla (T48): «un taller de notificaciones en taller inteligente que trabaje al compás de los correos». Lo arma notifHtml() en taller.js: cabecera plegable (campana · «N nuevas» · chevrón), filtros con chips, y la lista: cada aviso dice a quién fue (cliente / administración / técnico), qué, de qué equipo, cuándo y si salió. Cada tipo lleva su color en el borde izquierdo. Pieza del chat de Diseño; va al final de taller-panel.css y usa sus tokens --tp-*; «Noche azul» sale sola por [data-theme='dark']. ============================================================ */ .tal-wrap.tp .tal-notif { padding: 0; overflow: hidden; } .tal-wrap.tp .tal-notif__cab { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 28px; gap: 10px; align-items: center; width: 100%; padding: 12px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } .tal-wrap.tp .tal-notif__cab > svg { width: 40px; height: 40px; padding: 10px; box-sizing: border-box; border-radius: 13px; background: rgba(var(--tp-cel), .14); color: var(--tp-azul); } .tal-wrap.tp .tal-notif__cab > b { font-size: 15.5px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tal-wrap.tp .tal-notif__cab > .tal-muted { font-size: 12.5px; opacity: 1; color: var(--tp-txt3); white-space: nowrap; } .tal-wrap.tp .tal-notif__n { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgb(var(--tp-roj)); color: #fff; font-size: 11.5px; font-weight: 800; white-space: nowrap; animation: tal-notif-late 2s ease-out infinite; } .tal-wrap.tp .tal-notif__chev { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--tp-tile); color: var(--tp-azul); transition: transform .3s; } .tal-wrap.tp .tal-notif__chev svg { width: 16px; height: 16px; } .tal-wrap.tp .tal-notif.is-abierto .tal-notif__chev { transform: rotate(180deg); } .tal-wrap.tp .tal-notif.is-abierto .tal-notif__cab { border-bottom: 1px solid var(--tp-borde); } .tal-wrap.tp .tal-notif > .tal-sub { margin: 0; padding: 10px 14px 0; font-size: 13px; } /* filtros */ .tal-wrap.tp .tal-notif__filtros { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 14px; } .tal-wrap.tp .tal-notif__filtros .tal-chip { min-height: 30px; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--tp-borde2); background: var(--tp-card2); color: inherit; cursor: pointer; } .tal-wrap.tp .tal-notif__filtros .tal-chip--on { background: rgb(var(--tp-az)); border-color: transparent; color: #fff; } .tal-wrap.tp .tal-notif__filtros #tal-notif-vistas { margin-left: auto; min-height: 30px; padding: 4px 12px; font-size: 12.5px; } .tal-wrap.tp .tal-notif > .tal-muted, .tal-wrap.tp .tal-notif > .tal-cotform__err { margin: 0; padding: 4px 14px 14px; } /* la lista */ .tal-wrap.tp .tal-notif__lista { list-style: none; margin: 0; padding: 0 10px 12px; display: flex; flex-direction: column; gap: 6px; } .tal-wrap.tp .tal-notif__btn { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 12px 10px 13px; border-radius: 14px; border: 1px solid var(--tp-borde); border-left: 4px solid var(--tp-txt3); background: var(--tp-card2); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .2s, transform .2s; -webkit-tap-highlight-color: transparent; } .tal-wrap.tp .tal-notif__btn:hover { background: var(--tp-card3); } .tal-wrap.tp .tal-notif__btn:active { transform: scale(.995); } .tal-wrap.tp .tal-notif__it--cancelados .tal-notif__btn { border-left-color: rgb(var(--tp-roj)); } .tal-wrap.tp .tal-notif__it--pagos .tal-notif__btn { border-left-color: rgb(var(--tp-ver)); } .tal-wrap.tp .tal-notif__it--citas .tal-notif__btn { border-left-color: rgb(var(--tp-cel)); } .tal-wrap.tp .tal-notif__it--mensajes .tal-notif__btn { border-left-color: rgb(var(--tp-mor)); } .tal-wrap.tp .tal-notif__it--tecnicos .tal-notif__btn { border-left-color: rgb(var(--tp-amb)); } .tal-wrap.tp .tal-notif__it--equipos .tal-notif__btn { border-left-color: rgb(var(--tp-az)); } .tal-wrap.tp .tal-notif__it.is-nuevo .tal-notif__btn { background: var(--tp-card3); } .tal-wrap.tp .tal-notif__it.is-nuevo .tal-notif__txt b::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; background: rgb(var(--tp-cel)); } .tal-wrap.tp .tal-notif__para { justify-self: start; display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; background: var(--tp-tile); color: var(--tp-azul); } .tal-wrap.tp .tal-notif__para--cliente { background: rgba(var(--tp-ver), .14); color: #15724a; } .tal-wrap.tp .tal-notif__para--tecnico { background: rgba(var(--tp-amb), .16); color: #9a5b00; } .tal-wrap.tp .tal-notif__txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .tal-wrap.tp .tal-notif__txt b { font-size: 13.5px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; } .tal-wrap.tp .tal-notif__txt small { font-size: 12px; color: var(--tp-txt3); line-height: 1.35; overflow-wrap: anywhere; } .tal-wrap.tp .tal-notif__der { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; } .tal-wrap.tp .tal-notif__hora { font-size: 11.5px; color: var(--tp-txt3); } .tal-wrap.tp .tal-notif__est { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; } .tal-wrap.tp .tal-notif__est.is-ok { background: rgba(var(--tp-ver), .14); color: #15724a; } .tal-wrap.tp .tal-notif__est.is-bad { background: rgba(var(--tp-roj), .12); color: #b42318; } /* Noche azul */ [data-theme='dark'] .tal-wrap.tp .tal-notif__para--cliente, [data-theme='dark'] .tal-wrap.tp .tal-notif__est.is-ok { color: #6ee7b7; } [data-theme='dark'] .tal-wrap.tp .tal-notif__para--tecnico { color: #fcd34d; } [data-theme='dark'] .tal-wrap.tp .tal-notif__est.is-bad { color: #fca5a5; } [data-theme='dark'] .tal-wrap.tp .tal-notif__filtros .tal-chip--on { background: #2e5bd9; } /* teléfono */ @media (max-width: 640px) { .tal-wrap.tp .tal-notif__cab { grid-template-columns: 36px minmax(0, 1fr) auto 24px; padding: 11px 12px; } .tal-wrap.tp .tal-notif__cab > svg { width: 36px; height: 36px; padding: 9px; } .tal-wrap.tp .tal-notif__cab > b { font-size: 14.5px; } .tal-wrap.tp .tal-notif__btn { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; } .tal-wrap.tp .tal-notif__para { grid-column: 1 / -1; } .tal-wrap.tp .tal-notif__filtros #tal-notif-vistas { margin-left: 0; } } @keyframes tal-notif-late { 0% { box-shadow: 0 0 0 0 rgba(var(--tp-roj), .45); } 70% { box-shadow: 0 0 0 6px rgba(var(--tp-roj), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--tp-roj), 0); } } @media (prefers-reduced-motion: reduce) { .tal-wrap.tp .tal-notif__n { animation: none; } } /* ============================================================ FICHA «B · Cliente al lado» · dos arreglos (2026-10-16) · va al FINAL de taller-panel.css Karla, con capturas: «corrige en taller estos espacios en blanco y esto, que no afecte la visibilidad en los celulares y iPad». 1) El hueco en blanco: la ficha B es una rejilla de 2 columnas (cliente 340 px | contenido). La tarjeta del cliente caía en la fila 1 junto con la PRIMERA tarjeta del contenido (p. ej. la entrega, 225 px), y la fila medía lo que la tarjeta del cliente (≈740 px): el resto del contenido empezaba debajo de ese alto y quedaba medio metro de fondo vacío. Ahora la tarjeta del cliente abarca todas las filas y el contenido fluye pegado, sin huecos. Solo en pantalla ancha (> 1000 px); en iPad vertical y teléfono la ficha ya va en una columna y no se toca. 2) La pastilla «Facturado y entregado · garantía: N días» se cortaba (sin la «s»): ahora el texto se parte en dos renglones cuando no cabe, centrado, y la barra admite «Más acciones», «Descargar factura» y la pastilla sin cortes a 375, 820 y 1200. ============================================================ */ @media (min-width: 1001px) { .tal-wrap.tp[data-tp-ficha2='B'] .tal-dash { row-gap: 0; align-items: start; } .tal-wrap.tp[data-tp-ficha2='B'] .tal-dash > .f2-hero { grid-column: 1; grid-row: 1 / span 16; align-self: start; } .tal-wrap.tp[data-tp-ficha2='B'] .tal-dash > :not(.f2-hero) { grid-column: 2; margin-bottom: 14px; min-width: 0; } .tal-wrap.tp[data-tp-ficha2='B'] .tal-dash > .tp-body { margin-bottom: 0; } } /* la pastilla de estado: nunca cortada */ .tal-wrap.tp .tal-actionbar__estado { white-space: normal; text-align: center; justify-content: center; line-height: 1.3; max-width: 100%; min-width: 0; } .tal-wrap.tp .tal-actionbar__estado svg { flex: 0 0 auto; } .tal-wrap.tp .tal-actionbar__right { flex-wrap: wrap; min-width: 0; } /* si taller.js separa la garantía en …, va en su propio renglón, más fina */ .tal-wrap.tp .tal-actionbar__gar { display: block; flex: 1 1 100%; font-size: .86em; font-weight: 600; opacity: .9; } /* B · la barra en la columna del cliente: cada pieza a lo ancho (Más acciones, Descargar factura, la pastilla) */ .tal-wrap.tp[data-tp-ficha2='B'] .f2-est .tal-actionbar__right > .tal-btn, .tal-wrap.tp[data-tp-ficha2='B'] .f2-est .tal-actionbar__right > .tal-actionbar__estado { width: 100%; justify-content: center; } .tal-wrap.tp[data-tp-ficha2='B'] .f2-est .tal-actionbar__right > a.tal-btn { text-decoration: none; } /* A y teléfono: la pastilla ocupa su propia línea cuando acompaña a los botones */ @media (max-width: 760px) { .tal-wrap.tp .tal-actionbar__right { flex-wrap: wrap; justify-content: stretch; } .tal-wrap.tp .tal-actionbar__right > .tal-menu, .tal-wrap.tp .tal-actionbar__right > a.tal-btn { flex: 1 1 auto; min-width: 140px; } .tal-wrap.tp .tal-actionbar__right > .tal-menu > .tal-btn, .tal-wrap.tp .tal-actionbar__right > a.tal-btn { width: 100%; justify-content: center; } .tal-wrap.tp .tal-actionbar__right > .tal-actionbar__estado { flex: 1 1 100%; } }