/* DANGOFE OS · Portal del técnico · «Mi taller / Mi mesa» · LAS TARJETAS DE LA COLA, legibles (T128, Karla: «se ven borrosas») · portal-mesa-tarjetas v1.0.0 · 2026-10-26 · chat de Diseño
   Se aplica sobre el MISMO HTML de hoy (.pt-wrap.pm .ptx-eq …). Elige con data-pm-tarjeta="A|B|C" en .pt-wrap (o window.DANGOFE_MESA_TARJETA).
   Regla: vidrio claro SIN desenfoque en las tarjetas (el desenfoque va solo en el fondo), bordes nítidos, texto a todo contraste, sin sombras, Noche azul. */
.pt-wrap.pm[data-pm-tarjeta] { --mt-fg: #0b1540; --mt-fg2: #3b4a63; --mt-mut: #5b6b86; --mt-card: rgba(255, 255, 255, .9); --mt-card2: #ffffff; --mt-line: rgba(11, 21, 64, .16); --mt-acc: #0b63ce; --mt-acc-txt: #084a9e; --mt-accs: rgba(11, 99, 206, .12); --mt-ok: #15803d; --mt-oks: rgba(34, 197, 94, .16); --mt-amb: #b45309; --mt-ambs: rgba(251, 191, 36, .2); --mt-bad: #b91c1c; --mt-bads: rgba(220, 38, 38, .12); --mt-oro: #a16207; --mt-oros: rgba(251, 191, 36, .22); }
[data-theme='dark'] .pt-wrap.pm[data-pm-tarjeta] { --mt-fg: #eef3ff; --mt-fg2: #cdd9f0; --mt-mut: #9fb0cf; --mt-card: rgba(16, 32, 64, .92); --mt-card2: #122a55; --mt-line: rgba(205, 222, 255, .22); --mt-acc: #8ab8ff; --mt-acc-txt: #a9c9ff; --mt-accs: rgba(138, 184, 255, .18); --mt-ok: #7fe0a3; --mt-oks: rgba(34, 197, 94, .2); --mt-amb: #fbbf24; --mt-ambs: rgba(251, 191, 36, .18); --mt-bad: #ffb4a6; --mt-bads: rgba(220, 38, 38, .22); --mt-oro: #fcd34d; --mt-oros: rgba(251, 191, 36, .2); }
/* lo común a las tres: nada borroso, todo legible */
.pt-wrap.pm[data-pm-tarjeta] .ptx-eq { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--mt-card); border: 1px solid var(--mt-line); color: var(--mt-fg); box-shadow: none; opacity: 1; }
.pt-wrap.pm[data-pm-tarjeta] .ptx-eq * { opacity: 1; }
.pt-wrap.pm[data-pm-tarjeta] .ptx-eq__num { color: var(--mt-acc-txt); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.pt-wrap.pm[data-pm-tarjeta] .ptx-eq__equipo { color: var(--mt-fg); font-size: 16.5px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.pt-wrap.pm[data-pm-tarjeta] .ptx-eq__equipo svg { color: var(--mt-acc); flex: none; }
.pt-wrap.pm[data-pm-tarjeta] .ptx-eq__cli { color: var(--mt-fg2); font-size: 14px; font-weight: 600; min-width: 0; }
.pt-wrap.pm[data-pm-tarjeta] .ptx-eq__cli svg { flex: none; color: var(--mt-mut); }
.pt-wrap.pm[data-pm-tarjeta] .ptx-eq__diag { color: var(--mt-fg2); font-size: 13.5px; line-height: 1.45; background: var(--mt-accs); border-radius: 12px; padding: 8px 10px; }
.pt-wrap.pm[data-pm-tarjeta] .pt-estado { background: var(--mt-accs); color: var(--mt-acc-txt); border: 1px solid transparent; font-size: 12px; font-weight: 800; padding: 4px 10px; white-space: nowrap; }
.pt-wrap.pm[data-pm-tarjeta] .pt-estado--pend { background: var(--mt-ambs); color: #92400e; }
[data-theme='dark'] .pt-wrap.pm[data-pm-tarjeta] .pt-estado--pend { color: var(--mt-amb); }
.pt-wrap.pm[data-pm-tarjeta] .pt-estado--porfac, .pt-wrap.pm[data-pm-tarjeta] .pt-estado--fact { background: var(--mt-oks); color: #14532d; }
[data-theme='dark'] .pt-wrap.pm[data-pm-tarjeta] .pt-estado--porfac, [data-theme='dark'] .pt-wrap.pm[data-pm-tarjeta] .pt-estado--fact { color: var(--mt-ok); }
.pt-wrap.pm[data-pm-tarjeta] .ptx-vip { background: var(--mt-oros); color: var(--mt-oro); font-weight: 800; }
.pt-wrap.pm[data-pm-tarjeta] .ptx-dias { color: var(--mt-fg); font-weight: 700; font-size: 13px; background: rgba(91, 107, 134, .12); border-radius: 999px; padding: 4px 10px; }
.pt-wrap.pm[data-pm-tarjeta] .ptx-dias.is-aviso { color: #92400e; background: var(--mt-ambs); }
[data-theme='dark'] .pt-wrap.pm[data-pm-tarjeta] .ptx-dias.is-aviso { color: var(--mt-amb); }
.pt-wrap.pm[data-pm-tarjeta] .ptx-dias.is-alerta { color: var(--mt-bad); background: var(--mt-bads); }
.pt-wrap.pm[data-pm-tarjeta] .ptx-link { color: var(--mt-acc-txt); background: var(--mt-accs); font-weight: 800; }
.pt-wrap.pm[data-pm-tarjeta] .ptx-din { color: var(--mt-fg2); background: var(--mt-oks); border: 0; font-weight: 600; }
.pt-wrap.pm[data-pm-tarjeta] .ptx-din--no { background: rgba(91, 107, 134, .12); }
.pt-wrap.pm[data-pm-tarjeta] .ptx-espera { color: var(--mt-amb); background: var(--mt-ambs); border-radius: 12px; padding: 10px 12px; font-weight: 700; width: 100%; justify-content: center; }
.pt-wrap.pm[data-pm-tarjeta] .ptx-eq__acc .ptx-btn--pri { background: var(--mt-acc); color: #fff; box-shadow: none; border: 0; font-weight: 800; }
[data-theme='dark'] .pt-wrap.pm[data-pm-tarjeta] .ptx-eq__acc .ptx-btn--pri { color: #0a0f1d; }
.pt-wrap.pm[data-pm-tarjeta] .ptx-eq.pm-ahora { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--mt-card2); box-shadow: none; }
.pt-wrap.pm[data-pm-tarjeta] .ptx-eq.is-vip { box-shadow: none; border-color: rgba(251, 191, 36, .7); }
/* la capacidad (nuevo span, opcional) y «lo que sigue» como fila propia */
.pt-wrap.pm[data-pm-tarjeta] .ptx-eq__cap { display: inline-flex; padding: 3px 9px; border-radius: 999px; background: var(--mt-accs); color: var(--mt-acc-txt); font-size: 12px; font-weight: 800; margin-left: 6px; vertical-align: middle; white-space: nowrap; }
.pt-wrap.pm[data-pm-tarjeta] .ptx-eq__sigue { grid-area: sig; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mt-fg2); min-width: 0; }
.pt-wrap.pm[data-pm-tarjeta] .ptx-eq__sigue b { color: var(--mt-fg); }
/* ===== A · PAPEL: tarjeta blanca con franja de estado a la izquierda; grande y aireada ===== */
.pt-wrap.pm[data-pm-tarjeta="A"] .ptx-eq { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "ojal ojal" "aro top" "aro equipo" "aro cli" "diag diag" "din din" "sig sig" "pie pie" "acc acc"; gap: 4px 12px; padding: 14px 16px 14px 18px; border-radius: 20px; border-left: 6px solid var(--mt-acc); }
.pt-wrap.pm[data-pm-tarjeta="A"] .ptx-eq--pend { border-left-color: var(--mt-amb); }
.pt-wrap.pm[data-pm-tarjeta="A"] .ptx-eq--porfac, .pt-wrap.pm[data-pm-tarjeta="A"] .ptx-eq--fact { border-left-color: var(--mt-ok); }
.pt-wrap.pm[data-pm-tarjeta="A"] .ptx-eq__top { gap: 8px; }
.pt-wrap.pm[data-pm-tarjeta="A"] .ptx-eq__equipo { font-size: 18px; }
.pt-wrap.pm[data-pm-tarjeta="A"] .ptx-eq__pie { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--mt-line); }
.pt-wrap.pm[data-pm-tarjeta="A"] .ptx-eq__cuenta, .pt-wrap.pm[data-pm-tarjeta="B"] .ptx-eq__cuenta { display: none; }
.pt-wrap.pm[data-pm-tarjeta="A"] .ptx-eq.pm-ahora { grid-template-columns: 112px minmax(0, 1fr); }
.pt-wrap.pm[data-pm-tarjeta="B"] .ptx-eq.pm-ahora .pm-aro { width: 88px; height: 88px; }
.pt-wrap.pm[data-pm-tarjeta="B"] .ptx-eq.pm-ahora .pm-aro b { font-size: 20px; }
/* ===== B · FICHA: una rejilla de datos con rótulos (cliente · capacidad · días · sigue) ===== */
.pt-wrap.pm[data-pm-tarjeta="B"] .ptx-eq { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ojal ojal" "top aro" "equipo aro" "cli cli" "diag diag" "din din" "sig sig" "pie pie" "acc acc"; gap: 6px 12px; padding: 14px 16px; border-radius: 18px; border-width: 1.5px; }
.pt-wrap.pm[data-pm-tarjeta="B"] .ptx-eq > .pm-aro { align-self: center; }
.pt-wrap.pm[data-pm-tarjeta="B"] .ptx-eq__top { gap: 8px; }
.pt-wrap.pm[data-pm-tarjeta="B"] .ptx-eq__equipo { font-size: 17px; }
.pt-wrap.pm[data-pm-tarjeta="B"] .ptx-eq__cli { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; font-size: 14px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(91, 107, 134, .08); }
[data-theme='dark'] .pt-wrap.pm[data-pm-tarjeta="B"] .ptx-eq__cli { background: rgba(255, 255, 255, .06); }
.pt-wrap.pm[data-pm-tarjeta="B"] .ptx-eq__cli::before { content: 'Cliente'; grid-column: 1 / -1; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mt-mut); }
.pt-wrap.pm[data-pm-tarjeta="B"] .ptx-eq__pie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.pt-wrap.pm[data-pm-tarjeta="B"] .ptx-dias { justify-self: start; }
.pt-wrap.pm[data-pm-tarjeta="B"] .ptx-eq__sigue { padding: 8px 10px; border-radius: 12px; background: var(--mt-accs); }
/* ===== C · CARRIL: filas compactas para la cola; el contador de días a la izquierda, grande ===== */
.pt-wrap.pm[data-pm-tarjeta="C"] .ptx-cola__lista { gap: 6px; }
.pt-wrap.pm[data-pm-tarjeta="C"] .ptx-eq { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "ojal ojal" "dias top" "dias equipo" "dias cli" "sig sig" "diag diag" "din din" "pie pie" "acc acc"; gap: 3px 10px; padding: 10px 12px; border-radius: 16px; }
.pt-wrap.pm[data-pm-tarjeta="C"] .ptx-eq > .pm-aro { display: none; }
.pt-wrap.pm[data-pm-tarjeta="C"] .ptx-eq .ptx-eq__top { grid-area: top; align-self: start; justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
.pt-wrap.pm[data-pm-tarjeta="C"] .ptx-eq__pie { justify-content: flex-end; }
.pt-wrap.pm[data-pm-tarjeta="C"] .ptx-eq__pie .ptx-dias { display: none; }
.pt-wrap.pm[data-pm-tarjeta="C"] .ptx-eq__cuenta { grid-area: dias; align-self: start; width: 56px; height: 56px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(91, 107, 134, .12); color: var(--mt-fg2); font-weight: 800; line-height: 1; }
.pt-wrap.pm[data-pm-tarjeta="C"] .ptx-eq__cuenta b { font-size: 22px; font-variant-numeric: tabular-nums; }
.pt-wrap.pm[data-pm-tarjeta="C"] .ptx-eq__cuenta small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.pt-wrap.pm[data-pm-tarjeta="C"] .ptx-eq__cuenta.is-aviso { background: var(--mt-ambs); color: #92400e; }
[data-theme='dark'] .pt-wrap.pm[data-pm-tarjeta="C"] .ptx-eq__cuenta.is-aviso { color: var(--mt-amb); }
.pt-wrap.pm[data-pm-tarjeta="C"] .ptx-eq__cuenta.is-alerta { background: var(--mt-bads); color: var(--mt-bad); }
.pt-wrap.pm[data-pm-tarjeta="C"] .ptx-eq__equipo { font-size: 15.5px; }
.pt-wrap.pm[data-pm-tarjeta="C"] .ptx-eq__cli { font-size: 13.5px; }
.pt-wrap.pm[data-pm-tarjeta="C"] .ptx-eq.pm-ahora { grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "ojal ojal" "aro top" "aro equipo" "aro cli" "sig sig" "diag diag" "din din" "pie pie" "acc acc"; padding: 16px; border-radius: 24px; }
.pt-wrap.pm[data-pm-tarjeta="C"] .ptx-eq.pm-ahora > .pm-aro { display: block; }
.pt-wrap.pm[data-pm-tarjeta="C"] .ptx-eq.pm-ahora .ptx-eq__cuenta { display: none; }
.pt-wrap.pm[data-pm-tarjeta="C"] .ptx-eq.pm-ahora .ptx-eq__pie .ptx-dias { display: inline-flex; }
/* textos largos: nunca se salen */
.pt-wrap.pm[data-pm-tarjeta] .ptx-eq__equipo span, .pt-wrap.pm[data-pm-tarjeta] .ptx-eq__cli, .pt-wrap.pm[data-pm-tarjeta] .ptx-eq__diag, .pt-wrap.pm[data-pm-tarjeta] .ptx-eq__sigue { overflow-wrap: anywhere; min-width: 0; }
@media (min-width: 760px) { .pt-wrap.pm[data-pm-tarjeta="A"] .ptx-cola__lista, .pt-wrap.pm[data-pm-tarjeta="B"] .ptx-cola__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pt-wrap.pm[data-pm-tarjeta] .ptx-eq.pm-ahora { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .pt-wrap.pm[data-pm-tarjeta="A"] .ptx-cola__lista, .pt-wrap.pm[data-pm-tarjeta="B"] .ptx-cola__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* la capacidad baja de línea cuando no cabe (teléfonos angostos junto al aro grande) */
.pt-wrap.pm[data-pm-tarjeta] .ptx-eq__equipo { flex-wrap: wrap; row-gap: 4px; }
.pt-wrap.pm[data-pm-tarjeta] .ptx-eq__equipo > span:first-of-type { flex: 1 1 120px; }
.pt-wrap.pm[data-pm-tarjeta] .ptx-eq__cap { margin-left: 0; }