/* PDA SERVICE MANAGER — Tema visual común (tema_pda.css). Fase 1 = R7.19.46 (tema base), fase 2 =
   R7.19.47 (pantalla principal de PSM: menú lateral de marca, búsqueda arriba, ventanas), fase 3 =
   R7.19.48 (Gestión, Repuestos/Garantías/Fotos e inicio de sesión), fase 4 = R7.19.49 (PDA CONTROL), fase 5 = R7.19.50
   (detalles de PDA CONTROL, botón "?" de ayuda unificado), fase 6 = R7.19.52 (consulta del cliente,
   instalador, recuperación, migración).
   - Solo pinta: fuente, colores, bordes, sombras y radios. No cambia la estructura ni el tamaño de la
     distribución (eso lo siguen manejando styles.css y los estilos de cada pantalla).
   - Los colores de marca siguen siendo los dos que configura cada negocio:
       --brand-primary   botones, números, campo activo, final del degradado de la barra
       --brand-secondary inicio del degradado de la barra
     --brand-ink y --bar-ink (texto sobre el color de marca / sobre la barra) los calcula el servidor al
     cargar y branding_v10_1.js cuando el administrador cambia los colores.
   - Las reglas empiezan por "html body" para ganarle a los estilos en línea anteriores sin depender del
     orden de carga. Los !important solo están donde un estilo anterior también usa !important. */

@font-face{font-family:"PDA Poppins";src:url(assets/fonts/poppins-regular.woff) format("woff");font-weight:400;font-style:normal;font-display:fallback}
@font-face{font-family:"PDA Poppins";src:url(assets/fonts/poppins-medium.woff) format("woff");font-weight:500 600;font-style:normal;font-display:fallback}
@font-face{font-family:"PDA Poppins";src:url(assets/fonts/poppins-bold.woff) format("woff");font-weight:700 900;font-style:normal;font-display:fallback}

:root{
  --tema-font:"PDA Poppins",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --tema-bg:#eef2f7;
  --tema-card:#ffffff;
  --tema-ink:#14243a;
  --tema-muted:#6f8299;
  --tema-line:#e1e7ef;
  --tema-field:#f5f8fb;
  --tema-placeholder:#a3b0c0;
  --tema-radius:18px;
  --tema-radius-field:12px;
  --tema-shadow:0 1px 2px rgba(20,36,58,.05),0 1px 0 var(--tema-line);
  --tema-shadow-pop:0 18px 50px rgba(20,36,58,.22);
  /* Estados: fijos para todos los negocios (el significado del color no cambia de un taller a otro). */
  --st-alerta:#b42318;
  --st-recibido:#3478c8;
  --st-reparacion:#f08a1c;
  --st-listo:#22a06b;
  --st-entregado:#8a9bb0;
  /* Derivados de la marca */
  /* --brand-ink / --bar-ink NO se definen aquí: los pone cada pantalla antes de cargar este archivo
     (si se definieran aquí, esta hoja los pisaría). Se usan con respaldo blanco: var(--brand-ink,#fff). */
  --brand-soft:color-mix(in srgb,var(--brand-primary,#a80016) 12%,#ffffff);
  --brand-ring:color-mix(in srgb,var(--brand-primary,#a80016) 22%,transparent);
  --text:var(--tema-ink);
  --muted:var(--tema-muted);
  --border:var(--tema-line);
}

/* ---------- Base ---------- */
html body{font-family:var(--tema-font);background:var(--tema-bg);color:var(--tema-ink);-webkit-font-smoothing:antialiased}
html body button,html body input,html body select,html body textarea{font-family:var(--tema-font)}
html body h1{color:var(--tema-ink)!important;font-weight:700;letter-spacing:-.01em}

/* ---------- Distribución (R7.19.47): menú lateral de marca a toda la altura ---------- */
html body.tema-psm .layout{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}
html body.tema-psm .sidebar{
  position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:6px;padding:22px 14px!important;
  background:linear-gradient(180deg,var(--brand-secondary),var(--brand-primary))!important;
  color:var(--bar-ink,#fff);border:0!important;
}
html body.tema-psm .tema-side-brand{display:flex;align-items:center;gap:12px;min-width:0;padding:0 8px 18px;color:var(--bar-ink,#fff)}
html body.tema-psm .tema-side-brand .brand-logo{height:46px;max-width:110px;width:auto;object-fit:contain;background:#fff;border-radius:12px;padding:3px}
html body.tema-psm .tema-side-brand strong{font-size:15px;line-height:1.25;font-weight:700;color:var(--bar-ink,#fff);overflow-wrap:anywhere}
html body.tema-psm .tema-side-nav{display:flex;flex-direction:column;gap:4px;flex:1}
html body.tema-psm .tema-side-nav #ayudaBtn{margin-top:auto}
html body.tema-psm .sidebar .nav,html body.tema-psm .sidebar a.nav{
  width:100%;margin:0;padding:12px 14px;border:0;border-radius:12px!important;background:transparent!important;
  color:var(--bar-ink,#fff)!important;-webkit-text-fill-color:currentColor;opacity:.92;
  font-weight:500;font-size:14px;text-align:left;text-decoration:none;cursor:pointer;transition:background .15s
}
html body.tema-psm .sidebar .nav:hover,html body.tema-psm .sidebar a.nav:hover,
html body.tema-psm .sidebar .nav:focus-visible,html body.tema-psm .sidebar a.nav:focus-visible{
  background:color-mix(in srgb,var(--bar-ink,#fff) 14%,transparent)!important;color:var(--bar-ink,#fff)!important;opacity:1;outline:none
}
html body.tema-psm .sidebar .nav.active,html body.tema-psm .sidebar a.nav.active{
  background:color-mix(in srgb,var(--bar-ink,#fff) 22%,transparent)!important;color:var(--bar-ink,#fff)!important;opacity:1;
  font-weight:600;box-shadow:inset 3px 0 0 var(--bar-ink,#fff)
}
html body .tema-pro-badge{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:8px;font-size:10px;font-weight:700;
  background:#fff;color:var(--brand-secondary);vertical-align:1px
}
/* Licencia inactiva (modo consulta): se ve la marca, se ocultan los módulos */
html body.pda-license-restricted .sidebar{display:flex!important}
html body.pda-license-restricted .tema-side-nav{display:none}

/* ---------- Barra de búsqueda y usuario (arriba del contenido) ---------- */
html body .content .topbar{
  position:static;height:auto;display:flex;align-items:center;gap:14px;flex-wrap:nowrap;
  padding:0 0 14px;margin:0;background:transparent!important;box-shadow:none;color:var(--tema-ink)
}
html body .content .topbar .pda-search-zone{flex:1;min-width:0;max-width:560px}
html body .content .topbar .global-search{
  width:100%;max-width:none;background:#fff!important;color:var(--tema-ink);border:1.5px solid transparent!important;
  border-radius:var(--tema-radius-field);padding:12px 16px;box-shadow:var(--tema-shadow)!important
}
html body .content .topbar .global-search:focus{border-color:var(--brand-primary)!important;box-shadow:0 0 0 4px var(--brand-ring)!important;outline:none}
html body .content .topbar .global-search::placeholder{color:var(--tema-placeholder)}
html body .content .topbar .user{margin-left:auto;display:flex;align-items:center;gap:10px;white-space:nowrap;color:var(--tema-ink);font-size:13px}
html body .content .topbar .user strong{font-weight:600}
html body .pda-logout-btn{
  display:inline-block;margin:0;padding:9px 14px;border-radius:12px;background:#fff;color:var(--tema-ink)!important;
  border:1.5px solid var(--tema-line);box-shadow:none;font:500 13px/1.2 var(--tema-font);white-space:nowrap;cursor:pointer
}
html body .pda-logout-btn:hover{border-color:var(--brand-primary);color:var(--brand-primary)!important}

/* ---------- Últimas órdenes (R7.19.56: absorbe el antiguo bloque pda-r691 de index.php) ---------- */
html body .pda-recent-bar{
  display:flex!important;align-items:center;gap:7px;width:100%;height:auto;box-sizing:border-box;
  overflow-x:auto;overflow-y:hidden;white-space:nowrap;-webkit-overflow-scrolling:touch;position:relative;
  background:transparent!important;border:0!important;padding:0 0 14px!important;min-height:0!important;z-index:auto!important
}
html body .pda-recent-label{
  display:inline-block;flex:0 0 auto;line-height:30px;font-size:12px;white-space:nowrap;
  color:var(--tema-muted)!important;font-weight:500!important;text-transform:none!important
}
html body .pda-recent-order{
  appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;position:static;visibility:visible;opacity:1;min-width:64px;height:30px;margin:0;padding:0 9px;
  cursor:pointer;white-space:nowrap;
  border:1.5px solid transparent!important;border-radius:20px!important;background:#fff!important;
  color:var(--tema-ink)!important;font:600 13px/1 var(--tema-font)!important;box-shadow:var(--tema-shadow)!important
}
@media(max-width:600px){
  html body .pda-recent-bar{gap:6px}
  html body .pda-recent-label{font-size:11px}
  html body .pda-recent-order{min-width:60px}
}
html body .pda-recent-order:hover,html body .pda-recent-order:focus-visible{border-color:var(--brand-primary)!important;color:var(--brand-primary)!important}

/* ---------- Título y número de orden ---------- */
html body .order-number{
  background:#fff;border-radius:12px;padding:6px 14px;color:var(--tema-muted);box-shadow:var(--tema-shadow)
}
html body .order-number strong{color:var(--brand-primary)!important;font-weight:700}

/* ---------- Tarjetas y títulos de sección ---------- */
html body .card{
  background:var(--tema-card);border:0;border-radius:var(--tema-radius);box-shadow:var(--tema-shadow);padding:20px 22px
}
html body .section-title{
  color:var(--tema-ink)!important;text-transform:none;font-size:16px;font-weight:700;
  display:flex;align-items:center;gap:10px;margin-bottom:16px
}
html body .section-title::before{
  content:"";flex:none;width:6px;height:20px;border-radius:3px;background:var(--brand-primary)
}

/* ---------- Campos ---------- */
html body label{font-weight:500;color:var(--tema-muted);font-size:12.5px}
html body .accessories label,html body .access-type label,html body .signature-options label{color:var(--tema-ink);font-size:13.5px}
html body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]),
html body select,html body textarea{
  background:var(--tema-field);border:1.5px solid var(--tema-line);border-radius:var(--tema-radius-field);
  color:var(--tema-ink);font-size:14.5px;font-weight:500;padding:11px 14px;
  transition:border-color .15s,box-shadow .15s,background .15s
}
html body input::placeholder,html body textarea::placeholder{color:var(--tema-placeholder);font-weight:400}
html body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]):focus,
html body select:focus,html body textarea:focus{
  outline:none;border-color:var(--brand-primary);background:#fff;box-shadow:0 0 0 4px var(--brand-ring)
}
html body input[type=checkbox],html body input[type=radio]{accent-color:var(--brand-primary)}
html body .accessories{border:1.5px solid var(--tema-line);border-radius:14px}
html body .accessories legend{color:var(--tema-ink);font-weight:600}

/* ---------- Botones ---------- */
html body .primary,html body button.primary{
  background:var(--brand-primary)!important;border:1px solid var(--brand-primary)!important;color:var(--brand-ink,#fff)!important;
  border-radius:12px;font-weight:600
}
html body .secondary,html body button.secondary{
  background:#fff;border:1.5px solid var(--tema-line)!important;color:var(--tema-ink)!important;border-radius:12px;font-weight:500
}
html body .secondary:hover{border-color:var(--brand-primary)!important;color:var(--brand-primary)!important}
html body .whatsapp{border-radius:12px;font-weight:600}
html body .icon-btn{background:var(--brand-primary)!important;color:var(--brand-ink,#fff)!important}
html body .input-action input{border-radius:var(--tema-radius-field) 0 0 var(--tema-radius-field)}
html body .input-action .icon-btn{border-radius:0 var(--tema-radius-field) var(--tema-radius-field) 0}

/* ---------- Opciones de acceso (Sin clave / PIN / Patrón) ---------- */
html body .access-choice{border:1.5px solid var(--tema-line);border-radius:12px;background:var(--tema-field);color:var(--tema-ink);font-weight:600}
html body .access-choice:hover{border-color:var(--brand-primary);color:var(--brand-primary)}
html body .access-choice.active{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--brand-ink,#fff)}

/* ---------- Patrón y firma ---------- */
html body .pattern-grid button{border-color:#c3cdd9;background:#fff}
html body .pattern-grid button.selected{background:var(--brand-primary);border-color:var(--brand-primary);box-shadow:0 0 0 6px var(--brand-ring)}
html body #signatureCanvas{border:1.5px dashed var(--tema-line);border-radius:14px;background:var(--tema-field)}

/* ---------- Ventanas (R7.19.47: Consultar, Reportes, Administración, detalle) ----------
   El recibo y sus plantillas NO se tocan (decisión del usuario): se excluye la vista previa del recibo
   y no se pinta nada con prefijo receipt-/rp-/tpl-. */
html body dialog:not(.receipt-preview-dialog){border-radius:20px;box-shadow:var(--tema-shadow-pop);color:var(--tema-ink)}
html body dialog:not(.receipt-preview-dialog)::backdrop{background:rgba(20,36,58,.45)}
html body .consulta-head h3,html body .reporte-head h3,html body .settings-head h3{color:var(--tema-ink)!important;font-weight:700}
html body .consulta-head small,html body .reporte-head small,html body .consulta-mensaje{color:var(--tema-muted)}
html body .settings-section{border-top:1px solid var(--tema-line)}
html body .settings-section h4{color:var(--tema-ink);font-weight:700}
html body .help{color:var(--tema-muted)}
/* Tablas: encabezado claro en lugar del bloque de color */
html body .consulta-results,html body .reporte-table-wrap,html body .consulta-detail{border:1.5px solid var(--tema-line);border-radius:14px}
html body .consulta-table th,html body .reporte-table th{
  background:var(--tema-field)!important;color:var(--tema-muted)!important;font-weight:600;
  border-bottom:1.5px solid var(--tema-line)!important
}
html body .consulta-table td,html body .reporte-table td{border-bottom:1px solid var(--tema-line)}
html body .consulta-table tr:hover td,html body .consulta-table tr.selected td,html body .reporte-table tr:hover td{background:var(--brand-soft)}
html body .consulta-table tr.selected td{box-shadow:inset 0 0 0 0 transparent;font-weight:600}
/* Detalle de la orden */
html body .det-title{border-bottom:1.5px solid var(--tema-line)!important}
html body .det-title h4,html body .report-detail-title{color:var(--tema-ink)!important;font-weight:700}
html body .report-detail-title{border-bottom:1.5px solid var(--tema-line)!important}
html body .det-item,html body .report-detail-grid>div{border-bottom:1px solid var(--tema-line)}
html body .det-item b,html body .report-detail-grid b{color:var(--tema-muted);font-weight:500;text-transform:none;font-size:12px}
html body .acceso-badge{background:var(--brand-soft);color:var(--brand-primary)}
html body .atender-box{border-top:1.5px solid var(--tema-line)}
html body .atender-box h5{color:var(--tema-ink)!important;font-weight:700}
/* Consultar orden: "Gestionar esta orden" y registro fotográfico */
html body .consulta-mod-btn{
  background:#fff!important;border:1.5px solid var(--tema-line)!important;color:var(--tema-ink)!important;
  border-radius:12px!important;font-weight:600!important;text-decoration:none!important
}
html body .consulta-mod-btn:hover{border-color:var(--brand-primary)!important;color:var(--brand-primary)!important}
html body .consulta-modulos{border:1.5px solid var(--tema-line)!important;border-radius:16px!important;background:#fff!important}
html body .consulta-modulos>span{color:var(--tema-ink)!important}
html body .consulta-photo-box{border:1.5px solid var(--tema-line)!important;border-radius:16px!important;background:var(--tema-field)!important}
html body .consulta-photo-box .photo-picker{border-radius:12px!important}
/* Reportes */
html body .reporte-filters label{color:var(--tema-muted);font-weight:500}
html body .reporte-stat{background:var(--tema-field);border:0;border-radius:14px}
html body .reporte-stat b{color:var(--tema-muted);font-weight:500;text-transform:none;font-size:12px}
html body .reporte-stat strong{color:var(--tema-ink);font-weight:700}
/* Listas (Administración) */
html body .list-admin-group{background:#fff;border:1.5px solid var(--tema-line);border-radius:14px}
html body .list-admin-title{background:var(--tema-field);color:var(--tema-ink);font-weight:600}
html body .list-admin-title span{background:var(--brand-primary);color:var(--brand-ink,#fff)}
html body .list-admin-item{border-bottom:1px solid var(--tema-line)}
html body .list-delete{background:var(--tema-field);color:var(--tema-muted);border-radius:8px}
html body .list-delete:hover{background:#fdecec;color:#c62828}
html body .admin-server-status{border-radius:12px;background:var(--tema-field);color:var(--tema-muted)}
html body .admin-server-status.ok{background:#e6f5ee;color:#17714a}
html body .admin-server-status.warn{background:#fff4dc;color:#7b5700}
html body .admin-server-status.error{background:#fdecec;color:#b42318}

/* ---------- Tablero de órdenes (tablero_ordenes_r7_19_6.js) ---------- */
html body .pda-tb-card{border:1.5px solid transparent;border-radius:16px;box-shadow:var(--tema-shadow);font-family:var(--tema-font)}
html body .pda-tb-card span{text-transform:none;font-weight:500;color:var(--tema-muted);font-size:12.5px}
html body .pda-tb-card[aria-expanded="true"]{background:#fff}
html body .pda-tb-card:focus-visible,html body .pda-tb-open:focus-visible{outline:3px solid var(--brand-ring)}
html body .pda-tb-scroll{border:1.5px solid var(--tema-line);border-radius:14px}
html body .pda-tb-table th{background:var(--tema-field);color:var(--tema-muted);text-transform:none;font-weight:600;font-size:12px}
html body .pda-tb-table td{border-top:1px solid var(--tema-line)}
html body .pda-tb-open{border-radius:10px;font-family:var(--tema-font);font-weight:600}

/* ---------- Pantallas aparte: Gestión y Repuestos/Garantías/Fotos (R7.19.48, body.tema-pagina) ---------- */
html body.tema-pagina>header{
  background:linear-gradient(90deg,var(--brand-secondary),var(--brand-primary));border:0;
  padding:12px 20px;gap:12px;color:var(--bar-ink,#fff);box-shadow:0 2px 12px rgba(20,36,58,.15)
}
html body.tema-pagina>header img{background:#fff;border-radius:12px;padding:3px;width:44px;height:44px}
html body.tema-pagina>header h1{color:var(--bar-ink,#fff)!important;font-size:18px;font-weight:700}
html body.tema-pagina>header .pill{background:color-mix(in srgb,var(--bar-ink,#fff) 18%,transparent);color:var(--bar-ink,#fff);font-weight:600}
html body.tema-pagina>header a.btn.secondary,html body.tema-pagina>header .btn.secondary{
  background:color-mix(in srgb,var(--bar-ink,#fff) 16%,transparent);color:var(--bar-ink,#fff)!important;
  border:1px solid color-mix(in srgb,var(--bar-ink,#fff) 35%,transparent)!important;font-weight:500
}
html body.tema-pagina>header a.btn.secondary:hover{background:color-mix(in srgb,var(--bar-ink,#fff) 26%,transparent)}
html body.tema-pagina a.btn,html body.tema-pagina button{border-radius:12px;font-weight:600;font-family:var(--tema-font)}
html body.tema-pagina .btn:not(.secondary){background:var(--brand-primary);color:var(--brand-ink,#fff)}
html body.tema-pagina .wrap .secondary{background:#fff;border:1.5px solid var(--tema-line)!important;color:var(--tema-ink)!important}
html body.tema-pagina .metric{background:#fff;border-radius:var(--tema-radius);box-shadow:var(--tema-shadow)}
html body.tema-pagina .metric b{color:var(--brand-primary);font-weight:700}
html body.tema-pagina .metric span{color:var(--tema-muted)}
html body.tema-pagina .card h2{color:var(--tema-ink);font-weight:700;display:flex;align-items:center;gap:10px}
html body.tema-pagina .card h2::before{content:"";flex:none;width:6px;height:20px;border-radius:3px;background:var(--brand-primary)}
html body.tema-pagina .muted{color:var(--tema-muted)}
html body.tema-pagina .gestion-nav{border-radius:var(--tema-radius);box-shadow:var(--tema-shadow)}
html body.tema-pagina .gestion-nav-title{color:var(--tema-ink);text-transform:none;letter-spacing:0;font-size:16px;font-weight:700}
html body.tema-pagina .gestion-group{border-color:var(--tema-line)!important;background:#fff!important;border-radius:14px!important}
html body.tema-pagina .gestion-group-title{color:var(--tema-muted)!important;font-weight:600}
html body.tema-pagina .gestion-nav-buttons button{background:var(--tema-field);color:var(--tema-ink);border:1.5px solid transparent;font-weight:500}
html body.tema-pagina .gestion-nav-buttons button:hover{border-color:var(--brand-primary);color:var(--brand-primary)}
html body.tema-pagina .tabs .tab{background:#fff;border:1.5px solid transparent;color:var(--tema-ink);box-shadow:var(--tema-shadow)}
html body.tema-pagina .tabs .tab.active{background:var(--brand-primary);color:var(--brand-ink,#fff);border-color:var(--brand-primary)}
html body.tema-pagina .table th{background:var(--tema-field);color:var(--tema-muted);font-weight:600}
html body.tema-pagina .table th,html body.tema-pagina .table td{border-bottom:1px solid var(--tema-line)}
html body.tema-pagina .photo-card,html body.tema-pagina .gestion-photo-card{border:1.5px solid var(--tema-line);border-radius:14px}
html body.tema-pagina .mini-btn{border-radius:8px;font-weight:600}
html body.tema-pagina .warranty-order-info{border-color:var(--tema-line);background:var(--tema-field);border-radius:14px}
html body.tema-pagina .restore-warning,html body.tema-pagina .readonly{border-radius:14px}
@media(max-width:700px){
  html body.tema-pagina>header{flex-wrap:wrap;padding:10px 14px}
  html body.tema-pagina>header h1{font-size:16px;flex:1 1 60%}
}

/* ---------- Inicio de sesión (R7.19.48, body.tema-login) ---------- */
html body.tema-login{background:linear-gradient(160deg,var(--brand-secondary),var(--brand-primary))}
html body.tema-login .login{border-radius:22px;box-shadow:0 24px 60px rgba(20,36,58,.28);padding:30px 28px}
html body.tema-login .logo h1{color:var(--tema-ink)!important;font-weight:700}
html body.tema-login .logo p,html body.tema-login .small{color:var(--tema-muted)}
html body.tema-login .logo img{border-radius:12px}
html body.tema-login label{color:var(--tema-ink);font-size:13px;font-weight:600}
html body.tema-login button[type=submit]{
  background:var(--brand-primary);color:var(--brand-ink,#fff);border-radius:14px;font-weight:700;font-family:var(--tema-font)
}
html body.tema-login .err,html body.tema-login .licwarn{border-radius:12px}

/* ---------- PDA CONTROL (R7.19.49, fase 4: encabezado, menú y componentes; body.tema-pc) ----------
   PDA CONTROL arrastra muchos bloques de estilo con !important; aquí se usa body.tema-pc + !important
   para que gane sin borrarlos (la limpieza de esos bloques es la fase 5). */
html body.tema-pc{background:var(--tema-bg)!important;font-family:var(--tema-font)!important}
html body.tema-pc .pc-module-header{
  background:linear-gradient(90deg,var(--brand-secondary),var(--brand-primary))!important;color:var(--bar-ink,#fff)!important;
  border:0!important;box-shadow:0 2px 12px rgba(20,36,58,.15)!important;min-height:66px
}
html body.tema-pc .pc-module-brand,html body.tema-pc .pc-module-brand strong{color:var(--bar-ink,#fff)!important;font-weight:700}
html body.tema-pc .pc-module-brand strong{font-size:18px}
html body.tema-pc .pc-module-brand img{background:#fff;border-radius:12px;padding:3px}
html body.tema-pc .pc-module-user>span{background:color-mix(in srgb,var(--bar-ink,#fff) 18%,transparent)!important;color:var(--bar-ink,#fff)!important;font-weight:600}
html body.tema-pc .pc-module-back{
  background:color-mix(in srgb,var(--bar-ink,#fff) 16%,transparent)!important;color:var(--bar-ink,#fff)!important;
  border:1px solid color-mix(in srgb,var(--bar-ink,#fff) 35%,transparent)!important;border-radius:12px!important;font-weight:500!important
}
html body.tema-pc .pc-module-back:hover{background:color-mix(in srgb,var(--bar-ink,#fff) 26%,transparent)!important}
/* Menú de módulos: fichas sobre barra blanca */
html body.tema-pc .appnav{background:#fff!important;border-bottom:1px solid var(--tema-line)!important;padding:8px 18px!important;gap:6px!important;align-items:center!important}
html body.tema-pc .homebtn,html body.tema-pc .drop>button{
  height:auto!important;min-height:40px!important;padding:0 16px!important;border:0!important;border-radius:20px!important;
  background:transparent!important;color:var(--tema-ink)!important;font:500 14px/1 var(--tema-font)!important
}
html body.tema-pc .homebtn:hover,html body.tema-pc .drop:hover>button,html body.tema-pc .drop:focus-within>button{
  background:var(--brand-soft)!important;color:var(--brand-primary)!important
}
html body.tema-pc .homebtn.active{background:var(--brand-primary)!important;color:var(--brand-ink,#fff)!important;font-weight:600!important}
html body.tema-pc .dropmenu{
  border:0!important;border-radius:16px!important;padding:6px!important;
  box-shadow:var(--tema-shadow-pop)!important;background:#fff!important
}
/* R7.19.53: menús desplegables con mouse (PC). En R7.19.49 el tema los ponía a 44 px con un espacio de 4 px
   bajo el botón: al bajar el mouse por ese espacio se perdía el :hover y el menú desaparecía. Además ese
   "top" también alcanzaba los menús que en celular/tablet se abren aparte (pda-touch-portal / pda-open) y
   los desubicaba. Ahora la posición solo se fija en PC con mouse, pegada al botón, con un puente invisible. */
@media (hover:hover) and (pointer:fine) and (min-width:821px){
  html body.tema-pc .appnav>.drop>.dropmenu{top:calc(100% + 4px)!important}
  html body.tema-pc .appnav>.drop>.dropmenu::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
}
html body.tema-pc .dropmenu a{border-radius:10px!important;color:var(--tema-ink)!important;font-weight:500!important}
html body.tema-pc .dropmenu a:hover{background:var(--brand-soft)!important;color:var(--brand-primary)!important}
/* Contenido */
html body.tema-pc .pagehead h1,html body.tema-pc .card h1,html body.tema-pc .sectionhead h2,html body.tema-pc .card h2{color:var(--tema-ink)!important;font-weight:700}
html body.tema-pc .pagehead p{color:var(--tema-muted)}
html body.tema-pc .metrics article,html body.tema-pc .card{
  border:0!important;border-radius:var(--tema-radius)!important;box-shadow:var(--tema-shadow)!important;background:#fff!important
}
html body.tema-pc .metrics span{color:var(--tema-muted);font-weight:600;letter-spacing:.02em;font-size:11.5px}
html body.tema-pc .metrics b{color:var(--tema-ink);font-weight:700}
html body.tema-pc .btn,html body.tema-pc main button:not(.mini):not(.homebtn):not(.pda-ay-q):not(.accountlink){
  background:var(--brand-primary)!important;border-color:var(--brand-primary)!important;color:var(--brand-ink,#fff)!important;
  border-radius:12px!important;font-weight:600!important;font-family:var(--tema-font)
}
html body.tema-pc .mini{background:#fff!important;border:1.5px solid var(--tema-line)!important;color:var(--tema-ink)!important;border-radius:10px!important;font-weight:500!important}
html body.tema-pc a.mini{text-decoration:none!important}
html body.tema-pc .mini:hover{border-color:var(--brand-primary)!important;color:var(--brand-primary)!important}
html body.tema-pc .mini.primary{background:var(--brand-primary)!important;border-color:var(--brand-primary)!important;color:var(--brand-ink,#fff)!important}
html body.tema-pc table th{background:var(--tema-field);color:var(--tema-muted)!important;font-weight:600;border-bottom:1.5px solid var(--tema-line)}
html body.tema-pc table td{border-bottom:1px solid var(--tema-line)}
html body.tema-pc table tbody tr:hover{background:var(--brand-soft)!important}
html body.tema-pc .tablewrap{border-radius:14px}
html body.tema-pc .form label,html body.tema-pc .filters label,html body.tema-pc .rulegrid label{color:var(--tema-muted);font-weight:500}
html body.tema-pc fieldset{border:1.5px solid var(--tema-line);border-radius:14px}
html body.tema-pc .success,html body.tema-pc .error,html body.tema-pc .req{border-radius:12px}
html body.tema-pc .notice{border-left-color:var(--brand-primary)}
html body.tema-pc .editbox{border-top-color:var(--brand-primary)}
/* Cartera → Pendientes: "Cobrar" como ficha pequeña y "Estado de cuenta" como enlace (R7.19.50) */
html body.tema-pc .debt-links{display:flex!important;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:6px}
html body.tema-pc .debt-links .choose-payer{
  background:var(--brand-soft)!important;color:var(--brand-primary)!important;border:0!important;border-radius:20px!important;
  padding:6px 14px!important;font:600 13px/1.2 var(--tema-font)!important;text-decoration:none!important;white-space:nowrap
}
html body.tema-pc .debt-selectable.selected-payer .choose-payer{background:var(--brand-primary)!important;color:var(--brand-ink,#fff)!important}
html body.tema-pc .debt-links a.accountlink{color:var(--tema-muted)!important;font-size:12.5px!important;text-decoration:none!important;margin:0!important}
html body.tema-pc .debt-links a.accountlink:hover{color:var(--brand-primary)!important}
html body.tema-pc .pc-caja-card{border-radius:16px!important}
html body.tema-pc .pc-caja-card[aria-expanded="true"]{background:var(--brand-soft)!important}
html body.tema-pc .pc-caja-panel h3{color:var(--tema-ink)!important}
html body.tema-pc .pc-x-row:hover td{background:var(--brand-soft)!important}
html body.tema-pc .pc-x-row[aria-expanded="true"] td{background:var(--brand-soft)!important}
@media(max-width:820px){
  html body.tema-pc .appnav{padding:6px 10px!important}
  html body.tema-pc .pc-module-brand strong{font-size:15px}
}

/* ---------- Consulta de la orden por el cliente (consulta_orden.php, R7.19.52, body.tema-cliente) ----------
   Solo el formulario de búsqueda. El recibo al que lleva (api/recibo.php) NO se toca. */
html body.tema-cliente{background:linear-gradient(160deg,var(--brand-secondary),var(--brand-primary))}
html body.tema-cliente .box{border-top:0;border-radius:22px;box-shadow:0 24px 60px rgba(20,36,58,.28)}
html body.tema-cliente h1{font-weight:700}
html body.tema-cliente .sub,html body.tema-cliente .help{color:var(--tema-muted)}
html body.tema-cliente label{color:var(--tema-ink);font-size:13px;font-weight:600}
html body.tema-cliente input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]){font-size:18px}
html body.tema-cliente button[type=submit]{background:var(--brand-primary);color:var(--brand-ink,#fff);border-radius:14px;font:700 15px/1.2 var(--tema-font)}
html body.tema-cliente .back-home{border:1.5px solid var(--tema-line);color:var(--tema-ink);border-radius:14px;font-weight:600}
html body.tema-cliente .back-home:hover{border-color:var(--brand-primary);color:var(--brand-primary);background:#fff}
html body.tema-cliente .error{border-radius:12px}

/* ---------- Instalador, recuperación y migración (R7.19.52, body.tema-sistema) ---------- */
html body.tema-sistema .wrap,html body.tema-sistema .box{border:0;border-radius:20px;box-shadow:0 12px 40px rgba(20,36,58,.12);background:#fff}
html body.tema-sistema .head{background:linear-gradient(90deg,var(--brand-secondary),var(--brand-primary));color:var(--bar-ink,#fff)}
html body.tema-sistema .head h1{color:var(--bar-ink,#fff)!important}
html body.tema-sistema h2{color:var(--tema-ink);font-weight:700;border-bottom-color:var(--tema-line)}
html body.tema-sistema h1{font-weight:700}
html body.tema-sistema label{color:var(--tema-ink);font-weight:600;font-size:12.5px}
html body.tema-sistema button{background:var(--brand-primary);color:var(--brand-ink,#fff);border:0;border-radius:12px;font:700 15px/1.2 var(--tema-font);padding:13px}
html body.tema-sistema .msg,html body.tema-sistema .warn,html body.tema-sistema .info,html body.tema-sistema .candidate,html body.tema-sistema .qrbox{border-radius:12px}
html body.tema-sistema .note,html body.tema-sistema .small{color:var(--tema-muted)}
html body.tema-sistema .qrbox h2,html body.tema-sistema .qrurl{color:var(--tema-ink)}
html body.tema-sistema .qrprimary{background:var(--brand-primary);color:var(--brand-ink,#fff);border-radius:12px}
html body.tema-sistema .qrsecondary{color:var(--tema-ink);border:1.5px solid var(--tema-line);border-radius:12px}
html body.tema-sistema a{color:var(--brand-primary)}

/* ---------- Botón "?" de ayuda (ayuda_r7_19_7.js), igual en todas las pantallas (R7.19.50) ---------- */
html body .pda-ay-q{
  width:24px!important;height:24px!important;border-radius:50%!important;margin-left:10px!important;opacity:1!important;
  background:var(--brand-soft)!important;color:var(--brand-primary)!important;font:700 13px/1 var(--tema-font)!important;
  padding:0!important;min-height:0!important;border:0!important;box-shadow:none!important;vertical-align:middle
}
html body .pda-ay-q:hover,html body .pda-ay-q:focus-visible{background:var(--brand-primary)!important;color:var(--brand-ink,#fff)!important;outline:none!important}
html body.tema-pagina>header .pda-ay-q,html body.tema-pc .pc-module-header .pda-ay-q{
  background:color-mix(in srgb,var(--bar-ink,#fff) 20%,transparent)!important;color:var(--bar-ink,#fff)!important
}

/* ---------- Estados (etiquetas) ---------- */
html body .tema-estado{display:inline-block;padding:4px 12px;border-radius:20px;color:#fff;font-size:12px;font-weight:600;white-space:nowrap}
html body .tema-estado-recibido{background:var(--st-recibido)}
html body .tema-estado-reparacion{background:var(--st-reparacion)}
html body .tema-estado-listo{background:var(--st-listo)}
html body .tema-estado-entregado{background:var(--st-entregado)}

/* ---------- Campos en pantallas táctiles (R7.19.59) ----------
   iPhone/iPad hacen zoom automático al tocar un campo con letra menor de 16 px (el tema usaba 14,5 px desde
   R7.19.46; antes los campos heredaban 16 px). En pantallas táctiles los campos vuelven a 16 px. */
@media (pointer:coarse){
  html body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]),
  html body select,html body textarea{font-size:16px}
}

/* ---------- Celular y tablet (≤900 px) ---------- */
@media(max-width:900px){
  html body.tema-psm .layout{display:block!important;min-height:0!important}
  html body.tema-psm .sidebar{
    position:sticky!important;top:0!important;z-index:50!important;height:auto!important;overflow:visible!important;
    display:block!important;padding:0!important;width:100%!important;
    background:linear-gradient(90deg,var(--brand-secondary),var(--brand-primary))!important;border:0!important;
    box-shadow:0 2px 12px rgba(20,36,58,.15)
  }
  html body.tema-psm .tema-side-brand{padding:10px 14px 4px}
  html body.tema-psm .tema-side-brand .brand-logo{height:34px;max-width:90px;border-radius:9px}
  html body.tema-psm .tema-side-brand strong{font-size:14px}
  html body.tema-psm .tema-side-nav{
    flex-direction:row!important;gap:7px!important;overflow-x:auto!important;overflow-y:hidden!important;
    padding:6px 12px 10px!important;-webkit-overflow-scrolling:touch;scrollbar-width:none
  }
  html body.tema-psm .tema-side-nav::-webkit-scrollbar{display:none}
  html body.tema-psm .tema-side-nav #ayudaBtn{margin-top:0}
  html body.tema-psm .sidebar .nav,html body.tema-psm .sidebar a.nav{
    flex:0 0 auto!important;width:auto!important;min-width:max-content!important;white-space:nowrap!important;
    padding:8px 13px!important;border-radius:20px!important;font-size:12.5px!important;
    background:color-mix(in srgb,var(--bar-ink,#fff) 14%,transparent)!important;box-shadow:none
  }
  html body.tema-psm .sidebar .nav.active,html body.tema-psm .sidebar a.nav.active{
    background:var(--bar-ink,#fff)!important;color:var(--brand-primary)!important;box-shadow:none
  }
  html body .content{padding:12px!important}
  html body .content .topbar{display:flex!important;gap:8px!important;padding:0 0 10px!important}
  html body .content .topbar .pda-search-zone{max-width:none}
  html body .content .topbar .global-search{padding:11px 14px}
  html body .content .topbar .user{font-size:12px}
  html body .content .topbar .pda-user-full{display:none!important}
  html body .content .topbar .pda-user-mobile{display:inline!important}
  html body .pda-logout-btn{padding:9px 11px;font-size:12px}
  html body .pda-recent-bar{padding:0 0 10px!important}
  html body .card{padding:16px;border-radius:16px}
  html body .bottom-actions{border-radius:18px 18px 0 0;margin:0 -12px!important}
}
@media(max-width:430px){
  html body .content .topbar{flex-wrap:wrap!important}
  html body .content .topbar .pda-search-zone{flex:1 1 100%;order:2}
  html body .content .topbar .user{order:1;width:100%;justify-content:space-between}
}

/* ---------- Escala tipográfica ÚNICA para toda la app (R7.19.61) ----------
   Mismo tipo de letra (Poppins) y MISMOS tamaños en PSM, PDA CONTROL, Gestión, Repuestos, login y consulta.
   Variables para cambiar la escala en un solo lugar. El recibo y su vista previa NO entran (no están
   dentro de las zonas de contenido de abajo). */
:root{
  --ts-titulo:28px;      /* título de la pantalla */
  --ts-seccion:17px;     /* títulos de tarjetas y secciones */
  --ts-sub:15px;         /* subtítulos dentro de tarjetas */
  --ts-texto:14px;       /* texto normal */
  --ts-tabla:13.5px;     /* celdas de tablas */
  --ts-etiqueta:12.5px;  /* etiquetas de campos, encabezados de tabla */
  --ts-ayuda:13px;       /* textos de ayuda / grises */
  --ts-campo:14.5px;     /* campos (16 px en pantallas táctiles, ver arriba) */
  --ts-boton:14px;
  --ts-marca:16px;       /* nombre del negocio en barras de color */
  --ts-cifra:26px;       /* cifras grandes de tarjetas de resumen */
}
@media(max-width:820px){
  :root{--ts-titulo:22px;--ts-seccion:16px;--ts-marca:15px;--ts-cifra:22px}
}
/* Texto base de las zonas de contenido */
html body.tema-psm main.content,html body.tema-pc main,html body.tema-pagina .wrap,
html body dialog:not(.receipt-preview-dialog){font-size:var(--ts-texto)}
/* Títulos de pantalla */
html body.tema-psm .title-row h1,html body.tema-pc .pagehead h1,html body.tema-pc main .card h1{
  font-size:var(--ts-titulo)!important;line-height:1.2!important;font-weight:700!important;letter-spacing:-.01em
}
/* Títulos de tarjetas / secciones */
html body.tema-psm .section-title,html body.tema-pc main .card h2,html body.tema-pc main .sectionhead h2,
html body.tema-pc main h2.pc-section-title,html body.tema-pagina .card h2,html body.tema-pagina .gestion-nav-title,
html body .consulta-head h3,html body .reporte-head h3,html body .settings-head h3,html body .det-title h4,
html body .report-detail-title{
  font-size:var(--ts-seccion)!important;line-height:1.3!important;font-weight:700!important
}
html body.tema-psm main.content h3,html body.tema-pc main h3,html body.tema-pagina .wrap h3,
html body .settings-section h4,html body .atender-box h5{font-size:var(--ts-sub)!important;font-weight:700!important}
/* Textos de apoyo */
html body.tema-pc .pagehead p,html body.tema-pc main .muted,html body.tema-pagina .muted,html body.tema-psm .help,
html body .consulta-head small,html body .reporte-head small{font-size:var(--ts-ayuda)!important}
/* Etiquetas */
html body.tema-psm main.content label,html body.tema-pc main label,html body.tema-pagina .wrap label,
html body.tema-pagina .form-field label,html body.tema-pagina .form-label,html body dialog:not(.receipt-preview-dialog) label{
  font-size:var(--ts-etiqueta)!important;font-weight:500!important
}
html body .accessories label,html body .access-type label,html body .signature-options label{font-size:13.5px!important}
/* Campos */
html body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]),
html body select,html body textarea{font-size:var(--ts-campo)}
html body.tema-pc main select,html body.tema-pc main input:not([type=checkbox]):not([type=radio]):not([type=file]){font-size:var(--ts-campo)!important}
@media (pointer:coarse){
  html body.tema-pc main select,html body.tema-pc main input:not([type=checkbox]):not([type=radio]):not([type=file]){font-size:16px!important}
}
/* Tablas */
html body.tema-pc main table td,html body.tema-pagina .table td,html body .consulta-table td,
html body .reporte-table td,html body .pda-tb-table td{font-size:var(--ts-tabla)!important}
html body.tema-pc main table th,html body.tema-pagina .table th,html body .consulta-table th,
html body .reporte-table th,html body .pda-tb-table th{font-size:var(--ts-etiqueta)!important}
/* Botones (los botones pequeños .mini / .mini-btn quedan a 13 px) */
html body.tema-psm main.content button,html body.tema-pc main button,html body.tema-pc main .btn,
html body.tema-pagina .wrap button,html body.tema-pagina a.btn,html body.tema-pagina .tabs .tab,
html body dialog:not(.receipt-preview-dialog) button{font-size:var(--ts-boton)!important;font-weight:600!important}
html body.tema-pc .mini,html body.tema-pagina .mini-btn,html body .list-delete{font-size:13px!important}
html body .pda-ay-q{font-size:13px!important}
/* Menús */
html body.tema-pc .homebtn,html body.tema-pc .drop>button{font-size:var(--ts-boton)!important}
html body.tema-pc .dropmenu a,html body.tema-pc body>.dropmenu a{font-size:var(--ts-boton)!important}
@media(max-width:820px){
  html body.tema-psm .sidebar .nav,html body.tema-psm .sidebar a.nav,
  html body.tema-pc .homebtn,html body.tema-pc .drop>button{font-size:13px!important}
}
/* Nombre del negocio en las barras de color */
html body.tema-psm .tema-side-brand strong,html body.tema-pc .pc-module-brand strong,
html body.tema-pagina>header h1{font-size:var(--ts-marca)!important}
/* Cifras de resumen */
html body.tema-pc .metrics b,html body.tema-pagina .metric b{font-size:var(--ts-cifra)!important;line-height:1.15}
html body.tema-pc .metrics span,html body.tema-pagina .metric span{font-size:11.5px!important;font-weight:600}

/* ---------- Impresión: el papel no lleva fondo gris ni sombras ---------- */
@media print{
  html body{background:#fff}
  html body .card{box-shadow:none;border:1px solid #ddd}
}

/* ---------- Movimiento reducido ---------- */
@media(prefers-reduced-motion:reduce){
  html body *{transition:none!important}
}

/* R7.21.7: shared serial/camera layout, validation remains screen-specific. */
.equipment-grid .equipment-serial{grid-column:1 / -1;min-width:0}
.input-action{display:flex;align-items:stretch;min-width:0;width:100%}
.input-action input{flex:1 1 0;min-width:0;width:100%}
.input-action .icon-btn{flex:0 0 auto}

/* Shared help bubble from R7.21.6. */
.imei-help-panel{position:fixed;z-index:10000;box-sizing:border-box;max-height:calc(100dvh - 16px);overflow:auto;padding:16px;border:0;border-radius:12px;background:var(--tema-card);color:var(--tema-ink);box-shadow:var(--tema-shadow);font:400 .95rem/1.5 system-ui,sans-serif;white-space:normal;overflow-wrap:anywhere}.imei-help-panel strong{display:block;font-weight:700}.imei-help-panel p{margin:8px 0}.imei-help-panel small{display:block;color:var(--tema-muted);font-size:.8rem}.imei-help-panel a{color:var(--brand-primary);text-decoration:underline}.imei-help-panel a:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}

@media(min-width:761px){.equipment-grid{grid-template-columns:1fr 1fr 1.2fr}}