/* ------------------ Formularios --------------------------- */
@layer components {
  label {
    display: inline-block;
    margin-bottom: 7px;
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 600;
  }

  /* Base compartida; cada selector conserva su especificidad. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    width: 100%;
    padding: var(--field-base-padding);
    color: var(--color-text);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    outline: none;
    transition:
      border-color var(--transition-fast),
      box-shadow var(--transition-fast),
      background var(--transition-fast);
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select {
    min-height: var(--field-base-min-height);
  }

  textarea {
    min-height: var(--field-textarea-min-height);
    resize: vertical;
  }

  

  

  

  
}



/* Controles de selección compartidos. Conservan su prioridad frente a compact.css. */
input[type="checkbox"],
input[type="radio"] {
  width: var(--field-choice-size);
  height: var(--field-choice-size);
  min-height: auto;
  padding: 0;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-primary);
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Estados compartidos de las vistas del sistema.
   Se conservan fuera de capas y después de los controles de selección.
   La base heredada de inputs mantiene mayor especificidad que :disabled. */
:where(body:has(.page, .clients-page, .page-usuarios, .login-wrap, .reports-page, .promociones-page)) input::placeholder,
:where(body:has(.page, .clients-page, .page-usuarios, .login-wrap, .reports-page, .promociones-page)) textarea::placeholder {
  color: var(--color-muted-light);
}

:where(body:has(.page, .clients-page, .page-usuarios, .login-wrap, .reports-page, .promociones-page)) input:not([type="checkbox"]):not([type="radio"]):hover,
:where(body:has(.page, .clients-page, .page-usuarios, .login-wrap, .reports-page, .promociones-page)) select:hover,
:where(body:has(.page, .clients-page, .page-usuarios, .login-wrap, .reports-page, .promociones-page)) textarea:hover {
  border-color: var(--field-hover-border);
}

:where(body:has(.page, .clients-page, .page-usuarios, .login-wrap, .reports-page, .promociones-page)) input:not([type="checkbox"]):not([type="radio"]):focus,
:where(body:has(.page, .clients-page, .page-usuarios, .login-wrap, .reports-page, .promociones-page)) select:focus,
:where(body:has(.page, .clients-page, .page-usuarios, .login-wrap, .reports-page, .promociones-page)) textarea:focus {
  background: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--field-focus-ring-width) var(--focus-primary);
}

:where(body:has(.page, .clients-page, .page-usuarios, .login-wrap, .reports-page, .promociones-page)) input:disabled,
:where(body:has(.page, .clients-page, .page-usuarios, .login-wrap, .reports-page, .promociones-page)) select:disabled,
:where(body:has(.page, .clients-page, .page-usuarios, .login-wrap, .reports-page, .promociones-page)) textarea:disabled {
  background: var(--field-disabled-bg);
  color: var(--color-muted);
  cursor: not-allowed;
}

/* Base explícita de inputs y adaptación de los campos dinámicos actuales.
   Las ramas mantienen especificidad (0,2,1). No ampliar a todos los inputs de una página.
   Para campos estáticos nuevos: type explícito y data-field-base.
   Los aliases numéricos conservan las plantillas JS sin modificarlas. */
input[type][data-field-base]:not(:where([type="checkbox"], [type="radio"])),
:where(.page.caja) input[type="number"][id="cobroDescuento"],
:where(.page.caja) input[type="number"][id="cobroMonto1"],
:where(.page.caja) input[type="number"][id="cobroMonto2"],
:where(.page.caja) input[type="number"][id="cobroMonto"],
:where(.page.caja) input[type="number"][id="cobroMontoRecibido"],
:where(.page.configuracion) input[type="number"].size-price-input {
  width: 100%;
  min-height: var(--field-base-min-height);

  padding: var(--field-base-padding);

  color: var(--color-text);
  background: var(--color-bg-soft);

  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);

  outline: none;

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}