/* ---------- 8. Campos, slider y checkbox (panel de detalle, formulario y diálogo) ----------
   Label Body/Small muted + Input de 48 px, radio 12, fondo control; foco con borde de 2 px. */
.field{display:flex;flex-direction:column;gap:0.5rem;margin:0 0 1rem;}
.field label{display:block;margin:0;color:var(--pn-color-muted);font:400 0.8125rem/1.25rem var(--font-sans);}
.field input[type="text"], .field input[type="number"], .field select{width:100%;height:3rem;padding:0 1rem;
  border:1px solid var(--pn-color-border);border-radius:var(--pn-layout-radius12);background:var(--pn-gradient-control);
  color:var(--pn-color-white);font:400 1rem/1.5rem var(--font-sans);}
.field textarea{width:100%;min-height:7.5rem;padding:1rem;resize:vertical;border:1px solid var(--pn-color-border);
  border-radius:var(--pn-layout-radius12);background:var(--pn-gradient-control);color:var(--pn-color-white);font:400 1rem/1.5rem var(--font-sans);}
.field select{-webkit-appearance:none;appearance:none;padding-right:2.75rem;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9c9ed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 1rem center / 1.125rem no-repeat, var(--pn-gradient-control);}
.field select option{background:var(--pn-color-panel);color:var(--pn-color-white);}
.field input::placeholder, .field textarea::placeholder{color:var(--pn-color-muted);opacity:1;}
.field input[type="text"]:focus, .field input[type="number"]:focus, .field select:focus, .field textarea:focus{
  outline:none;border:2px solid var(--pn-color-focus);}
.field .locked{opacity:.45;cursor:not-allowed;} /* input de solo lectura (Nube automática de Internet) */
.modal .field .muted-inline{color:var(--pn-color-subtle);}
.field-narrow{max-width:22.5rem;margin-top:1rem;}
/* Hint bajo un campo del formulario: arranca oculto, el JS (js/) lo muestra cuando hace falta */
.fieldHint{display:none;margin:0;color:var(--pn-color-muted);font:400 0.8125rem/1.25rem var(--font-sans);}
.tamanoInfo{margin:0;color:var(--pn-color-muted);font:400 0.8125rem/1.25rem var(--font-sans);}

/* Fila slider + campo numérico (Empleados, Usuarios de Matriz, Ancho de banda) */
.empRow{display:flex;align-items:center;gap:0.75rem;}
.empRow input[type="range"]{flex:1;}
.empRow input[type="number"]{flex:none;width:6.875rem;text-align:center;}

/* Slider del design system: riel de 4 px en disabled, valor en cian (gradiente controlado por
   --fill, que actualiza updateRangeFill en el JS (js/)), thumb de 22 px con glow. */
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:3rem;margin:0;padding:0;
  border:0;background:transparent;cursor:pointer;--fill:0%;}
input[type="range"]::-webkit-slider-runnable-track{height:0.25rem;border-radius:2px;border:0;
  background:linear-gradient(to right, var(--pn-color-cyan) 0%, var(--pn-color-cyan) var(--fill),
    var(--pn-color-disabled) var(--fill), var(--pn-color-disabled) 100%);}
input[type="range"]::-moz-range-track{height:0.25rem;border-radius:2px;border:0;background:var(--pn-color-disabled);}
input[type="range"]::-moz-range-progress{height:0.25rem;border-radius:2px 0 0 2px;background:var(--pn-color-cyan);}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1.375rem;height:1.375rem;border-radius:50%;
  background:var(--pn-color-cyan);cursor:pointer;box-shadow:var(--pn-glow-focus);
  margin-top:-0.5625rem;} /* centra el thumb de 22 px sobre el riel de 4 px */
input[type="range"]::-moz-range-thumb{width:1.375rem;height:1.375rem;border-radius:50%;border:none;
  background:var(--pn-color-cyan);cursor:pointer;box-shadow:var(--pn-glow-focus);}
input[type="range"]:focus-visible{outline:none;}
input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--pn-color-focus);}

/* Fila checkbox + etiqueta, y su texto de ayuda */
.toggleRow{display:flex;align-items:center;gap:0.75rem;margin:0;color:var(--pn-color-white);font:400 1rem/1.5rem var(--font-sans);cursor:pointer;}
.toggleRow input[type="checkbox"]{flex:none;width:1.25rem;height:1.25rem;accent-color:var(--pn-color-cyan);cursor:pointer;}
.toggleHint{margin:0 0 0 2rem;color:var(--pn-color-muted);font:400 0.8125rem/1.25rem var(--font-sans);}

/* Aviso bajo "Notas del vendedor" (LOPDP, etapa Android offline): siempre visible, con el color
   de advertencia del design system para que no se confunda con una ayuda común. */
.field-aviso{display:flex;gap:0.5rem;align-items:flex-start;margin:0.25rem 0 0;
  color:var(--pn-color-lime);font:400 0.8125rem/1.25rem var(--font-sans);}
.field-aviso::before{content:"!";flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:1.125rem;height:1.125rem;margin-top:0.0625rem;border:1.5px solid currentColor;border-radius:50%;
  font-weight:700;font-size:0.75rem;line-height:1;}