/* ============================================================
   DANGOFE OS LIQUID V2 — portal_tecnico.css
   PORTAL TÉCNICO MÓVIL (DANGOFE-TECNICO-044 · v1.0.44)
   Diseño MÓVIL PRIMERO (mobile-first): tarjetas grandes, botones
   amplios aptos para el teléfono. Estética Liquid Glass (prefijo pt-).
   ============================================================ */

.pt-wrap { display: flex; flex-direction: column; gap: 16px; max-width: 680px; margin: 0 auto; }

/* ---------- encabezado ---------- */
.pt-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.4rem; }
.pt-sub { margin: 4px 0 0; opacity: .75; font-size: .92rem; }
.pt-tecnico {
  display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1rem;
  padding: 8px 12px; border-radius: 12px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
}

/* ---------- resumen (KPIs) ---------- */
.pt-resumen { display: flex; gap: 12px; flex-wrap: wrap; }
.pt-kpi {
  flex: 1 1 140px; display: flex; flex-direction: column; gap: 3px;
  padding: 16px; border-radius: 18px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pt-kpi--main { background: rgba(74,222,128,.16); border-color: rgba(74,222,128,.4); }
.pt-kpi--taller { background: rgba(56,189,248,.14); border-color: rgba(56,189,248,.4); }
.pt-kpi__lbl { font-size: .8rem; opacity: .78; }
.pt-kpi__val { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.pt-kpi__sub { font-size: .78rem; opacity: .7; }

/* ---------- filtros ---------- */
.pt-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.pt-filtros label { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; opacity: .8; flex: 1 1 120px; }
.pt-filtros input {
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--glass-border);
  background: var(--glass-bg-input); color: inherit; font: inherit; font-size: .9rem; width: 100%; box-sizing: border-box;
}

/* ---------- botones ---------- */
.pt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 16px; border-radius: 14px; border: 1px solid var(--glass-border);
  background: var(--glass-bg-input); color: inherit; cursor: pointer;
  font: inherit; font-size: .92rem; transition: all .18s ease;
}
.pt-btn:hover { background: var(--glass-bg-active); }
.pt-btn--primary { background: rgba(99,132,255,.3); border-color: rgba(99,132,255,.55); font-weight: 600; }
.pt-btn--primary:hover { background: rgba(99,132,255,.42); }
.pt-btn--block { width: 100%; margin-top: 10px; padding: 13px; font-size: 1rem; }

/* ---------- órdenes (tarjetas) ---------- */
.pt-ordenes { display: flex; flex-direction: column; gap: 12px; }
.pt-orden {
  display: flex; flex-direction: column; gap: 7px;
  padding: 16px; border-radius: 18px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pt-orden__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pt-num { font-weight: 700; font-size: 1.05rem; }
.pt-orden__equipo, .pt-orden__cli, .pt-orden__fac, .pt-orden__fecha {
  display: flex; align-items: center; gap: 6px; font-size: .86rem; opacity: .82;
}
.pt-orden__fecha { opacity: .6; font-size: .8rem; }

/* ---------- estado ---------- */
.pt-estado {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--glass-border); background: var(--glass-bg-strong);
}
.pt-estado--pend   { background: rgba(148,163,184,.22); border-color: rgba(148,163,184,.5); }
.pt-estado--proc   { background: rgba(99,132,255,.22);  border-color: rgba(99,132,255,.5); }
.pt-estado--porfac { background: rgba(56,189,248,.22);  border-color: rgba(56,189,248,.5); }
.pt-estado--fact   { background: rgba(74,222,128,.22);  border-color: rgba(74,222,128,.5); }
.pt-estado--canc   { background: rgba(255,99,99,.22);   border-color: rgba(255,99,99,.5); }

/* ---------- generado ---------- */
.pt-gen {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 12px; margin-top: 3px;
}
.pt-gen--ok { background: rgba(74,222,128,.14); border: 1px solid rgba(74,222,128,.35); }
.pt-gen--pend { background: var(--glass-bg-soft); border: 1px dashed var(--glass-border); font-size: .84rem; opacity: .8; }
.pt-gen__lbl { font-size: .76rem; opacity: .78; }
.pt-gen__val { font-size: 1.25rem; font-weight: 800; }
.pt-gen__det { font-size: .76rem; opacity: .72; }

/* ---------- gasto rápido ---------- */
.pt-gcard {
  display: flex; flex-direction: column; gap: 10px; margin-top: 10px;
  padding: 14px; border-radius: 14px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
}
.pt-field { display: flex; flex-direction: column; gap: 5px; }
.pt-field span { font-size: .8rem; opacity: .78; }
.pt-field input {
  padding: 11px 12px; border-radius: 12px; border: 1px solid var(--glass-border);
  background: var(--glass-bg-input); color: inherit; font: inherit; font-size: .95rem;
  width: 100%; box-sizing: border-box;
}
.pt-gcard__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pt-gcard__actions .pt-btn { flex: 1 1 auto; }

/* ---------- estados de carga / vacío ---------- */
.pt-cargando, .pt-vacio, .pt-aviso {
  padding: 26px 16px; border-radius: 16px; text-align: center; opacity: .85;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.pt-aviso { background: rgba(255,193,7,.12); border-color: rgba(255,193,7,.35); }
.pt-error { color: #ff8f8f; font-size: .92rem; display: flex; align-items: center; gap: 6px; padding: 14px; }

/* ---------- ajuste fino en pantallas anchas ---------- */
@media (min-width: 640px) {
  .pt-ordenes { display: grid; grid-template-columns: repeat(2, 1fr); }
}



/* ============================================================
   AGENDA DE TRABAJO — móvil primero (v1.0.48)
   Órdenes abiertas con acciones inmediatas (llamar / WhatsApp /
   cómo llegar). Objetivos táctiles grandes (min 44px).
   ============================================================ */
.pt-agenda {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px; border-radius: 18px;
  background: var(--bg-elevated, rgba(255,255,255,.05));
  border: 1px solid var(--border-soft, rgba(255,255,255,.1));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pt-agenda__head {
  display: flex; align-items: center; gap: 8px; font-size: 1.05rem;
}
.pt-agenda__n {
  margin-left: auto; font-size: .78rem; font-weight: 600; padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-input, rgba(255,255,255,.08));
  border: 1px solid var(--border-soft, rgba(255,255,255,.16));
}
.pt-agenda__vacio {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 18px; opacity: .8; font-size: .9rem;
}
.pt-agenda__list { display: flex; flex-direction: column; gap: 12px; }

.pt-ag {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px; border-radius: 16px;
  background: var(--bg-input, rgba(255,255,255,.04));
  border: 1px solid var(--border-soft, rgba(255,255,255,.1));
}
.pt-ag__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pt-ag__cli { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .98rem; }
.pt-ag__equipo, .pt-ag__dir { display: flex; align-items: center; gap: 6px; font-size: .85rem; opacity: .82; }
.pt-ag__prob { font-size: .85rem; opacity: .78; }
.pt-prio {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 700;
}
.pt-prio--alta { background: rgba(255,99,99,.18); border: 1px solid rgba(255,99,99,.5); color: #ff8f8f; }

/* Acciones de contacto rápidas: fila táctil grande, se envuelve en móvil. */
.pt-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pt-act {
  flex: 1 1 30%; min-width: 96px; min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 12px; border-radius: 14px; text-decoration: none; cursor: pointer;
  font-size: .9rem; font-weight: 600;
  color: var(--action-primary-text, inherit);
  background: var(--action-primary-bg, rgba(99,132,255,.28));
  border: 1px solid var(--action-primary-border, rgba(99,132,255,.5));
  transition: filter .18s ease;
}
.pt-act:hover { filter: brightness(1.08); }
.pt-act--wa { background: rgba(37,211,102,.22); border-color: rgba(37,211,102,.55); color: inherit; }
.pt-act span { white-space: nowrap; }



/* ============================================================
   CARTERA DEL TÉCNICO — móvil primero (DANGOFE-taller-072 · v1.0.72)
   Solo datos propios: comisiones, producción y servicios entregados.
   Nunca costos ni márgenes. Estética Liquid Glass (prefijo pt-).
   ============================================================ */

/* ---------- pestañas (órdenes / cartera) ---------- */
.pt-tabs { display: flex; gap: 8px; }
.pt-tab {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 14px; border-radius: 14px; cursor: pointer;
  font: inherit; font-size: .92rem; font-weight: 600; color: inherit;
  background: var(--glass-bg-input); border: 1px solid var(--glass-border);
  transition: all .18s ease;
}
.pt-tab:hover { background: var(--glass-bg-active); }
.pt-tab.is-on {
  background: rgba(99,132,255,.3); border-color: rgba(99,132,255,.55);
}

/* ---------- producción (hoy / semana / mes) ---------- */
.pt-prod-head { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin-top: 2px; }
.pt-prods { display: flex; gap: 12px; flex-wrap: wrap; }
.pt-prod {
  flex: 1 1 140px; display: flex; flex-direction: column; gap: 3px;
  padding: 14px; border-radius: 16px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pt-prod__lbl { font-size: .8rem; opacity: .78; }
.pt-prod__val { font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
.pt-prod__sub { font-size: .76rem; opacity: .7; }

/* ---------- lista de servicios entregados (drill-down) ---------- */
.pt-cart-lista { display: flex; flex-direction: column; gap: 12px; }
.pt-cart {
  display: flex; flex-direction: column;
  padding: 14px 16px; border-radius: 18px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pt-cart__top { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.pt-cart__com { margin-left: auto; font-size: 1.1rem; font-weight: 800; }
.pt-cart__pago {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
  font-size: .76rem; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--glass-border); background: var(--glass-bg-strong);
}
.pt-cart__pago--ok   { background: rgba(74,222,128,.2);  border-color: rgba(74,222,128,.5); }
.pt-cart__pago--pend { background: rgba(148,163,184,.22); border-color: rgba(148,163,184,.5); }
.pt-cart__det {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--glass-border);
}
.pt-cart__row { display: flex; align-items: center; gap: 6px; font-size: .86rem; opacity: .85; }


/* ==========================================================
   SOLICITUDES DE PIEZAS (v1.0.74)
   Pedir piezas NO toca el inventario: el stock sube solo cuando
   la administración confirma lo comprado. Estilo Liquid Glass,
   mobile-first, en línea con el resto del portal.
   ========================================================== */
.pt-sol-top { margin-top: 4px; }
.pt-sol-top .pt-btn { width: 100%; }

/* Chips de filtro por estado */
.pt-sol-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.pt-chip {
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 600; color: inherit;
  background: var(--glass-bg-input); border: 1px solid var(--glass-border);
  transition: all .18s ease;
}
.pt-chip:hover { background: var(--glass-bg-active); }
.pt-chip.is-on { background: rgba(99,132,255,.3); border-color: rgba(99,132,255,.55); }

/* Lista de solicitudes */
.pt-sol-lista { display: flex; flex-direction: column; gap: 12px; }
.pt-sol-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px; border-radius: 18px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pt-sol-card__top { display: flex; align-items: center; gap: 10px; }
.pt-sol-card__fecha,
.pt-sol-card__obs,
.pt-sol-card__proc { display: flex; align-items: center; gap: 6px; font-size: .82rem; opacity: .82; }

/* Insignia de estado (cabecera y línea) */
.pt-sol-badge {
  display: inline-flex; align-items: center; margin-left: auto;
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
  font-size: .74rem; font-weight: 700;
  border: 1px solid var(--glass-border); background: var(--glass-bg-strong);
}
.pt-sol-linea__cant .pt-sol-badge { margin-left: 0; }
.pt-sol-badge--pend { background: rgba(148,163,184,.22); border-color: rgba(148,163,184,.5); }
.pt-sol-badge--proc { background: rgba(99,132,255,.22);  border-color: rgba(99,132,255,.5); }
.pt-sol-badge--parc { background: rgba(251,191,36,.22);  border-color: rgba(251,191,36,.55); }
.pt-sol-badge--ok   { background: rgba(74,222,128,.22);  border-color: rgba(74,222,128,.5); }
.pt-sol-badge--no   { background: rgba(255,99,99,.22);   border-color: rgba(255,99,99,.5); }
.pt-sol-badge--cerr { background: rgba(100,116,139,.28); border-color: rgba(100,116,139,.55); }

/* Líneas de la solicitud */
.pt-sol-lineas { display: flex; flex-direction: column; gap: 8px; }
.pt-sol-linea {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--glass-bg-soft); border: 1px solid var(--glass-border);
}
.pt-sol-linea__nom { font-weight: 600; font-size: .9rem; }
.pt-sol-linea__nom em { opacity: .7; font-style: italic; font-weight: 500; }
.pt-sol-linea__cant { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .8rem; opacity: .9; }
.pt-sol-linea__obs { display: flex; align-items: center; gap: 5px; font-size: .78rem; opacity: .78; }

/* Formulario «Nueva solicitud» */
.pt-sol-form {
  display: flex; flex-direction: column; gap: 12px; margin: 12px 0;
  padding: 16px; border-radius: 18px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.pt-sol-form .pt-field input,
.pt-sol-form .pt-field textarea {
  padding: 11px 12px; border-radius: 12px; border: 1px solid var(--glass-border);
  background: var(--glass-bg-input); color: inherit; font: inherit; font-size: .95rem;
  width: 100%; box-sizing: border-box; resize: vertical;
}
.pt-sol-busca { display: flex; gap: 8px; }
.pt-sol-busca input { flex: 1 1 auto; }
.pt-sol-busca .pt-btn { white-space: nowrap; }

/* Resultados del buscador */
.pt-sol-result { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
.pt-sol-opt {
  text-align: left; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: .86rem; color: inherit;
  background: var(--glass-bg-input); border: 1px solid var(--glass-border);
}
.pt-sol-opt:hover { background: var(--glass-bg-active); }
.pt-sol-opt.is-on { background: rgba(99,132,255,.3); border-color: rgba(99,132,255,.55); }
.pt-sol-opt small { opacity: .7; }
.pt-sol-pick { display: flex; align-items: center; gap: 6px; font-size: .85rem; }

/* Botón/enlace de texto (quitar) */
.pt-linkbtn {
  background: none; border: none; color: inherit; cursor: pointer;
  font: inherit; font-size: .82rem; opacity: .75; text-decoration: underline;
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px;
}
.pt-linkbtn:hover { opacity: 1; }

/* Líneas ya agregadas a la solicitud en construcción */
.pt-sol-added { display: flex; flex-direction: column; gap: 6px; }
.pt-sol-added__row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 12px;
  background: var(--glass-bg-soft); border: 1px solid var(--glass-border); font-size: .86rem;
}
.pt-sol-added__row em { opacity: .7; font-style: italic; }
.pt-sol-nota { display: flex; align-items: flex-start; gap: 6px; font-size: .78rem; opacity: .72; margin: 4px 0 0; }


/* ============================================================
   DANGOFE-taller-079: cola de trabajo del taller, tarjetas de
   equipo, recepción y desglose de comisión.
   Efectos 3D SOLO con transform/opacity (respeta prefers-reduced-motion).
   ============================================================ */

/* Cola de trabajo (equipos de taller activos) */
.pt-cola {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px; border-radius: 18px; margin-bottom: 16px;
  background: var(--bg-elevated, rgba(255,255,255,.05));
  border: 1px solid var(--border-soft, rgba(255,255,255,.1));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pt-cola__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.pt-cola__title { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.pt-cola__n {
  font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: var(--glass-bg-input, rgba(255,255,255,.08));
  border: 1px solid var(--glass-border, rgba(255,255,255,.16));
}
.pt-cola__head .pt-btn { margin-left: auto; }
.pt-cola__vacio {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 18px; opacity: .8; font-size: .9rem;
}
.pt-cola__list { display: flex; flex-direction: column; gap: 12px; }

/* Formulario de recepción (se despliega bajo la cabecera) */
.pt-recepform { display: block; }
.pt-recepform:empty { display: none; }

/* Tarjeta de equipo en taller */
.pt-tal {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px; border-radius: 16px;
  background: var(--glass-bg-input, rgba(255,255,255,.04));
  border: 1px solid var(--glass-border, rgba(255,255,255,.1));
  border-left: 3px solid var(--glass-border, rgba(255,255,255,.16));
  will-change: transform;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.pt-tal:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.pt-tal--pend   { border-left-color: rgba(148,163,184,.7); }
.pt-tal--proc   { border-left-color: rgba(99,132,255,.7); }
.pt-tal--porfac { border-left-color: rgba(56,189,248,.7); }
.pt-tal--fact   { border-left-color: rgba(74,222,128,.7); }
.pt-tal--canc   { border-left-color: rgba(255,99,99,.7); opacity: .82; }
.pt-tal__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pt-tal__equipo { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .98rem; }
.pt-tal__cli { display: flex; align-items: center; gap: 6px; font-size: .88rem; opacity: .85; }
.pt-tal__diag { font-size: .85rem; opacity: .78; }
.pt-tal__meta {
  display: flex; align-items: center; gap: 6px; font-size: .78rem; opacity: .7;
}
.pt-tal__com {
  display: flex; align-items: center; gap: 6px; font-size: .86rem;
  padding: 7px 10px; border-radius: 12px; margin-top: 2px;
}
.pt-tal__com strong { font-weight: 700; }
.pt-tal__com--est { background: rgba(56,189,248,.14); border: 1px solid rgba(56,189,248,.4); }
.pt-tal__com--ok  { background: rgba(74,222,128,.14); border: 1px solid rgba(74,222,128,.4); }
.pt-tal__com--no  { background: rgba(255,99,99,.14);  border: 1px solid rgba(255,99,99,.4); opacity: .9; }
.pt-tal__wait {
  display: flex; align-items: center; gap: 6px; font-size: .82rem; opacity: .7;
  padding: 9px 12px; border-radius: 12px; margin-top: 6px;
  background: var(--glass-bg-soft, rgba(255,255,255,.05));
  border: 1px dashed var(--glass-border, rgba(255,255,255,.16));
}

/* Desglose de comisión de taller (pestaña Cartera) */
.pt-desglose {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: 16px; margin-bottom: 14px;
  background: var(--glass-bg, rgba(255,255,255,.05));
  border: 1px solid var(--glass-border, rgba(255,255,255,.1));
}
.pt-desglose__head { display: flex; align-items: center; gap: 8px; font-size: .98rem; }
.pt-desglose__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-dchip {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 8px 14px; border-radius: 12px; font-size: .95rem; font-weight: 700;
  background: var(--glass-bg-input, rgba(255,255,255,.08));
  border: 1px solid var(--glass-border, rgba(255,255,255,.16));
}
.pt-dchip em { font-size: .72rem; font-weight: 600; font-style: normal; opacity: .7; }
.pt-dchip--est { background: rgba(56,189,248,.14); border-color: rgba(56,189,248,.4); }
.pt-dchip--ok  { background: rgba(74,222,128,.14); border-color: rgba(74,222,128,.4); }
.pt-dchip--pag { background: rgba(99,132,255,.14); border-color: rgba(99,132,255,.4); }
.pt-dchip--no  { background: rgba(255,99,99,.12);  border-color: rgba(255,99,99,.35); opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .pt-tal { transition: none; will-change: auto; }
  .pt-tal:hover { transform: none; box-shadow: none; }
}



/* ============================================================
   DANGOFE-taller-085: rediseño del resumen del Portal Técnico.
   Jerarquía clara — las COMISIONES (hero) y la COLA de taller
   dominan; cifras grandes con contexto; skeleton Liquid Glass.
   Mobile-first. Animaciones SOLO transform/opacity/background
   (respeta prefers-reduced-motion).
   ============================================================ */

/* ---------- hero de comisiones (dos cifras dominantes) ---------- */
.pt-hero { display: flex; gap: 12px; flex-wrap: wrap; }
.pt-hero__card {
  flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px; border-radius: 20px; position: relative; overflow: hidden;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pt-hero__card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.22); }
/* Reflejo Liquid Glass (decorativo, no captura clics). */
.pt-hero__card::after {
  content: ''; position: absolute; top: -45%; right: -18%;
  width: 170px; height: 170px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,0) 70%);
}
.pt-hero__card--est { background: linear-gradient(135deg, rgba(56,189,248,.24), rgba(56,189,248,.07)); border-color: rgba(56,189,248,.45); }
.pt-hero__card--ok  { background: linear-gradient(135deg, rgba(74,222,128,.24), rgba(74,222,128,.07)); border-color: rgba(74,222,128,.45); }
.pt-hero__lbl { display: flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; opacity: .85; }
.pt-hero__val { font-size: 2.1rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.pt-hero__sub { font-size: .78rem; opacity: .72; }

/* ---------- tira de estadísticas secundarias ---------- */
.pt-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.pt-stat {
  flex: 1 1 100px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 10px; border-radius: 16px; text-align: center;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pt-stat--focus { background: rgba(99,132,255,.16); border-color: rgba(99,132,255,.42); }
.pt-stat__ic { opacity: .8; line-height: 1; }
.pt-stat__val { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.pt-stat__val--sm { font-size: 1.05rem; }
.pt-stat__lbl { font-size: .74rem; opacity: .72; }

/* ---------- escaneabilidad de la cola: tiempo en taller ---------- */
.pt-tal__meta--aviso  { color: #fbbf24; opacity: .95; }
.pt-tal__meta--alerta { color: #ff8f8f; opacity: 1; font-weight: 600; }

/* ---------- skeleton Liquid Glass (carga) ---------- */
.pt-skel { display: flex; flex-direction: column; gap: 16px; }
.pt-sk__hero { display: flex; gap: 12px; flex-wrap: wrap; }
.pt-sk__stats { display: flex; gap: 10px; flex-wrap: wrap; }
.pt-sk__cola { display: flex; flex-direction: column; gap: 12px; }
.pt-sk__tecnico { height: 40px; border-radius: 12px; }
.pt-sk__card {
  flex: 1 1 200px; display: flex; flex-direction: column; gap: 10px;
  padding: 18px; border-radius: 18px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pt-sk__card--hero { min-height: 96px; }
.pt-sk__pill {
  flex: 1 1 100px; height: 78px; border-radius: 16px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
}
.pt-sk__line { display: block; height: 12px; border-radius: 8px; }
/* Brillo en movimiento (shimmer) sobre las superficies del skeleton. */
.pt-sk__tecnico, .pt-sk__pill, .pt-sk__line {
  background-image: linear-gradient(100deg,
    rgba(255,255,255,.04) 30%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.04) 70%);
  background-size: 200% 100%;
  animation: pt-sk-shimmer 1.4s ease-in-out infinite;
}
@keyframes pt-sk-shimmer {
  0%   { background-position: 180% 0; }
  100% { background-position: -20% 0; }
}

/* Ajuste fino en pantallas anchas: las tarjetas del skeleton no se estiran. */
@media (min-width: 640px) {
  .pt-sk__card--hero { flex: 1 1 46%; }
}

@media (prefers-reduced-motion: reduce) {
  .pt-hero__card { transition: none; }
  .pt-hero__card:hover { transform: none; box-shadow: none; }
  .pt-sk__tecnico, .pt-sk__pill, .pt-sk__line { animation: none; }
}